Award-winning creative focused on data-driven art and visualizations, trying to push the boundaries of the web one visual story at a time ✨
year = 2016
colors
totalData = sumData({
E1d: 'Rejected provisional ballots',
E1c: 'Partially counted provisional ballots',
E1b: 'Fully counted provisional ballots',
})
margin = new Object({left: 80, top: 80, right: 80, bottom: 80})
widthScale = d3.scaleLinear().domain([0, total]).range([0, 2 * width - margin.right - margin.left])
{
const barHeight = 75
const render = _.map([
{color: 'orange', data: _.values(rejectedData), height: barHeight},
{color: 'orange', data: _.sortBy(_.values(otherData), d => -d.sum), height: barHeight},
{color: 'green', data: _.values(totalData).reverse(), height: barHeight},
], ({color, height, data}) => {
let x = margin.left
return _.map(data, ({label, sum}) => {
return {
x1: x, x2: x += widthScale(sum),
color, height,
text: `${label} ${d3.format(',')(sum)}`,
}
})
})
const svg = d3.select(DOM.svg(width, height))
// patterns
const patterns = _.reduce(_.keys(colors), (obj, color) => {
obj[color] = textures
.lines()
.heavier()
// .thicker()
.stroke(colors[color])
svg.call(obj[color])
return obj
}, {})
// render bars
const parts = svg.selectAll('g')
.data(render).join('g')
.attr('transform', (d, i) => `translate(0, ${i * 1.5 * barHeight + margin.top})`)
const bars = parts.selectAll('g')
.data(d => d).join('g')
.attr('transform', d => `translate(${d.x1}, 0)`)
bars.append('rect')
.attr('width', d => d.x2 - d.x1)
.attr('height', d => d.height)
.attr('fill', d => patterns[d.color].url())
.attr('stroke', '#fff')
.attr('stroke-width', 3)
bars.append('text')
.attr('y', d => d.height / 2)
.text(d => d.text)
return svg.node()
}
d3 = require('d3')
_ = require('lodash')
textures = require('textures')
import {masterData, masterKeys} from '6cc733f467fac0dc'
import {width, height, colors} from '678eab71089ff43a'
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.
