Module 4 - Session 2 - Data Visualisation

class: center, middle, inverse, title-slide

# Module 4 - Session 2 - Data Visualisation
## Working effectively with data
### CivicDataLab
### 2021/10/21 (updated: 2021-10-21)

---

<div>
<style type="text/css">.xaringan-extra-logo {
width: 110px;
height: 128px;
z-index: 0;
background-image: url(https://drive.google.com/uc?id=1WbdosVvi6SBjYtEF6kHj-f0wotdHMRgw);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top:1em;right:1em;
}
</style>
<script>(function () {
  let tries = 0
  function addLogo () {
    if (typeof slideshow === 'undefined') {
      tries += 1
      if (tries < 10) {
        setTimeout(addLogo, 100)
      }
    } else {
      document.querySelectorAll('.remark-slide-content')
        .forEach(function (slide) {
          const logo = document.createElement('a')
          logo.classList = 'xaringan-extra-logo'
          logo.href = 'https://civicdatalab.in'
          slide.appendChild(logo)
        })
    }
  }
  document.addEventListener('DOMContentLoaded', addLogo)
})()</script>
</div>

# RECAP

Topics covered in the last session:

1. The data viz quadrant
2. What restricts us from visualising data
3. Data viz storytelling components **Story | Audience | Medium**
4. Activity - Building a narrative
5. Activity - Reading a data viz
6. Building accessible data visualisations - Check the [Chartability project](https://chartability.fizz.studio/)
7. How to select the most appropriate graph for your data
8. Things to avoid when developing visualisations
9. Information sharing framework when working with external consultants on data viz projects

-----

.center[
[**Slides**](https://civicdatalab.in/Working-with-Data-Workshops/modules/module_4_data_viz/session-1/session-1.html) | [**Video**](https://youtu.be/qieuVFrFxRo)
]

-----

---

# The data viz storytelling process

.center[
![](../session-2/assets/storytelling-process.png)

_The  storytelling  process  from  the  story  idea  to  visually  shared  
stories._<sup>1</sup>

]
.footnote[
[1][Data Driven Storytelling](https://medium.com/nightingale/data-driven-%3Cmark%3Estorytelling%3C/mark%3E-a-short-review-93926262a74a)
]

---
class: center, middle

# Data Viz - The Tooling Landscape

---
class: center, middle

![](assets/tool_landscape.jpg)
---
class: center, middle

# Static viz

---

# Charticulator

.center[**Objective** : Plot month wise cases for all districts of Karnataka from the year 2018]

.pull-left[

[![](assets/charticulator-logo.png)](https://charticulator.com/)

.center[

Charticulator is a project from Microsoft Research.

]

.pull-right[
![](assets/KA_district_cases_2018.png)
]

------

.center[

**[Tool](https://charticulator.com/) | [Dataset](https://raw.githubusercontent.com/CivicDataLab/Working-with-Data-Workshops/master/modules/module_4_data_viz/session-2/datasets/KA_2018_monthly_cases_districts.csv)**

]

------

---

# DataWrapper

.center[**Objective** : Plot district wise total conviction cases for all districts of Karnataka from the year 2018]

.pull-left[

[![](assets/datawrapper-logo.png)](https://app.datawrapper.de/)

.center[

Datawrapper helps some of the world’s best teams to tell their stories with data.
]

]

.pull-right[
[![](assets/KA_convictions_2018.png)](https://www.datawrapper.de/_/yGrFO/)
]

------

.center[
**[Tool](https://app.datawrapper.de) | [Dataset](https://raw.githubusercontent.com/CivicDataLab/Working-with-Data-Workshops/master/modules/module_4_data_viz/session-2/datasets/KA_2018_district_wise_convictions.csv)**
]

------

---
class: center, middle

# Dynamic (or Interactive) viz

---

# Flourish

.center[
**Objective** : Plot the spread of COVID-19 across states from Jan, 20 - Oct, 21
]

.pull-left[

[![](assets/flourish-logo.png)](https://flourish.studio/)

.center[
Beautiful and easy data visualization and storytelling
]
]

.pull-right[
[![](assets/covid-19-dynamic.png)](https://app.flourish.studio/visualisation/7586483/edit)
]

------
.center[
**[Tool](https://app.flourish.studio/) | [Dataset](https://raw.githubusercontent.com/CivicDataLab/Working-with-Data-Workshops/master/modules/module_4_data_viz/session-2/datasets/covid_data_transposed.csv)**
]

------

---

## COVID-19 Dynamic Data Viz

---
class: center, middle

# Maps

---

## Maps - StoryMap - KnightLab

.pull-left[

[![](assets/story-map-logo.png)](https://storymap.knightlab.com/)

.center[
StoryMapJS is a free tool to help you tell stories on the web that highlight the locations of a series of events. 
]
]

.pull-right[
[![](assets/storymap-demo.png)](https://storymap.knightlab.com/edit/?id=optimal-road-trip)
]

------

.center[
**[Tool](https://storymap.knightlab.com/) | [Dataset](https://behindbars.netlify.app/docs/optimal-trip/)**
]

------

---

## Maps - Designing a Road Trip around India

---
## Maps - Static

.pull-left[

[![](assets/datawrapper-maps.png)](https://www.datawrapper.de/maps)

.center[
More than static maps: responsive, customizable and live-updating.

**[Tool](https://www.datawrapper.de/maps) | [Dataset](https://raw.githubusercontent.com/CivicDataLab/Working-with-Data-Workshops/master/modules/module_4_data_viz/session-2/datasets/covid_state_wise_cumulative.csv)**

]
]

.pull-right[
[![](assets/static-maps-demo.png)](https://datawrapper.dwcdn.net/VJAyt/1/)
]

---

---
class: center, middle

# Tables

---
# Table - Datawrapper

.center[
**Objective** : 
Display the total number of registered calls of women users across states from 2016-17 till 2019-20  
]

.pull-left[

[![](assets/datawrapper-logo.png)](https://app.datawrapper.de/)

.center[
Create responsive tables with Datawrapper
]
]

.pull-right[
[![](assets/table-demo.png)](https://datawrapper.dwcdn.net/a06XO/2/)
]

------

.center[
**[Tool](https://www.datawrapper.de/tables) | [Dataset](https://raw.githubusercontent.com/CivicDataLab/Working-with-Data-Workshops/master/modules/module_4_data_viz/session-2/datasets/wcd_whl_data.csv)**
]

------

---
## Table - Women help line scheme

---
class: center, middle

# Timeline

---
# Timeline - KnightLab

.pull-left[

[![](assets/timeline-logo.png)](https://timeline.knightlab.com/)

.center[
TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. 
]
]

.pull-right[
[![](assets/timeline-banner.png)](https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk&font=Default&lang=en&initial_zoom=2&height=100%)
]

------

.center[
**[Tool](https://timeline.knightlab.com/#examples)**
]

------
---

## Timeline demo - Women in Computing

---

# Resources - To select a chart

.pull-left[
![](assets/visual-vocab.png)
]

.pull-right[
[![](../session-2/assets/ft-visual-vocabulary.png)](https://raw.githubusercontent.com/Financial-Times/chart-doctor/main/visual-vocabulary/poster.png)

1. [From Data to Viz](https://www.data-to-viz.com/)
2. [FT - Visual Vocabulary](https://raw.githubusercontent.com/Financial-Times/chart-doctor/main/visual-vocabulary/poster.png)
3. [Information design for the human brain](http://paldhous.github.io/NICAR/2016/infodesign.html)
]
---

# Other Resources

.pull-left[

### Creating accessible data viz

- The [Chartability project](https://chartability.fizz.studio/)
- [Accessibility Features Demo - HighCharts](https://www.highcharts.com/accessibility/)

### Tools

- [Visualisation Tools](https://gijn.org/visualization-tools/)
- [RAWGraphs](https://rawgraphs.io)
- [DataWrapper](https://www.datawrapper.de)
- [For creating infographics - Infogram](https://infogram.com/)
- [Dashboard - Metabase](https://www.metabase.com/)
- [Dashboard - Superset](https://superset.apache.org/)

]

.pull-right[

### Links

1. [Creating responsive data visualisations](https://www.gurmanbhatia.com/talk/2020/11/28/responsive-data-viz-phone.html)
2. [Visualizing How India Reacted to Decriminalization of Homosexuality](https://towardsdatascience.com/the-13-x-29-project-visualizing-how-india-reacted-to-decriminalization-of-homosexuality-8d105f828748)
3. [India in Pixels](https://www.instagram.com/india.in.pixels/)
4. [Demo of how data can tell any story you want, ode to Tokyo](https://junkcharts.typepad.com/numbersruleyourworld/2021/08/demo-of-how-data-can-tell-any-story-you-want-ode-to-tokyo.html)
5. [Data Viz - Style Guides](https://policyviz.com/2016/11/30/style-guides/)
6. [PolicyViz](https://policyviz.com/blog/)
7. [How to Use Storytelling Conventions to Create Better Visualizations](https://medium.com/nightingale/how-to-use-storytelling-conventions-to-create-better-visualizations-45177ae517ba)

]

---
class: center, middle

# Queries and Feedback