Filter D3 Albers Projection by State / Matt

viewof countyMap = {

// center and scale state

const projection = d3.geoIdentity()

.fitSize([width, height], topojson.feature(geo, geo.objects.states.geometries.find(f => f.id === "48")));

const path = d3.geoPath();

path.projection(projection);

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewbox", [0, 0, width, height]);

// draw counties

svg.append("g")

.selectAll("path")

.data(topojson.feature(geo, geo.objects.counties).features.filter(d => d.id.slice(0, 2) === "48"))

.join("path")

.attr("fill", d => colorScale(turnoutPerc.get(d.id)))

.attr("d", path)

.on('mousemove', (event,d) => {

console.log(d.id.includes("48"))

d3.select(event.currentTarget)

.raise()

.style('stroke', "#000")

.style('stroke-width', 2)

.style('cursor', 'pointer');

event.preventDefault();

let [x,y] = d3.pointer(event)

let ttPos = positionTooltip(x,y);

let countyData = {

showTT: true,

FIPS: d.id,

mouse: {x: ttPos.x, y: ttPos.y}

}

updateCurrentCounty(countyData);

})

.on('mouseout', (event, d) => {

updateCurrentCounty({

showTT: false,

FIPS: null

});

d3.select(event.currentTarget).style('stroke', 'none').style('cursor', 'default');

})

.on('mousedown', (event,d) => {

event.preventDefault();

});

function updateCurrentCounty(d){

// emit the id of the current hovered county

svg.node().value = d;

svg.node().dispatchEvent(new CustomEvent("input"));

}

updateCurrentCounty({

showTT: false,

FIPS: null

});

// draw states

svg.append("path")

.datum(topojson.mesh(geo, geo.objects.states.geometries.find(f => f.id === "48"), (a, b) => a !== b))

.attr("fill", "none")

.attr("stroke", "#000")

.attr("stroke-linejoin", "round")

.attr("d", path);

// wrap the svg node in a div to make the whole tooltip thing work

return document.createElement("div").appendChild(svg.node());

}

ttText = {

if (!countyMap.showTT) return;

if (!countyProps) return;

let {countyName, percFromMean, state} = countyProps;

let popFmt = d3.format(",")

let percFmt = d3.format(".1f")

if (state == 'Alaska'){

return `Alaska, ${countyName}!`

}

return percFromMean > 0 ?

`${countyName}!` :

`${countyName}!`

}

tooltip = {

if (!countyMap.showTT) return;

if (!countyProps) return;

const container = d3.create('div')

.attr('id', 'tooltip-container')

// Header

const header = container.append('div')

.attr('class', 'tt-header');

const location = header.append('div')

.attr('class', 'tt-location')

location.append('h1')

.attr('class','tt-county')

.html(countyProps.countyName);

location.append('h2')

.attr('class', 'tt-state')

.html(countyProps.state);

// text

container.append('div')

.attr('class', 'tt-text')

.html(ttText)

return document.createElement('div').appendChild(container.node());

}

d3.min(data, d => d.turnoutPerc)

colorScale = d3.scaleDivergingPow([30, 55.5, 80], d3.interpolateRdYlGn).unknown('#fff');

turnoutPerc = new Map(data.map(d => [d.FIPS, d.turnoutPerc]))

stateAbbrevByFIPS = new Map(data.map(d => [d.FIPS, d.stateAbbrev]))

width = 900

height = .65 * width

data = d3.csvParse(await FileAttachment("tx_turnout_2016_county.csv").text(), d => {

d.totalVotes = +d.totalVotes;

d.VAP = +d.VAP;

d.turnoutPerc = +d.turnoutPerc;

d.nNonVote = +d.nNonVote;

d.percFromMean = +d.percFromMean;

return d;

});

geoTexasCounties = geo.objects.counties.geometries.filter(f => f.id.includes("48"))

geo = FileAttachment("counties-albers-10m-topo@1.json").json()

import {ramp} from "@d3/color-legend"

import {serialize} from "@mbostock/saving-svg"

Purpose-built for displays of data