data = (d3.csvParse(await FileAttachment("stocks-sample.csv").text(), d3.autoType))
series = data.columns.slice(1)
.map((symbol) => ({
id: symbol, // use stock symbol as id
values: data.map((d) => ({date: d.date, value: d[symbol]}))
}))
xScale = d3.scaleUtc()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
yScale = d3.scaleLinear()
.domain([0, d3.max(series, (s) => d3.max(s.values, (d) => d.value))]).nice()
.range([height - margin.bottom, margin.top])
{
const svg = d3.select(DOM.svg(width, height));
// Draw the x and y axes.
svg.append('g').call(xAxis('Date'));
svg.append('g').call(yAxis('$ Close'));
// Draw the lines.
svg.append('g')
.selectAll('path')
.data(series)
.join('path')
.attr('d', (d) => line(d.values));
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.
