D3 & SVGJason Madsen

$ whoami@jason_madsen

What is D3?JS library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS.

@mbostock

Exampleshttp://bost.ocks.org/mike/uberdata/

http://hn.metamx.com/http://bl.ocks.org/tjdecke/5558084

http://bl.ocks.org/mbostock/3883245

http://bl.ocks.org/mbostock/3884914

What is it doing?Create and bind data to DOM elements

Add, remove data, update DOM w/transitions

Map domain data to display data (scales)

D3 and Me

Compatibilityhttp://caniuse.com/svg

Compatibilityhttp://caniuse.com/svg

"You'll need a modern browser to use SVG and CSS3 Transitions. D3 is not a compatibility layer, so if your browser doesn't support standards,

you're out of luck. Sorry!"**

https://github.com/shawnbot/aight

Getting Startedhttps://github.com/knomedia/utahjs_blank_d3

Creating SVGsvg  =  d3.select("#chart").append("svg")

.selectAll(selector).select(selector)

$foo.find(".bar")

.append(element)add a child tag

.attr(prop [,value])setter / getter for attribute values

lots `o chainingsvg  =  d3.select("#chart").append("svg")    .attr("width",  w)    .attr("height",  h);svg  =  svg.append("g")    .attr("transform",  "translate(20,20)");

Margin Conventionshttp://bl.ocks.org/mbostock/3019563

.data(array)bind data to the selection

Joinsseparate into sections: existing, enter, exit

http://mbostock.github.io/d3/tutorial/circle.html

http://bost.ocks.org/mike/join/

.exit()selection of no longer needed elements

.enter()selection of new elements

generally gets an `append()`

generally gets a `remove()`

.enter()selection of new elements

generally gets an `append()`

data  =  [50,  50,  50];

?

.enter()selection of new elements

generally gets an `append()`

data  =  [50,  50,  50];

element in enter selection

data  =  [50,  50];

.exit()selection of no longer needed elements

generally gets a `remove()`

data  =  [50,  50];

element in exit selection

.exit()selection of no longer needed elements

generally gets a `remove()`

simple barssvg.selectAll(".bars")    .data(dataset)    .enter().append("svg:rect")        .attr("class",  "bars  bright")        .attr("height",  function(d,i){  return  d})        .attr("width",  50)        .attr("y",  function(d,i){  return  h  -­‐  d})        .attr("x",  function(d,i){  return  i  *  100  })

scalesyScale  =  d3.scale.linear()                    .domain([  0,  d3.max(dataset)  ])                    .range([  0,  h  ]);

domain 890

range 5800

bar height.attr("width",  (w  /  dataset.length)  -­‐  3).attr("height",  function(d,i){  return  yScale(d)})

scales for color

colorScale  =  d3.scale.category20c();

https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors

colorScale  =  d3.scale.linear()                            .domain([0,  d3.max(dataset)])                            .range(["blue",  "green"]);

or

transition.transition()    .delay(  ms  )    .ease("cubic-­‐in-­‐out")    .duration(  ms  )        .attr(“prop”,  “value”);

** could also use CSS3 transitions

https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease

transitions.transition()    .delay(  function(d,i){  return  i  *  250  })    .ease("cubic-­‐in-­‐out")    .duration(  300  )        .attr("height",  function(d,i){  return  yScale(d)})        .attr("y",  function(d,i){  return  h  -­‐  yScale(d)})

axisyAxis  =  d3.svg.axis()                    .scale(yScale)                    .orient("left")                    .ticks(5)                    .tickSize(1);

function  drawAxis  ()  {    svg.append("g")        .attr("class",  "axis")        .call(yAxis);}

axis

Rethink height and y for bars.

Swap yScale range

.attr("height",  function(d,i){  return  h  -­‐  yScale(d)})

.attr("y",  function(d,i){  return    h  -­‐(h  -­‐  yScale(d))})

.range([  h,  0  ]);

Plus lots moreCircles Arcs Lines Paths

Resourceshttp://bost.ocks.org/mike/

http://alignedleft.com/tutorials/d3/

http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/

Thanks@jason_madsen

knomedia