Hi! I'm a Design Technologist based in Portland, Oregon (USA).
Published
Edited
Jan 18, 2022
ScatterPlot
chart__132_scatter = {
const svg = d3
.create("svg")
.attr("height", dimensions.height)
.attr("width", dimensions.width)
.attr("overflow", "visible");
//add the x axis
const xAxis = svg
.append("g")
.attr("class", "axis")
.call(d3.axisBottom(xScale))
.attr("transform", `translate(0, ${dimensions.height - margins.top})`);
// add the y axis
const yAxis = svg
.append("g")
.attr("class", "axis")
.call(d3.axisLeft(yScale).ticks(10, "~s"))
.attr("transform", `translate(${margins.left}, 0)`);
// add title
svg
.append("text")
.text(title)
.attr("class", "title")
.attr("y", 60)
.attr("x", 15)
.attr("font-size", "24pt")
.attr("font-family", "Helvetica")
.attr("font-weight", 600)
.attr("fill", "darkGrey");
const dots = svg
.append("g")
.selectAll("circle")
.attr("class", "dots")
.data(countries)
.join("circle")
.attr("cx", (d) => xScale(parseFloat(d.GDP)))
.attr("cy", (d) => yScale(parseFloat(d.emissions)))
.attr("r", (d) => (callouts.includes(d.Country) ? 5 : 2))
.attr("fill", (d) => (callouts.includes(d.Country) ? "grey" : "darkgrey"));
const labels = svg
.append("g") // this is where you want to update the font style
.attr("font-family", "sans-serif")
.attr("font-size", 16)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.selectAll("text")
.data(countries.filter((c) => callouts.includes(c.Country)))
.join("text")
.attr("dx", 7)
.attr("dy", "0.35em")
.attr("x", (d) => xScale(d.GDP))
.attr("y", (d) => yScale(d.emissions))
.text((d) => d.Country)
.call((text) => text.clone(true))
.attr("fill", "grey");
d3.selectAll(".domain").attr("stroke", "none");
return svg.node();
}
title = "GDP Per Capita vs Yearly CO₂ Emissions per capita"
xScale = d3
.scaleLog()
.domain(d3.extent(countries.map((c) => parseFloat(c.GDP))))
.range([margins.left, dimensions.width - margins.left])
yScale = d3
.scaleLinear()
.domain(d3.extent(countries.map((c) => parseFloat(c.emissions))))
.nice()
.range([dimensions.height - margins.top, margins.top])
margins = Object({ top: 80, left: 60 })
dimensions = Object({ height: 600, width: 900 })
callouts = [
"Russia",
"China",
"Qatar",
"India",
"United States",
"Norway",
"Switzerland"
]
countries = FileAttachment("GHGvGDP-1.csv").csv()
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.
