Визуализируем данные в javascript с помощью d3.js
DESCRIPTION
Александр Кузнецов «Визуализируем данные в JavaScript с помощью D3.js» Frontend Dev Conf'14 www.fdconf.byTRANSCRIPT
Data Visualization with D3.js
More and more data
Data should be analyzed
Visualization can help
Data-Driven Documents
Web Standards
Open source: under BSD license
Plenty of examples
Need a developer…
… and money
Learning curve
Web Standards
Open Source
Plenty of
examples
Need a Developer
Learning Curve
An example
Sample data0001
0102
0203
0304
0405
0506
0607
0708
0809
0910
1011
1112
1213
1314
1415
1516
1617
1718
1819
1920
2021
2122
2223
2300
Sun
Mon
Tue
Wed
Thu
Fri
Sat
0001
0102
0203
0304
0405
0506
0607
0708
0809
0910
1011
1112
1213
Sun
Mon
2Tue
Wed
Thu
Hour
range
Day of
week
Commits
number
Sample data0001
0102
0203
0304
0405
0506
0607
0708
0809
0910
1011
1112
1213
1314
1415
1516
1617
1718
1819
1920
2021
2122
2223
2300
Sun 1 0 0 0 0 0 0 0 0 0 1 5 9 9 6 9 2 1 2 0 2 11 2 0
Mon 0 2 1 1 0 0 0 0 0 0 3 2 7 15 2 11 13 7 6 1 1 3 4 7
Tue 5 2 1 0 0 0 1 0 4 1 0 9 6 8 5 4 10 6 5 4 1 2 5 3
Wed 1 2 2 0 1 0 0 0 0 1 1 4 12 6 2 7 6 5 4 3 0 3 13 10
Thu 3 0 2 1 2 0 0 1 0 0 2 2 7 10 3 5 5 7 6 2 3 6 4 7
Fri 3 3 3 0 0 1 0 0 1 0 4 5 8 8 3 2 9 4 7 2 2 3 4 2
Sat 1 0 0 0 1 0 0 0 0 0 0 0 5 3 3 0 2 1 0 2 7 3 4 3
Visualization
SVG Source
Data-driven transformationsData
selection
Data-driven transformations
Data
binding
Data
selection
Data-driven transformations
Data
binding
Data
selection
Entering
data
ScalesInput
domain
ScalesInput
domain
Output
range
ScalesInput
domain
Output
rangeScaling
algorithm
Transitions
Animation
