Curious human. Interested in the mechanics of how things work.
Public
Edited
Jan 27, 2023
1 fork
thresholds=22
changeColor(combined, "black", 12)
function changeColor (chart, color, fontsize) {
d3
.select(chart)
.select("[aria-label=x-axis]")
.selectAll("text")
.each(function (d) {
// d is the tick's value (in this case, a number)
d3.select(this)
.attr("fill", color)
.attr("font-size", fontsize)
.attr("font-family", "IBM Plex Sans");
})
d3
.select(chart)
.select("[aria-label=y-axis]")
.selectAll("text")
.each(function (d) {
// d is the tick's value (in this case, a number)
d3.select(this)
.attr("fill", color)
.attr("font-size", fontsize)
.attr("font-family", "IBM Plex Sans");
})
d3
.select(chart)
.select("[aria-label=x-axis]")
.selectAll("line")
.each(function (d) {
// d is the tick's value (in this case, a number)
d3.select(this)
.attr("stroke", color)
})
d3
.select(chart)
.select("[aria-label=y-axis]")
.selectAll("line")
.each(function (d) {
// d is the tick's value (in this case, a number)
d3.select(this)
.attr("stroke", color)
})
d3.select(chart)
.selectAll("text")
.each(function(d) {
d3.select(this)
.attr("font-family", "IBM Plex Sans");
})
}
Plot.plot({
width:width/1.5,
height: 1000,
marks: [
Plot.dot(data, Plot.dodgeY({x: "urban_10", fill: "sub_continent", fy: "sub_continent", anchor}))
]
})
viewof anchor = Inputs.radio(["top", "middle", "bottom"], {label: "Anchor", value: "bottom"})
Plot.plot({
insetRight: 10,
marginLeft: 100,
height: 400,
width,
marks: [
Plot.dot(
data,
Plot.dodgeX({
y: "sub_continent",
r: "urban_10",
title: d => `${d.NAME}\n${(d.rMVOP / 1e3).toFixed(1)}B`,
fill: "currentColor"
})
),
// Plot.text(
// data,
// Plot.dodgeX({
// filter: (d) => d.rMVOP > 5e3,
// y: "sub_continent",
// r: "urban_10",
// text: d => (d.rMVOP / 1e3).toFixed(),
// fill: "white",
// fontWeight: "bold"
// })
// )
]
})
Plot.plot({
height: 180,
marks: [
Plot.dot(iataGroupedByRegions, Plot.dodgeY({x: "sub_continent",}))
]
})
data =
{
let df = iataGroupedByRegions.filter(row => sub_continents.includes(row['sub_continent']))
for (let i in df){
df[i]['combined_10'] = iataGroupedByRegions[i]['empty_10'] + iataGroupedByRegions[i]['arid_10'];
df[i]['combined_sqkm'] = iataGroupedByRegions[i]['combined_10'] * 13 / 1e6;
df[i]['urban_sqkm'] = iataGroupedByRegions[i]['urban_10'] * 13 / 1e6;
}
return df;
}
range = ["#ff595e", "#ff924c", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93",
"#E04E53", "#DD7275", "#FA8D91", "#FFA6A8",
"#FF924C", "#E0884F", "#FBA771", "#FFCBA9",
"#73AA1C", "#70A51E" ,"#9FC95C" ,"#B9E375", "#B9E375",
"#FFE9AF", "#FFCA3A", "#1982C4",
"#9D88BA",
"#BCE784", "#5DD39E", "#348AA7", "#513B56",
]
domain = ["EU", "AS", "SA", "AF", "NA", "OC",
"Central and East Europe", "North Europe", "South Europe", "West Europe",
"East Asia", "Southeast Asia", "South Asia", "West Asia",
"Central Africa", "East Africa", "North Africa", "South Africa", "West Africa",
"South America", 'Central America', "North America",
"Australia and New Zealand",
"Trains", "Electric aircraft", "Hydrogen aircraft", "Petroleum", ]
colorScale = d3.scaleOrdinal().domain(domain).range(range)
import {sub_continents} from "4b75e48934b7ce6a"
import {iataGroupedByRegions} from "b7b073d13cec22e7"
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.
