Lunch JS
An introduction to d3js
Justin McMurdie
Software Engineer
Mechanical Keyboards
Star Wars
Video Games
Star Wars Video Games
Movies
Star Wars Movies/TV
Overview
- What is D3js
- Common uses of D3.js
- Charts
- SVG
- D3.js libraries
- Intro to SVG & D3.js
- Building a chart
What is D3.js
- Data Binding Library
- Arbitrarily Binding Data to the DOM
What isn't D3.js
- Full Framework for managing components
- A library of customizable charts
Common Uses of D3.js
Chart Libraries
built on D3.js
- Prebuilt Charts
- NVd3
- More: https://github.com/zingchart/awesome-charting
Intro to d3js
What can d3js do?
Budget Proposal: http://goo.gl/XrfzHw
French First Names: http://goo.gl/bGCnpn
National Convention: http://goo.gl/u9rlIf
Introduction to SVG & D3js
SVG at a glance
- XML structure
- Draws with Painter's Algorithm
XML structure
Painters Algorithm
"Painter's algorithm" by Zapyon - Own work. Licensed under CC BY-SA 3.0 via Commons
Enter Update Exit
(D3 lifecycles)
Using D3 for HTML
Build a Bar Chart
BL.OCKS
http://bl.ocksplorer.org/
bl.ocks.org
Learning d3js
Fin
Resources
- d3js.org
- http://bost.ocks.org/mike/chart/
- bl.ocks.org
- https://github.com/TheMcMurder/UtahJS2015Confd3js
- http://bl.ocksplorer.org/
Lunch JS An introduction to d3js