Published
Edited
May 14, 2021
chart = {
const svg = d3
.create("svg")
.attr('width', width)
.attr('height', height);
// const activeLines =
data.forEach(function(value, key) {
let dotsActive = svg
.selectAll(`.active-dot[user=${value.get('active')[0].id}]`)
.data(getOffsets(value.get('active')))
.enter()
.append('circle')
.attr('r', 3)
.attr('class', 'active-dot')
.attr('user', d => {
return d.id;
})
.attr('cx', d => {
return xScale(d.time);
})
.attr('cy', d => {
return yScale(d.delta);
})
.style('fill', activeColor);
let dotsSedentary = svg
.selectAll(`.sedentary-dot[user=${value.get('active')[0].id}]`)
.data(getOffsets(value.get('sedentary')))
.enter()
.append('circle')
.attr('r', 3)
.attr('class', 'sedentary-dot')
.attr('user', d => {
return d.id;
})
.attr('cx', d => {
return xScale(d.time);
})
.attr('cy', d => {
return yScale(d.delta);
})
.style('fill', sedentaryColor);
// svg
// .append('path')
// .datum()
// .attr('class', 'active')
// .attr('d', line)
// .style('fill', 'none')
// .style('stroke', 'pink');
svg
.append('path')
.datum(getOffsets(value.get('sedentary')))
.attr('class', 'sedentary-line')
.attr('user', d => {
return d.id;
})
.attr('d', line)
.style('fill', 'none')
.style('stroke', sedentaryColor);
svg
.append('path')
.datum(getOffsets(value.get('active')))
.attr('class', 'active-line')
.attr('user', d => {
return d.id;
})
.attr('d', line)
.style('fill', 'none')
.style('stroke', activeColor);
});
let yAxis = svg
.append("g")
.attr('id', 'y-axis')
.call(yAxisGenerator)
.call(g => g.select(".domain").remove());
let xAxis = svg
.append("g")
.attr('id', 'x-axis')
.call(xAxisGenerator)
.call(g => g.select(".domain").remove());
return svg.node();
}
activeColor = "#999"
data = d3.group(userData, d => d.id, d => d.state)
points = d3.group(userData, d => d.state, d => d.id)
getOffsets = function(data) {
data.sort((a, b) => {
return a.time - b.time;
});
let start = data[0].time;
for (var i = 0; i < data.length; i++) {
let offsetValue = i === 0 ? data[i].glucose : data[i - 1].glucose;
data[i].time = data[i].time - start;
data[i].delta = data[i].glucose / offsetValue;
// 100 / 110
}
return data;
}
line = d3
.line()
.curve(d3.curveMonotoneX)
.x(d => xScale(d.time))
.y(d => yScale(d.deltan))
xScale = d3
.scaleLinear()
.domain([0, 10800])
.range([margin.left, width - margin.right - margin.left])
yScale = d3
.scaleLinear()
.domain([.6, 1.4])
.range([height - margin.bottom, margin.top])
xAxisGenerator = g =>
g.attr("transform", `translate(0,${height - margin.bottom})`).call(
d3
.axisBottom(xScale)
// .tickFormat(d3.timeFormat('%-I:%M %p'))
.tickSizeOuter(0)
)
yAxisGenerator = g =>
g
.attr("transform", `translate(${width - margin.right - margin.left / 2},0)`)
.call(d3.axisRight(yScale).tickSize(-width + 50))
.call(g => g.select(".domain").remove())
smallYAxisGenerator = g =>
g
.attr("transform", `translate(${width - margin.right - margin.left / 2},0)`)
.call(
d3
.axisRight(yScale)
.tickSize(6)
.tickFormat(d => {
return '';
})
)
.call(g => g.select(".domain").remove())
height = 500
margin = ({ top: 30, right: 30, bottom: 50, left: 30 })
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.
