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')
.style('mix-blend-mode', 'screen');
svg
.selectAll('.smallest')
.data([cleanedDays[0]])
.enter()
.append('path')
.attr('d', d => {
return line(d.values);
})
.style('stroke', 'blue')
.style('stroke-width', '4px')
.style('fill', 'none');
svg
.selectAll('.biggest')
.data([cleanedDays[cleanedDays.length - 1]])
.enter()
.append('path')
.attr('d', d => {
return line(d.values);
})
.style('stroke', 'red')
.style('stroke-width', '4px')
.style('fill', 'none');
return svg.node();
}
cleanedDays[0]
cleanedDays = Array.from(grouped)
.map(d => {
let stdDev = getStandardDeviation(
d[1].map(d => {
return d.value;
})
);
return { day: d[0], values: d[1], stddev: stdDev };
})
.sort((a, b) => {
return a.stddev - b.stddev;
})
.filter(d => {
return d.values.length >= 100;
})
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.
