Визуализируем данные в JavaScript с помощью D3.js
-
Upload
fdconf -
Category
Technology
-
view
321 -
download
0
description
Transcript of Визуализируем данные в JavaScript с помощью D3.js
![Page 1: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/1.jpg)
Data Visualization with D3.js
![Page 2: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/2.jpg)
More and more data
![Page 3: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/3.jpg)
Data should be analyzed
![Page 4: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/4.jpg)
Visualization can help
![Page 5: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/5.jpg)
Data-Driven Documents
![Page 6: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/6.jpg)
![Page 7: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/7.jpg)
Web Standards
![Page 8: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/8.jpg)
Open source: under BSD license
![Page 9: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/9.jpg)
Plenty of examples
![Page 10: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/10.jpg)
Need a developer…
![Page 11: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/11.jpg)
… and money
![Page 12: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/12.jpg)
Learning curve
![Page 13: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/13.jpg)
Web Standards
Open Source
Plenty of
examples
Need a Developer
Learning Curve
![Page 14: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/14.jpg)
An example
![Page 15: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/15.jpg)
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
![Page 16: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/16.jpg)
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
![Page 17: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/17.jpg)
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
![Page 18: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/18.jpg)
Visualization
![Page 19: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/19.jpg)
SVG Source
![Page 20: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/20.jpg)
Data-driven transformationsData
selection
![Page 21: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/21.jpg)
Data-driven transformations
Data
binding
Data
selection
![Page 22: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/22.jpg)
Data-driven transformations
Data
binding
Data
selection
Entering
data
![Page 23: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/23.jpg)
ScalesInput
domain
![Page 24: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/24.jpg)
ScalesInput
domain
Output
range
![Page 25: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/25.jpg)
ScalesInput
domain
Output
rangeScaling
algorithm
![Page 26: Визуализируем данные в JavaScript с помощью D3.js](https://reader035.fdocuments.in/reader035/viewer/2022081716/5478ec885906b5a8048b4638/html5/thumbnails/26.jpg)
Transitions
Animation