presented by: shahab helmi spring 2017cse.ucdenver.edu/~bdlab/tutorial/2017/4.pdf · data var...

Presented by: Shahab Helmi

Spring 2017

Two main components:

data

options

3

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

5

https://developers.google.com/chart/interactive/docs/gallery

6

You can visualize data on google maps (map mode and earth mode)

7

Supports dual-axis charts

8

https://developers.google.com/chart/interactive/docs/gallery/controls

9

Free for personal websites

JavaScript-based

Data type: JSON

Different templates

Interactive

Dynamic charts

Examples

11

Line charts

Area charts

Columns and bars

Pie charts

Scatter plots

12

Combinations

Dynamic charts

Gauges

Heat maps and tree maps

…

13

SVG

HTML

CSS

JSON

Examples:

https://bl.ocks.org/mbostock/4062045

15

Time-series visualization for websites

JavaScript-based

Handles huge datasets

Examples

17

SVG files

JavaScript

Showing data on the map

Free

Slow!

Examples

19

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

21