31:Tade,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 == "Votes") { p = info.reps / max_reps; return d3.interpolateBlues(p); } else if (shade_by == "Vote change") { p = (info.change + 2) / 4; 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('pointerenter 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, duration: 100, // placement: 'top-end', // followCursor: 'initial', maxWidth: 420, theme: 'light', content: `

State	Votes	Change
${info.name}	${info.reps + 2}	${info.change}

` }); map.append(() => copy); }); return div.node(); }32:[{"id":"6d0ef5086432f34442f79bb13086022908a5e025dbebd8d54bf036fedafa4bab64184208a1fb4901e87e650ce14088b66d163676098103278124ef7fac560d29","href":"https://static.observableusercontent.com/files/6d0ef5086432f34442f79bb13086022908a5e025dbebd8d54bf036fedafa4bab64184208a1fb4901e87e650ce14088b66d163676098103278124ef7fac560d29","name":"new_electoral_boundary_tiles.topo@2.json","type":"application/json","lastModified":1635850503209.773,"size":12902},{"id":"2ddd781d53a16080a15ecb763682f10c6fc967a19a82a29587d50010332693f95f5fe627a6b45128cec028af5973a82681d1e45bd428ae157cf38c7a7592218e","href":"https://static.observableusercontent.com/files/2ddd781d53a16080a15ecb763682f10c6fc967a19a82a29587d50010332693f95f5fe627a6b45128cec028af5973a82681d1e45bd428ae157cf38c7a7592218e","name":"new_electoral_tiles.topo@1.json","type":"application/json","lastModified":1635850503209.773,"size":98942},{"id":"0720045de749b4615cec5c1d7ff514178080b1e3125c58e89a351e23d06267d00f42ba94aac606c2ceb994314e11fcf8aadb2f34b88fb3f80bebb8af0abb5165","href":"https://static.observableusercontent.com/files/0720045de749b4615cec5c1d7ff514178080b1e3125c58e89a351e23d06267d00f42ba94aac606c2ceb994314e11fcf8aadb2f34b88fb3f80bebb8af0abb5165","name":"new_electoral_broken_tile_boundaries.topo.json","type":"application/json","lastModified":1635850503209.773,"size":14648},{"id":"ebae3b888bbd21c8f16e897983cd3bdd3ef76a732e110d7de762368d236a8be072c48b9ac3c81582efca6470b4b01ecb2ea363c7ffbba43606b45df9233a08a0","href":"https://static.observableusercontent.com/files/ebae3b888bbd21c8f16e897983cd3bdd3ef76a732e110d7de762368d236a8be072c48b9ac3c81582efca6470b4b01ecb2ea363c7ffbba43606b45df9233a08a0","name":"new_electoral_broken_tiles.topo.json","type":"application/json","lastModified":1635850503209.773,"size":98835},{"id":"88c67bffa395817eb5c07c508f26b414876845192ea134208cc26754aca4863756b4b0349a74bd64e49ab2e4f9ffc5ab6ed163241f838ae112319fe9297ff1bf","href":"https://static.observableusercontent.com/files/88c67bffa395817eb5c07c508f26b414876845192ea134208cc26754aca4863756b4b0349a74bd64e49ab2e4f9ffc5ab6ed163241f838ae112319fe9297ff1bf","name":"new_apportionment.csv","type":"text/csv","lastModified":1635850503209.773,"size":1454}] 2f:{"title":"30 Day Map Challenge: Day 4 - Hexagons","cells":[{"id":0,"value":"md`# 30 Day Map Challenge: Day 4 - Hexagons\n\n## The new Electoral College\n\nThe visualization below shows the apportionment of electoral votes based on the [just released 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([\"Votes\", \"Vote change\"], {\n value: \"Votes\",\n label: html`Shade by:`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"{\n let legend_swatch, label;\n if (shade_by == 'Votes') {\n legend_swatch = legend({\n color: d3.scaleThreshold(\n [d3.range(3, 54, 7), 54].flat(),\n d3.schemeBlues[9]\n ),\n tickSize: 0\n });\n label = 'Number of votes';\n } else if (shade_by == 'Vote change') {\n legend_swatch = swatches({\n color: d3.scaleOrdinal(\n [\"+2\", \"+1\", \"0\", '-1'],\n [1, 0.75, .5, 0.25].map(d3.interpolateRdYlGn)\n )\n });\n label = 'Change in votes';\n }\n\n return html`

${label}:

${legend_swatch}

`;\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 info_map.set('11', {\n name: \"District of Columbia\",\n abbr: 'DC',\n reps: 1,\n change: 0\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":119,"value":"broken_tile_boundaries = {\n let map_file = await FileAttachment(\n \"new_electoral_broken_tile_boundaries.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_electoral_broken_tiles.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_electoral_boundary_tiles.topo@2.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_electoral_tiles.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":167,"value":"import { legend, swatches } from \"@d3/color-legend\"","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"}