2c:null 2d:["$","title",null,{"children":"30 Day Map Challenge: Day 4 - Hexagons | Observable Ambassadors | Observable"}] 32: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(); }33:[{"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}] 30:{"id":"085a89f9ef330c4d","slug":"the-new-electoral-college","title":"30 Day Map Challenge: Day 4 - Hexagons","thumbnail":"3b9593cab21acc562c1895406894f9c8e2ff4d80baf5fb7a46bd5e10dad949c6","access_level":"public","create_time":"$D2021-11-02T10:55:03.209Z","update_time":"$D2021-11-08T11:19:52.923Z","view_time":null,"first_public_time":"$D2021-11-04T12:14:42.024Z","has_unpublished_edits":null,"fork":{"id":"3b98706382e08b4c","slug":"the-new-electoral-college","title":"The new Electoral College","owner":{"id":"d771c8ae812d5130","login":"mcmcclur","name":"Mark McClure"}},"stars":18,"starred":false,"owner":{"type":"team","id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors","avatar_url":"https://avatars-next.observableusercontent.com/93bf798c058a2bf8d3bb90c0754f774b6278b8b16748784f520b07a8800ef772","tier":"pro_2024"},"version":288,"publish_version":288,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null}],"members":[{"type":"team","id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors","avatar_url":"https://avatars-next.observableusercontent.com/93bf798c058a2bf8d3bb90c0754f774b6278b8b16748784f520b07a8800ef772","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"721eb292a0cc1113","slug":"30daymapchallenge","title":"#30DayMapChallenge","owner":{"id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors"}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"viewof map_type = Radio([\"Together\", \"Broken\"], {\n value: \"Together\",\n label: html`Display tiles:`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"tilegram = make_tilegram()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"height = 0.625 * map_width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"map_width = width // < 800 ? width : 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"max_reps = d3.max(Array.from(info_map.values()).map(o => o.reps))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"apportionment_data = FileAttachment(\"new_apportionment.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"import { legend, swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"import { Radio } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"