Download - Data visualization with d3 may19
![Page 1: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/1.jpg)
![Page 2: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/2.jpg)
![Page 3: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/3.jpg)
![Page 4: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/4.jpg)
Internet Week supports New York’s vibrant tech-based economy and celebrates the entrepreneurial spirit and
global impact of technology on business, entertainment and culture. The festival highlights the innovators
building the new economy and creating opportunity, while educating and empowering attendees to
succeed.
![Page 5: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/5.jpg)
![Page 6: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/6.jpg)
•
•
•
•
•
•
•
•
•
•
![Page 7: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/7.jpg)
Data visualization is a general term that describes any effort to help people understand the significance
of data by placing it in a visual context.
![Page 8: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/8.jpg)
This is just an infographic
![Page 9: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/9.jpg)
Bind data with graphic elements in a context
![Page 10: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/10.jpg)
![Page 11: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/11.jpg)
• The traditional Bar Charts and Pie Chars are boring.
• There is too much data. The user needs a easy and engaging way to interact with it.
• Open source in github
• It needs to be dynamic and fast.
• It is a tool for the web
![Page 12: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/12.jpg)
![Page 13: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/13.jpg)
D3 vs Jquery
Jquery: Easy to use. Less code. More Stable. Compatible. Uses lots of plug-ins.
D3: Learning curve. Data binding. Physics engine. Works in modern browsers. Uses SVGs a lot. Lots of code.
![Page 14: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/14.jpg)
SVG are scalable vector graphics. They are an HTML element. You cannot embed a HTML element inside another SVG.
It supports interactivity and animation
SVG images can be searched, indexed, scripted, and compressed.
SVG images can be printed with high quality at any resolution.
Modified through script and CSS
SVG images can contain hyperlinks to other documents
Enjoys of pretty good support in desktop and mobile browsers. It does not work in IE9and below.
Its browser dependent. Always define your heights and widths.
![Page 15: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/15.jpg)
SVG vs CANVAS
https://www.sitepoint.com/canvas-vs-svg-how-to-choose/
![Page 16: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/16.jpg)
<svg width="400" height="110">
<rect width="300" height="100“ style="fill:rgb(0,0,255);strokewidth:3;stroke:rgb(0,0,0)">
</svg>
![Page 17: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/17.jpg)
http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html
![Page 18: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/18.jpg)
http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html
![Page 19: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/19.jpg)
D3 Application Document Structure
<!DOCTYPE HTML><html>
<style><body>
[CONTENT]
<script src="d3.js"></script><script src="myscripts.js"></script>
</body></html>
![Page 20: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/20.jpg)
D3 Selectors
var word = $('div p');
var word = d3.select('div').selectAll('p');
![Page 21: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/21.jpg)
transitions()
var svg = d3.select("svg")var mySquare=svg.append("rect").attr("x",60).attr("y",60).attr("width",200).attr("height",200);
mySquare.transition().duration(2000).attrTween("x", d3.interpolate(60,400))
![Page 22: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/22.jpg)
D3 Update Pattern
data()
enter()
exit()
remove()
![Page 23: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/23.jpg)
DATA()
d3.selectAll('p')
.data([0, 1, 2, 3, 4, 5]);
![Page 24: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/24.jpg)
ENTER()
d3.selectAll('p')
.data([0, 1, 2, 3, 4, 5])
.enter();
![Page 25: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/25.jpg)
EXIT() & REMOVE()
var points = d3('body').selectAll('div').data(newData);
points.enter().append('p');
points.exit().remove();
![Page 26: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/26.jpg)
SCALES
var points = d3.scale.linear();
https://github.com/d3/d3/wiki/Quantitative-Scales
![Page 29: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/29.jpg)
http://bl.ocks.org/mbostock/b07f8ae91c5e9e45719c
Samples
![Page 30: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/30.jpg)
Can I use D3 in mobile applications?
![Page 31: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/31.jpg)
Projects with D3
http://pykih.github.io/PykCharts.js/
https://github.com/densitydesign/raw/
https://plot.ly/
![Page 33: Data visualization with d3 may19](https://reader033.vdocuments.site/reader033/viewer/2022042907/58841d361a28ab485c8b4c19/html5/thumbnails/33.jpg)
Links and Tutorials
TEDTalk about DV
https://www.youtube.com/watch?v=5Zg-C8AAIGg
D3.js youtube playlist
https://www.youtube.com/watch?v=n5NcCoa9dDU&list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p
Lynda.com
FreecodeBootcamp.com
Best Practices for DV
https://www.youtube.com/watch?v=pD_OvRtH0aY