Public
Edited
Oct 4, 2023
1 fork
chart = {
const svg = d3
.create("svg")
.attr("width", chart_width)
.attr("height", chart_height)
.attr("viewBox", [0, 0, chart_width, chart_height]);
svg
.append("g")
.attr(
"transform",
`translate(0,${chart_height - margin.bottom - margin.top})`
)
.call(d3.axisBottom(x));
svg
.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
svg
.selectAll(".rect")
.data(data)
.enter()
.append("rect")
.attr("x", margin.left)
.attr("y", (d) => y(d.country) + y_group(d.gender))
.attr("width", (d) => x(+d.n) - margin.left)
.attr("height", y.bandwidth() / 3)
.attr("fill", (d) => fill_scale(d.gender));
return svg.node();
}
x(+"0")
chart_width = 800
chart_height = 1000
margin = ({ left: 40, top: 10, right: 10, bottom: 20 })
fill_scale = d3
.scaleOrdinal()
.domain(new Set(data.map((d) => d.gender)))
.range(["#E74F2A", "#259299", "#48336A"])
y = d3
.scaleBand()
.domain(new Set(data.map((d) => d.country)))
.range([margin.top, chart_height - margin.bottom])
.paddingOuter(0.1)
.paddingInner(0.1)
y_group = d3
.scaleBand()
.domain(new Set(data.map((d) => d.gender)))
.range([0, y.bandwidth()])
x = d3
.scaleLinear()
.domain([0, d3.max(data, (d) => +d.n)])
.range([margin.left, chart_width - margin.right])
xAxis = (g) =>
g
.attr(
"transform",
`translate(0,${chart_height - margin.bottom - margin.height})`
)
.call(d3.axisBottom(x))
yAxis = (g) => g.call(d3.axisLeft(y))
data_raw = FileAttachment("street_names.csv").csv()
data = data_raw.sort((a, b) => d3.descending(+a.n, +b.n))
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.
