2b:null 2c:["$","title",null,{"children":"Cartogram-2016 美国大选变形地图 | 段 | Observable"}] 31:T15b3,function make_tilegram() { var party_index = { GOP:"#E91D0Ecc", Dem:"#0015BCcc" } 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,map_file; if (map_type == 'Together') { map_obj = tiles; hex_data = tiles; boundary_data = tile_boundaries; map_file = map_file_T; } else if (map_type == 'Broken') { map_obj = broken_tiles; hex_data = broken_tiles; boundary_data = broken_tile_boundaries; map_file = map_file_B; } 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_index = info_map.get(fips).abbr; let data_info = main_data_info.get(info_index); console.log(data_info.data[0].party,party_index) return party_index[data_info.data[0].party] }) .attr('data-state', d => d.id) .attr("stroke-width", '0.2px') .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", '1px') .attr("stroke", "black") .attr("stroke-linejoin", "round") .attr('data-state', d => d.id) .on('pointerenter mouseenter', function (evt) { // state boundary map.append("path") .datum(topojson.merge(map_file, map_file.objects.tiles.geometries.filter( e => e.id !== evt.target.dataset.state)) ) .attr("class", "state-boundary") .attr("opacity", 0.3) .attr("d", path) ; map.append("path") .datum(topojson.mesh(map_file, map_file.objects.tiles, function (a, b) { return evt.target.dataset.state === a.id; }) ) // .join("path") .attr('class', 'state-boundary') // .attr("opacity", 0.1) .attr('d', path) .attr('data-state', d => d.id) .attr("stroke-width", '8.2px') .attr("stroke", "white") // .attr("stroke-linejoin", "round"); let copy = this.cloneNode(true); copy.setAttribute('stroke', 'black'); copy.setAttribute('stroke-width', '6px'); copy.setAttribute('class', 'temp'); copy.addEventListener('mouseleave', function () { d3.selectAll('.state-boundary').remove() map.selectAll('.temp').remove(); }); let fips = d3.select(evt.target).attr('data-state'); let info = info_map.get(fips); let info_index = info_map.get(fips).abbr; let data_info = main_data_info.get(info_index); var trows = data_info.data.map(function (c) { return ` ${c.party} ${c.first} ${c.last} ${c.voteCount} ` }).join("") // console.log(trows) tippy(copy, { allowHTML: true, duration: 100, maxWidth: 420, delay:[200,0], followCursor:true, theme: 'light', animation: 'fade', // arrow: true, content: `

`+ info.name + `州

` + data_info.data[0].party + `党取得多数票
${trows}

党派姓名票数
` }); map.append(() => copy); }); const labels = map.selectAll('.labels').data(hex_data.features) .enter() .append('text') .attr("font-size", "14") .attr("font-weight", "bold") .attr('class', 'labels') .attr('text-anchor', 'middle') .attr('dy', '0.5em') .text(d => { let fips = d.id; let info = info_map.get(fips); return info.abbr; }) .attr('x', d => path.centroid(d)[0]) .attr('y', d => path.centroid(d)[1]) return div.node(); }32:[{"id":"2ddd781d53a16080a15ecb763682f10c6fc967a19a82a29587d50010332693f95f5fe627a6b45128cec028af5973a82681d1e45bd428ae157cf38c7a7592218e","href":"https://static.observableusercontent.com/files/2ddd781d53a16080a15ecb763682f10c6fc967a19a82a29587d50010332693f95f5fe627a6b45128cec028af5973a82681d1e45bd428ae157cf38c7a7592218e","name":"new_electoral_tiles.topo@1.json","type":"application/json","lastModified":1623568098214.817,"size":98942},{"id":"6d0ef5086432f34442f79bb13086022908a5e025dbebd8d54bf036fedafa4bab64184208a1fb4901e87e650ce14088b66d163676098103278124ef7fac560d29","href":"https://static.observableusercontent.com/files/6d0ef5086432f34442f79bb13086022908a5e025dbebd8d54bf036fedafa4bab64184208a1fb4901e87e650ce14088b66d163676098103278124ef7fac560d29","name":"new_electoral_boundary_tiles.topo@2.json","type":"application/json","lastModified":1623568098214.817,"size":12902},{"id":"ebae3b888bbd21c8f16e897983cd3bdd3ef76a732e110d7de762368d236a8be072c48b9ac3c81582efca6470b4b01ecb2ea363c7ffbba43606b45df9233a08a0","href":"https://static.observableusercontent.com/files/ebae3b888bbd21c8f16e897983cd3bdd3ef76a732e110d7de762368d236a8be072c48b9ac3c81582efca6470b4b01ecb2ea363c7ffbba43606b45df9233a08a0","name":"new_electoral_broken_tiles.topo.json","type":"application/json","lastModified":1623568098214.817,"size":98835},{"id":"0720045de749b4615cec5c1d7ff514178080b1e3125c58e89a351e23d06267d00f42ba94aac606c2ceb994314e11fcf8aadb2f34b88fb3f80bebb8af0abb5165","href":"https://static.observableusercontent.com/files/0720045de749b4615cec5c1d7ff514178080b1e3125c58e89a351e23d06267d00f42ba94aac606c2ceb994314e11fcf8aadb2f34b88fb3f80bebb8af0abb5165","name":"new_electoral_broken_tile_boundaries.topo.json","type":"application/json","lastModified":1623568098214.817,"size":14648},{"id":"88c67bffa395817eb5c07c508f26b414876845192ea134208cc26754aca4863756b4b0349a74bd64e49ab2e4f9ffc5ab6ed163241f838ae112319fe9297ff1bf","href":"https://static.observableusercontent.com/files/88c67bffa395817eb5c07c508f26b414876845192ea134208cc26754aca4863756b4b0349a74bd64e49ab2e4f9ffc5ab6ed163241f838ae112319fe9297ff1bf","name":"new_apportionment@1.csv","type":"text/csv","lastModified":1623650347602.105,"size":1454},{"id":"e497339bffbfc1b86b54bd220b388428dcc89653afe84bde252148b283f59f63618a3013f2d52cfe8706f0cd12403ff0555d57c6ceb52e86249f31e661fd6067","href":"https://static.observableusercontent.com/files/e497339bffbfc1b86b54bd220b388428dcc89653afe84bde252148b283f59f63618a3013f2d52cfe8706f0cd12403ff0555d57c6ceb52e86249f31e661fd6067","name":"2016_electoral_data.json","type":"application/json","lastModified":1623649798649.322,"size":2902740}] 2f:{"id":"4fb8c444666cf5dc","slug":"cartogram-2016","title":"Cartogram-2016 美国大选变形地图","thumbnail":"c2707b0214792e439e50eee202b50dac939365d2433bbcb1bf9d4c1e8ad86ff9","access_level":"public","create_time":"$D2021-06-13T07:08:18.214Z","update_time":"$D2021-06-19T04:45:12.498Z","view_time":null,"first_public_time":"$D2021-06-19T04:45:53.867Z","fork":{"id":"3b98706382e08b4c","slug":"the-new-electoral-college","title":"The new Electoral College","owner":{"id":"d771c8ae812d5130","login":"mcmcclur","name":"Mark McClure"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d7afb4e4eb0c2ea9","login":"zhoiii","name":" 段","avatar_url":"https://avatars-next.observableusercontent.com/3d808103699828da413c32ffe55d6d598971de183c77060ff072bc5764bd96d3","tier":"starter_2024"},"version":336,"publish_version":336,"role":null,"authored":false,"authors":[{"type":"individual","id":"f46e8fba7fa18f84","login":"zhoiii","name":" 段","avatar_url":"https://avatars-next.observableusercontent.com/3d808103699828da413c32ffe55d6d598971de183c77060ff072bc5764bd96d3","tier":null}],"members":[{"type":"individual","id":"f46e8fba7fa18f84","login":"zhoiii","name":" 段","avatar_url":"https://avatars-next.observableusercontent.com/3d808103699828da413c32ffe55d6d598971de183c77060ff072bc5764bd96d3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Cartogram-2016 美国大选变形地图","cells":[{"id":0,"value":"md`# Cartogram-2016 美国大选变形地图\n\n变形地图数据生成自 [tilegram](https://pitchinteractiveinc.github.io/tilegrams/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"viewof map_type = Radio([\"Together\", \"Broken\"], {\n value: \"Together\",\n label: html`显示类型:`\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":315,"value":"viewof toggle = Radio(['Map', 'Cartogram'], {\n value: \"Cartogram\",\n label: html`地图类型:`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"tilegram = make_tilegram()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":320,"value":"transition = {\n const states = d3.selectAll('path.boundary')\n if (toggle == 'Map') {\n states.transition().duration(3000)\n .attr('transform', d => {\n const centroid = geoPath.centroid(d),\n x = centroid[0],\n y = centroid[1]\n return `translate(${x},${y})`\n + `scale(${ Math.sqrt(1) })`\n + `translate(${-x},${-y})`\n })\n } else if (toggle == 'Cartogram') {\n states.transition().duration(3000)\n .attr('transform', d => {\n const centroid = geoPath.centroid(d),\n x = centroid[0],\n y = centroid[1]\n return `translate(${x},${y})`\n + `scale(${ Math.sqrt(1) })`\n + `translate(${-x},${-y})`\n })\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":322,"value":"geoPath = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"height = 0.625 * map_width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"map_width = width // < 800 ? width : 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"main_data_info = {\n let map_file = await FileAttachment(\n \"2016_electoral_data.json\"\n ).json();\n let info_map = new Map();\n map_file.forEach(function (o) {\n let name = o.statePostal;\n let data = o.reportingUnits[0].candidates;\n info_map.set(name, {\n data: data\n });\n });\n return info_map;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":49,"value":"broken_tiles = {\n let states = topojson.feature(map_file_B, map_file_B.objects.tiles);\n return states;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"map_file_B = {\nreturn await FileAttachment(\n \"new_electoral_broken_tiles.topo.json\"\n ).json();\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":10,"value":"tiles = {\n let states = topojson.feature(map_file_T, map_file_T.objects.tiles);\n return states;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"map_file_T = {\n return await FileAttachment(\"new_electoral_tiles.topo@1.json\").json();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":298,"value":"info_map = {\n let map_file = await FileAttachment(\n \"new_apportionment@1.csv\"\n ).csv();\n let info_map = new Map();\n map_file.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"},{"id":167,"value":"import { legend, swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"import { Radio } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"