31:[] 2f:{"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"},{"id":1133,"value":"map = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1267,"value":"chart = type == \"logarithmic\" ? line : bar","pinned":true,"hidden":false,"mode":"ojs"},{"id":1134,"value":"bar = state => svg`\n \n ${domain.map(\n d => svg``\n )}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":1279,"value":"d3line(domain.map(d => [d, data.get(\"MA\").get(d)]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1136,"value":"x = d3\n .scaleBand()\n .domain(domain)\n .range([0, state_size])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1138,"value":"y = d3\n .scaleLinear()\n .domain(extent)\n .range([state_size, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1140,"value":"column = ({ column }) => column * (state_size + state_padding)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1142,"value":"row = ({ row }) => row * (state_size + state_padding)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":1146,"value":"state_size = _width / offset","pinned":true,"hidden":false,"mode":"ojs"},{"id":1148,"value":"_width = width - margin.left - margin.right // `width` is a global in observable","pinned":true,"hidden":false,"mode":"ojs"},{"id":1150,"value":"offset = 12","pinned":true,"hidden":false,"mode":"ojs"},{"id":1152,"value":"margin = ({ top: 100, right: 20, bottom: 20, left: 20 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1154,"value":"state_padding = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":1156,"value":"height = 700 - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1221,"value":"data = _sampleData","pinned":true,"hidden":false,"mode":"ojs"},{"id":1238,"value":"domain = Array.from(data.get(data.keys().next().value).keys())","pinned":true,"hidden":false,"mode":"ojs"},{"id":1163,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":1293,"value":"valid = d => d !== null && d !== Infinity && d !== -Infinity && !isNaN(d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1302,"value":"type = \"linear\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1232,"value":"md`---\n## Sample data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"_sampleDomain = d3.range(10)","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}