EJ Fox & Ian Johnson
streaming data, code, acid, design
lineSize = 6
demOrientation = "6/8"
blue = "#002868"
red = "#bf0a30"
demRamp = [
// textures
// .paths()
// .d("crosses")
// .size(lineSize * 0.75)
// .lighter()
// .thicker(),
textures
.lines()
.stroke(blue)
.orientation(demOrientation)
.size(lineSize),
textures
.lines()
.stroke(blue)
.orientation(demOrientation)
.size(lineSize)
.heavier(1),
textures
.lines()
.stroke(blue)
.orientation(demOrientation)
.size(lineSize)
.heavier(2),
textures
.lines()
.stroke(blue)
.orientation(demOrientation)
.size(lineSize)
.heavier(3)
]
repRamp = [
// textures
// .paths()
// .d("crosses")
// .size(lineSize * 0.75)
// .lighter()
// .thicker(),
textures
.lines()
.stroke(red)
.orientation(repOrientation)
.size(lineSize),
textures
.lines()
.stroke(red)
.orientation(repOrientation)
.size(lineSize)
.heavier(1),
textures
.lines()
.stroke(red)
.orientation(repOrientation)
.size(lineSize)
.heavier(2),
textures
.lines()
.stroke(red)
.orientation(repOrientation)
.size(lineSize)
.heavier(3)
]
ramp2 = [
textures
.lines()
.size(lineSize)
.lighter(),
textures.lines().size(lineSize),
textures
.lines()
.size(lineSize)
.heavier(1),
textures
.lines()
.size(lineSize)
.heavier(2),
textures
.lines()
.size(lineSize)
.heavier(3)
]
// ramp2 = [
// textures
// .lines()
// .size(18)
// .lighter(),
// textures
// .lines()
// .size(12)
// .lighter(),
// textures
// .lines()
// .size(7)
// .lighter(),
// textures
// .lines()
// .size(5)
// .lighter(),
// textures.lines().size(5),
// textures.lines().heavier(3),
// textures.lines().heavier(4)
// ]
// ramp2 = [
// textures
// .lines()
// .size(18)
// .lighter(),
// textures.lines().size(5),
// textures.lines().heavier(3)
// ]
ramp2.map(t => t.url())
legendSize = 50
processed = countyElectionResults.map(d => {
return {
...d,
combined_fips: d.combined_fips,
relative_diff: +d.diff / +d.total_votes,
dem: +d.votes_dem,
rep: +d.votes_gop,
total: +d.total_votes,
winner: +d.votes_dem > +d.votes_gop ? "dem" : "rep"
};
})
countyElectionResults
processed.filter(d => d.winner == "dem")
data2 = new Map(processed.map(d => [d.combined_fips, d]))
diffExtent = d3.extent(countyElectionResults, d => +d.diff / +d.total_votes)
// q = d3.scaleQuantize([1, 10], ramp2)
q = d3.scaleQuantize(diffExtent, ramp2)
// q = d3.scaleQuantize([1, 10], ramp2)
qDem = d3.scaleQuantize(diffExtent, demRamp)
// q = d3.scaleQuantize([1, 10], ramp2)
qRep = d3.scaleQuantize(diffExtent, repRamp)
qLegend = d3.scaleQuantize(diffExtent, d3.range(0, 10))
ramp = [
makePattern(svg`<defs><pattern x="0" y="0" width="0" height="0" patternUnits="userSpaceOnUse">
</pattern></defs>`),
makePattern(svg`<defs><pattern x="0" y="0" width="1" height="4" patternUnits="userSpaceOnUse">
<line x1="0" y1="1" x2="1" y2="1" stroke="currentColor" stroke-width="1" />
</pattern></defs>`),
makePattern(svg`<defs><pattern x="0" y="0" width="1" height="4" patternUnits="userSpaceOnUse">
<line x1="0" y1="1" x2="1" y2="1" stroke="currentColor" stroke-width="2" />
</pattern></defs>`),
makePattern(svg`<defs><pattern x="0" y="0" width="1" height="4" patternUnits="userSpaceOnUse">
<line x1="0" y1="1" x2="1" y2="1" stroke="currentColor" stroke-width="4" />
</pattern></defs>`),
makePattern(svg`<defs><pattern x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
<rect fill="currentColor" width="4" height="4" />
</pattern></defs>`)
]
makePattern = defs => {
let id = DOM.uid();
defs.querySelector('pattern').id = id.id;
defs.toString = () => id.toString();
return defs;
}
import { countyElectionResults } from '@codingwithfire/where-are-votes-at-risk'
textures = require("textures")
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.
