math & informatics teacher
Public
Edited
Aug 2, 2023
nodes.filter(row => row.iata === 'PEK');
allDistances = {
worldMap.select("#piecharts").remove()
if (dorling) {
const simulation = d3
.forceSimulation(nodes)
.force(
"x",
d3.forceX((d) => mapProjection([parseFloat(d.lng_ap), parseFloat(d.lat_ap)])[0])
)
.force(
"y",
d3.forceY((d) => mapProjection([parseFloat(d.lng_ap), parseFloat(d.lat_ap)])[1])
)
.force(
"collide",
d3.forceCollide((d) => radiusFunction(parseInt(d[radiusBase]))*1.15).strength(2)
)
const nodeG = worldMap.append("g")
.attr("id", "piecharts")
.attr("stroke", "white")
.attr("stroke-width", 1.5)
.selectAll("g")
.data(nodes)
.join("g")
.call(drag(simulation))
nodeG.append('circle')
.attr("r", d => radiusFunction(parseInt(d[radiusBase])))
nodeG.append("g")
.each(function(node) {
let pieData = [];
for (let i in categories[basePie]) {
let name = categories[basePie][i]
let value = node[name]
// console.log('!!!', name, value);
pieData.push({name, value});
}
let arcs = pie(pieData);
console.log(arcs);
d3.select(this).append('g')
.attr('stroke', pieStroke ? "white" : "none")
.selectAll('path')
.data(arcs)
.join('path')
.attr('fill',
d => {
return sectorColor(d.data.name)})
.attr(
'd',
d3
.arc()
.innerRadius(0)
.outerRadius(() => radiusFunction(parseInt(node[radiusBase]))))
.append('title')
// title will not actually be visible
.text(d => `${d.data.id} ${d.data.name}: ${d.data.value}`);
})
simulation.on("tick", () => {
nodeG.attr("transform", d => `translate(${d.x}, ${d.y})`)});
invalidation.then(() => simulation.stop());
} else {
// Finalized unforced code
nodes.forEach(node => {
let coordinates = mapProjection([parseFloat(node.lng_ap),parseFloat(node.lat_ap)]);
let x = coordinates[0];
let y = coordinates[1];
let pieData = [];
for (let i in categories[basePie]) {
let name = categories[basePie][i]
let value = parseFloat(node[name])
pieData.push({name, value});
}
let arcs = pie(pieData);
worldMap
.append('g')
.attr("transform", "translate(" + x + "," + y + ")")
.attr('stroke', pieStroke ? "white" : "none")
.selectAll('path')
.data(arcs)
.join('path')
.attr('fill',
d => {
return sectorColor(d.data.name)})
.attr(
'd',
d3
.arc()
.innerRadius(0)
.outerRadius(() => radiusFunction(parseInt(node[radiusBase]))))
.append('title')
// title will not actually be visible
.text(d => `${d.data.name}: ${d.data.value}`);
});
}
return worldMap.node();
}
categories = ({
"Electric": ["cannot_electrify", "possible_electrify", "easy_electrify"],
"Trains": ["notrain", "train"]
})
replace = ({
"Electric": ["Cannot be electrified", "Possible to electrify", "Easy to electrify"],
"Trains": ["Difficult to replace with train (> 750km or mostly over water)", "Possible to replace with train (<= 750km)"]
})
sectorColor("easy_electrify")
colorScales = ({
'Electric': ["#f78e31", "#9dd9d2", "#00a8a8"],
'Trains': ["#CE6A48", "#3da35d"],
})
import {legend, swatches} from "@d3/color-legend"
import {Swatches} from "@d3/color-legend"
import {activeColorScheme} from "b3a0a78984d6df2e"
import {worldMap, mapPath, mapProjection} from "b3a0a78984d6df2e"
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.
