songData = d3.csvParse(await FileAttachment("avg_registers.csv").text())
minRegister = Math.min(...songData.map(d => parseFloat(d.avg_register)))
yDomain = [7.5, 5]
minYear = Math.min(...songData.map(d => parseInt(d.year)))
maxYear = Math.max(...songData.map(d => parseInt(d.year)))
xDomain = [minYear, maxYear]
config = { return {
padLeft: 50,
width: width,
height: 300,
padTop: 10,
padBottom: 50,
padRight: 10,
audioRoot: 50,
rectWidth: 13,
rectHeight: 4
}
}
xScale = d3.scaleLinear()
.domain(xDomain)
.range([config.padLeft, config.width - config.padRight - config.rectWidth])
yScale = d3.scaleLinear()
.domain(yDomain)
.range([config.padTop, config.height - config.padBottom])
xAxis = d3.axisBottom(xScale)
.tickFormat(d3.format("d"))
yAxis = d3.axisLeft(yScale)
md`## Imports, etc`
d3 = require("d3@6")
html`
<style>
#chart-container {
position: relative;
height: ${config.height}px;
}
#chart-container svg, #chart-container canvas {
position: absolute;
}
</style>
`
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.
