Published
Edited
Feb 13, 2022
<div>
${chart}
</div>
chart = {
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
svg
.selectAll("rect.bar")
.data(filteredData)
.join("rect")
.attr("class", "bar")
.attr("fill", "#2BAEBB")
.attr("width", xScale.bandwidth())
.attr("height", (d) => yScale(0) - yScale(d.visits))
.attr("x", (d) => xScale(d.domain))
.attr("y", (d) => yScale(d.visits));
svg.append("g")
.call(xAxis)
.selectAll("text")
.attr("transform", "translate(-15,10)rotate(-90)")
.style("text-anchor", "end")
.style("font-size", 12)
.style("fill", "#606266");
svg.append("g")
.call(yAxis)
.selectAll("text")
.style("text-anchor", "end")
.style("font-size", 12)
.style("fill", "#606266");
svg.call(yTitle)
.selectAll("text")
.style("font-size", 12)
.style("fill", "#606266");
return svg.node();
}
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.
