presented by: shahab helmi spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var...
TRANSCRIPT
![Page 1: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/1.jpg)
Presented by: Shahab Helmi
Spring 2017
![Page 2: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/2.jpg)
![Page 3: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/3.jpg)
Two main components:
data
options
3
![Page 4: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/4.jpg)
Data table
Dynamic data sources:
SQL queries can be sent to the desired data source
Or the data table can be manipulated using java-script
4
![Page 5: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/5.jpg)
5
![Page 6: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/6.jpg)
https://developers.google.com/chart/interactive/docs/gallery
6
![Page 7: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/7.jpg)
You can visualize data on google maps (map mode and earth mode)
7
![Page 8: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/8.jpg)
Supports dual-axis charts
8
![Page 9: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/9.jpg)
https://developers.google.com/chart/interactive/docs/gallery/controls
9
![Page 10: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/10.jpg)
![Page 11: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/11.jpg)
Free for personal websites
JavaScript-based
Data type: JSON
Different templates
Interactive
Dynamic charts
Examples
11
![Page 12: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/12.jpg)
Line charts
Area charts
Columns and bars
Pie charts
Scatter plots
12
Combinations
Dynamic charts
Gauges
Heat maps and tree maps
…
![Page 15: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/15.jpg)
SVG
HTML
CSS
JSON
Examples:
https://bl.ocks.org/mbostock/4062045
15
![Page 17: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/17.jpg)
Time-series visualization for websites
JavaScript-based
Handles huge datasets
Examples
17
![Page 19: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/19.jpg)
SVG files
JavaScript
Showing data on the map
Free
Slow!
Examples
19
![Page 20: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/20.jpg)
Workflow:
1. Copy and paste your data (csv, copy paste from spreadsheets)
2. Choose chart type
3. Customize
4. Export
Open source
Code is available on github
20
![Page 21: Presented by: Shahab Helmi Spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var Year' [ google . visualization. arrayToDataTab1e( [ Sales 1 aea, 1178, 66B, 1838, Expenses](https://reader030.vdocuments.us/reader030/viewer/2022041117/5f2b75fb11fe635808775218/html5/thumbnails/21.jpg)
21