// bigG
// .selectAll('g')
// .style('stroke', 'blue')
// .style('stroke-size', 4)
// // .on('mouseover', function(e) {
// // e.currentTarget.style('opacity', 0.3);
// // })
// // .on('mouseover', e => console.log(e.currentTarget))
// .on('mouseover', (e, d) => console.log(`where? ${d.course}`))
// .on('mouseover', e => {
// bigG.selectAll('text').style('stroke', 'green');
// console.log("where?");
// // new from D3 v. 6 use e.currentTarget (not "this")
// console.log(e.currentTarget);
// })
// .on('mouseout', e => bigG.selectAll('text').style('stroke', 'blue'))
// d3
// .select('#ttg')
// .style('stroke', 'red')
// .text('wassup?')
// bigG
// .selectAll('rect')
// .data()
// .call(ttip, d3.select('#ttg'))
tooltip = bigG.append('g')
viewof timeSlider = html`<input min=${timeExtent[0].getTime()} max=${timeExtent[1].getTime()} value=${timeExtent[0].getTime()} style="width:660px" type=range>`
zoom = d3.zoom().on('zoom', event => {
// const rescaleX = d3.event.transform.rescaleX(x);
const rescaleX = event.transform.rescaleX(x);
xAxisG.call(axis.scale(rescaleX));
chPath.call(hullPoints, rescaleX);
gRects
.selectAll('rect.NDL')
.attr('x', d => rescaleX(d.newDeadLine))
.call(ttip, tooltip);
gRects
.selectAll('line.due')
.attr('x2', d => rescaleX(d.due))
.attr('x1', d => rescaleX(d.due));
gRects
.selectAll('line.connect')
.attr('x2', d => rescaleX(d.newDeadLine))
.attr('x1', d => rescaleX(d.due));
})
gSel = bigG
// a group for all the points so I can assign common attributes and styles
.selectAll('g')
.style('stroke', 'black')
// .data needs a selection
.data(deadline_data)
gRects = gSel
// a group for each data point - so I can add text and orbiting moons
.join('g')
.attr('class', 'gRects')
// this is cool...
.call(
appendCircles,
{
color: d => "black", // color(d.course),
fill: d => color(d.course), //d3.rgb(100, 150, 200),
size: d => d.val * (1 - d.done / 100),
tt: d => d.desc
},
x
)
// this depends on ttip and d3 ?
d3.selectAll("rect.NDL").call(ttip, d3.select('#ttg'))
function appendCircles(sel, args) {
// create tooltip for "g" in this sel
// sel.call(ttip, args.tt);
sel
.append('line')
.attr('class', 'connect')
.attr('x1', d => x(d.due))
.attr('y1', d => y(d.cumSum))
.attr('x2', d => x(d.newDeadLine))
.attr('y2', d => y(d.cumSum))
// .attr('stroke', 'red 1px dotted #999')
.attr('stroke', 'blue')
.style('stroke-dasharray', [1, 5]);
sel
.append('line')
.attr('class', 'due')
.style('line', args.color)
.style('fill', args.fill)
.attr('x1', d => x(d.due))
.attr('y1', d => y(d.cumSum))
.attr('x2', d => x(d.due))
.attr('y2', d => y(d.cumSum - d.val * (1 - d.done / 100))) //d => y(d.val * (1 - d.done / 100)))
.attr('stroke', 'red');
sel
.append('rect')
.attr('class', 'NDL')
// .on('mouseover', d => ttG.text(d.desc))
.style('stroke', args.color)
.style('fill', args.fill)
.attr('x', d => x(d.newDeadLine))
.attr('y', d => y(d.cumSum))
.attr('width', 10)
.attr('height', d => y(0) - y(d.val * (1 - d.done / 100)));
}
xAxisG = svg
.append("g")
.attr('transform', `translate(0 ${height - margin.bottom})`)
// .attr("class", "x-axis")
.call(axis)
axxis = d3.axisBottom(x)
color = d3.scaleOrdinal(d3.schemeTableau10).domain(data.map(d => d.course))
tooltip.selectAll("rect").style("fill", 'blue')
timeExtent = [
new Date(Date.now() - 1000 * 60 * 60 * 24),
d3.max(data, d => d.due)
]
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.
