lineChart = { const {height, margin, render, xAxisLabels, yAxisLabels} = renderData const div = this ? d3.select(this).select('div') : d3.select(html`

Early Voting

Election Day

`) div.style('display', 'none') const svg = this ? d3.select(this).select('svg') : d3.select(DOM.svg(width, height)) svg.style('isolation', 'isolate') // create transition animation localized to svg selection const t = svg.transition().duration(500) // gradient this || svg.call(linearGradient, 'gradient', [ {color: colorScale(0)}, {color: colorScale(0.5)}, {color: colorScale(1)}, ], 0, 0, margin.top, height - margin.bottom) // draw y-axis const fontSize = 14 const yAxis = svg.selectAll('g.yAxis') .data(yAxisLabels).enter().append('g') .classed('yAxis', true) .attr('transform', d => `translate(${margin.left}, ${d.y})`) yAxis.filter(d => d.rect).append('rect') .attr('width', width - margin.left - margin.right) .attr('height', d => d.height) .attr('fill', colors.gray) .attr('opacity', 0.1) yAxis.append('text') .attr('x', 2) .attr('y', -fontSize / 2) .attr('dy', '.35em') .style('font-size', fontSize) .style('font-weight', d => d.bold && 'bold') .text(d => d.text) // draw lines const lines = svg.selectAll('path.line') .data(render, d => d.id) lines.exit().transition(t) .attr('opacity', 0).remove() const enter = lines.enter().append('path') .classed('line', true) .attr('stroke-linecap', 'round') .style('mix-blend-mode', 'multiply') .attr('fill', 'none') .attr('d', d => d.path) lines.merge(enter).transition(t) .attr('d', d => d.path) .attr('stroke', d => d.stroke) .attr('opacity', d => d.opacity) .attr('stroke-width', d => d.strokeWidth) const highlightLine = this ? d3.select(this).select('.highlight') : svg.append('path') highlightLine.classed('highlight', true) .attr('d', '') .attr('fill', 'none') .attr('stroke', colors.highlight) .attr('stroke-width', 10) .attr('opacity', 0.5) enter.on('mouseenter', event => { const datum = event.target.__data__ if (datum.highlight) { div.style('display', 'block') div.select('.name').text(datum.text) div.select('.early').text(datum.texts.early) div.select('.dayOf').text(datum.texts.dayOf) highlightLine.attr('d', datum.path) } else { div.style('display', 'none') highlightLine.attr('d', '') } }) // draw x-axes const axisPadding = 10 const xAxis = svg.selectAll('g.xAxis') .data(xAxisLabels, d => d.type).enter().append('g') .classed('xAxis', true) .attr('transform', d => `translate(${d.x}, ${height - margin.bottom})`) xAxis.append('line') .attr('y2', -height + margin.top + margin.bottom) .attr('stroke', colors.gray) .attr('stroke-dasharray', '10 5') .attr('opacity', 0.5) .style('mix-blend-mode', 'multiply') .style('pointer-events', 'none') xAxis.append('line') .attr('y2', axisPadding) .attr('stroke', colors.black) xAxis.append('text') .attr('y', axisPadding + fontSize / 2) .attr('dy', '.35em') .attr('text-anchor', 'middle') .style('font-size', fontSize) .style('font-weight', 'bold') .text(d => d.label) return html`

${svg.node()} ${div.node()}

` }