d3 = require("d3@5")
data = (d3.csvParse(await FileAttachment("GOOG.csv").text(), d3.autoType)).map(({Date, Close}) => ({date: Date, value: Close}))
xScale = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
yScale = d3.scaleLinear()
.domain([0, d3.max(data, (d) => d.value)]).nice()
.range([height - margin.bottom, margin.top])
xAxis = (g) => g
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale))
yAxis = (g) => g
.attr('transform', `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale))
line = d3.line()
.defined(d => !isNaN(d.value))
.x(d => xScale(d.date))
.y(d => yScale(d.value))
{
// Create an empty SVG with specified width and height.
const svg = d3.select(DOM.svg(width, height));
// Draw the x and y axes.
svg.append('g').call(xAxis)
svg.append('g').call(yAxis)
// Draw the line.
svg.append('path')
.datum(data)
.attr('d', line);
return svg.node();
}
html`
<style>
path {
fill: none;
stroke: steelblue;
stroke-width: 1.5;
stroke-linejoin: round;
stroke-linecap: round;
}
</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.
