John Williams: Systems Architect, NewCity

Yes, you can deliver rich, interactive, highly designed experiences without Flash. NewCity developer John Williams walks you through some of the more interesting JavaScript-based charting libraries, then focuses on the most flexible of the lot: D3.js. A relatively recent addition, D3.js is the successor to Protoviz. It has broad browser support and can manipulate both HTML and SVG-based DOMs. Far more than just a charting library, D3.js brings the data-driven, highly-designable interactive capability to the native browser. Over the course of this tutorial, Williams will demonstrate actual public uses of D3.js, then walk you through the basic concepts and structures you need to know to get started with the library.

Notes:

• An understanding of what problem D3 solves.
• A grasp of core D3 concepts.
• An eagerness to create great visualizations.

Just noticed that his presentation is taking place in the browser at: http://thudfactor.com/present/d3/

You can’t rely on jQuery to alter the SVG dom.

Supports modern IE > 8

Even if you have to support IE8, think progressive enhancement.

D3 was originally created by the NY Times.

var join = rows.selectAll(“p”).data(houses,function(house){return house.name}); … Sets up key, instead of using index.

D3 examples and documentations: http://d3js.org/

Things to know about svg:

• svg is an HTML element
• g (“group”) is not div
• text applies neither word-wrapping nor formatting.
• Use foreignObject to embed HTML in SVG
• The DOM is different from the HTML DOM – jQuery does not always work.

Great geolocation data:

• http://www.naturalearthdata.com/downloads/
• GeoJSON
• http://en.wikipedia.org/wiki/Topojson

http://tinyurl.com/lht3unt