• Draggable Pie/Donut Chart
• Bar chart race
• Voronoi Map
• Bivariate Choropleth

Draggable Pie/Donut Chart

Yes, I know, pie charts are mostly bad. But the following notebook allows the creation of interactive pie or ‘donut’ charts, with slices optionally ‘draggable’ to rearrange their order.

https://observablehq.com/@juba/draggable-pie-donut-chart

Here is a small example. To display the chart we have toinclude both thechart anddraw cells, and we hidedraw as it is only useful to render the plot. We pass our data as a data frame withname andvalue columns.

df <-data.frame(name =rownames(USPersonalExpenditure),value = USPersonalExpenditure[,"1960"])robservable("https://observablehq.com/@juba/draggable-pie-donut-chart",include =c("chart","draw"),hide ="draw",input =list(data = df),width =700)

Bar chart race

The following notebook generates animated “bar chart race” charts.

https://observablehq.com/@juba/bar-chart-race

To use it fromrobservable you have to place your data in a data frame with the following columns :

• id : identifier (country, city, brand…)
• date : observation date (can be any number or character : year, day…)
• value : value for thatdate in thisid

Optionally, if you want the displayed date value to be different than the one used in your dataset (for example if you iterate over monthly data but prefer to only display the year), you can add a correspondingdate_label column.

library(readr)library(dplyr)library(tidyr)## Load Covid-19 data from Johns Hopkins Github repositoryd <-read_csv("https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv")## Reformat datad <-d%>%select(-`Province/State`,-Lat,-Long)%>%rename(id =`Country/Region`)%>%group_by(id)%>%summarise(across(everything(), sum))%>%pivot_longer(-id,names_to ="date")%>%mutate(date =as.character(lubridate::mdy(date)))## Filter out datad <-d%>%group_by(date)%>%filter(value>0&(n()-row_number(value))<=12)%>%arrange(date)

We can then generate the chart with the followingrobservable call. Note that we have to include several cells : the chart itself, thedraw cell which updates it, thedate play/pause control, and the CSSstyles.

## Generate chartrobservable("https://observablehq.com/@juba/bar-chart-race",include =c("viewof date","chart","draw","styles"),hide ="draw",input =list(data = d,title ="COVID-19 deaths",subtitle ="Cumulative number of COVID-19 deaths by country",source ="Source : Johns Hopkins University"  ),width =700,height =710)

Voronoi Map

The following notebook allows to create a Voronoi diagram on a map background.

https://observablehq.com/@juba/reusable-voronoi-map

Here we load data about the location of engineering schools in France in 2020 (Source :Onisep).

d <-read_csv("https://gist.githubusercontent.com/juba/ccba4dadb899588d0301968fd974a99f/raw/5dedadc47c343ad95c3759c068f1821533296087/ecoles_inge.csv")

And we display it as a Voronoi diagram by callingrobservable the following way. Note that we have to include bothchart anddraw cells for the map to be rendered (but we hidedraw as it doesn’t display anything by itself).

map_url <- "https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/regions-version-simplifiee.geojson"robservable("@juba/reusable-voronoi-map",include =c("chart","draw"),hide ="draw",input =list(contour = map_url,contour_width =1,data = d,longitude_var ="longitude (X)",latitude_var ="latitude (Y)",point_radius =1.5,zoom =TRUE ),width =600,height =600)

You can zoom and pan the map.

Bivariate Choropleth

The following notebook makes bivariate choropleth maps with zoom and tooltips.

https://observablehq.com/@juba/reusable-bivariate-choropleth

We first load some data from theUSA.county.data Github project, only keep California counties, and select two of the available variables.

load(url("https://raw.githubusercontent.com/Deleetdk/USA.county.data/master/data/USA_county_data.RData"))d <-USA_county_datad <-d[d$State== "California",]d <-d[,c("name_16","Graduate.Degree","Less.Than.High.School")]names(d) <-c("name_16","Graduate","<High.School")

Then we can callrobservable to load the notebook, render onlychart anddraw (both are needed for the map to show), hidedraw and update a bunch of cells values via theinput named list. You can refer to the notebook for an explanation of the different values.

robservable("@juba/reusable-bivariate-choropleth",include =c("chart","draw"),hide ="draw",input =list(data = d,data_id ="name_16",data_name ="name_16",data_var1 ="Graduate",data_var2 ="<High.School",map ="https://raw.githubusercontent.com/codeforamerica/click_that_hood/master/public/data/california-counties.geojson",map_object ="geometry",map_id_property ="name",legend_position ="bottomleft"  ),width =800,height =500)