Senior Art Editor at Nature News in London.
canvasChart = {
const context = DOM.context2d(width, height);
let text = "";
const centerX = width / 2;
const centerY = height / 2;
const spaceBetweenBubbles = 3;
// colorScale.range(["#95A5A6", "#95A5A6", "#95A5A6", "#95A5A6", "#95A5A6"]);
colorScale.range(colors);
let radiusScale = (d) => {
return dalyScale(d.daly);
};
let xScale = (d) => {
return xScale_stage_1(d);
};
const simulation = d3
.forceSimulation(data_for_chart)
.alphaTarget(0.5)
.velocityDecay(0.8)
.force("charge", d3.forceManyBody().strength(-width / 100))
.force("x", d3.forceX().strength(0.1))
.force("y", d3.forceY().strength(0.1))
.force("center", d3.forceCenter(width / 2, height / 2))
.force(
"collide",
d3
.forceCollide()
.radius((d) => radiusScale(d) + spaceBetweenBubbles)
.iterations(100)
)
.on("tick", ticked);
invalidation.then(() => simulation.stop()); // a promise to stop the simulation when the cell is re-run
function ticked() {
context.clearRect(0, 0, width, height);
context.textAlign = "center";
context.textBaseline = "middle";
for (const d of data_for_chart) {
let radius = radiusScale(d);
context.beginPath();
context.moveTo(d.x + radius, d.y);
context.arc(d.x, d.y, radius, 0, 2 * Math.PI);
context.fillStyle = colorScale(d.gender);
context.fill();
}
}
return context.canvas;
}
stage_5_diseases = [
"Migraine 38",
"Headaches",
"Endometriosis",
"Anxiety Disorders"
]
stage_6_diseases = ["HIV/AIDS 9", "Substance Misuse 37"]
combined_data_ranked.map((d) => d.disease)
colorScale = d3.scaleOrdinal().domain(genderGroups).range(colors)
data = Array.from(combined_table).filter((d) => d.gender !== undefined)
combined_data = Array.from(combined_table).filter((d) => d.gender !== undefined)
testRollupForDuplicates = d3.rollup(
combined_data,
(v) => {
let array_length = v.length;
let daly_set = new Set(v.map((d) => d.daly));
let funding_set = new Set(v.map((d) => d.funding_2022));
let daly_duplicates = array_length !== daly_set.size;
let funding_duplicates = array_length !== funding_set.size;
return { daly_duplicates, funding_duplicates };
},
(d) => d.gender
)
combined_data_ranked = [
...combined_data
.filter((d) => d.gender === "Male" || d.gender === "Female")
.map((d, i, array) => ({
...d,
funding_rank: d3.rank(
array.map((d) => d.funding_2022),
d3.descending
)[i],
daly_rank: d3.rank(
array.map((d) => d.daly),
d3.descending
)[i]
})),
...combined_data
.filter((d) => d.gender !== "Male" && d.gender !== "Female")
.map((d, i, array) => ({
...d,
funding_rank: undefined,
daly_rank: undefined
}))
]
data_for_chart = combined_data_ranked.map((d) => ({ ...d }))
genderGroups = [...new Set(data.map((d) => d.gender))]
colors = ["#006eb7", "#eb5b25", "#36a9e1", "#f7ab59", "#bbc3cc"]
import { swatches as Swatches } from "@d3/color-legend"
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.
