43:["$","title",null,{"children":"An animated cartogram of the US Congress | Kenny Warner | Observable"}] 4b:T3534,{ const width = 960 const height = 600 const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") var centered; var inputValue = "2018"; var time = ["2018","2020","2022","2024"]; var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("background", "black") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden"); const hexTransform = d3.geoTransform({ point: function(x, y) { this.stream.point(x, -y) } }) const albersPath = d3.geoPath(d3.geoAlbersUsa()) const path = d3.geoPath().projection(hexTransform) var color = d3.scaleThreshold() .range(["#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"]) .domain([0.014, 0.032, 0.045, 0.075, 0.1, 0.15, 0.3, 0.56]); var colorFB = d3.scaleThreshold() .range(["#4d9900","#66cc00","#80ff00","#99ff33","#b3ff66","#ccff99"]) .domain([-40000, -15000, -10000, -5000, -2500, 0]); var colorDem = d3.scaleThreshold() .range(["#809fff","#4d79ff","#1a53ff","#0039e6","#002db3", "#002080", "#001a66"]) .domain([1, 2500, 10000, 25000, 40000, 55000, 70000]); var colorRep = d3.scaleThreshold() .range(["#ffcccc","#ff9999","#ff6666","#ff3333","#ff0000","#cc0000", "#990000"]) .domain([1, 2500, 10000, 25000, 40000, 55000, 70000]); function clicked(d) { var x, y, k; if (d && centered !== d) { var centroid = albersPath.centroid(d); x = centroid[0]; y = centroid[1]; k = 4; centered = d; if (k === 4) { var rangeSlider = document.getElementsByClassName("range"); for (var i = 0; i < rangeSlider.length; i++) { rangeSlider[i].style.zIndex = -1; } var rangeLabels = document.getElementsByClassName("range-labels"); for (var i = 0; i < rangeLabels.length; i++) { rangeLabels[i].style.zIndex = -2; } } } else { x = width / 2; y = height / 2; k = 1; centered = null; if (k === 1) { var rangeSlider = document.getElementsByClassName("range"); for (var i = 0; i < rangeSlider.length; i++) { rangeSlider[i].style.zIndex = 2; } var rangeLabels = document.getElementsByClassName("range-labels"); for (var i = 0; i < rangeLabels.length; i++) { rangeLabels[i].style.zIndex = 1; } } } g.selectAll("path") .classed("active", centered && function(d) { return d === centered; }); g.transition() .duration(750) .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")") .style("stroke-width", 1.5 / k + "px"); } svg.append("rect") .attr("class", "background") .attr("width", width) .attr("height", height) .on("click", clicked); const mov_vs_fbByDist18 = {}; const mov_vs_fbByDist20 = {}; const mov_vs_fbByDist22 = {}; const mov_vs_fbByDist24 = {}; movData.forEach(function(d) { d.mov_vs_FB = +d.mov_vs_FB; d.mov_2016 = +d.mov_2016; d.party = d.party; d.pct_change16_20 = +d.pct_change16_20; d.poe_2018 = +d.poe_2018; d.year = +d.year; if (d.year == 2018) { mov_vs_fbByDist18[d.GEOID] = d; } else if (d.year == 2020) { mov_vs_fbByDist20[d.GEOID] = d; } else if (d.year == 2022) { mov_vs_fbByDist22[d.GEOID] = d; } else if (d.year == 2024) { mov_vs_fbByDist24[d.GEOID] = d; } }); var format = d3.format(".2%"); var commas = d3.format(","); function initialState(d){ if (document.getElementById("range").innerHTML == 2018) { if (d.id in mov_vs_fbByDist18) { var green_val = mov_vs_fbByDist18[d.id]; var blue_val = mov_vs_fbByDist18[d.id]; var red_val = mov_vs_fbByDist18[d.id]; if (mov_vs_fbByDist18[d.id]["party"] == "R" && mov_vs_fbByDist18[d.id]["mov_vs_FB"] > 0) { return colorRep(red_val["mov_vs_FB"]); } else if (mov_vs_fbByDist18[d.id]["party"] == "D" && mov_vs_fbByDist18[d.id]["mov_vs_FB"] > 0) { return colorDem(blue_val["mov_vs_FB"]); } else if (mov_vs_fbByDist18[d.id]["mov_vs_FB"] <= 0) { return colorFB(green_val["mov_vs_FB"]); } else { return '#000'; } } else { if (d.properties.PARTY_AFF == "Democrat") { return "#e6ffff"; } else { return "#ffebe6"; } } } } function getCorrespondingHex(state, district) { const stateHex = hex.features.find(f => f.properties.name === state.toUpperCase()) if (stateHex.geometry.type === 'Polygon') return stateHex return { ...stateHex, geometry: { type: 'Polygon', coordinates: stateHex.geometry.coordinates[+district - 1] } } } const features = congress.features.map(feature => { const { CONG_DIST: cd, STATE: state } = feature.properties const hex = getCorrespondingHex(state, cd) return { ...feature, paths: { district: albersPath(feature), hex: path(hex) } } }) const g = svg.append('g') .attr('id', 'map') .attr('transform', 'translate(0, 0) scale(1)') g.attr('data-current', 'albers') g.selectAll("path") .data(features) .enter().append("path") .attr("class", 'cd-path') .style("fill", initialState) .style("stroke", "#595959") .style("stroke-width", "0.15px") .attr('d', d => d.paths.district) .attr('data-district', d => `${d.properties.STATE.toUpperCase()}-${d.properties.CONG_DIST}`) .on("click", clicked) .on("mouseover", function(d) { if (d.id in mov_vs_fbByDist18) { var val = mov_vs_fbByDist18[d.id]; var fill_color = color(val["poe_2018"]); tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "7px solid " + fill_color) .zIndex = 100; tooltip.append("h3") .style("color", "white") .text(val.geolabel); tooltip.append("div") .style("color", "white") .text("Margin of Victory 2016: " + commas(val["mov_2016"])); tooltip.append("div") .style("color", "white") .text("Margin of Victory Compared to Foreign Born Growth: " + commas(val["mov_vs_FB"])); tooltip.append("div") .style("color", "white") .text("Foreign Born Percentage of Electorate 2018: " + format(val["poe_2018"])); d3.selectAll("path.cd-path") .style("opacity", 0.3) d3.select(this) .style("opacity", 1) .style("stroke", "#222") .raise(); } }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY-52) + "px").style("left", (d3.event.pageX + 18) + "px"); }) .on("mouseout", function() { tooltip.style("visibility", "hidden"); d3.selectAll("path.cd-path") .style("opacity", 1); }); // .on('click', function () { // const sel = d3.select(this) // const currentFill = sel.attr('fill') // const nextFill = currentFill !== 'rgb(238, 173, 117)' ? 'rgb(238, 173, 117)' : '#aac8de' // sel.attr('fill', nextFill) // }) d3.select("#timeslide").on("input", function() { update(+this.value); }); function update(value) { document.getElementById("range").innerHTML=time[value]; var inputValue = time[value]; // var dataStep = document.getElementById("datastep1"); g.selectAll("path.cd-path") .style("fill", function(d) { return timeMatch(d); }) } function use_data(d) { if (inputValue == "2018") { return mov_vs_fbByDist18[d.id]; } else if (inputValue == "2020") { return mov_vs_fbByDist20[d.id]; } else if (inputValue == "2022") { return mov_vs_fbByDist22[d.id]; } else if (inputValue == "2024") { return mov_vs_fbByDist24[d.id]; } } function timeMatch(d) { if (inputValue == "2018") { if (d.id in mov_vs_fbByDist18) { var green_val = mov_vs_fbByDist18[d.id]; var blue_val = mov_vs_fbByDist18[d.id]; var red_val = mov_vs_fbByDist18[d.id]; if (mov_vs_fbByDist18[d.id]["party"] == "R" && mov_vs_fbByDist18[d.id]["mov_vs_FB"] > 0) { return colorRep(red_val["mov_vs_FB"]); } else if (mov_vs_fbByDist18[d.id]["party"] == "D" && mov_vs_fbByDist18[d.id]["mov_vs_FB"] > 0) { return colorDem(blue_val["mov_vs_FB"]); } else if (mov_vs_fbByDist18[d.id]["mov_vs_FB"] <= 0) { return colorFB(green_val["mov_vs_FB"]); } } else { if (d.properties.PARTY_AFF == "Democrat") { return "#e6ffff"; } else { return "#ffebe6"; } } } else if (inputValue == "2020") { if (d.id in mov_vs_fbByDist20) { var green_val = mov_vs_fbByDist20[d.id]; var blue_val = mov_vs_fbByDist20[d.id]; var red_val = mov_vs_fbByDist20[d.id]; if (mov_vs_fbByDist20[d.id]["party"] == "R" && mov_vs_fbByDist20[d.id]["mov_vs_FB"] > 0) { return colorRep(red_val["mov_vs_FB"]); } else if (mov_vs_fbByDist20[d.id]["party"] == "D" && mov_vs_fbByDist20[d.id]["mov_vs_FB"] > 0) { return colorDem(blue_val["mov_vs_FB"]); } else if (mov_vs_fbByDist20[d.id]["mov_vs_FB"] <= 0) { return colorFB(green_val["mov_vs_FB"]); } } else { if (d.properties.PARTY_AFF == "Democrat") { return "#e6ffff"; } else { return "#ffebe6"; } } } else if (inputValue == "2022") { if (d.id in mov_vs_fbByDist22) { var green_val = mov_vs_fbByDist22[d.id]; var blue_val = mov_vs_fbByDist22[d.id]; var red_val = mov_vs_fbByDist22[d.id]; if (mov_vs_fbByDist22[d.id]["party"] == "R" && mov_vs_fbByDist22[d.id]["mov_vs_FB"] > 0) { return colorRep(red_val["mov_vs_FB"]); } else if (mov_vs_fbByDist22[d.id]["party"] == "D" && mov_vs_fbByDist22[d.id]["mov_vs_FB"] > 0) { return colorDem(blue_val["mov_vs_FB"]); } else if (mov_vs_fbByDist22[d.id]["mov_vs_FB"] <= 0) { return colorFB(green_val["mov_vs_FB"]); } } else { if (d.properties.PARTY_AFF == "Democrat") { return "#e6ffff"; } else { return "#ffebe6"; } } } else { if (d.id in mov_vs_fbByDist24) { var green_val = mov_vs_fbByDist24[d.id]; var blue_val = mov_vs_fbByDist24[d.id]; var red_val = mov_vs_fbByDist24[d.id]; if (mov_vs_fbByDist24[d.id]["party"] == "R" && mov_vs_fbByDist24[d.id]["mov_vs_FB"] > 0) { return colorRep(red_val["mov_vs_FB"]); } else if (mov_vs_fbByDist24[d.id]["party"] == "D" && mov_vs_fbByDist24[d.id]["mov_vs_FB"] > 0) { return colorDem(blue_val["mov_vs_FB"]); } else if (mov_vs_fbByDist24[d.id]["mov_vs_FB"] <= 0) { return colorFB(green_val["mov_vs_FB"]); } } else { if (d.properties.PARTY_AFF == "Democrat") { return "#e6ffff"; } else { return "#ffebe6"; } } } } const stateBorders = Object.entries(usAbbrs).map(d => { return topojson.merge(hexTopo, hexTopo.objects.tiles.geometries.filter(geometry => ( geometry.properties.name === d[1].toUpperCase() ))) }) g.append('g') .selectAll('path') .data(stateBorders) .enter() .append('path') .attr('d', path) .attr('stroke', '#ccc') .attr('stroke-width', '3') .attr('fill', 'none') btn.querySelector('input').onclick = function () { const current = g.attr('data-current') const duration = 2000 const delay = 100 g.attr('data-current', (current === 'albers' ? 'hex' : 'albers')) g.selectAll('path.cd-path') .transition() .duration(duration) .delay(delay) .attrTween('d', function(d) { const data = this.__data__ if (current === 'albers') { return flubber.interpolate(data.paths.district, data.paths.hex) } else { return flubber.interpolate(data.paths.hex, data.paths.district) } }) g.transition() .duration(duration) .delay(delay) .attrTween('transform', function () { let scale, tY if (current === 'albers') { scale = d3.interpolateNumber(1, .45) tY = d3.interpolateNumber(0, 600 / 1.25) } else { scale = d3.interpolateNumber(.45, 1) tY = d3.interpolateNumber(600 / 1.25, 0) } return function(t) { return `translate(0, ${tY(t)}) scale(${scale(t)})` } }) } return svg.node() }4c:T510,usAbbrs = { return { AL: 'Alabama', AK: 'Alaska', AS: 'American Samoa', AZ: 'Arizona', AR: 'Arkansas', CA: 'California', CO: 'Colorado', CT: 'Connecticut', DE: 'Delaware', DC: 'District Of Columbia', FM: 'Federated States Of Micronesia', FL: 'Florida', GA: 'Georgia', GU: 'Guam', HI: 'Hawaii', ID: 'Idaho', IL: 'Illinois', IN: 'Indiana', IA: 'Iowa', KS: 'Kansas', KY: 'Kentucky', LA: 'Louisiana', ME: 'Maine', MH: 'Marshall Islands', MD: 'Maryland', MA: 'Massachusetts', MI: 'Michigan', MN: 'Minnesota', MS: 'Mississippi', MO: 'Missouri', MT: 'Montana', NE: 'Nebraska', NV: 'Nevada', NH: 'New Hampshire', NJ: 'New Jersey', NM: 'New Mexico', NY: 'New York', NC: 'North Carolina', ND: 'North Dakota', MP: 'Northern Mariana Islands', OH: 'Ohio', OK: 'Oklahoma', OR: 'Oregon', PW: 'Palau', PA: 'Pennsylvania', PR: 'Puerto Rico', RI: 'Rhode Island', SC: 'South Carolina', SD: 'South Dakota', TN: 'Tennessee', TX: 'Texas', UT: 'Utah', VT: 'Vermont', VI: 'Virgin Islands', VA: 'Virginia', WA: 'Washington', WV: 'West Virginia', WI: 'Wisconsin', WY: 'Wyoming', } }4d:[] 47:{"id":"3f970c2151e5b237","slug":"an-animated-cartogram-of-the-us-congress","title":"An animated cartogram of the US Congress","thumbnail":"419030a62d801fc28b01a3bc0d60bee628bf492adfac904e4bc45308280ab728","access_level":"public","create_time":"$D2018-11-09T01:30:34.779Z","update_time":"$D2019-02-11T16:18:14.682Z","view_time":null,"first_public_time":"$D2018-11-15T15:38:54.683Z","has_unpublished_edits":null,"fork":{"id":"2182a29e08310029","slug":"an-animated-cartogram-of-the-us-congress","title":"An animated cartogram of the US Congress","owner":{"id":"53ab69aac59784dd","login":"jeremiak","name":"Jeremia Kimelman"}},"stars":1,"starred":false,"owner":{"type":"team","id":"6ebfe19b938ed05f","login":"krwarner","name":"Kenny Warner","avatar_url":"https://avatars-next.observableusercontent.com/128519b73e15e24f7fa6607f95203dfd82ba9b73e7ca06a5ca882aea5dc82b7f","tier":"starter_2024","bio":"Previously founder of FuzeUs, now Data Science student at Columbia","followed_by_you":false,"follows_you":false},"version":356,"publish_version":356,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c25d453e04671b3","login":"krwarner","name":"Kenny Warner","avatar_url":"https://avatars-next.observableusercontent.com/128519b73e15e24f7fa6607f95203dfd82ba9b73e7ca06a5ca882aea5dc82b7f","tier":null,"bio":"Previously founder of FuzeUs, now Data Science student at Columbia","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7c25d453e04671b3","login":"krwarner","name":"Kenny Warner","avatar_url":"https://avatars-next.observableusercontent.com/128519b73e15e24f7fa6607f95203dfd82ba9b73e7ca06a5ca882aea5dc82b7f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"An animated cartogram of the US Congress","cells":[{"id":0,"value":"md`# An animated cartogram of the US Congress`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`You can transition this map between a more traditional projection and a cartogram with the button below. You can also click on any of the battleground districts to view them more closely in the regular map projection, as well as mouse over to get more details. Ideally using both the traditional projection and the cartogram, you can get a good sense of how the growth of the foreign born electorate is going to shape US elections going forward.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"md`**All 435 congressional districts**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"btn = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"html`\n Choose a Year\n

\n
\n 2018\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"md`## Credits and sources\n\n* Cartogram comes from [Tilegrams from Pitch Interactive](https://pitchinteractiveinc.github.io/tilegrams/)\n* [Flubber](https://github.com/veltman/flubber) for making reasonable animations\n* D3, naturally\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"hex = topojson.feature(hexTopo, hexTopo.objects.tiles)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"hexTopo = d3.json('https://gist.githubusercontent.com/jeremiak/1c986c7b533dd1dc271e48e10c37adf5/raw/58a3dfce70ef6c32ba2b941f35471c5b0da0dfbf/us-hex-tiles.topo.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"movData = d3.csv(\"https://gist.githubusercontent.com/krwarner/b1e1358cfb016cdce5b3b9e2633b8d48/raw/63628367dc185fbdad67a79c9d069c063e56076c/fb_mov_data_years.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"congress = {\n \n const hasNoCongressionalRep = ['Puerto Rico', 'District of Columbia', 'U.S. Virgin Islands', 'Guam', 'Northern Mariana Islands', 'American Samoa']\n\n const geojson = topojson.feature(congressTopo, congressTopo.objects.congress)\n const filtered = geojson.features.filter(f => !hasNoCongressionalRep.includes(f.properties.STATE))\n geojson.features = filtered\n\n return geojson\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"congressTopo = d3.json('https://gist.githubusercontent.com/krwarner/ba149b4ed187b80cce4b9aad2135ddae/raw/8d564df8079729c819781819a084c9a1587dc434/congress_topo.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"topojson = require('topojson-client')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"flubber = require('flubber')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 42:null