• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The D3 Toolbox
 

The D3 Toolbox

on

  • 1,861 views

 

Statistics

Views

Total Views
1,861
Views on SlideShare
1,583
Embed Views
278

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 278

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

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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