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';
});
console.log(clicks);
svg.selectAll('.tick line, .domain').style('stroke', '#444');
svg
.selectAll('.trace')
.data(slicedDays)
.enter()
.append('path')
.attr('d', d => {
return line(d);
})
.attr('class', 'trace')
.style('fill', 'none')
.style('stroke', 'rgba(255,255,255,.4)')
.style('stroke-width', '1.5px');
svg
.select('.trace:first-of-type')
.style('stroke', '#fff')
.style('stroke-width', '4px');
return svg.node();
}
randomDays = cleanedDays
.map(days => {
let clickCount = clicks; // hack to reset random values
let fullDays = days.filter(day => {
return day.values.length >= 124;
});
let index = Math.round(Math.random() * fullDays.length - 1);
return fullDays[index];
})
.filter(function(d) {
return d !== undefined;
})
slicedDays = randomDays.map(day => {
return day.values.filter(value => {
return value.minutes <= endMinutes;
});
})
Math.round(Math.random() * 20)
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.
