Getting Started with D3.js
Data visualization with javascript

1 Data visualization using D3.js

1.1 Getting started

Using the D3 for mere mortals article as an on-ramp, I have setup this page to include the D3.js library from the CDN, then I have added the following HTML to this page:

<div id="rect-demo"></div>

Then add the following Javascript:

var rectDemo = d3.select("#rect-demo").
  append("svg:svg").
  attr("width", 400).
  attr("height", 300);

rectDemo.append("svg:rect").
  attr("x", 100).
  attr("y", 100).
  attr("height", 100).
  attr("width", 200);

To produce the following output:

Ok, thats all well and fine, but lets at least get something that resembles a graph.. what about a BAR GRAPH?!.. so lets display the following data:

var data = [{year: 2006, books: 54},
            {year: 2007, books: 43},
            {year: 2008, books: 41},
            {year: 2009, books: 44},
            {year: 2010, books: 35}];

Which gives us the following graph:

Author: Stuart

Created: 2016-07-10 Sun 17:32

Validate