34:["$","title",null,{"children":"An animated cartogram of the US Congress - Tutorial | Kenny Warner | Observable"}] 3c:T7cd,chart2 = { var width = 900, height = 600; var projection = d3.geoAlbers(); var path = d3.geoPath() .projection(projection), force = d3.forceSimulation([]); var svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); var mapGroup = svg .append('g') .classed('map',true) .attr('transform','translate(100,50)scale(0.75)'); var districts = topojson.feature(congressTopo, congressTopo.objects.congress), nodes = [], links = []; districts.features.forEach(function(d, i) { var centroid = path.centroid(d); if (centroid.some(isNaN)) return; centroid.x = centroid[0]; centroid.y = centroid[1]; centroid.feature = d; nodes.push(centroid); }); d3.voronoi().links(nodes).forEach(function(link) { var dx = link.source.x - link.target.x, dy = link.source.y - link.target.y; link.distance = Math.sqrt(dx * dx + dy * dy); if (link.distance < width / 3 ) { links.push(link); } }); force .nodes(nodes) .force('link', d3.forceLink(links).distance(function(d) { return d.distance; })) .force("charge", d3.forceManyBody().strength(-1.5)); var link = mapGroup.selectAll("line") .data(links) var node = mapGroup.selectAll("g") .data(nodes) .enter().append("g") .attr("transform", function(d) { return "translate(" + -d.x + "," + -d.y + ")"; }) .call(d3.drag) .append("path") .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) .attr("d", function(d) { return path(d.feature); }); force.on("tick", function(e) { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); }); return svg.node(); }3d:T1212,chart3 = { const width = 1100 const height = 700 var svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); var projection = d3.geoAlbers(); var path = d3.geoPath() .projection(projection) var radius = 10 var color = '#ccc' const g = svg.append('g') .attr('id', 'map') .attr('transform', 'translate(100, 100) scale(0.5)') d3.json('https://gist.githubusercontent.com/krwarner/ba149b4ed187b80cce4b9aad2135ddae/raw/8d564df8079729c819781819a084c9a1587dc434/congress_topo.json').then(function(congressTopo) { var neighbors = topojson.neighbors(congressTopo.objects.congress.geometries), nodes = topojson.feature(congressTopo, congressTopo.objects.congress).features; nodes.forEach(function(node, i) { var centroid = path.centroid(node); node.x0 = centroid[0]; node.y0 = centroid[1]; cleanUpGeometry(node); }); var districts = g.selectAll("path") .data(nodes) .enter() .append("path") .attr("d", path) .attr("fill", "#ccc") .attr("transform", 'translate(50, 50) scale(2)') simulate(); function simulate() { nodes.forEach(function(node) { node.x = node.x0; node.y = node.y0; node.r = radius; }); var links = d3.merge(neighbors.map(function(neighborSet, i) { return neighborSet.filter(j => nodes[j]).map(function(j) { return {source: i, target: j, distance: nodes[i].r + nodes[j].r + 3}; }); })); var simulation = d3.forceSimulation(nodes) .force("cx", d3.forceX().x(d => width / 2).strength(-0.02)) .force("cy", d3.forceY().y(d => height / 2).strength(-0.02)) .force("link", d3.forceLink(links).distance(d => d.distance)) .force("x", d3.forceX().x(d => d.x).strength(0.1)) .force("y", d3.forceY().y(d => d.y).strength(0.1)) .force("collide", d3.forceCollide().strength(0.8).radius(d => d.r + 3)) .stop(); while (simulation.alpha() > 0.1) { simulation.tick(); } nodes.forEach(function(node){ var circle = pseudocircle(node), closestPoints = node.rings.slice(1).map(function(ring){ var i = d3.scan(circle.map(point => distance(point, ring.centroid))); return ring.map(() => circle[i]); }), interpolator = d3.interpolateArray(node.rings, [circle, ...closestPoints]); node.interpolator = function(t){ var str = pathString(interpolator(t)); // Prevent some fill-rule flickering for MultiPolygons if (t > 0.99) { return str.split("Z")[0] + "Z"; } return str; }; }); districts .sort((a, b) => b.r - a.r) .transition() .delay(1000) .duration(1000) .attrTween("d", node => node.interpolator) .attr("fill", '#ccc') .attr('transform', 'translate(50, 50) scale(1.9)'); } }); function pseudocircle(node) { return node.rings[0].map(function(point){ var angle = node.startingAngle - 2 * Math.PI * (point.along / node.perimeter); return [ Math.cos(angle) * node.r + node.x, Math.sin(angle) * node.r + node.y ]; }); } function cleanUpGeometry(node) { node.rings = (node.geometry.type === "Polygon" ? [node.geometry.coordinates] : node.geometry.coordinates); node.rings = node.rings.map(function(polygon){ polygon[0].area = d3.polygonArea(polygon[0]); polygon[0].centroid = d3.polygonCentroid(polygon[0]); return polygon[0]; }); node.rings.sort((a, b) => b.area - a.area); node.perimeter = d3.polygonLength(node.rings[0]); // Optional step, but makes for more circular circles bisect(node.rings[0], node.perimeter / 72); node.rings[0].reduce(function(prev, point){ point.along = prev ? prev.along + distance(point, prev) : 0; node.perimeter = point.along; return point; }, null); node.startingAngle = Math.atan2(node.rings[0][0][1] - node.y0, node.rings[0][0][0] - node.x0); } function bisect(ring, maxSegmentLength) { for (var i = 0; i < ring.length; i++) { var a = ring[i], b = i === ring.length - 1 ? ring[0] : ring[i + 1]; while (distance(a, b) > maxSegmentLength) { b = midpoint(a, b); ring.splice(i + 1, 0, b); } } } function distance(a, b) { return Math.sqrt((a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1])); } function midpoint(a, b) { return [a[0] + (b[0] - a[0]) * 0.5, a[1] + (b[1] - a[1]) * 0.5]; } function pathString(d) { return (d.rings || d).map(ring => "M" + ring.join("L") + "Z").join(" "); } return svg.node() }3e:T581,md`The goal with interpolation and tweeing is to go from one shape to another. In the case of going from a congressional district to a circle, there are sweeping changes that need to be made. The key is understanding how the paths will be changing as they convert from one shape to another. D3 does help you do this to some extent, but leaving it up to D3 completely can lead to odd shapes and flickering during the transition, which likely won't look terribly smooth. Imagine taking a rectangular piece of paper and trying to fold it into a circle, there will be some odd creasing. This is why, in the example above, there is a function to clean the geometry both for the fill and the outline in the case of the rings. As a note, be sure to keep in mind the end goal, in this case circles, which means not only an x and y, but a radius as well. This end product can be achieved easily when not considering the transitions inbetween using the centroid function as we have done in the previous examples and creating the cirlce around that. As for the placement, aside from the force direction, we utilize the Albers Projection, this ensures that each circle stays close to its original position on the map. If we did not use the Albers Projection, because in the Northeast there are many small districts, the map would balloon and look more like a cirlce after the force direction, losing the shape of the US.`3f:T33da,{ 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); }); d3.select("#timeslide").on("input", function() { update(+this.value); }); function update(value) { document.getElementById("range").innerHTML=time[value]; var inputValue = time[value]; 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() }40: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', } }41:[] 38:{"id":"1f17456fa274b9a5","slug":"an-animated-cartogram-of-the-us-congress-tutorial","title":"An animated cartogram of the US Congress - Tutorial","thumbnail":"86b5b997d2051f0af26847dbadc2ed4a612b4e84cf4959e9c7b5c2a5821f2260","access_level":"public","create_time":"$D2018-11-26T19:19:07.235Z","update_time":"$D2018-11-26T23:35:53.943Z","view_time":null,"first_public_time":"$D2018-11-26T22:59:44.686Z","has_unpublished_edits":null,"fork":{"id":"3f970c2151e5b237","slug":"an-animated-cartogram-of-the-us-congress","title":"An animated cartogram of the US Congress","owner":{"id":"6ebfe19b938ed05f","login":"krwarner","name":"Kenny Warner"}},"stars":7,"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":498,"publish_version":498,"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":5,"collection":null,"type":"notebook","body":{"titling":"auto","title":"An animated cartogram of the US Congress - Tutorial","cells":[{"id":0,"value":"md`# An animated cartogram of the US Congress - Tutorial`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`In this tutorial I will show how you can transition a map between a more traditional projection and a cartogram. I will also discuss the various advantages and pitfalls that you might encounter while trying to do different transitions on a map.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"md`The first step is understanding how placement works in cartograms. Of course, it depends on your end shape, but to keep it simple for this step, let us look at the placement and sizing of a non-contiguous cartogram using the map of the US congressional districts. For this, we will use a simple example by Mike Bostock, with a few changes. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"md`Load the shape files`","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":393,"value":"md`Then...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"chart1 = {\n const width = 960\n const height = 600\n const svg = d3.select(DOM.svg(width, height))\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\")\n \n const projection = d3.geoAlbersUsa();\n const path = d3.geoPath()\n .projection(projection);\n\n svg.selectAll(\".region\")\n .data(topojson.feature(congressTopo, congressTopo.objects.congress).features)\n .enter()\n .append(\"path\")\n .attr(\"class\", \"region\")\n .attr(\"d\", path)\n .attr(\"transform\", function(d) {\n var centroid = path.centroid(d),\n x = centroid[0],\n y = centroid[1];\n return \"translate(\" + x + \",\" + y + \")\"\n + \"scale(\" + Math.sqrt(0.5 || 0) + \")\"\n + \"translate(\" + -x + \",\" + -y + \")\";\n })\n .style(\"stroke-width\", function(d) {\n return 1 / Math.sqrt(0.5 || 1);\n })\n .style(\"fill\", \"#ccc\");\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"md`As you can see here, it isn't difficult to change the size of districts on a map. It is also pretty easy to place them without much of an issue. In this case, we used the centroid of each district's paths. The nice part about this, is that D3 has a function that finds the centroid for you. All you have to do is set the x and y, or centroid[0] and centroid[1], then translate it by those values so that the shapes don't overlap.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"md`Depending on the size and shape that you are using, this simple solution isn't always perfect, as you can still get some overlap. In order to avoid that, you must create forces between the objects on the map.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"md`This map illustrates a simple use of force. In this case, smaller districts have a stronger force and push their neighbors further away. The opposite can also be achieved, or in the next example, any number of factors can be used to create force and links can be used to maintain certain distances. Keep in mind that this technique also uses the centroid, which was used before. Combining both the change of size and the force can create a compelling interactive visualization even without transitions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"md`If your goal is to use transitions though, it will require some understanding of tweening and interpolation, or how to transition shapes on a map to the shape that is being used in the cartogram. In the following case, the goal is to go from the congressional shape to a circle and implement some combination of force to allow them to be evenly spaced while still maintaining a relationship to their original positions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"md`Alas, there is an easier solution than doing a bunch of math and building a plethora of functions to handle the interpolation and tweening. The package flubber has these functions built in, so all you have to do is call flubber.interpolate(start paths, end paths). This allows you to focus on your start path and your end path. As you can see from the first example, this is pretty simple, all you have to do is create your map, then identify the end map. In the case below the end map is a cartogram that utilizes hexagons. Pitch Interactive has a website dedicated specifically for different types of hex shaped cartograms, which makes the transition using flubber quite easy.`","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":494,"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":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"md`As you can see, instead of multiple, math heavy functions, a couple simple transition statements are called, and the transition between the regular map and the cartogram is handled, you don't even need the centroid of each set of paths. Not to mention the performance is substantially better, and it allows you to focus on building other types of functionality like mouse-overs, click to zoom, and map updates without disrupting the interpolation.`","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* [Vedant Mehta](http://blockbuilder.org/vedantmehta/37dd02d152541bd0ccce91ccf9f4fe57)\n* [Mike Bostock](http://blockbuilder.org/mbostock/4055908)\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":98,"value":"$40","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":"$W41","stdlib":"1"}} 33:null