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
.append('path')
.datum(glucoseData)
.attr('d', line)
.style('fill', 'none')
.style('stroke', '#fff')
.style('stroke-width', '2px');
return svg.node();
}
glucoseData = daysToShow === 'All'
? timeInRange
: timeInRange.slice(-daysToShow)
line = d3
.line()
.defined(d => !isNaN(d.value))
.x(d => xScale(d.date))
.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.
