DataViz, Dashboard, Observable Ambassador and Notion Certified
data1 = d3.tsv(
"https://gist.githubusercontent.com/rayhong/cfbf3efb9879ee43babe6d41429ca487/raw/746c404066d7cfc3238108c7b03e6f93b8f4f602/bar.tsv"
)
data = data1.slice(0, 10)
height = 400
x = d3
.scaleBand()
.domain(data.map((d) => d.letter))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3
.scaleLinear()
.domain([0, d3.max(data, (d) => d.frequency)])
.range([height - margin.bottom, margin.top])
chart = {
const svg = d3.select(DOM.svg(width, height));
svg
.append("g")
.attr("fill", "steelblue")
.selectAll()
.data(data)
.join("rect")
.attr("x", (d) => x(d.letter))
.attr("y", (d) => y(d.frequency))
.attr("height", (d) => y(0) - y(d.frequency))
.attr("width", x.bandwidth());
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.
