2b:null 2c:["$","title",null,{"children":"Cartogram | Toph Tucker | Observable"}] 31:[] 2f:{"id":"f7b4a27a6c8c59f0","slug":"cartogram","title":"Cartogram","thumbnail":"3d06eff09ea57a0dcd80a529ccb7d6cc6b83b7d234e3b408fa87e00de943c177","access_level":"public","create_time":"$D2020-03-14T00:04:56.615Z","update_time":"$D2020-03-27T06:19:11.511Z","view_time":null,"first_public_time":"$D2020-03-27T04:20:33.242Z","fork":{"id":"1c868b8a637a82ed","slug":"small-multiple-chart-cartogram","title":"Small multiple chart cartogram","owner":{"id":"eb234b21118ba2f1","login":"aboutaaron","name":"Aaron Williams"}},"stars":5,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2024"},"version":1307,"publish_version":1307,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"d6d8f3dc44d16858","slug":"utilities","title":"Utilities","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"title":"Cartogram","cells":[{"id":0,"value":"md`# Cartogram\nAaron Williams did the [hard work](https://observablehq.com/@aboutaaron/small-multiple-chart-cartogram) of setting the layout! This just refactors a bit so I can \\`import {map} with {blah as data}\\` from another notebook. You could also sub in another chart function (that returns an svg group) for \\`chart\\`. This data’s random.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1133,"value":"map = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1267,"value":"chart = type == \"logarithmic\" ? line : bar","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1134,"value":"bar = state => svg`\n \n ${domain.map(\n d => svg``\n )}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1262,"value":"line = state => {\n console.log(\n domain.map(d => [d, data.get(state).get(d)]),\n d3line(domain.map(d => [d, data.get(state).get(d)]))\n );\n return svg`\n \n [d, data.get(state).get(d)])\n )}\" />\n`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1279,"value":"d3line(domain.map(d => [d, data.get(\"MA\").get(d)]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1136,"value":"x = d3\n .scaleBand()\n .domain(domain)\n .range([0, state_size])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1138,"value":"y = d3\n .scaleLinear()\n .domain(extent)\n .range([state_size, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1140,"value":"column = ({ column }) => column * (state_size + state_padding)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1142,"value":"row = ({ row }) => row * (state_size + state_padding)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1144,"value":"projection = ([column, row]) => [\n column * (state_size + state_padding),\n row * (state_size + state_padding)\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1146,"value":"state_size = _width / offset","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1148,"value":"_width = width - margin.left - margin.right // `width` is a global in observable","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1150,"value":"offset = 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1152,"value":"margin = ({ top: 100, right: 20, bottom: 20, left: 20 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1154,"value":"state_padding = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1156,"value":"height = 700 - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1185,"value":"extent = d3.extent(\n d3\n .merge(\n Array.from(data, ([key, value]) =>\n Array.from(value, ([key, value]) => value)\n )\n )\n .filter(valid)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1167,"value":"layout = new Map([\n [\"AL\", [6, 5]],\n [\"AK\", [1, 6]],\n [\"AZ\", [1, 4]],\n [\"AR\", [4, 4]],\n [\"CA\", [0, 3]],\n [\"CO\", [2, 3]],\n [\"CT\", [9, 2]],\n [\"DC\", [8, 4]],\n [\"DE\", [9, 3]],\n [\"FL\", [8, 6]],\n [\"GA\", [7, 5]],\n [\"HI\", [0, 6]],\n [\"ID\", [1, 1]],\n [\"IL\", [5, 1]],\n [\"IN\", [5, 2]],\n [\"IA\", [4, 2]],\n [\"KS\", [3, 4]],\n [\"KY\", [5, 3]],\n [\"LA\", [4, 5]],\n [\"ME\", [10, -1]],\n [\"MD\", [8, 3]],\n [\"MA\", [9, 1]],\n [\"MI\", [6, 1]],\n [\"MN\", [4, 1]],\n [\"MS\", [5, 5]],\n [\"MO\", [4, 3]],\n [\"MT\", [2, 1]],\n [\"NE\", [3, 3]],\n [\"NV\", [1, 2]],\n [\"NH\", [10, 0]],\n [\"NJ\", [8, 2]],\n [\"NM\", [2, 4]],\n [\"NY\", [8, 1]],\n [\"NC\", [6, 4]],\n [\"ND\", [3, 1]],\n [\"OH\", [6, 2]],\n [\"OK\", [3, 5]],\n [\"OR\", [0, 2]],\n [\"PA\", [7, 2]],\n [\"RI\", [10, 2]],\n [\"SC\", [7, 4]],\n [\"SD\", [3, 2]],\n [\"TN\", [5, 4]],\n [\"TX\", [3, 6]],\n [\"UT\", [1, 3]],\n [\"VT\", [9, 0]],\n [\"VA\", [7, 3]],\n [\"WA\", [0, 1]],\n [\"WV\", [6, 3]],\n [\"WI\", [5, 0]],\n [\"WY\", [2, 2]]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1221,"value":"data = _sampleData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1238,"value":"domain = Array.from(data.get(data.keys().next().value).keys())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1163,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1273,"value":"d3line = d3\n .line()\n .x(d => x(d[0]))\n .y(d => y(d[1]))\n .defined(d => valid(d[1]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1293,"value":"valid = d => d !== null && d !== Infinity && d !== -Infinity && !isNaN(d)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1302,"value":"type = \"linear\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1232,"value":"md`---\n## Sample data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1173,"value":"_sampleDomain = d3.range(10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1181,"value":"_sampleData = new Map(\n [\n \"AL\",\n \"AK\",\n \"AZ\",\n \"AR\",\n \"CA\",\n \"CO\",\n \"CT\",\n \"DC\",\n \"DE\",\n \"FL\",\n \"GA\",\n \"HI\",\n \"ID\",\n \"IL\",\n \"IN\",\n \"IA\",\n \"KS\",\n \"KY\",\n \"LA\",\n \"ME\",\n \"MD\",\n \"MA\",\n \"MI\",\n \"MN\",\n \"MS\",\n \"MO\",\n \"MT\",\n \"NE\",\n \"NV\",\n \"NH\",\n \"NJ\",\n \"NM\",\n \"NY\",\n \"NC\",\n \"ND\",\n \"OH\",\n \"OK\",\n \"OR\",\n \"PA\",\n \"RI\",\n \"SC\",\n \"SD\",\n \"TN\",\n \"TX\",\n \"UT\",\n \"VT\",\n \"VA\",\n \"WA\",\n \"WV\",\n \"WI\",\n \"WY\"\n ].map(state => [\n state,\n new Map(_sampleDomain.map(d => [d, Math.random() > .2 ? Math.random() : 0]))\n ])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"