data = FileAttachment("2018_Central_Park_Squirrel_Census_-_Squirrel_Data.csv").csv({typed: true})
Inputs.table(data)
<div>
${chart}
</div>
xScale = d3.scaleBand()
.domain(groupedData.map(d => d[0]))
.range([0, width])
.paddingInner(0.2)
yScale = d3.scaleLinear()
.domain([0, 3000])
.range([height, 0])
chart = {
const svg = d3.create("svg").attr("height", height).attr("width", width)
svg.selectAll("rect")
.data(groupedData)
.join("rect")
.attr("width", xScale.bandwidth())
.attr("height", d => height - yScale(d[1]))
.attr("x", d => xScale(d[0]))
.attr("y", d => yScale(d[1]))
return svg.node()
}
Plot.plot({
y: { grid: true },
marks: [Plot.barY(groupedData, { x: d => d[0], y: d => d[1] })]
})
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.
