Plot.geo(precincts, {fill: (d) => d.properties.dem_votes}).plot({
width: 450,
height: 454,
marginBottom: 2,
marginLeft: 70,
projection: {
type: "Mercator",
domain: precincts
},
color: {
type: "quantile",
n: 8,
scheme: "blues",
label: "Dem votes",
legend: true
}
})
percent = d3.format(".2%") // Function to convert values to percent format with two digits
addTooltips( // Add tooltips
Plot.plot({
projection: {
type: "Mercator",
domain: precincts,
width: 450,
height: 454,
marginBottom: 2,
marginLeft: 70,
},
marks: [
Plot.geo(precincts, {
fill: (d) => (d.properties.dem_votes/(d.properties.rep_votes+d.properties.dem_votes+
d.properties.other_votes + d.properties.lib_votes)*100),
title: (d) =>
`County: ${d.properties.NAME}\n DVotes: ${d.properties.dem_votes}\nRVotes: ${d.properties.rep_votes} \n Precinct: ${d.properties.PRECINCT}`
}),
Plot.geo(co_counties2, { stroke: "#e2e2e2" }), // Updated stroke color for state boundaries
],
caption: htl.html`Colorado Precinct 2020`,
color: {
type: "linear",
n: 5,
scheme: "blues",
label: "% Democratic Vote",
legend: true
}
})
)
addTooltips( // Add tooltips
Plot.plot({
projection: {
type: "Mercator",
domain: precincts
},
marks: [
Plot.geo(precincts, {
fill: (d) => (d.properties.rep_votes/(d.properties.rep_votes+d.properties.dem_votes+
d.properties.other_votes + d.properties.lib_votes)*100),
title: (d) =>
`County: ${d.properties.NAME}\nDVotes: ${d.properties.dem_votes}\nRVotes: ${d.properties.rep_votes}\nPrecinct: ${d.properties.PRECINCT}`
}),
Plot.geo(co_counties2, { stroke: "#e2e2e2" })
],
caption: htl.html`Colorado Precinct 2020`,
color: {
type: "linear",
n: 5,
scheme: "reds",
label: "% Republican Vote",
legend: true
}
})
)
addTooltips( // Add tooltips
Plot.plot({
projection: {
type: "Mercator",
domain: precincts
},
marks: [
Plot.geo(precincts, {
fill: (d) => (d.properties.dem_votes - d.properties.rep_votes)/(d.properties.rep_votes+d.properties.dem_votes+
d.properties.other_votes + d.properties.lib_votes)*100,
title: (d) =>
`County: ${d.properties.NAME}\nDVotes: ${d.properties.dem_votes}\nRVotes: ${d.properties.rep_votes}\nPrecinct: ${d.properties.PRECINCT}`
}),
Plot.geo(co_counties2, { stroke: "#e2e2e2" })
],
caption: htl.html`Colorado Precinct 2020`,
color: {
type: "diverging",
scheme: "rdbu",
legend: true,
pivot: 15,
symmetric: true
},
})
)
precincts = topojson.feature(votes, votes.objects.votes)
votes = FileAttachment("votes.topojson").json()
counties2 = FileAttachment("counties2.json").json()
co_counties2 = counties2.features.filter(d => d.properties.STATE === "08")
counties = FileAttachment("counties.json").json()
co_counties = counties.filter(d => d.id.startsWith("08"))
import {addTooltips} from "@mkfreeman/plot-tooltip"
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.
