Hi! I'm a Design Technologist based in Portland, Oregon (USA).
Vertical stacked bar chart
dataSpreader = "FoodType"
yScale = d3.scaleLinear().domain([0, 30]).nice().range([100, 400])
stack = d3.stack().keys(["Forest", "Other"])
titleText = "Number of wild species used for food"
subtitleText = 'East Usambara Mountains, Tanzania'
{
const svg = d3
.create("svg")
.attr("height", 600)
.attr("width", 800)
.attr("overflow", "visible");
svg
.append("g")
.attr("class", "axis")
.attr("transform", "translate(0,400)")
.call(d3.axisBottom(xScale));
svg
.append("text")
.attr("class", "title")
.text(titleText)
.attr("font-size", 31)
.attr("x", 5)
.attr("y", 34);
svg
.append("text")
.attr("class", "subtitle")
.text(subtitleText)
.attr("font-size", 16)
.attr("x", 5)
.attr("y", 54);
stackedData.forEach((s, sNdx) => {
svg
.append("g")
.selectAll("rect")
.data(s)
.join("rect")
.attr("class", `rect_${sNdx}`)
.attr("x", (d) => xScale(d.data[dataSpreader]))
.attr("y", (d) => 500 - yScale(d[1]))
.attr("height", (d) => yScale(d[1]) - yScale(d[0]))
.attr("width", xScale.bandwidth())
.attr("fill", sNdx === 0 ? "black" : "grey");
svg
.append("g")
.selectAll("text")
.data(s)
.join("text")
.attr("class", "valueLabel")
.text((d) => format(d[1] - d[0]))
.attr("x", (d) => xScale(d.data[dataSpreader]) + xScale.bandwidth() / 2)
.attr("y", (d) => 500 - yScale(d[1]) + 2)
.attr("dy", "15")
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("font-weight", 400)
.attr("opacity", (d) => (yScale(d[1]) - yScale(d[0]) > 14 ? 1 : 0))
.attr("fill", sNdx === 0 ? "white" : "black");
svg
.append("g")
.selectAll("text")
.data(s)
.join("text")
.attr("class", "valueLabel")
.text((d) => format(d[1]))
.attr("x", (d) => xScale(d.data[dataSpreader]) + xScale.bandwidth() / 2)
.attr("y", (d) => 500 - yScale(d[1]) - 20)
.attr("dy", "15")
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", 20)
.attr("font-weight", 600)
.attr("opacity", sNdx === 0 ? 0 : 1);
});
return svg.node();
}
format = d3.format("~s")
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.
