Award-winning creative focused on data-driven art and visualizations, trying to push the boundaries of the web one visual story at a time ✨
data
colors
renderRects([
{total: Math.ceil((533843893 / 100) - 3 * perImage), color: colors.red},
], 1080, 20, true)
renderRects([
{total: Math.ceil((952239370 / 100) - 6 * perImage), color: colors.blue},
], 1080, 20, true)
{
const house = _.chain(data)
.filter(d => d.legislature === 'HD')
.sortBy(d => -d.voterPower).take(9)
.map(({pending}) => {
const office = `${pending[0].office.split('-')[2]}`
return _.chain(pending)
.filter(d => _.includes(['R', 'D'], d.party))
.map(d => {
return {
party: d.party,
total: Math.ceil(d.total$ / 100),
color: d.party === 'D' ? colors.blue : colors.red,
text: `${d3.format('$,')(d.total$)}`,
}
}).value()
}).flatten()
.sortBy(d => -1000000 * (d.party === 'D') - d.total)
// .sortBy(d => 1000000 * (d.party === 'D') + d.total)
.value()
return renderRects(house, 1080, 30, true)
}
renderRects = (data, width, size, top) => {
// do 10x10 blocks
const area = Math.pow(size, 2)
const perRow = width / size
let masterY = top ? 0 : height - size
let soFar = 0
const render = _.map(data, ({total, color, text}) => {
// number of cubes
const numCubes = Math.ceil(total / area)
const rects = _.times(numCubes, i => {
i += soFar
return {
x: (i % perRow) * size,
y: masterY + (top ? 1 : -1) * Math.floor(i / perRow) * size
}
})
const rows = Math.floor(numCubes / perRow)
soFar += numCubes - rows * perRow
masterY += (top ? 1 : -1) * rows * size
const {x, y} = _.last(rects)
// const {x, y} = rects[0]
return {color, rects, text, x, y}
})
console.log(render)
const svg = d3.select(DOM.svg(width, height))
// draw rects
const candidates = svg.append('g')
.selectAll('g')
.data(render).join('g')
.attr('fill', d => d.color)
candidates.selectAll('rect')
.data(d => d.rects).join('rect')
.attr('x', d => d.x)
.attr('y', d => d.y)
.attr('width', d => size)
.attr('height', d => size)
svg.append('g').selectAll('text')
.data(render).join('text')
// .attr('text-anchor', 'end')
.attr('transform', d => `translate(${d.x + size - 2}, ${d.y + size / 2})`)
.attr('fill', '#fff')
.text(d => d.text)
return svg.node()
}
import {texas2020 as data, confidenceOrder} from '@sxywu/gerrymandering-data'
d3 = require('d3')
_ = require('lodash')
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.
