• Save
The D3 Toolbox
Upcoming SlideShare
Loading in...5

The D3 Toolbox






Total Views
Views on SlideShare
Embed Views



2 Embeds 298

http://www.scoop.it 266
http://localhost 32



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NoDerivs LicenseCC Attribution-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    The D3 Toolbox The D3 Toolbox Presentation Transcript

    • The D3 ToolboxMorphing and projecting visual data Mark Rickerby
    • DataSet of items from whichinformation and knowledgeare derived
    • VisualisationCommunicates the internalstructure and relationshipswithin data
    • VisualisationAmplifies knowledgeand cognition
    • D3.js d3js.org
    • Data-Driven DocumentsCreated by Mike BostockStanford Vis Group, New York Times
    • Data-Driven DocumentsMapping data to elements ina document
    • Data-Driven Documents§ HTML§ CSS§ DOM§ JavaScript§ SVG
    • D3 API• Selecting elements• Joining data to selections• Transforming selections• Group selections in layouts
    • SelectionsTarget an array of elementsin the current documentusing CSS3
    • Selections// single elementd3.select(node)d3.select(selector)// array of elementsd3.selectAll(nodes)d3.selectAll(selector)
    • Selectionsviz = d3.select("#viz svg") .attr("width", w) .attr("height", h);viz.selectAll("circle") .attr("x", x) .attr("y", y);
    • API StyleMethod chaining pattern
    • DataJoin values in a dataset toelements in a selection
    • Data// joining dataselection.data(dataset);
    • Data// datasets must be arraysvar dataset1 = [1, 2, 3];var dataset2 = [ { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 4 }];
    • Data Selectionsselection.data() returns theselection of elements joinedto the give data values
    • Data SelectionsWhat happens when thereare no existing elements forthe data values to join?
    • Update Selectionsselection.data() Data Elements
    • Enter & Exit SelectionsCreate new elements forincoming data and removeoutgoing elements when dataselection changes
    • Enter Selectionsselection.data().enter()where there are fewerexisting elements thanincoming data values
    • Enter Selectionsselection.data().enter() Data Elements
    • Exit Selectionsselection.data().exit()where there are moreexisting elements thancurrent data values
    • Exit Selectionsselection.data().exit() Data Elements
    • D3 philosophyEmphasis on transformingdocuments, not visualrepresentations
    • TransitionsSelections where theoperations apply smoothlyover time
    • TransitionsApply attribute changesacross elements in aselection
    • Transitions// animate a style changed3.select("#a").transition() .style("color", value);
    • InterpolatorsSimplify transformingattributes for various datatypes
    • Interpolators§ Numbers§ Strings§ Colors§ Arrays and Objects§ Affine transforms
    • LayoutsOrganise data for specifictypes of visualisation
    • Layouts§ Bundle § Pack§ Chord § Partition§ Cluster § Pie§ Force § Stack§ Hierarchy § Tree§ Histogram § Treemap
    • D3 philosophyRepresentational transparency
    • D3 philosophyNot a charting library
    • Computing Datavar languages = [ {"key":"PHP","projects":4283}, {"key":"Ruby","projects":9162}, {"key":"Python","projects":3102}];var pie = d3.layout.pie() .value(function(d){ return d.projects; });selection.data(pie(languages));
    • API StyleConstructors return functions
    • ScalesMapping from data toattributes (data-space tovisual-space)
    • ScalesDomain —› Range
    • Scales§ Linear § Threshold§ Square Root § Quantile§ Exponential § Identity§ Logarithmic § Ordinal§ Quantize
    • Ordinal ScalesOften used to assign colours
    • Ordinal Scalesvar colors = ["#98abc5", "#8a89a6", "#7b6888"];// create a color functionvar col = d3.scale.ordinal() .range(colors);
    • GeographyDisplay geographic shapesand project location valuesto pixel coordinates
    • Projections§ Mercator§ Albers§ Azimuthal
    • Choropleth Mapd3.geo.path + d3.scale.quantize:
    • Sunburst Chartd3.layout.partition + d3.svg.arc:
    • Streamgraphd3.layout.stack + d3.scale.linear:
    • CompositionD3 visualisations arecomposed from atomicfunctions and chainedoperations
    • RepresentationOperating directly on dataand the DOM is morecomplex, but also moreflexible and powerful thantraditional tools
    • Learn§ Functional programming§ Statistics and algebra§ Information design
    • Programming as playThe best results with D3come from trial and error,experimentation, andconstant visual tweaking
    • Documentationhttps://github.com/mbostock/d3/wikiThe D3 API documentation isamazingly detailed
    • Explorationhttp://bl.ocks.org/Converts GitHub Gists intointeractive demos
    • Explorationhttp://enjalot.com/An experimentalenvironment for prototypingvisualisations
    • Thanks@maetlmark.rickerby@bigcommerce.com