Curious human. Interested in the mechanics of how things work.
Public
Edited
Feb 8, 2023
1 fork
Importers
1 star
colorLegendP = {
return legend({
color: colorScaleP,
title: "Legend",
width: width/1.5,
ticks: 10
})
}
(colorDomainP[1] - colorDomainP[0])/2
colorDomainP
colorScaleP = d3.scaleDivergingSqrt()
.domain([colorDomainP[0], 0, colorDomainP[1]])
//.domain([-3.1617071179780396, 15288.374864605872, 37345.15611247053, 69756.28082098582, 106959.1835045237, 172681.71482824712])
//.interpolator(d3.interpolateRgbBasis(['#005DAA', '#9BD5FC', '#FBE2AF', '#FDAC7A', '#FB6D07']) )
//.interpolator(t => d3.interpolateRdBu(1 - t))
//.interpolator(t => d3.interpolateOrRd(1 - t))
//.interpolator(d3.interpolateRgbBasis(["green", "gray", "orange"]))
.interpolator(d3.interpolateRgbBasis(["#005DAA","#E2D6CA", "#EE3F08"]))
pressureSlopes = {
let nodes = dataP[movement]
worldMap.select("#piecharts").remove()
worldMap.select("#land")
// worldMap.select("#land").remove()
// .style("fill", "#d8d8d8")
// // .style("stroke-width", 0.5)
// // .style("stroke", "#f4f4f4");
let adjSize = size *2;
const simulation = d3
.forceSimulation(nodes)
.force(
"x",
d3.forceX((d) => mapProjection([parseFloat(d[baseX]), parseFloat(d[baseY])])[0])
)
.force(
"y",
d3.forceY((d) => mapProjection([parseFloat(d[baseX]), parseFloat(d[baseY])])[1])
)
.force(
"collide",
d3.forceCollide(boxSize+2).strength(repulsionFactor)
)
const nodeG = worldMap.append("g")
.attr("id", "piecharts")
.attr("stroke", "white")
.attr("stroke-width", 0.5)
.selectAll("g")
.data(nodes)
.join("g")
.call(drag(simulation))
nodeG.append("g")
.each(function(node) {
d3.select(this).append('g')
.append("rect")
.attr("stroke-width", 0.4)
.attr("stroke", "#8F5601")
.attr('fill', '#FFFCF6')
.attr("width", boxSize * 2)
.attr("height", boxSize * 2);
let linePoints = processDataEq(node);
d3.select(this).append('path')
.datum(linePoints)
.attr("stroke", d => colorScaleP(d[2]))
.attr("stroke-width", stroke/1.7)
.attr("stroke-opacity", 1)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", lineP);
})
simulation.on("tick", () => {
nodeG.attr("transform", d => `translate(${d.x}, ${d.y})`)
textG.attr("transform", d => `translate(${d.x}, ${d.y})`)
});
invalidation.then(() => simulation.stop());
const textG = worldMap.append("g")
.attr("id", "text-charts")
.selectAll("g")
.data(nodes)
.join("g")
.call(drag(simulation));
return worldMap.node();
}
backgroundColor = '#C7A88E'
dataP[movement]
height = 500
margin = ({top: 50, right: 100, bottom: height/3, left: 100})
dataR = ({all: allR, intl: intlR, dom: domR})
dataC = ({all: allC, intl: intlC, dom: domC})
dataP = ({all: allPress, intl: intlPress, dom: domPress})
sub_continents = dataR[movement].map(row=>row['name']);
allR = FileAttachment("all-subregion-breakdown@11.csv").csv({typed: true})
intlR = FileAttachment("intl-subregion-breakdown@10.csv").csv({typed: true})
domR = FileAttachment("dom-subregion-breakdown@10.csv").csv({typed: true})
intlC = FileAttachment("intl-continent-breakdown@10.csv").csv({typed: true})
domC = FileAttachment("dom-continent-breakdown@11.csv").csv({typed: true})
allPress = FileAttachment("all-ad-pressure@7.csv").csv({typed: true})
intlPress = FileAttachment("intl-ad-pressure@8.csv").csv({typed: true})
domPress = FileAttachment("dom-ad-pressure@8.csv").csv({typed: true})
import {iataGroupedByRegions} from "b7b073d13cec22e7"
import {legend, swatches} from "@d3/color-legend"
import {slider} from "@jashkenas/inputs"
import {mapProjection, activeColorScheme, worldMap} from "b3a0a78984d6df2e"
import {radio} from "@jashkenas/inputs"
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.
