D3

D3.js (https://d3js.org/) is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.

D3 allows you to construct and manipulate HTML elements or SVG elements from data by

• Loading data into the browser’s memory
• Binding (or mapping) data to SVG and HTML elements, creating new elements as needed
• Transforming those elements by setting its visual properties according to its associated data
• Transitioning elements between states in response to user input

Although most of what D3 does can be achieved with jQuery, there are a few good reasons for using D3 when dealing with visual renderings of data:

• D3 makes it easy to convert data list into HMTL or SVG elements
  • rather telling D3 how to do it
  • you tell D3 what to do in a data join

• D3 can create and manipulate SVG elements
  • as HTML is largely limited to rectangular shapes
  • SVG supports powerful drawing primitives like Bézier curves, gradients, clipping and masks.

Download

https://github.com/d3/d3/releases/download/v4.3.0/d3.zip

Link

Remote: <script src="https://d3js.org/d3.v4.min.js"></script>

local: <script src="d3.v4.min.js"></script>

D3 selectors

Smilar to jQuery

d3.selectAll("p").style("color", "white");

adding nodes

...

removing nodes

"Often you have the opposite problem from enter: you have too many existing elements, and you want to remove some of them. Again you can select nodes and remove them manually, but the exit selection computed by a data join is more powerful. "

transitions & delays

for mouse interaction see http://christopheviau.com/d3_tutorial/

Sample: .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})

   .on("mouseout", function(){d3.select(this).style("fill", "white");})
   .on("mousedown", animateFirstStep);

scale

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, width]);

data

Data loading functions d3.tsv d3.cvs d3.json take 2 arguments:

• the path of the CSV file to load
• a callback function, “called” after the data file is loaded into memory

Make sure to reference your data only from within the callback function, so that data is asked for, when available

formats:

• Tab-separated values (TSV) - handled with 3.tsv

d3.tsv("data.tsv", function(error, data) {
  // 3. Code here runs last, after the download finishes.
});

• Comma-separated values CSV (CSV) d3.csv

d3.csv("food.csv", function(data) {
    console.log(data);
});

• JSON d3.json

links

• building bar chart with separate data file https://bost.ocks.org/mike/bar/2/