D3.js: Difference between revisions
mNo edit summary |
m (Text replacement - "<pageby nominor="false" comments="false"/>" to "<!-- <pageby nominor="false" comments="false"/> -->") |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
<pageby nominor="false" comments="false"/> | <!-- <pageby nominor="false" comments="false"/> --> | ||
{{stub}} | {{stub}} | ||
| Line 5: | Line 5: | ||
{{quotation|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.}} ([http://d3js.org/, d3js.org], April 2013) | {{quotation|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.}} ([http://d3js.org/, d3js.org], April 2013) | ||
If you want a quick introduction with a few slides, you can see a [http://www.macwright.org/presentations/dcjq/ Macwright presentation about D3]. | |||
But as stated in the presentatino, keep in mind that "d3 requires deep proficiency in javascript". | |||
== Introductory D3 + SVG example == | == Introductory D3 + SVG example == | ||
| Line 57: | Line 61: | ||
* http://d3js.org/ - Short intro page with links to the above and the source code zip file. | * http://d3js.org/ - Short intro page with links to the above and the source code zip file. | ||
=== Other === | |||
* http://bost.ocks.org/mike/join/ | |||
* [http://alignedleft.com/tutorials/d3/ D3 Tutorials] by Scott Murray (Original tutorial expanded into the book) | |||
== Bibliography == | == Bibliography == | ||
Latest revision as of 18:18, 22 August 2016
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)
If you want a quick introduction with a few slides, you can see a Macwright presentation about D3.
But as stated in the presentatino, keep in mind that "d3 requires deep proficiency in javascript".
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.
Other
- http://bost.ocks.org/mike/join/
- D3 Tutorials by Scott Murray (Original tutorial expanded into the book)
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