Colorado Precinct Map with Tooltips
Plot.geo(counties, {fill: (d) => d.properties.Democrats}).plot({
projection: "albers-usa",
height: 800,
width: 800,
margin: 5,
color: {
type: "quantile",
n: 8,
scheme: "blues",
label: "Unemployment (%)",
legend: true
},
})
map = {
const width = 800;
const height = 600;
//const projection = d3
//.geoAlbersUsa() // composite projection of the United States
//.translate([width / 2, height / 2]) // fit our map a little better
//.fitSize([width, height], json);
const projection = d3.geoMercator()
.fitExtent([[20, 20], [width, height]], counties)
const path = d3.geoPath().projection(projection); //display our geographic data
const svg = d3
.select(DOM.element('svg'))
.attr('width', width)
.attr('height', height)
.style("width", "100%")
.style("height", "auto")
// go through each state and assign all of our values
// for (let j = 0, jmax = counties.features.length; j < jmax; j++) {
// const name = counties.features[j].properties.LABEL;
//}
svg
.selectAll("path")
.data(counties.features)
.enter()
.append("path")
.attr("d", path)
.style('stroke', 'white')
.attr('stroke', 'gray')
.text('test')
.style('fill', "steelblue")
//const tooltip = svg.append('g');
svg.append('g').selectAll('path')
.data(precincts.features)
.enter().append('path')
.attr('d', path)
// Styling
.style('fill', 'none')
.style('stroke', 'white')
.style("stroke-width", .5)
.on('touchmove mousemove', function(d) {
const name1 = d.properties.NAME;
const [x, y] = d3.mouse(this);
// call the tooltip
// the .call is used to display what to see when the mouse goes over a state, in this case the name
tooltip
.attr('transform', `translate(${x},${y})`)
.call(callout, `${name1}`);
})
.on('touchend mouseleave', () => tooltip.call(callout, null));
const zoom = d3.zoom()
.scaleExtent([1, 8])
.on('zoom', function() {
const { transform } = d3.event;
svg // .selectAll('path')
.attr('transform', transform);
});
svg.call(zoom);
const tooltip = svg.append('g');
yield svg.node();
svg
.append('g')
.attr('style', "font-family: 'Lato';")
.attr(
'transform',
);
}
mapColor = "#343083"
callout = (g, value) => {
if (!value) return g.style("display", "auto");
g
.style("display", null)
.style("pointer-events", "auto")
.style("font", "10px sans-serif");
const path = g.selectAll("path")
.data([null])
.join("path")
.attr("fill", "white")
.attr("stroke", "black");
const text = g.selectAll("text")
.data([null])
.join("text")
.call(text => text
.selectAll("tspan")
.data((value + "").split(/\n/))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i) => `${i * 1.1}em`)
.style("font-weight", (_, i) => i ? null : "bold")
.html(function(d){
return d}));
const {x, y, width: w, height: h} = text.node().getBBox(); // the box that our text is in
// place the text
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);
}
precincts = (await fetch("https://raw.githubusercontent.com/marilynwaldman/-CO-shapefiles/main/CO_precincts.geojson")).json()
counties = (await fetch("https://raw.githubusercontent.com/marilynwaldman/-CO-shapefiles/main/co_counties_voters.geojson")).json()
d3 = require("https://d3js.org/d3.v5.min.js", "d3-svg-legend@2")
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.
