viewof endMinutes = Inputs.range([0, 1440], {
value: 1440,
step: 1,
label: "End Minutes"
})
chart = {
let r = 10,
spacing = 20;
const svg = d3
.create("svg")
.attr('width', width)
.attr('height', height);
svg
.append('rect')
.attr('width', width)
.attr('height', height + 20)
.style('fill', '#121212');
let allContainer = svg.append('g').attr('transform', 'translate(30, 20)');
let yAxis = svg
.append("g")
.attr('id', 'y-axis')
.call(yAxisGenerator)
.call(g => g.select(".domain").remove());
yAxis.selectAll('text').style('fill', d => {
return '#aaa';
});
svg.selectAll('.tick line, .domain').style('stroke', '#444');
svg
.selectAll('.trace')
.data(cleanedDays)
.enter()
.append('path')
.attr('d', d => {
return line(d.values);
})
.attr('class', 'trace')
.style('fill', 'none')
.style('stroke', 'rgba(255,255,255,.2)')
.style('stroke-width', '2px');
return svg.node();
}
cleanedDays = Array.from(grouped).map(d => {
return { day: d[0], values: d[1] };
})
line = d3
.line()
.defined(d => !isNaN(d.value))
.x(d => xScale(d.minutes))
.y(d => yScale(d.value))
.curve(d3.curveMonotoneX)
yScale.domain()
yAxisGenerator = g =>
g
.attr("transform", `translate(${width - margin.right - margin.left / 2},0)`)
.call(
d3
.axisRight(yScale)
.ticks(4)
.tickSize(-width + margin.left + margin.right + 5)
)
.call(g => g.select(".domain").remove())
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.
