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 23, 2020
3 forks
47 stars
filteredState = _.find(statesData, d => d.id === filter)
_.sortBy(renderData.render, 'text')
colors = new Object({
gray: '#AEA2B1',
black: '#47535C',
highlight: '#FFED6B',
})
colorScale = chroma.scale(["#ff8464", "#41c6fa"].map(color => chroma(color).saturate(2))).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)
}
d3 = require('d3')
_ = require('lodash')
chroma = require('chroma-js')
countiesData = data.counties[year]
statesData = data.states[year]
import {scrollSVG} from '@sxywu/utility-functions'
import {form} from "@mbostock/form-input"
import {rangeSlider} from '@mootari/range-slider'
import {inputsGroup} from '@bumbeishvili/input-groups'
years = [2016, 2018]
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;
}
label {
display: inline-block;
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.
