Introduction to D3js: Examples

D3js API

D3js slides - Read these

The update pattern:

Resuable D3js components:

Towards resuable charts

Making maps:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

svg {
        margin: 10px 5px;
        border: 1px solid #666;
        font: 10px sans-serif;
      }

</style>
  </head>
  <body>
    <script type="text/javascript">
    (function () {
        var width = 240,
            height = 200,
            margin = { left: 20, top: 20 };

////
        // Example 1: Drawing basic shapes & adjusting point of origin.
        //

// Create viewport.
        var view_1 = d3.select("body").append("svg")
            .attr("id", "view-1")
            .attr("width", width)
            .attr("height", height);

// Shift origin to center. The <g> element can be used to group shapes.
        // Transformations applied to a group also effect child elements of the
        // group.
        var shapes = view_1.append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Draw a rectangle.
        shapes.append("rect")
            .attr("width", 75)
            .attr("height", 50)
            // .attr("transform", "translate(0, 0)")
            .style("fill", "steelblue")
            .style("stroke", "#090963");

// Draw a circle.
        shapes.append("circle")
            .attr("r", 25)
            .attr("transform", "translate(125, 25)")
            .style("fill", "steelblue")
            .style("stroke", "#090963");

// Draw a line.
        shapes.append("line")
            .attr("x1", 0).attr("y1", 0)
            .attr("x2", 25).attr("y2", 150)
            .attr("transform", "translate(175, 0)")
            .style("stroke", "steelblue")
            .style("stroke-width", 2);

////
        // Example 2: Data driving drawing.
        //

// Set some data.
        var size = [25, 50, 75];

// Create viewport.
        var view_2 = d3.select("body").append("svg").attr("id", "view-2")
                .attr("width", width)
                .attr("height", height);

// Shift origin to center.
        data_shapes = view_2.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// Make a selection of circles and draw one for each data item.
        data_shapes.selectAll("circle").data(size).enter()
            .append("circle")
            .style("fill", "none")
            .style("stroke", "Darkgoldenrod")
            // Width of the circle is 1/10 of the data item's value.
            .style("stroke-width", function (d) {
                return d / 10;
            })
            // Radius of the circle is set from the value of the data item.
            .attr("r", function (d) { return d; });

////
        // Example 3: Responding to changing data.
        //

// Set some data.
        var pos = [25, 50, 75];

// Create viewport.
        var view_3 = d3.select("body").append("svg").attr("id", "view-3")
                .attr("width", width)
                .attr("height", height);

// Shift origin by margin.
        data_shapes = view_3.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Call 'draw' when viewport is clicked.
        view_3.on("click", draw);

// Make an initial draw.
        draw();

// Viewport click callback.
        function draw() {
            // Make a selection and bind the data.
            var selection = data_shapes.selectAll("circle")
                    // The second parameter to data() is an option callback to 
                    // provide a unique identifier for each data item. In this
                    // case it is the item's value.
                    .data(pos, function (d) { return d; });

// Create circles for new data.
            selection.enter()
                .append("circle")
                .attr("r", 10)
                // Horizontal position is set by data item's value.
                .attr("transform", function (d) {
                  return "translate(" + d + ",20)";
                });

// Remove circles bound to elements removed from selecion.
            selection.exit().remove();

// Remove first item from data set.
            pos = pos.filter(function (d, i) { return i !== 0; });
            // Add a new item to the end of the data set.
            pos.push((d3.max(pos) + 25) % (width - margin.left));
        }
    }());
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js