Download as PDF, PPTX
![.attr(prop [,value])
setter / getter for attribute values](https://image.slidesharecdn.com/utahjsd3-130708153751-phpapp01/85/Utahjs-D3-13-320.jpg)
![.enter()selection of new elements
generally gets an `append()`
data
=
[50,
50,
50];
?](https://image.slidesharecdn.com/utahjsd3-130708153751-phpapp01/85/Utahjs-D3-19-320.jpg)
![.enter()selection of new elements
generally gets an `append()`
data
=
[50,
50,
50];
element in enter selection](https://image.slidesharecdn.com/utahjsd3-130708153751-phpapp01/85/Utahjs-D3-20-320.jpg)
![data
=
[50,
50];
.exit()
selection of no longer needed elements
generally gets a `remove()`](https://image.slidesharecdn.com/utahjsd3-130708153751-phpapp01/85/Utahjs-D3-21-320.jpg)
![data
=
[50,
50];
element in exit selection
.exit()
selection of no longer needed elements
generally gets a `remove()`](https://image.slidesharecdn.com/utahjsd3-130708153751-phpapp01/85/Utahjs-D3-22-320.jpg)
![scales
yScale
=
d3.scale.linear()
.domain([
0,
d3.max(dataset)
])
.range([
0,
h
]);
domain 890
range 5800](https://image.slidesharecdn.com/utahjsd3-130708153751-phpapp01/85/Utahjs-D3-24-320.jpg)
![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](https://image.slidesharecdn.com/utahjsd3-130708153751-phpapp01/85/Utahjs-D3-26-320.jpg)
![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
]);](https://image.slidesharecdn.com/utahjsd3-130708153751-phpapp01/85/Utahjs-D3-30-320.jpg)
More Related Content
![[JS EXPERIENCE 2018] Jogos em JavaScript com WebGL - Juliana Negreiros, Codem...](https://cdn.slidesharecdn.com/ss_thumbnails/15h20-15h50-juliananegreiros-180706162350-thumbnail.jpg?width=640&height=640&fit=bounds)
Utahjs D3
- 1. D3 & SVGJasonMadsen
- 2.
- 3. What is D3? JSlibrary for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. @mbostock
- 4.
- 5. What is itdoing? Create and bind data to DOM elements Add, remove data, update DOM w/transitions Map domain data to display data (scales)
- 6.
- 7.
- 8. Compatibility http://caniuse.com/svg "You'll need amodern 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
- 9.
- 10. Creating SVG svg = d3.select("#chart").append("svg")
- 11.
- 12.
- 13. .attr(prop [,value]) setter /getter for attribute values
- 14. lots `o chaining svg = d3.select("#chart").append("svg") .attr("width", w) .attr("height", h); svg = svg.append("g") .attr("transform", "translate(20,20)");
- 15.
- 16. .data(array) bind data tothe selection
- 17. Joins separate into sections:existing, enter, exit http://mbostock.github.io/d3/tutorial/circle.html http://bost.ocks.org/mike/join/
- 18. .exit() selection of nolonger needed elements .enter()selection of new elements generally gets an `append()` generally gets a `remove()`
- 19. .enter()selection of newelements generally gets an `append()` data = [50, 50, 50]; ?
- 20. .enter()selection of newelements generally gets an `append()` data = [50, 50, 50]; element in enter selection
- 21. data = [50, 50]; .exit() selection of no longer needed elements generally gets a `remove()`
- 22. data = [50, 50]; element in exit selection .exit() selection of no longer needed elements generally gets a `remove()`
- 23. simple bars svg.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 })
- 24. scales yScale = d3.scale.linear() .domain([ 0, d3.max(dataset) ]) .range([ 0, h ]); domain 890 range 5800
- 25. bar height .attr("width", (w / dataset.length) -‐ 3) .attr("height", function(d,i){ return yScale(d)})
- 26. 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
- 27. 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
- 28. 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)})
- 29. axis yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(5) .tickSize(1); function drawAxis () { svg.append("g") .attr("class", "axis") .call(yAxis); }
- 30. axis Rethink height andy 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 ]);
- 31. Plus lots more CirclesArcs Lines Paths
- 32.
- 33.