multilinechart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const tooltip = d3.select('body')
.append('div')
.attr('id', 'scatter-tooltip')
.style('position', 'absolute')
.style('z-index', '1')
.style('visibility', 'hidden')
.style('padding', '10px')
.style('background', 'rgba(255,255,255,0.95)')
.style('border-radius', '2px')
.style('color', '#333');
const tooltipLine = svg.append('line');
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.selectAll('.line')
.data(dataGroup)
.join('path')
.attr("class", "line")
.attr("d", d => lineMultiCases(d[1]))
.attr("stroke", d => colorScale(d[0]))
.style("fill", "none")
.style("stroke-width", 2)
.on("mouseover", function(e,d,i) {
let tooltipWidth = tooltip.node().offsetWidth;
let tooltipHeight = tooltip.node().offsetHeight;
let date = x.invert(e.pageX);
tooltip
.style("left", e.pageX - tooltipWidth/2 +'px')
.style("top", e.pageY-tooltipHeight - 10+'px')
.style('visibility', 'visible')
.html(`<b>Country</b>: ${d[0]}<br/>
<b>Date</b>:
${date.toLocaleString('default', { month: 'short' })}
${date.getDate()}<br/>`);
// <b>Cases</b>: ${cases}
d3.select(this);
tooltipLine.attr('stroke', 'grey')
.attr('x1', e.pageX)
.attr('x2', e.pageX)
.attr('y1', 0 + margin.top)
.attr('y2', height - margin.bottom);
return console.log(Math.floor(y.invert(e.pageY)));})
.on("mouseout", function(e,d) {
tooltip
.style('visibility', 'hidden');
if (tooltipLine) tooltipLine.attr('stroke', 'none');
d3.select(this)});
svg.call(legend);
return svg.node();
}
dataGroup[0][1][1]
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.
