forRendering = { // start with scales // x, y, radius, gradient/color const xScale = d3.scaleLinear() .range([margin.left, width - margin.right]) // since we're using radius we need to use sqrt const radius = 6 const radiusScale = d3.scaleSqrt( d3.extent(groupedByFIPS, d => d.issues.length), // domain radiusRange, ) // create bin for histogram layout const threshold = Math.floor(width - margin.left - margin.right) / (radiusRange[1]) const binGen = d3.bin().thresholds(threshold) const formatTime = d3.timeFormat('%I:%M %p') // translate data to screen space let masterY = 0 const render = _.map(dimensions, ({key, label, format, min, max, median, q1, q3}) => { // create an array, where each arrow is a voting problem type const medians = _.chain(groupedByFIPS) // extract the issues from each county .map('issues').flatten() .groupBy('type') .map((issues, type) => { return { type, median: d3.median(issues, d => d[key]), } }).sortBy(d => _.indexOf(typeIDs, d.type)).value() xScale.domain([min, max]) const mainMed = xScale(median) const bins = binGen.value(d => d[key]).domain(xScale.domain())(groupedByFIPS) // only rely on previous dot positions // if the same demographic data was previously rendered let prevDots = prevRender && _.find(prevRender, d => d.key === key) prevDots = prevDots && prevDots.dot const dots = _.chain(bins) .map(bin => { // for each bin, calculate x-position const x = xScale((bin.x0 + bin.x1) / 2) // and also start the y-position at 0 let movingY = -2 return _.chain(bin) .sortBy(d => { // sort by the largest voting problem type const {count, type} = _.sortBy(d.types, d => -d.count)[0] // // then by % of that problem type const typePercent = count / d.issues.length // const radius = radiusScale(d.issues.length) return _.indexOf(typeIDs, type) - typePercent }) .map(d => { // TODO: figure out if we still need previous dot const prevDot = prevDots && _.find(prevDots, ({id}) => d.id === id) // for each dot in the bin, calculate their y-position const radius = radiusScale(d.issues.length) movingY -= radius const y = movingY movingY -= radius // bring some metadata back in for drawing const countyLabel = `${d.county}, ${d.state}` const pies = calculatePiePath(d.types, radius) // metadata for hovering const metadata = _.map(dimensions, ({key, label, format}) => { return `${label}: ${format(d[key])}` }).join('
') const numPrecincts = `Precincts affected (estimate): ${d.numPrecincts}` const issues = _.chain(d.issues) .sortBy(({time}) => time) .map(({description, url, time}) => { return `

${formatTime(convertToEST(time.getTime()))} ${description}

` }).value().join('') return { id: d.FIPSCode, x, y, r: radius, pies, hover: `${countyLabel}

${metadata}
${numPrecincts}

`, select: ` ${countyLabel}

${metadata}

${numPrecincts}

Issues:

${issues}

`, } }).value() }).flatten() .sortBy(d => -d.r).value() const arrows = _.map(medians, ({median, type}, i) => { return { median, type, x1: mainMed, x2: xScale(median), y: (i + 0.5) * 0.75 * fontSize + 0.25 * fontSize, color: colorScale(type), } }) console.log(arrows) // calculate chart height const minY = -d3.min(dots, d => d.y - d.r) const maxY = d3.max(arrows, d => d.y) + 0.5 * fontSize const height = maxY + minY masterY += margin.top const y = masterY + minY masterY += height + margin.bottom return { key, label, format, dots, arrows, median, q1: xScale(q1), q3: xScale(q3), minY, maxY, height, y } }) // draw links // 1. create an artificial root, and that root has a children with all the counties // and each county 3 levels of one child each, where each level is a dimension const links = _.chain(render[0].dots) .map(first => { const second = _.find(render[1].dots, d => d.id === first.id) // const third = _.find(render[2].dots, d => d.id === first.id) let source = first return _.map( [second], // [second, third], (target, i) => { const x1 = source.x const y1 = render[i].y + source.y const x2 = target.x const y2 = render[i + 1].y + target.y const mx = (x1 + x2) / 2 const my = (y1 + y2) / 2 const data = { id: source.id, source, target, path: `M${x1},${y1} Q${x1},${my} ${mx},${my} Q${x2},${my} ${x2},${y2}`, } source = target return data }) }).flatten().value() // put all text in div for easier formatting const texts = _.chain(render) .map(({key, label, format, arrows, medians, median, y, minY, maxY}) => { // for each chart, annotate title & medians const texts = [{ // so first put in title at top left id: 'title', left: margin.left, top: y - minY - margin.top / 2, html: label, class: 'label textblock title middle' }, { // then national median id: 'median', left: arrows[0].x1, top: y + maxY + fontSize / 2, html: `national median: ${format(median)}`, class: 'label textblock center wrap' }] // then go through and annotate each arrow _.each(arrows, ({x1, x2, y: arrowY, median, type}) => { const align = x1 > x2 && 'right' texts.push({ id: `arrow${type}`, left: x2 + (align === 'right' ? -1 : 1) * 3, top: y + arrowY, html: `${type}: ${format(median)}`, class: `label textblock ${align} middle` }) }) return texts }).flatten().value() if (!_.isEqual(prevRender, render)) { mutable prevRender = render } return {render, texts, links, height: masterY} }