Senior Art Editor at Nature News in London.
chart = {
const width = 928; // uncomment for responsive width
const height = 400;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
const locationGroup = svg.append("g");
locationGroup
.selectAll("text")
.data(locations)
.join("text")
.attr("x", 10)
.attr("y", (d) => locationScale(d) * height)
.text((d) => d);
const measureGroup = svg.append("g");
measureGroup
.selectAll("text")
.data(measures)
.join("text")
.attr("x", (d) => measureScale(d) * width)
.attr("y", 15)
.attr("text-anchor", "middle")
.text((d) => d);
const dataGroup = svg.append("g");
dataGroup
.selectAll("circle")
.data(circleData)
.join("circle")
.attr("cx", (d) => measureScale(d.measure) * width)
.attr("cy", (d) => locationScale(d.location) * height)
.attr("r", (d) => valueScale(d.value))
.attr("title", (d) => d.location)
.attr("fill", "#001b42");
const scaleGroup = svg.append("g");
scaleGroup
.selectAll("circle")
.data([0.01, 0.1, 0.5, 1.0])
.join("circle")
.attr("cx", width * 0.9)
.attr("cy", height * 0.7)
.attr("r", (d) => valueScale(d))
.attr("fill", "none")
.attr("stroke", "#000000")
.attr("stroke-width", 1);
return svg.node();
}
data = FileAttachment("carbon-data-no-negative@1.csv").csv({ typed: true })
circleData = {
const data = await FileAttachment("carbon-data-no-negative@1.csv").csv({
typed: true
});
const tidyData = data.reduce((accumulator, currentValue) => {
const { location, total, NBE, fire } = currentValue;
const totalObject = {
location,
measure: "total",
value: total
};
const nbeObject = {
location,
measure: "NBE",
value: NBE
};
const fireObject = {
location,
measure: "fire",
value: fire
};
return [...accumulator, totalObject, nbeObject, fireObject];
}, []);
return tidyData;
}
locations = ["Northwest", "Southwest", "Northeast", "Southeast"]
locationScale = d3.scaleOrdinal(locations, [0.15, 0.4, 0.65, 0.9])
measures = ["total", "NBE", "fire"]
measureScale = d3.scaleOrdinal(measures, [0.25, 0.5, 0.75])
valueScale = d3.scaleSqrt([0, 0.7], [0, 50])
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.
