D3 - Data

Card Puncher Data Processing


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

Discover More
D3 Csv Console Log
D3 - Csv Function (CSV from an URL )

This section talks the function d3.csv that parse a CSV file. To parse a CSV string, see . Reference: Csv The csv file or string must...
Data Node Join
D3 - Data (Operator|Join) (Data binding to elements)

The data operator (binds|joins) input data to selected nodes. The data join is a general pattern that can be used to create, update or destroy elements whenever data changes. The data-join takes as input...

Share this page:
Follow us:
Task Runner