Skip to main content
SimilarExport ZIP
100%

Multi-Value Maps

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Aug 9, 2012

This example demonstrates D3’s multi-value map syntax, which lets developers set multiple attributes or styles in a single call using an object literal. The visualization shows a scattered arrangement of ten semi-transparent circles placed at random positions and sizes on an SVG canvas, alongside a centered text label. The code uses `selection.attr` and `selection.style` with map arguments, and defines attribute values as constants or functions of data. It relies on d3.v3 and renders entirely through SVG elements.

AI-generated description

D3 2.10.0 adds support for multi-value maps. Where previously you might have written:

svg.attr("width", width).attr("height", height);

You can now write:

svg.attr({width: width, height: height});

The new syntax (familiar to jQuery users) is slightly more concise. Like other methods in D3, the values in the maps can be specified as constants or functions of data. Multi-value maps also provide a convenient, declarative way to share code. For example, if you have the following map:

var dotAttrs = {
  cx: function() { return Math.random() * width; },
  cy: function() { return Math.random() * height; },
  r: function() { return 100 + Math.random() * 100; }
};

You can later reference this map like so:

circle.attr(dotAttrs);

This technique is similar to creating reusable functions with selection.call.

Multi-value maps are supported on the following methods: selection.attr, selection.style, selection.classed, selection.property, selection.on, transition.attr and transition.style.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

This is so cool "Map function inside Map function"

This example shows a dense scatter of colored circles rendered as an SVG inside a React application, where the circles overlap and vary in position and hue based on computed values. The visualization uses React’s `map` function nested twice to iterate over an array of numbers from 0 to 100, generating thousands of circle elements with random coordinates and RGB fill colors. Rendering relies on ReactDOM and raw SVG elements, with no external charting library, demonstrating how pure React can handle data-driven SVG generation.

NNita
71% match
Loading thumbnail…

map-level

This example uses the D3 v5 library to render an interactive map-based visualization. The page layout is built with Bootstrap 4, containing a navigation bar, a form panel, and a map area. The D3 code selects an SVG element and dynamically sets its dimensions to match the browser viewport, though the detailed map rendering and data interaction logic are not visible in the provided files. The approach relies on D3’s selection and attribute methods to prepare the canvas for geographic data display.

AAnimesh Nautiyal
71% match
Loading thumbnail…

Circles with D3

This example shows a set of seven colorful circles scattered across an SVG canvas, each with a distinct size, position, and fill color at 70% opacity. It demonstrates core D3.js v7 concepts including data binding, the General Update Pattern, and method chaining via `select`, `selectAll`, `data`, and `join` to render `circle` elements. The visualization uses static, data-driven coordinates and colors defined in a JavaScript array, rendered through an HTML import map loading D3 from a CDN. The code also showcases the `join` API for creating SVG circles within a container sized to the viewport.

CCurran Kelleher
70% match
Loading thumbnail…

This is so cool "Map function inside Map function"

This example generates a dense scatter of overlapping circles across an SVG canvas, with each circle’s position, fill color, and stroke determined by nested `Array.map` calls over a fixed array of numbers from 0 to 100. It uses React and ReactDOM to render the circles, computing `cx` and `cy` coordinates via `Math.random` multiplied by the array values, producing a chaotic, colorful grid-like pattern. The fill and stroke colors are derived from the same array indices using template literals, and all circles share a constant radius of 5 pixels.

NNita
70% match
Loading thumbnail…

This is so cool "Map function inside Map function"

This example visualizes a grid of randomly positioned circles, where each circle’s placement and color are derived from nested `map` functions iterating over an array of integers from 0 to 100. Using React and ReactDOM, the SVG canvas (960x500) renders over 10,000 circles with varying radii, fill colors (based on RGB values from the loop index), and opacity. The code relies on React’s JSX syntax inside `index.js`, with SVG elements generated dynamically via nested `A.map()` calls, producing an emergent, colorful scatter pattern. The rendering is static, using no external libraries beyond React and React’s DOM bindings.

NNita
70% match
Loading thumbnail…

This is so cool "Map function inside Map function"

A React application renders an SVG scatterplot of 101 circles, where each circle's position and color derive from nested map functions iterating over an array of integers from 0 to 100. The outer and inner `Array.map` calls generate coordinates using `Math.random()` multiplied by the array value, producing a randomized distribution. Circle radius is fixed at 5, with fill and stroke colors computed from the index, using React's JSX syntax to create SVG elements. The code relies on React 16.10 and ReactDOM to mount the visualization into the DOM.

Ggrateful4music@hotmail.com
70% match
Loading thumbnail…

This is so cool "Map function inside Map function"

This example generates a field of 100 randomly scattered circles, each with a size and color derived from its position in a nested loop. The visualization uses React to render an SVG element, with the `map` function applied twice to iterate over an array of numbers, producing overlapping circles that appear scattered across the canvas. The code employs `Math.random` to introduce variability in each circle's x and y coordinates, while the `fill` attribute computes an RGB color value based on the current loop index. The example showcases nested array mapping within a React component to create generative art.

NNita
69% match
Loading thumbnail…

Lets make a map with D3.js

This example demonstrates how to create a map using D3.js, rendering an SVG with a fixed width and height. The visualization uses D3 v5 to select the SVG element and prepare mapping functionality, though the specific geographic data and projection are not defined in the visible code. The page loads D3 from a CDN and includes a separate JavaScript bundle, with CSS hiding page overflow for a clean, full-viewport display. The implementation highlights the minimal setup required to begin building map-based data visualizations.

NNita
69% match