Award-winning creative focused on data-driven art and visualizations, trying to push the boundaries of the web one visual story at a time ✨
Published
Edited
Oct 25, 2020
6 stars
highlightEarly = highlights.early.map(d => normalizeEarly(d))
highlightDayOf = highlights.dayOf.map(d => normalizeDayOf(d))
maxEarlyRatio = _.ceil(d3.max(showData, d => d.earlyRatio), -1)
medianEarlyRatio = d3.median(showData, d => d.earlyRatio)
meanEarlyRatio = d3.mean(showData, d => d.earlyRatio)
maxDayOfRatio = _.ceil(d3.max(showData, d => d.dayOfRatio), -1)
medianDayOfRatio = d3.median(showData, d => d.dayOfRatio)
maxTimes = _.ceil(d3.max(showData, d => d.times))
meanTimes = d3.mean(showData, d => d.times)
medianTimes = d3.median(showData, d => d.times)
minPOC = d3.min(showData, d => d.poc)
medianPOC = d3.median(showData, d => d.poc)
maxPOC = d3.max(showData, d => d.poc)
colors = new Object({
gray: '#AEA2B1',
black: '#2D1832',
highlight: '#FFED6B',
})
colorScale = chroma.scale(["#ff8464", "#41c6fa"].map(color => chroma(color).saturate(2))).mode('lch')
alternateColorScale = chroma.scale(["#ffeaf9", "#1b0050"].map(color => chroma(color).saturate(0))).mode('lch')
linearGradient = (selection, id, colors, x1, x2, y1, y2) => {
selection.append('defs')
.append('linearGradient')
.attr('id', id)
.attr('gradientUnits', 'userSpaceOnUse')
.attr('x1', x1).attr('x2', x2)
.attr('y1', y1).attr('y2', y2)
.selectAll('stop')
.data(colors).join('stop')
.attr('offset', (d, i) => `${Math.floor(i * 100 / (colors.length - 1))}%`)
.attr('stop-color', d => d.color)
.attr('stop-opacity', d => d.opacity > -1 ? d.opacity : 1)
}
normalizeEarly = d3.scaleLinear().range([0, maxEarlyRatio])
normalizeDayOf = d3.scaleLinear().range([0, maxDayOfRatio])
d3 = require('d3')
_ = require('lodash')
chroma = require('chroma-js')
years = [2016, 2018]
data = new Object({
counties: {
2018: cleanData(await FileAttachment("countiesData2018@1.csv").csv()),
2016: cleanData(await FileAttachment("countiesData2016@2.csv").csv()),
},
states: {
2018: cleanData(await FileAttachment("statesData2018@2.csv").csv()),
2016: cleanData(await FileAttachment("countiesData2016@3.csv").csv()),
}
})
cleanData = (data) => {
_.each(data, d => {
_.each([
'early', 'dayOf', 'earlyRatio', 'dayOfRatio',
'dayOfPoll', 'earlyPoll', 'earlyDuration',
'income', 'inequality', 'poc',
], key => {
d[key] = +d[key] || 0
})
d.times = d.dayOfRatio / d.earlyRatio
})
return _.filter(data, d => d.earlyDuration && d.earlyRatio)
}
countiesData = data.counties[year]
statesData = data.states[year]
import { vl } from "@vega/vega-lite-api"
import {scrollSVG} from '@sxywu/utility-functions'
import {form} from "@mbostock/form-input"
import {select, autoSelect} from "@jashkenas/inputs"
import {rangeSlider} from '@mootari/range-slider'
import {inputsGroup} from '@bumbeishvili/input-groups'
style = html`
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&family=Work+Sans:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
body, select, option {
font-family: 'Work Sans', sans-serif;
line-height: 1.5;
}
h1, h2 {
font-family: 'Playfair Display', serif;
}
select {
padding: 2px 5px;
font-size: 16px;
max-height: 100px;
min-width: 300px;
}
.highlight {
display: inline-block;
background-color: ${colors.highlight};
padding: 0px 10px;
margin-top: 5px;
border-radius: 5px;
}
</style>
`
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.
