DavidChouinard

license: gpl-3.0

DavidChouinard

Click to perturb or drag the nodes!

This example demonstrates the flexibility of D3's force layout. By using position Verlet integration, it is easy to add custom forces to a layout. In this example, the nodes are clustered around four foci using additional forces: the odd nodes are pushed down, the even nodes are pushed up, and a similar bisecting force is applied laterally. These custom forces are based purely on the index of the node, but they could just as easily be derived from properties of data!

Based on this, edited for clarity

DavidChouinard

This donut chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:

• d3.csv - load and parse data
• d3.scale.ordinal - color encoding
• d3.svg.arc - display arcs
• d3.layout.pie - compute arc angles from data

DavidChouinard

// You'll generally need a local server for requests to work. Run:
//     python -m SimpleHTTPServer

var width = 700,
    height = 500;

var svg = d3.select("svg")
  .attr("width", width)
  .attr("height", height);

DavidChouinard

[
  {"magnitude":5.1,"coordinates":[-71.120167,42.370580]},
  {"magnitude":2.73,"coordinates":[-119.6165,41.9069]},
  {"magnitude":3.35,"coordinates":[-124.9986649,40.409668]},
  {"magnitude":4.1,"coordinates":[-97.0925,36.0305]},
  {"magnitude":3.4,"coordinates":[-152.9566,59.0462]}
]

DavidChouinard

// You'll generally need a local server for requests to work. Run:
//     python -m SimpleHTTPServer

var width = 700,
    height = 500;

var svg = d3.select("svg")
  .attr("width", width)
  .attr("height", height);

DavidChouinard

// You'll generally need a local server for requests to work. Run:
//     python -m SimpleHTTPServer

var width = 700,
    height = 500;

var svg = d3.select("svg")
  .attr("width", width)
  .attr("height", height);

DavidChouinard

// You'll generally need a local server for requests to work. Run:
//     python -m SimpleHTTPServer

var width = 700,
    height = 500;

var svg = d3.select("svg")
  .attr("width", width)
  .attr("height", height);

DavidChouinard

Keybase proof

I hereby claim:

• I am DavidChouinard on github.
• I am davidchouinard (https://keybase.io/davidchouinard) on keybase.
• I have a public key whose fingerprint is F38B 4647 11C1 89A7 184A 2D21 9E67 28F1 2084 DF2A

To claim this, I am signing this object: