D3.js

From Wikipedia, the free encyclopedia
  (Redirected from Protovis)
Jump to: navigation, search
D3.js
Developer(s) Michael Bostock, Jeffrey Heer, Vadim Ogievetsky, and community
Initial release 18 February 2011; 4 years ago (2011-02-18)
Stable release 3.5.5 / 10 February 2015; 3 months ago (2015-02-10)[1]
Development status Active
Written in JavaScript
Type Data visualization, JavaScript library
License BSD
Website d3js.org

D3.js (or just D3 for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5, and CSS standards. It is the successor to the earlier Protovis framework.[2] In contrast to many other libraries, D3.js allows great control over the final visual result.[3] Its development was noted in 2011,[4] as version 2.0.0 was released in August 2011.[5]

Context[edit]

The first web browsers appeared in the early 1990s. They were initially capable of displaying static web pages only: the only way for a user to interact with the web was through clicking links and scrolling pages. There were many efforts to overcome such limitations. One of the most significant was the integration of JavaScript as the scripting language for web browsers. JavaScript gradually became the de facto standard language for creating web pages with rich user interactivity. This played a crucial role in the decision to use JavaScript as the language of D3.js.

At the same time, researchers, engineers, and practitioners from various branches of engineering and science looked for tools that would enable web browsers to visually present data within web pages. There were multiple projects with that goal, each of which had its successes and failures, and inspired the subsequent ones. The most notable examples were the Prefuse, Flare, and Protovis toolkits, which can all be considered as direct predecessors of D3.js.

Prefuse was a visualization toolkit created in 2005 that required usage of Java, and visualizations were rendered within browsers with a Java plug-in. Flare was a similar toolkit from 2007 that used ActionScript, and required a Flash plug-in for rendering.

In 2009, based on the experience of developing and utilizing Prefuse and Flare, Professor Jeff Heer, Ph.D. student Mike Bostock, and M.S. student Vadim Ogievetsky of Stanford University's Stanford Visualization Group created Protovis, a JavaScript library to generate SVG graphics from data. The library received notable acceptance both by data visualization practitioners and academics.[6]

In 2011, the development of Protovis was stopped to focus on a new project, D3.js. Informed by experiences with Protovis, Bostock, along with Heer and Ogievetsky, developed D3.js to provide a more expressive framework that, at the same time, focuses on web standards and provides improved performance (Bostock, Ogievetsky & Heer 2011).

Technical principles[edit]

Embedded within an HTML webpage, the JavaScript D3.js library uses pre-built JavaScript functions to select elements, create SVG objects, style them, or add transitions, dynamic effects or tooltips to them. These objects can also be widely styled using CSS. Large datasets can be easily bound to SVG objects using simple D3.js functions to generate rich text/graphic charts and diagrams. The data can be in various formats, most commonly JSON, comma-separated values (CSV) or geoJSON, but, if required, JavaScript functions can be written to read other data formats.

Selections[edit]

The central principle of D3.js design is to enable the programmer to first use a CSS-style selector to select a given set of Document Object Model (DOM) nodes, then use operators to manipulate them in a similar manner to jQuery (see Bostock, Ogievetsky & Heer 2011, chap. 3). For example, by using D3.js, one may select all HTML <p>...</p> elements, and then change their text color, e.g. to lavender:

 d3.selectAll("p")                 // select all <p> elements
   .style("color", "lavender")     // set style "color" to value "lavender"
   .attr("class", "squares")       // set attribute "class" to value "squares"
   .attr("x", 50);                 // set attribute "x" (horizontal position) to value 50px

The selection can be based on tag (as in the above example), class, identifier, attribute, or place in the hierarchy. Once elements are selected, one can apply operations to them. This includes getting and setting attributes, display texts, and styles (as in the above example). Elements may also be added and removed. This process of modifying, creating and removing HTML elements can be made dependent on data, which is the basic concept of D3.js.

Transitions[edit]

By declaring a transition, values for attributes and styles can be smoothly interpolated over a certain time. The following code will make all HTML <p>...</p> elements on a page gradually change their text color to pink:

 d3.selectAll("p")             // select all <p> elements
   .transition("trans_1")      // transition with name "trans_1"
     .delay(0)                 // transition starting 0ms after trigger
     .duration(500)            // transitioning during 500ms
     .ease("linear")           // transition easing progression is linear...
   .style("color", "pink");    // ... to color:pink

Data-binding[edit]

For more advanced uses, loaded data drives the creation of elements. D3.js loads a given dataset, then, for each element of it, create an SVG object with associated properties (shape, colors, values) and behaviors (transitions, events). [7][8]

// Data
  var data = [
     { name:"Ireland",  income:53000, life: 78, pop:6378, color: "green"},
     { name:"Norway",   income:73000, life: 87, pop:5084, color: "blue" },
     { name:"Tanzania", income:27000, life: 50, pop:3407, color: "grey" }
  ];
// Create SVG container
  var svg = d3.select("#hook").append("svg")
        .attr("width", 120)
        .attr("height", 120)
        .style("fill", "#D0D0D0");
// Create SVG elements from data !
    svg.selectAll("circle")                  // create virtual circle template
      .data(data)                            // bind data
    .enter()                                 // for each row in data...
      .append("circle")                      // bind circle & data row such that... 
        .attr("id", function(d) { return d.name })           // set the circle's id according to the country name
        .attr("cx", function(d) { return d.income /1000  })  // set the circle's horizontal position according to income 
        .attr("cy", function(d) { return d.life })           // set the circle's vertical position according to life expectancy 
        .attr("r",  function(d) { return d.pop /1000 *2 })   // set the circle's radius according to country's population 
        .attr("fill",function(d){ return d.color });         // set the circle's color according to country's color

Generated SVG graphics are designed according to the provided data.

Appending nodes using data[edit]

Once data is bound D3.js will follow a pattern utilizing explicit .enter() command, an implicit update and explicit .exit(). Using method chaining anything following the .enter() command will be called for each data item that isn't represented by a node on the selection while update is called on all existing nodes and .exit() is called on all existing nodes that do not have data to bind to them. There are several examples of how this works [9]

API structure[edit]

D3.js API contains several hundred functions, and they can be grouped into following logical units:[10]

  • Selections
  • Transitions
  • Arrays
  • Math
  • Color
  • Scales
  • SVG
  • Time
  • Layouts
  • Geography
  • Geometry
  • Behaviors

Math[edit]

Arrays[edit]

D3.js array operations are built to complement existing array support in JavaScript (mutator methods: sort, reverse, splice, shift and unshift; accessor methods: concat, join, slice, indexOf and lastIndexOf; iteration methods: filter, every, forEach, map, some, reduce and reduceRight). D3.js extends this functionality with:

  • Functions for finding minimum, maximum, extent, sum, mean, median, and quantile of an array.
  • Functions for ordering, shuffling, permuting, merging, and bisecting arrays.
  • Functions for nesting arrays.
  • Functions for manipulating associative arrays.
  • Support for map and set collections.

Geometry[edit]

  • Computing convex hull of a set of points.
  • Computing Voronoi tesselation of a set of points.
  • Support for point quadtree data structure.
  • Support for basic operations on polygons.

Color[edit]

  • Support for RGB, HSL, HCL, and L*a*b* color representation.
  • Brightening, darkening, and interpolation of colors.

Usage[edit]

Data visualization company Datameer officially uses D3.js as its core technology,[3] while The New York Times sometimes uses it for rich graphs.[11] It is used by the iD editor for editing OpenStreetMap.[12][13] D3.js has been extensively used for GIS map making, managing both GeoJSON and Topojson files as input.

Similar tools and libraries[edit]

References[edit]

  1. ^ "d3 Releases". Retrieved February 10, 2015. 
  2. ^ "For Protovis Users", D3.js, retrieved August 18, 2012 
  3. ^ a b Viau, Christophe (June 26, 2012), "What’s behind our Business Infographics Designer? D3.js of course", Datameer's blog, retrieved August 18, 2012 
  4. ^ Myatt, Glenn J.; Johnson, Wayne P. (September 2011), "5.10 Further reading", Making Sense of Data III: A Practical Guide to Designing Interactive Data Visualizations, Hoboken, New Jersey: John Wiley & Sons, p. A–2, ISBN 978-0-470-53649-0, retrieved January 23, 2013 
  5. ^ "Release Notes", D3.js, retrieved August 22, 2012 
  6. ^ Academic example: Savva, Manolis; Kong, Nicholas; Chhajta, Arti; Li, Feifei; Agrawala, Maneesh; Heer, Jeffrey (2011), "ReVision: Automated Classification, Analysisand Redesign of Chart Images", ACM User Interface Software & Technology (UIST), retrieved January 23, 2013 
  7. ^ http://bost.ocks.org/mike/join/
  8. ^ D3js: 3 little circles editable demo (Jsfiddle editable demo)
  9. ^ http://mbostock.github.io/d3/tutorial/circle.html
  10. ^ https://github.com/mbostock/d3/wiki/API-Reference
  11. ^ Ashkenas, Jeremy; Bloch, Matthew; Carter, Shan; Cox, Amanda (May 17, 2012). "The Facebook Offering: How It Compares". nytimes.com. Retrieved January 23, 2013. 
  12. ^ "New OpenStreetMap Editor iD Increases Participation". Retrieved 26 December 2013. 
  13. ^ "iD". OpenStreetMap wiki. Retrieved 26 December 2013. 

Further reading[edit]

Background on data visualization and information graphics:

Background on D3.js itself:

Using D3.js - beginner level:

Using D3.js - intermediate level:

Others

Videos

External links[edit]