31:[] 2f:{"title":"young people experiencing homelessness, 2013 - 2020","cells":[{"id":0,"value":"md`# young people experiencing homelessness, 2013 - 2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"html`\n\n\n${box}\n`;","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"makePath = {\n function mouseenter(e, feature) {\n e.target.setAttribute('fill', 'green');\n name.innerHTML = feature.properties.name;\n }\n \n function mouseleave(e) {\n e.target.removeAttribute('fill');\n callout(tooltip, null)\n }\n \n function mousemove(e, feature) {\n console.log(feature)\n callout(tooltip, data.get(feature.id)[year])\n tooltip.attr('transform', `translate(${d3.pointer(e)})`)\n }\n \n return feature => svg`\n mouseenter(e, feature)}\n onmouseleave=${mouseleave}\n onmousemove=${e => mousemove(e, feature)}\n />`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"tooltip = d3.select('#tooltip');","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"name = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"box = html`

hovering over ${name}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"year = '2013-2014';","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"us = d3.json('https://cdn.jsdelivr.net/npm/us-atlas@3/states-albers-10m.json');","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"states = topojson.feature(us, us.objects.states)","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"data = new Map((await d3.json('https://wsjnewsgraphics.s3.amazonaws.com/projects/archibald/149k-elOtJSFXSGhIygLxTqS1gaxzlFtIdLzPIz0ArYY-dev.json')).map(d => [d.state, d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"import { callout } from \"@d3/line-chart-with-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}