Upload
knomedia
View
109
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Getting started presentation on using D3
Citation preview
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
"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