MBA Candidate at Columbia, Software Engineer, Former Managing Web Editor @ The Michigan Daily. Building things I can see.
Published
Edited
Mar 1, 2022
Importers
14 stars
colorChangeRamp(d3.interpolateRdBu)
colorChangeRamp(interpolateFiveThirtyEightRdBu)
colorChangeRamp(interpolateFiveThirtyEightRdPuBu)
interpolateFiveThirtyEightRdBu = d3.interpolateRgbBasis(
schemeFiveThirtyEightRdBu
)
schemeFiveThirtyEightRdBu = [
...['#af3f38', '#fa5a50', '#ff998a', '#ffcec5'], // reds, dark to light
'#eae3ea', // gray
...['#c8cae3', '#9197c8', '#5768ac', '#3d4978'] // blues, light to dark
]
interpolateFiveThirtyEightRdPuBu = d3.interpolateRgbBasis(
schemeFiveThirtyEightRdPuBu
)
schemeFiveThirtyEightRdPuBu = [
"#e85847", // red
"#8265ae", // purple
"#4591e3" // blue
]
marginScale = d3.scaleDiverging(colors).domain([-maxMargin, 0, maxMargin])
viewof maxMargin = Inputs.range([1, 100], {
step: 1,
value: 80,
label: "Max Margin"
})
viewof maxMargin2 = Inputs.range([1, 100], {
step: 1,
value: 30,
label: "Max Margin"
})
viewof colors = Inputs.select(
new Map([
['d3.interpolateRdBu', d3.interpolateRdBu],
['interpolateFiveThirtyEightRdBu', interpolateFiveThirtyEightRdBu],
['interpolateFiveThirtyEightRdPuBu', interpolateFiveThirtyEightRdPuBu]
]),
{ value: interpolateFiveThirtyEightRdBu, label: "Color Interpolator" }
)
viewof colors2 = Inputs.select(
new Map([
['d3.schemeRdBu', d3.schemeRdBu[11]],
['schemeFiveThirtyEightRdBu', schemeFiveThirtyEightRdBu],
['schemeFiveThirtyEightRdPuBu', schemeFiveThirtyEightRdPuBu]
]),
{ value: schemeFiveThirtyEightRdPuBu, label: "Color Scheme" }
)
counties = topojson
.feature(us, us.objects.counties)
.features.map(county => {
const countyData = countyMap[county["id"]];
if (!countyData) return null;
return {
...county,
margin: countyData
};
})
.filter(d => d)
stateData = nytData.data.races.map(s => {
return {
name: s.state_name,
abbr: s.state_id,
countyCount: s.counties.length,
margin:
s.leader_margin_value * (s.leader_party_id == "republican" ? -1 : 1),
votes: s.votes
};
})
countyMap = {
const map = {};
nytData.data.races.forEach(s => {
s.counties.forEach(c => {
map[c.fips] =
c.leader_margin_value * (c.leader_party_id == "republican" ? -1 : 1);
});
});
return map;
}
nytData = d3.json(
"https://static01.nyt.com/elections-assets/2020/data/api/2020-11-03/national-map-page/national/president.json"
)
import { PINNED } from '@mootari/signature'
import { us, states } from '@mbostock/ancestry-by-u-s-county'
topojson = require("topojson-client@3")
import { ramp as colorChangeRamp } from '@fil/perceptually-uniform'
import { ramp } from '@mbostock/color-ramp'
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.
