{ const height = width const margin = {left: 40, top: 40, right: 40, bottom: 40} // start with scales // x, y, radius, gradient/color const xScale = d3.scaleLinear() .domain(d3.extent(data, d => d.margin)).nice() .range([margin.left, width - margin.right]) const x0 = xScale(0) const yScale = d3.scaleLinear() .domain(d3.extent(data, d => d.income)).nice() .range([height - margin.bottom, margin.top]) const medianIncome = d3.median(data, d => d.income) const medianY = yScale(medianIncome) // since we're using radius we need to use sqrt const radiusScale = d3.scaleSqrt() .domain(d3.extent(data, d => d.numPrecincts)) .range([5, 50]) const colorScale = chroma.scale(["#fcf76e", "#7a3a95"]) .mode('lch') .domain(d3.extent(data, d => d.delay)) // translate data to screen space const render = _.chain(groupedByFIPS) .map(d => { return { id: d.FIPS, group: d.state, x: xScale(d.margin), y: yScale(d.income), r: radiusScale(d.numPrecincts), color: colorScale(d.delay).css(), } }).sortBy(d => -d.r) .value() const lineGen = d3.line() let renderContours = _.chain(render) .groupBy('group') .filter((counties, state) => counties.length > 1 && _.includes(swingStates, state)) .value() renderContours = _.chain(renderContours) .map((counties, i) => { const {x, y, group} = counties[0] const points = _.chain(counties) .map(({x, y, r}) => { r += 8 const points = Math.ceil(2 * Math.PI * r) const perAngle = (2 * Math.PI) / points return _.times(points, i => [x + r * Math.cos(i * perAngle), y + r * Math.sin(i * perAngle)]) }).flatten().value() return { x, y, group, color: d3.interpolateRainbow(i / renderContours.length), path: lineGen(d3.polygonHull(points)), } }).flatten().value() console.log(renderContours) const arrowSize = 6 const svg = this ? d3.select(this).select('svg') : d3.select(html` `) const div = this ? d3.select(this).select('div') : d3.select(html`

median income

Democratic victory

Republican victory

higher income counties that voted Democratic in 2016

lower income counties that voted Democratic in 2016

higher income counties that voted Republican in 2016

lower income counties that voted Republican in 2016

`) // add in gradient for margin this || svg.select('defs').call(linearGradient, 'gradient', [ {color: colors.blue, opacity: 1}, {color: colors.white, opacity: 0.25}, {color: colors.red, opacity: 1}, // x1, x2, y1, y2 ], margin.left, width - margin.right, 0, 0) // add in arrow markers this || svg.select('defs').call(arrowMarker, [ {id: 'red', color: colors.red}, {id: 'blue', color: colors.blue}, {id: 'black', color: colors.black}, ], arrowSize) // animation const t = svg.transition().duration(250) // draw dots svg.select('#dots').selectAll('circle') .data(render, d => d.id).join('circle') .attr('transform', d => `translate(${d.x}, ${d.y})`) // .attr('fill-opacity', 0.85) // .style('mix-blend-mode', 'multiply') .transition(t) .attr('r', d => d.r) .attr('fill', d => d.color) .attr('stroke', d => d.color) // draw axes const fontSize = 12 let yAxis = svg.select('#yAxis') .attr('transform', `translate(${x0}, 0)`) yAxis.select('#up') // line going up .attr('y1', medianY - fontSize * 1.5) .attr('y2', margin.top) yAxis.select('#down') // line going down .attr('y1', medianY + fontSize * 1.5) .attr('y2', height - margin.bottom) // median div.select('#median') .style('left', `${x0}px`) .style('top', `${medianY}px`) .select('#income') .text(d3.format('$,')(_.round(medianIncome))) const xAxis = svg.select('#xAxis') .attr('transform', `translate(0, ${medianY})`) .attr('stroke', 'url(#gradient)') xAxis.select('#left') .attr('x1', x0 - fontSize * 5) .attr('x2', margin.left) xAxis.select('#right') .attr('x1', x0 + fontSize * 5) .attr('x2', width - margin.right) // labels div.selectAll('#dem, #rep') .style('top', `${medianY - 1.5 * fontSize}px`) div.select('#dem') .style('color', colors.blue) .style('left', `${margin.left + 1.25 * fontSize}px`) div.select('#rep') .style('color', colors.red) .style('right', `${margin.right + 1.25 * fontSize}px`) // contours // const states = svg.select('#contours').selectAll('g') // .data(renderContours).join('g') svg.select('#contours').selectAll('path') .data(renderContours).join('path') // states.append('path') .attr('id', d => `path${d.group}`) .attr('fill', colors.gray) .attr('fill-opacity', 0.1) .attr('stroke', colors.gray) .attr('stroke-opacity', 0.5) .attr('stroke-width', 2) .transition(t) .attr('d', d => d.path) // states.append('text') // .append('textPath') // .attr('href', d => `#path${d.group}`) // .attr('startOffset', 100) // // .attr('x', d => d.x) // // .attr('y', d => d.y) // .text(d => d.group) return html`

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

` }