Difference between revisions of "D3"

From Publication Station
 
Line 1: Line 1:
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.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 web elements such as tables or SVGs from data
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 [https://bost.ocks.org/mike/join/ '''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==
==Download==
Line 16: Line 31:
  d3.selectAll("p").style("color", "white");
  d3.selectAll("p").style("color", "white");


== operation: enter/exit ==
 
With enter and exit selections, you can create new nodes for incoming data and remove outgoing nodes that are no longer needed
== 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:
<code>   
.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
    .on("mouseout", function(){d3.select(this).style("fill", "white");})
    .on("mousedown", animateFirstStep);
</code>
== scale ==
 
<source lang="html4strict">
var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, width]);
</source>
 
== 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 <code>3.tsv</code>
<source lang="html4strict">
d3.tsv("data.tsv", function(error, data) {
  // 3. Code here runs last, after the download finishes.
});
</source>
 
* Comma-separated values CSV (CSV) d3.csv
 
<source lang="html4strict">
d3.csv("food.csv", function(data) {
    console.log(data);
});
</source>
 
* JSON  d3.json
 
 
==links ==
* building bar chart with separate data file https://bost.ocks.org/mike/bar/2/

Latest revision as of 15:20, 16 November 2016

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