Hello World

2d:null 2e:["$","title",null,{"children":"Rabbits, Cheetahs, Rhinos, and Tortoises | David Alber | Observable"}] 33:T735,chart = { const legendText = ["Rabbits", "Cheetahs", "Rhinos", "Tortoises"]; const legendEmoji = ["🐇", "🐆", "🦏", "🐢"]; const svg = d3.create("svg") .attr("viewBox", [0, 0, 1000, 620]); const color = d3.scaleLinear() .domain([0, 1, 2, 3]) .range(["#db8e8d", "#ffd66f", "#aba59e", "#449753"]); svg.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .join("path") .attr("fill", d => color(d.properties.group)) .attr("d", path); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); svg.append("rect") .attr("transform", "translate(840, 390)") .attr("width", 150) .attr("height", 170) .attr("rx", 2) .attr("ry", 2) .style("fill", "none") .style("stroke", "#8aa") .style("stroke-width", "2px"); svg.append("g") .attr("transform", "translate(850, 406)") .selectAll("g") .data(color.domain()) .enter() .append("rect") .attr("width", 20) .attr("height", 20) .attr("transform", (d, i) => "translate(0, " + (i * 40) + ")") .style("fill", color) svg.append("g") .attr("transform", "translate(850, 406)") .selectAll("g") .data(color.domain()) .enter() .append("text") .data(legendText) .attr("x", 24) .attr("y", 9) .attr("dy", ".35em") .attr("transform", function(d, i) { return "translate(0, " + (i * 40) + ")"; }) .text(function(d, i) { return d + " "; }) .append("tspan") .attr("class", "animal") .text(function(d, i) { return legendEmoji[i]; });; return svg; }34:[{"id":"0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","href":"https://static.observableusercontent.com/files/0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","name":"states-albers-10m.json","type":"application/json","lastModified":1592209719149.502,"size":82031},{"id":"26e55cdd75d88cea60432d28d39189f8a1bb2f72e72351894ac3323f6cc472ec053808d73120e812f3a3ae4eeb1e066401211a5f6de875947ecf2ec9bb2a7872","href":"https://static.observableusercontent.com/files/26e55cdd75d88cea60432d28d39189f8a1bb2f72e72351894ac3323f6cc472ec053808d73120e812f3a3ae4eeb1e066401211a5f6de875947ecf2ec9bb2a7872","name":"states-to-groups.csv","type":"text/csv","lastModified":1592239237650.354,"size":583}] 31:{"id":"f8662f3689993ea2","slug":"rabbits-cheetahs-rhinos-and-tortoises","title":"Rabbits, Cheetahs, Rhinos, and Tortoises","thumbnail":"db467f99d43c0905827dda1364fffc8d80697265f871617d69dfaa638ab50982","access_level":"public","create_time":"$D2020-06-15T08:28:05.630Z","update_time":"$D2020-06-15T17:10:59.510Z","view_time":null,"first_public_time":"$D2020-06-15T16:58:58.997Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7eccd26435b01816","login":"davidalber","name":"David Alber","avatar_url":"https://avatars-next.observableusercontent.com/e675657fcb1e85dd9075d4280f8ea1ac6492e6e2c68dd21bfff60d184e7acbd1","tier":"starter_2024"},"version":284,"publish_version":284,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a266e090b937088","login":"davidalber","name":"David Alber","avatar_url":"https://avatars-next.observableusercontent.com/e675657fcb1e85dd9075d4280f8ea1ac6492e6e2c68dd21bfff60d184e7acbd1","tier":null}],"members":[{"type":"individual","id":"8a266e090b937088","login":"davidalber","name":"David Alber","avatar_url":"https://avatars-next.observableusercontent.com/e675657fcb1e85dd9075d4280f8ea1ac6492e6e2c68dd21bfff60d184e7acbd1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Rabbits, Cheetahs, Rhinos, and Tortoises","cells":[{"id":210,"value":"md`# Rabbits, Cheetahs, Rhinos, and Tortoises\n\nA map of the rabbits, cheetahs, rhinos, and tortoises as defined in the following thread.\n${tweetRef}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"html`\n\n\n \n \n Hello World\n\n \n \n \n ${chart.node()}\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"{\n const data = d3.csvParse(stateGroupsCsv);\n let stateGroups = {};\n data.forEach(state => stateGroups[state.state] = parseInt(state.group));\n \n us.objects.states.geometries.forEach(state => state.properties.group = stateGroups[state.properties.name])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"stateGroupsCsv = FileAttachment(\"states-to-groups.csv\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"us = FileAttachment(\"states-albers-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"path = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"tweetRef = tweet(\"1272256593795694600\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"