voter_map = { let svg = d3.create("svg").attr("width", w).attr("height", h); let map = svg.append("g"); map .append("g") .selectAll("path.boundary") .data(precinct_data.features) .join("path") .attr("class", "boundary") .attr("data-district_votes", function (o) { console.log(o); return `${o.properties.enr_desc}---${o.properties.dvotes}---${o.properties.rvotes}`; }) .attr("fill", function (d) { let total = d.properties.dvotes + d.properties.rvotes; return d3.interpolateRdBu(d.properties.dvotes / total); }) // .attr("fill-opacity", 0) .attr("stroke", "#333") .attr("stroke-width", 0.2) .attr("stroke-linejoin", "round") .attr("d", path) .on("pointerenter", function () { // d3.selectAll("path.boundary").attr("fill-opacity", 0.4); d3.select(this).attr("stroke-width", 3).raise(); }) .on("pointerleave", function () { d3.selectAll("path.boundary").attr("stroke-width", 0.5); }); map .selectAll("path.boundary") .nodes() .forEach(function (d, i) { let [precinct, dem, rep] = d .getAttribute("data-district_votes") .split("---"); dem = parseInt(dem); rep = parseInt(rep); let total = dem + rep; let dprop = dem / total; let rprop = rep / total; let dpct = d3.format("0.1%")(dem / total); let rpct = d3.format("0.1%")(rep / total); let content = `

${precinct}

Dem vote: ${dpct}

Rep vote: ${rpct}

`; tippy(d, { content: content, allowHTML: true, theme: "light-border", followCursor: true, offset: [0, 20] }); }); map .append("g") .selectAll("path.road") .data(road_data.features) .join("path") .attr("class", "road") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("d", path) .style("pointer-events", "none"); map .append("g") .selectAll("path.road") .data(road_data.features) .join("path") .attr("class", "road") .attr("fill", "none") .attr("stroke", "#eee") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("d", path) .style("pointer-events", "none"); svg.call( d3 .zoom() .extent([ [0, 0], [w, h] ]) .translateExtent([ [0, 0], [w, h] ]) .scaleExtent([1, 6]) .duration(500) .on("zoom", function (evt, a, b) { map.attr("transform", evt.transform); }) ); return svg.node(); }