Demonstration of how I start d3 projects.

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.

• queue - github.com/d3/d3-queue “running asynchronous tasks with configurable concurrency“ (now part of d3 v4).
• jetpack - github.com/gka/d3-jetpack “d3-jetpack is a set of nifty convenience wrappers that speed up your daily work with d3.js“
• starterkit - github.com/1wheel/d3-starterkit “snippets and conventions for starting a new d3 project without a fuss“

Block here: bl.ocks.org/fogonwater/a299c3ea7f4f1fea6ee5eda061113430

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')
    .await(visualize);

var c = d3.conventions({
      parentSel: d3.select('#chart'),
      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;
      //console.log(d);
  });

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

  c.svg.dataAppend(data, "circle.dot")
      .attr("r", 6.2)
      .attr("cx", ƒ('prop1', c.x))
      .attr("cy", ƒ('prop2', c.y))
      .style("fill", ƒ('prop3', c.color))
      .call(d3.attachTooltip);
};