31:Tae2,function make_tilegram() { let div = d3 .create('div') .style("width", `${map_width}px`) .style("height", `${height}px`) .style('overflow', 'hidden'); let svg = div .append('svg') .style('overflow', 'hidden') .attr("viewBox", [0, 0, map_width, height]); let map_obj, hex_data, boundary_data; if (map_type == 'Together') { map_obj = tiles; hex_data = tiles; boundary_data = tile_boundaries; } else if (map_type == 'Broken') { map_obj = broken_tiles; hex_data = broken_tiles; boundary_data = broken_tile_boundaries; } let proj = d3 .geoIdentity() .reflectY(true) .fitSize([map_width, height], map_obj); let path = d3.geoPath().projection(proj); let map = svg.append('g'); map .selectAll("path.tile") .data(hex_data.features) .join("path") .attr('class', 'tile') .attr('d', path) // .style('fill', () => d3.interpolateCool(Math.random())) .style("fill", function(d) { let fips = d.id; let info = info_map.get(fips); let p; if (shade_by == "Representation") { p = info.reps / max_reps; return d3.interpolateBlues(p ** 0.6); } else if (shade_by == "Representation change") { p = (info.change + 2) / 4.1; return d3.interpolateRdYlGn(p); } }) .attr('data-state', d => d.id) .attr("stroke-width", '1px') .attr("stroke", "white") .attr("stroke-linejoin", "round"); map .selectAll("path.boundary") .data(boundary_data.features) .join("path") .attr('class', 'boundary') .attr('d', path) .style('fill', 'black') .style("fill-opacity", 0) .attr("stroke-width", '2px') .attr("stroke", "black") .attr("stroke-linejoin", "round") .attr('data-state', d => d.id) .on('mouseenter', function(evt) { let copy = this.cloneNode(true); copy.setAttribute('stroke', 'black'); copy.setAttribute('stroke-width', '6px'); copy.setAttribute('class', 'temp'); copy.addEventListener('mouseleave', function() { map.selectAll('.temp').remove(); }); let fips = d3.select(evt.target).attr('data-state'); let info = info_map.get(fips); tippy(copy, { allowHTML: true, maxWidth: 420, theme: 'light', content: `

State	Population	Representation	Change
${info.name}	${info.pop}	${info.reps}	${info.change}

` }); map.append(() => copy); }); return div.node(); }32:[{"id":"8c631ad73160270f0ad362b0a8f73277e54be32e9e29e01154defb6be7a3c5e2a3ac86d635710bf6e7c7f05e7ae2a6bd6203d72260e8252fdf58c83ab539f3b8","href":"https://static.observableusercontent.com/files/8c631ad73160270f0ad362b0a8f73277e54be32e9e29e01154defb6be7a3c5e2a3ac86d635710bf6e7c7f05e7ae2a6bd6203d72260e8252fdf58c83ab539f3b8","name":"new_congress_tilegram.topo.json","type":"application/json","lastModified":1619534153493.948,"size":80865},{"id":"88c67bffa395817eb5c07c508f26b414876845192ea134208cc26754aca4863756b4b0349a74bd64e49ab2e4f9ffc5ab6ed163241f838ae112319fe9297ff1bf","href":"https://static.observableusercontent.com/files/88c67bffa395817eb5c07c508f26b414876845192ea134208cc26754aca4863756b4b0349a74bd64e49ab2e4f9ffc5ab6ed163241f838ae112319fe9297ff1bf","name":"new_apportionment.csv","type":"text/csv","lastModified":1619536402589.4,"size":1454},{"id":"5dbd61a872eb0dfb0b93b5b97230cf21a78c456caa76e441c0293c5b2a277a716e15ef08cf3a4ea11f9680b36a87fdb38874f4b53d0e125ca6c06e3da06213ea","href":"https://static.observableusercontent.com/files/5dbd61a872eb0dfb0b93b5b97230cf21a78c456caa76e441c0293c5b2a277a716e15ef08cf3a4ea11f9680b36a87fdb38874f4b53d0e125ca6c06e3da06213ea","name":"new_congress_broken_tilegram.topo.json","type":"application/json","lastModified":1619537070924.307,"size":83218},{"id":"934211d33cb42e66a7c43ec56537fb14346c639d870f35e49a5f54b0f00219ecf9aa101ee4d91fc3d2ed82b9bcf77d98fb4ba3d7e73fb053095e0806b4010dc1","href":"https://static.observableusercontent.com/files/934211d33cb42e66a7c43ec56537fb14346c639d870f35e49a5f54b0f00219ecf9aa101ee4d91fc3d2ed82b9bcf77d98fb4ba3d7e73fb053095e0806b4010dc1","name":"new_congress_broken_boundaries_tilegram.topo.json","type":"application/json","lastModified":1619562746320.722,"size":12946},{"id":"b3f1c29cea1d4c12c081233cd6c0b040bd6912b1a9bb13b92e52a3c05d7e237feb75d2e8ddb48d7d2085f35bf78060516ee2091820e335a70e333034be9e3de5","href":"https://static.observableusercontent.com/files/b3f1c29cea1d4c12c081233cd6c0b040bd6912b1a9bb13b92e52a3c05d7e237feb75d2e8ddb48d7d2085f35bf78060516ee2091820e335a70e333034be9e3de5","name":"new_congress_tilegram_boundaries.topo.json","type":"application/json","lastModified":1619559550954.903,"size":11677},{"id":"54109fd9c739c362e97c4978f3667eb6153747911a1327001951d3aa4383c14b24e5eedf5f7276e6594814a8d9959da3c9569afc6e208852fd8edbe335272952","href":"https://static.observableusercontent.com/files/54109fd9c739c362e97c4978f3667eb6153747911a1327001951d3aa4383c14b24e5eedf5f7276e6594814a8d9959da3c9569afc6e208852fd8edbe335272952","name":"new_congress_tilegram_boundaries2.topo@1.json","type":"application/json","lastModified":1619602282658.94,"size":11667},{"id":"79a6967653531382e247d3ba08fd452b22801821885cc739c54181c1eff3823121044a1ac3605678602fa50794f4fc8dada66d1b438cd3b494a1c8aa2b074fdb","href":"https://static.observableusercontent.com/files/79a6967653531382e247d3ba08fd452b22801821885cc739c54181c1eff3823121044a1ac3605678602fa50794f4fc8dada66d1b438cd3b494a1c8aa2b074fdb","name":"new_congress_tilegram2.topo@1.json","type":"application/json","lastModified":1619602265983.928,"size":80864}] 2f:{"title":"2020 Census Apportionment Tilegram","cells":[{"id":0,"value":"md`# 2020 Census Apportionment Tilegram\n\nThe visualization below shows the apportionment of congressional seats based on the [just realeased population counts](https://www.census.gov/data/tables/2020/dec/2020-apportionment-data.html) diplayed as a [tilegram](https://pitchinteractiveinc.github.io/tilegrams/). You can break the tiles apart or hover over them to figure out what's what.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"viewof map_type = Radio([\"Together\", \"Broken\"], {\n value: \"Together\",\n label: html`Display tiles:`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"viewof shade_by = Radio([\"Representation\", \"Representation change\"], {\n value: \"Representation\",\n label: html`Shade by:`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"tilegram = make_tilegram()","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 0.625 * map_width","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"map_width = width // < 800 ? width : 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"max_reps = d3.max(Array.from(info_map.values()).map(o => o.reps))","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"info_map = {\n let info_map = new Map();\n apportionment_data.forEach(function(o) {\n let fips = o.fips;\n let name = o.state_name;\n let abbr = o.abbr;\n let pop = parseInt(o.apportionment_population);\n let reps = parseInt(o.reps);\n let change = parseInt(o.change);\n info_map.set(fips, {\n name: name,\n abbr: abbr,\n pop: pop,\n reps: reps,\n change: change\n });\n });\n return info_map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"apportionment_data = FileAttachment(\"new_apportionment.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"apportionment_data.map((o) => ({ name: o.state_name, abbr: o.abbr }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"broken_tile_boundaries = {\n let map_file = await FileAttachment(\n \"new_congress_broken_boundaries_tilegram.topo.json\"\n ).json();\n let boundaries = topojson.feature(map_file, map_file.objects.tiles);\n return boundaries;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"broken_tiles = {\n let map_file = await FileAttachment(\n \"new_congress_broken_tilegram.topo.json\"\n ).json();\n let states = topojson.feature(map_file, map_file.objects.tiles);\n return states;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"tile_boundaries = {\n let map_file = await FileAttachment(\n \"new_congress_tilegram_boundaries2.topo@1.json\"\n ).json();\n let boundaries = topojson.feature(map_file, map_file.objects.tiles);\n return boundaries;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"tiles = {\n let map_file = await FileAttachment(\"new_congress_tilegram2.topo@1.json\").json();\n let states = topojson.feature(map_file, map_file.objects.tiles);\n return states;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"import { Radio } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}