Interactive charts: R, Python and D3



A series of responsive charts I’ve created using R, Python, D3, JavaScript, HTML and CSS.

My role
  • Data collection
  • Data wrangling
  • Developer
  • Designer

Tools
  • R
  • Python
  • D3
  • Mapshaper
  • Canvas API
  • Microsoft Excel
  • Visual Studio Code
  • RStudio


Line chart

An interactive line chart created with R packages ggplot2 and ggiraph. The data was scraped directly from CATSA using Microsoft Excel, and restructured and analysed with R:

Stacked bar chart

An interactive stacked bar chart created with ggplot2 and ggiraph. The data was pulled from an Angus Reid survey and analysed with R:

Donut chart

An interactive donut chart created with D3, HTML, CSS and JavaScript. The data was pulled from Statistics Canada (source 1, source 2) and transformed and analysed with R:

Cluster chart

An interactive chart comparing the effectiveness of vaccines against COVID-19. I was inspired to create this after reading this article on how certain COVID-19 data can be more accurately compared using the incidence rate ⁠— a figure which shows how often an event, such as disease or death, occurs in a population.

The numbers for this cluster chart were pulled from CDC and cleaned up with Excel. The data centers on information recorded on January 2, 2022 ⁠— when infections across 30 US jurisdictions were at their peak.

D3, HTML, CSS and JavaScript were used to create the visualisation. The animated points were drawn with the Canvas API to minimize loading speeds.

Choropleth map

An interactive map looking at the shelter-cost-to-income ratio across Canada. The numbers were pulled from Statistics Canada, and transformed and analysed with Python library pandas.

D3, HTML, CSS, JavaScript and Mapshaper were used to create the visualisation:

Waffle chart

An interactive waffle chart looking at racial diversity in Canada’s federal parliament. The numbers were taken from a survey and transformed with R.

R packages ggplot2, ggiraph and waffle were used to build the visualisation, which was further customized with D3, HTML, CSS and JavaScript:

Grouped bar chart

An interactive bar chart comparing physician salaries across specialties in the US and Canada. The data was compiled from a Medscape survey and CIHI report released in 2022, and transformed with R.

R packages ggplot2 and ggiraph were used to create the visualisation:

Sankey diagram

An interactive sankey depicting how a $54 federal million budget was spent on the development of ArriveCAN, a travel app used as a screening tool for travellers entering Canada during the COVID-19 pandemic. The data was taken from the Canada Border Services Agency website and reformatted in Excel.

The diagram was coded in HTML, CSS and JavaScript with D3:

Dot plot

An interactive dot plot presenting the average life expectancy for men and women across Canada, according to the latest available data from Statistics Canada.

The chart was coded in HTML, CSS and JavaScript with D3:

Tree diagram

A tree diagram presenting the leadership structure of Hamas, according to the Council on Foreign Relations. It was coded in HTML, CSS and JavaScript with D3: