block by fogonwater a299c3ea7f4f1fea6ee5eda061113430

Demonstration of how I start d3 projects.

Full Screen

A d3.js starter template.

This is the little bit of scaffolding I typically use when starting a d3.js project. I typically separate the Javascript from the HTML, but it’s included here for convenience. In addition to d3.js v4, this example uses the following additional libraries.

Block here:

Heavily influenced by Adam Pearce’s Tiny Tools talk.

D3 code to create simple scatter:

var q = d3.queue()
    .defer(d3.csv, 'data.csv')
    //.defer(d3.json, 'data.json')

var c = d3.conventions({
      width: 600,
      height: 300,
      margin: {'left':30,'right':10,'top':10,'bottom':20}

function visualize(errors, data) {
  data.forEach(function(d) {
      d.prop1 = +d.prop1;
      d.prop2 = +d.prop2;

  c.x.domain(d3.extent(data, ƒ('prop1'))).nice();
  c.y.domain(d3.extent(data, ƒ('prop2'))).nice();

  c.svg.dataAppend(data, "")
      .attr("r", 6.2)
      .attr("cx", ƒ('prop1', c.x))
      .attr("cy", ƒ('prop2', c.y))
      .style("fill", ƒ('prop3', c.color))