Public
Edited
Apr 1, 2024
{
const svg = d3.create('svg')
.attr('width', w)
.attr('height', h);
const margin = {
left: 30,
right: 20,
top: 20,
bottom: 20
};
dataset.sort((a, b) => d3.ascending(a.date, b.date));
const xScale = d3.scaleTime()
.domain(d3.extent(dataset, d => d.date))
.range([margin.left, w - margin.right]);
const yScale = d3.scaleLinear()
.domain([0,9])
.range([h - margin.bottom, margin.top]);
const xAxis = d3.axisBottom(xScale)
.ticks(d3.timeDay.every(1))
.tickFormat(d3.timeFormat('%a'));
const xAxisGroup = svg.append('g')
.attr('transform', `translate(0, ${h - 20})`)
.call(xAxis);
const yAxis = d3.axisLeft(yScale);
const yAxisGroup = svg.append('g')
.attr('transform', `translate(30, 0)`)
.call(yAxis);
const line = d3.line()
.x(d => xScale(d.date))
.y(d => yScale(d.sleep));
svg.append('path')
.datum(dataset)
.classed('line', true)
.attr('d', line)
.style('fill', 'none')
.style('stroke', 'red')
.style('stroke-width', '3px');
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.
