Senior Art Editor at Nature News in London.
height = 400
numberOfBubblesToHighlight = 10
colorScale = d3.scaleOrdinal().domain(genderGroups).range(colors)
fundingScale = d3
.scaleSqrt()
.domain(d3.extent(data, (d) => d.funding_2022))
.range([3, 50])
dalyScale = d3
.scaleSqrt()
.domain(d3.extent(data, (d) => d.daly))
.range([3, 50])
xScale_stage_1 = (d) => {
// All circles in the center
return 0.5;
}
xScale_stage_2 = (d) => {
// [grey bubbles disappear; leaving m and f diseases (stage2)]
const groupPositions = new Map();
groupPositions.set("Female", 1 / 3);
groupPositions.set("Female semi-dominant", 1.5);
groupPositions.set("Male", (2 / 3));
groupPositions.set("Male semi-dominant", 1.5 );
groupPositions.set("Neutral", 1.5 );
return groupPositions.get(d.gender);
}
xScale_stage_3 = (d) => {
// [bubbles rearrange to show 3-5 big hitters in one cluster, others in a separate cluster?]
// 1. we need four possible solutions Female small, female big, male big, male small
// 2. This positions are 1/5, 2/5, 3/5, 4/5
let position = 1.5;
switch (d.gender) {
case "Female":
if (d.funding_rank < numberOfBubblesToHighlight) {
position = 2 / 5;
} else {
position = 1 / 5;
}
break;
case "Male":
if (d.funding_rank < numberOfBubblesToHighlight) {
position = 3 / 5;
} else {
position = 4 / 5;
}
break;
default:
break;
}
return position;
}
xScale_stage_4 = (d) => {
// [rearrange to show 3-5 diseases with biggest burden – hopefully a pattern emerges]
// 1. we need four possible solutions Female small, female big, male big, male small
// 2. This positions are 1/5, 2/5, 3/5, 4/5
let position = 1.5;
switch (d.gender) {
case "Female":
if (d.daly_rank < numberOfBubblesToHighlight) {
position = 2 / 5;
} else {
position = 1 / 5;
}
break;
case "Male":
if (d.daly_rank < numberOfBubblesToHighlight) {
position = 3 / 5;
} else {
position = 4 / 5;
}
break;
default:
break;
}
return position;
}
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
}))
]
genderGroups = [...new Set(data.map((d) => d.gender))]
colors = ["#E74C3C", "#F1C40F", "#3498DB", "#8E44AD", "#95A5A6"]
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.
