Presenting D3.js
DSC 106: Data Visualization
Father and bread-winner
Mike Bostok
PhD at Stanford
Former employee of "NY Times"
and other 117 contributors ...
What is D3?
D3 is collection of js modules , designed to work together
Good:
Very popular -
5-th place on github
Extremely flexible -
It's easy to change something
Very fast -
Can work with 3-5 thousand dom elements
D3 can be used with - Angular, React, Vue
Bad:
Learning curve -
After 1 year, still left many things to learn
Decomposing
Visual |
Parts
|
Helpers
|
 |
|
|
Differences
|
Other libraries |
d3 |
Low - Helper methods |
yep . |
yep . |
Middle - chart parts |
yep . |
nope . |
High -api invoke |
nope - strict . |
nope - broad . |
example
yep - already written
nope - you will write it
strict - structure already defined
broad - you will define structure
Client Requests
Common layouts
Line
|
|
Area
|
|
Pie
|
|
Tree
|
|
Treemap
|
|
Pack
|
|
Force
|
|
Projections
|
|
Modules
D3 has following modules
Selections
.rect
.rect
.rect
.rect
Scales
Axes
SVG
svg = scallable vector graphic
svg attributes with chaining
Thanks
Now we will do some tryclassbuzz questions here as a mid-quarter check-in and attendance