I’m a graphic designer and data visualiser. Colours, patterns, and data get my pulse racing!
Public
Edited
Apr 25, 2023
1 fork
years = Array.from({length:17},(d,i) => 2006+i)
yearsKey = years.map(y => `year_${y}`)
data = new Object // you have to define data as an object first
yearsKey.map(k => data[k]= []) // you have to define data.year as an array first
fragileStatesIndex0 = await FileAttachment("2006-fragile states index.xlsx").xlsx()
raw_data = [year_2006, year_2007, year_2008, year_2009, year_2010, year_2011, year_2012, year_2013, year_2014, year_2015, year_2016, year_2017, year_2018, year_2019, year_2020, year_2021, year_2022]
raw_data.map((yearData,y) => yearData.slice(1).map((d,i) => data[yearsKey[y]][i] = new Object))
raw_data.map((yearData,y) => yearData.slice(1).map((d,i) => Object.keys(d).map((key,j) => data[yearsKey[y]][i][keys[j]] = d[key])))
data
data
tables_aq = new Object
yearsKey.map(y => tables_aq[y] = aq.from(data[y])) // generate aquero table data for each year and hold it together in tables_aq
tables_aq // aquero table data for all years
viewof yearInput = Inputs.select(years, {label: "Select the year"})
tables_aq[`year_${yearInput}`].view() // visualise the selected year's tabular data with aquero .view()
table_plot_input = data[`year_${yearInput}`] // for using Plot table you should have year_data as a separate database ready first.
table_plot_input
Type Table, then Shift-Enter. Ctrl-space for more options.
data_aq = new Object
yearsKey.map(year => data_aq[year] = tables_aq[year].objects()) // access the wrangled data by aquero via .objects()
data_aq // whatever wrangling you do with aquero will be reflected in this dataset. use this for d3 usage.
tables_aq[`year_${yearInput}`]
.derive({ Rank: d => d.Rank.match("/\d+/")}).view()
addTooltips(
// draw plot with tooltip
Plot.plot({
//layout
marginLeft: 80,
marginRight: 80,
marginTop: 30,
marginBottom: 80,
inset: 80,
width: 600,
height: 600,
//Visual Encoding (specifying which visual channels you are using and relating each visual channel to a property)
//mark configuration
marks: [
Plot.dot(data.year_2006,
{
x: "Economy",
y: "Human Rights",
sort: {x: "y"},
stroke: "Total",
fill: "none",
r: 3,
title: (d) => `${d.Country} \n rank: ${d.Rank}`
}) // \n makes a new line
],
//scale configurations & their label, tick, legend, ...
x: {
type: "linear",
domain: [0,10],
ticks: 10,
tickFormat: ",.1s", //symbol comma precision type
label: "Economy",
labelAnchor: "right",
labelOffset: 5,
nice: true,
tickPadding: 20,
tickRotate: 0,
//tickSize: 25,
axis: "bottom",
inset: 20,
line: true,
//percent: true,
//reverse: true,
//grid: true,
legend: true,
},
y: {
type: "linear",
domain: [0,10],
ticks: 10,
tickFormat: ",.1s", //symbol comma precision type
label: "Human Rights",
labelAnchor: "top",
labelOffset: 25,
nice: true,
tickPadding: 20,
tickRotate: 0,
//tickSize: 25,
axis: "left",
inset: 20,
line: true,
//percent: true,
//reverse: true,
//grid: true,
legend: true,
},
color: {
type: "linear",
scheme: "pubugn",
legend: true,
reverse: true
},
// //caption
caption: "Human Rights vs Economy [year_2006] - with tooltip"
}),
// Set styles for the hovered element (related to addTooltips)
{
fill: "turquoise",
opacity: 0.5,
"stroke-width": "3px",
stroke: "none",
r: 4
}
)
addTooltips(
// draw plot with tooltip
Plot.plot({
//layout
marginLeft: 80,
marginRight: 100,
marginTop: 30,
marginBottom: 80,
inset: 80,
width: 600,
height: 600,
//Visual Encoding (specifying which visual channels you are using and relating each visual channel to a property)
//mark configuration
marks: [
Plot.dot(data.year_2006,
{
x: "Refugees and IDPs",
y: "Economic Inequality",
sort: {x: "y"},
stroke: "Total",
fill: "none",
r: 3,
title: (d) => `${d.Country} \n rank: ${d.Rank}`
}) // \n makes a new line
],
//scale configurations & their label, tick, legend, ...
x: {
type: "linear",
domain: [0,10],
ticks: 10,
tickFormat: ",.1s", //symbol comma precision type
label: "Refugees and IDPs",
labelAnchor: "right",
labelOffset: 5,
nice: true,
tickPadding: 20,
tickRotate: 0,
//tickSize: 25,
axis: "bottom",
inset: 20,
line: true,
//percent: true,
//reverse: true,
//grid: true,
legend: true,
},
y: {
type: "linear",
domain: [0,10],
ticks: 10,
tickFormat: ",.1s", //symbol comma precision type
label: "Economic Inequality",
labelAnchor: "top",
labelOffset: 50,
nice: true,
tickPadding: 20,
tickRotate: 0,
//tickSize: 25,
axis: "left",
inset: 20,
line: true,
//percent: true,
//reverse: true,
//grid: true,
legend: true,
},
color: {
type: "linear",
scheme: "pubugn",
legend: true,
reverse: true
},
// //caption
caption: "Refugees and IDPs vs Economic Inequality [year_2006] - with tooltip"
}),
// Set styles for the hovered element (related to addTooltips)
{
fill: "turquoise",
opacity: 0.5,
"stroke-width": "3px",
stroke: "none",
r: 4
}
)
import {aq, op} from "@uwdata/arquero"
import {addTooltips} from "@mkfreeman/plot-tooltip"
import {show} from "@observablehq/plot-default-height"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
