D3.js: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 7: | Line 7: | ||
== Introductory D3 + SVG example == | == Introductory D3 + SVG example == | ||
D3 perfectly works with HTML and CSS. However, we get more power from using SVG. | |||
Live example: | |||
* [http://tecfa.unige.ch/guides/D3/simple/d3-intro-1.html d3-intro-1.html] | |||
; Chaining | |||
D3 implements a chaining mechanism using the CSS [http://www.w3.org/TR/selectors-api/ W3C Selectors API]. Read a chain from right to left or bottom to top. The following are equivalent: | |||
<source lang="javascript"> | |||
// take 1 | |||
d3.selectAll("p").style("color", "white"); | |||
// take 2 | |||
d3 | |||
.selectAll("p") | |||
.style("color", "white"); | |||
</source> | |||
; Anonymous functions | |||
The following just returns the value it is given. | |||
<source lang="javascript"> | |||
function(d) { | |||
return d; | |||
} | |||
</source> | |||
The following code would take the value of the currently selected data element (i.e. one of [50, 100, 150, 200, 250] and insert it into the the "text" child of the current DOM element. {{quotation|Computed properties often refer to bound data. Data is specified as an array of values, and each value is passed as the first argument (d) to selection functions. }} ([http://d3js.org/ d3js.org]). | |||
<source lang="javascript"> | |||
.text(function(d) {return d;}); | |||
</source> | |||
The following code defines a function that will be given both the value of the currently selected data element and its position. | |||
<source lang="javascript"> | |||
.attr("cx", function(d, i) {return 25 + (i * 50 + i * d * 0.1 );}) | |||
</source> | |||
Revision as of 19:14, 24 April 2013
<pageby nominor="false" comments="false"/>
Introduction
“D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.” (d3js.org, April 2013)
Introductory D3 + SVG example
D3 perfectly works with HTML and CSS. However, we get more power from using SVG.
Live example:
- Chaining
D3 implements a chaining mechanism using the CSS W3C Selectors API. Read a chain from right to left or bottom to top. The following are equivalent:
// take 1
d3.selectAll("p").style("color", "white");
// take 2
d3
.selectAll("p")
.style("color", "white");
- Anonymous functions
The following just returns the value it is given.
function(d) {
return d;
}
The following code would take the value of the currently selected data element (i.e. one of [50, 100, 150, 200, 250] and insert it into the the "text" child of the current DOM element. “Computed properties often refer to bound data. Data is specified as an array of values, and each value is passed as the first argument (d) to selection functions.” (d3js.org).
.text(function(d) {return d;});
The following code defines a function that will be given both the value of the currently selected data element and its position.
.attr("cx", function(d, i) {return 25 + (i * 50 + i * d * 0.1 );})
Links
Official
- D3.js Wiki at GiHub. This website includes documentation and links to other resources (including source)
- http://d3js.org/ - Short intro page with links to the above and the source code zip file.
Bibliography
- Michael Bostock, Vadim Ogievetsky and Jeffrey Heer (). D3 : Data-Driven Documents, IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis), 2011
- Scott Murray (2013). Interactive Data Visualization for the Web. An Introduction to Designing with D3. O'Reilly Media