D3 - Data


Input Data is specified as an array of arbitrary values, such as:

  • numbers,
  • strings
  • or objects.

The data format and their related processing is agnostic.1) :

The data operator binds input data to selected nodes. Once bound to nodes, it is available on subsequent re-selection without again requiring the data operator. Bounded Data can be used to reorder (sort) or cull elements (filter).




// Add a svg element
var width = 400, height = 70;
var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

// The data set
var dataset = [1,2,3,4];

// Add the circles to the svg
var circles = svg.selectAll("circle")

// d is the data given by callback
// and i is the data position in the array
circles.attr("cx", function(d, i) {
                return (i * 50) + 25;
            .attr("cy", height/2)
            .attr("r", function(d) {
                return d*2;

Documentation / Reference

J. Heer and M. Bostock. Declarative language design for interactive visualization. IEEE Trans Vis and Comp Graphics, 16(6):1149–1156, 2010

Powered by ComboStrap