fit3179 / vega-lite

FIT3179 Vega-Lite teaching materials

Vega-lite examples

The visualiastion will be shown on https://fit3179.github.io/Vega-Lite/

1. Intro to Vega-lite

1.1 A simple bar chart

https://fit3179.github.io/Vega-Lite/1_Intro/section1/

1.2 Dupliacte the european city example

https://fit3179.github.io/Vega-Lite/1_Intro/section2/

1.3 Stacked bar chart (covid-19)

https://fit3179.github.io/Vega-Lite/1_Intro/section3/

2. Proportional Symbol Map (Basemap + Earthquake Data):

https://fit3179.github.io/Vega-Lite/2_symbol_map/

2.1 Proportional Symbol Map + Graticules

https://fit3179.github.io/Vega-Lite/2_symbol_map/mapWithGraticules.html

3. Choropleth Map (COVID-19 by Country)

https://fit3179.github.io/Vega-Lite/3_choropleth_map/

3.1 Choropleth Map + Graticules + Oceans

https://fit3179.github.io/Vega-Lite/3_choropleth_map/choroplethMapWithOcean.html

3.2 Choropleth Map + Country Name (lat and long)

https://fit3179.github.io/Vega-Lite/3_choropleth_map/choroplethMapWithCountryName.html

4. Interactive Scatter Plot (COVID-19)

https://fit3179.github.io/Vega-Lite/4_interactive_scatter_plot/

• Tooltips
• Text Annotation
• Filtering with a slider
• Selection
• Legend fitlering

5. Multiple charts with CSS

https://fit3179.github.io/Vega-Lite/5_multiple_charts_html

6. Advanced examples

https://fit3179.github.io/Vega-Lite/6_advanced_examples

6.1 Choropleth Map + Country Selection

https://fit3179.github.io/Vega-Lite/6_advanced_examples/ChoroplethMapWithSelection.html