3f:null 40:["$","title",null,{"children":"Cannabis Legalization in the U.S. | Zach Krall | Observable"}] 46:T9a1,chart = { const parent = document.createElement('div') parent.style.position = 'relative' // create svg const svg = d3.create('svg') .attr('viewBox', [0, 0, 1110, 620]) // create a background fil svg.append('rect') .attr('id','background') .attr('x', 0) .attr('y', 0) .attr('width', '100%') .attr('height', '100%') .attr('fill', colors['bg']) .attr("style", "transition:all ease 0.3s;") // create a group that will hold all state paths svg.append('g') .selectAll('path') .data(states) .join('path') .attr('fill', d => legend[data.get(d.properties.name)].color) .attr('d', path) .on('mouseover', d => mouseoverEvent(d,parent)) .on('mousemove', d => mousemoveEvent(d,parent)) .on('mouseout', d => mouseoutEvent(d,parent)) // create state outlines svg.append('path') .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr('fill', 'none') .attr('stroke', colors['bg']) .attr('stroke-linejoin', 'round') .attr('stroke-weight', '1') .attr('d', path) // create legend group const key = svg.append('g') .attr('transform','translate(850 490)') // add title to legend key.append('text') .text('Legend') .attr('text-anchor', 'left') .attr('font-family', '"Helvetica Neue", sans-serif') .attr('font-weight', 'bold') .attr('font-size', 14) // create group for all entries in "legend" object const key_items = key.append('g') .attr('transform','translate(0 10)') .selectAll('g') .data(Object.keys(legend)) .enter() .append('g') // create color swatches key_items.append('rect') .attr('transform', (d,i) => `translate(0 ${i*30})`) .attr('width', 20) .attr('height', 20) .attr('fill', d => legend[d].color) // create color label key_items.append('text') .attr('transform', (d,i) => `translate(30 ${i*30+11})`) .text(d => legend[d].description.replace('Legal for ','')) .attr('dominant-baseline', 'middle') .attr('text-anchor', 'left') .attr('font-family', '"Helvetica Neue", sans-serif') .attr('font-weight', 'medium') .attr('font-size', 14) // add chart to parent div parent.appendChild(svg.node()) // add tooltip to parent div parent.appendChild(tooltip) return parent }47:[{"id":"0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","href":"https://static.observableusercontent.com/files/0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","name":"states-albers-10m.json","type":"application/json","lastModified":1588086775180.884,"size":82031},{"id":"f45328460319b24a80da8c072794ac21cfeb61ade9986f8af5f6236b47a14f16fcc375d919a8b32b0343a03acd2b87527606401f46e2cf611d4e21566f40c2de","href":"https://static.observableusercontent.com/files/f45328460319b24a80da8c072794ac21cfeb61ade9986f8af5f6236b47a14f16fcc375d919a8b32b0343a03acd2b87527606401f46e2cf611d4e21566f40c2de","name":"state_cannabis_laws_2020_wikipedia.csv","type":"text/csv","lastModified":1588100149667.163,"size":917}] 44:{"id":"bb04a69360cb681f","slug":"cannabis-legalization-in-the-u-s","title":"Cannabis Legalization in the U.S.","thumbnail":"3e6a95f57bd89029249a35ad719b6cfeeb529afca08bf0792b13dafbfbf00c62","access_level":"public","create_time":"$D2020-04-28T15:04:10.628Z","update_time":"$D2021-07-29T23:39:38.606Z","view_time":null,"first_public_time":"$D2020-04-28T20:22:31.699Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"af6a3e06c4be9264","login":"zachkrall","name":"Zach Krall","avatar_url":"https://avatars-next.observableusercontent.com/1f0dc05bdc5ed69004bc409b4ecd164340016e6024a0d51b9b3383be6c663adf","tier":"starter_2024","bio":"","following":false},"version":990,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b789abddbdfcfb60","login":"zachkrall","name":"Zach Krall","avatar_url":"https://avatars-next.observableusercontent.com/1f0dc05bdc5ed69004bc409b4ecd164340016e6024a0d51b9b3383be6c663adf","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b789abddbdfcfb60","login":"zachkrall","name":"Zach Krall","avatar_url":"https://avatars-next.observableusercontent.com/1f0dc05bdc5ed69004bc409b4ecd164340016e6024a0d51b9b3383be6c663adf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Cannabis Legalization in the U.S.","cells":[{"id":0,"value":"md`# Cannabis Legalization in the U.S. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"md`\nData taken from [Wikipedia](https://en.wikipedia.org/wiki/Legality_of_cannabis_by_U.S._jurisdiction) on April 28, 2020\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"html`\n\n

Recreational & Medical Use: ${stats['Legal'].join(', ')}
Medical Use: ${stats['Medical'].join(', ')}
Medical Use (Limited THC Content): ${stats['Medical Limited'].join(', ')}
No Legal Use: ${stats['Not Legal'].join(', ')}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"md`\n## Functions\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"md`#### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require('d3@5.16.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"data = {\n let csv = await FileAttachment('state_cannabis_laws_2020_wikipedia.csv').text()\n let parse = row => {\n return [row.State, Object.keys(row).filter( i => i = 'State' && row[i] === 'Yes')[0]]\n } \n \n let array = d3.csvParse(csv,parse)\n\n return new Map(array)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"stats = {\n \n let counts = {}\n \n data.forEach((item,state) => {\n if(!counts[item]){\n counts[item] = [state]\n }\n else {\n counts[item].push(state)\n }\n })\n \n return counts\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"legend = ({\n 'Legal': {\n 'color': colors['rec'],\n 'description': 'Legal for Recreational & Medical Use'\n },\n 'Medical': {\n 'color': colors['med'],\n 'description': 'Legal for Medical Use'\n },\n 'Medical Limited': {\n 'color': colors['med_limited'],\n 'description': 'Legal for Medical Use (Limited THC Content)'\n },\n 'Not Legal': {\n 'color': colors['default'],\n 'description': 'No Legal Use'\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"md`#### Design`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"colors = ({\n \"bg\": \"hsla(0, 100%, 100%, 1.0)\",\n \"white\": \"hsla(95, 70%, 100%, 1.0)\",\n \"rec\": \"hsla(95, 65%, 60%, 1.0)\",\n \"med\": \"hsla(95, 60%, 72%, 1.0)\",\n \"med_limited\": \"hsla(95, 50%, 82%, 1.0)\",\n \"default\" : \"hsla(95, 20%, 92%, 1.0)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"md`#### Interactions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"mouseoverEvent = (d,parent) => {\n // set html of tooltip \n tooltip.innerHTML = `

${d.properties.name}

${legend[data.get(d.properties.name)].description}

`\n\n // calc position\n let offsetX = d3.event.layerX > parent.offsetWidth * 0.5 ? '-105%' : '5%'\n let offsetY = d3.event.layerY > parent.offsetHeight * 0.5 ? '-105%' : '5%'\n let offset = `translate(${offsetX}, ${offsetY})`\n\n // change position\n Object.assign(tooltip.style, {\n top: d3.event.layerY + \"px\",\n left: d3.event.layerX + \"px\",\n opacity: \"1.0\",\n transform: offset\n })\n\n // dim all paths\n d3.selectAll(\"path\")\n .attr(\"style\", \"transition:all ease 0.3s; opacity:0.4\")\n\n // keep opacity for current path\n d3.select(d3.event.currentTarget)\n .attr(\"style\", \"transition:all ease 0.3s; opacity:1.0\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"mousemoveEvent = (d,parent) => {\n // calc position\n let offsetX = d3.event.layerX > parent.offsetWidth * 0.5 ? '-105%' : '5%'\n let offsetY = d3.event.layerY > parent.offsetHeight * 0.5 ? '-105%' : '5%'\n let offset = `translate(${offsetX}, ${offsetY})`\n\n // change position\n Object.assign(tooltip.style, {\n top: d3.event.layerY + \"px\",\n left: d3.event.layerX + \"px\",\n transform: offset\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"mouseoutEvent = (d,parent) => {\n // hide tooltip\n Object.assign(tooltip.style, {\n opacity: \"0.0\"\n })\n // return opacity to all paths\n d3.selectAll(\"path\")\n .attr(\"style\", \"transition:all ease 0.3s; opacity:1.0\") \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"tooltip = {\n const div = document.createElement('div')\n \n Object.assign(div.style, {\n transition: 'opacity ease 0.3s',\n position: 'absolute',\n top: '50%',\n left: '50%',\n opacity: '0.0',\n borderRadius: '0.25em',\n padding: '0.7em 1em',\n boxShadow: '0px 0px 10px rgba(0,0,0,0.1)',\n fontSize: '0.7rem',\n fontFamily: '\"Helvetica Neue\", sans-serif',\n background: colors['white'],\n pointerEvents: 'none',\n maxWidth: '11em'\n })\n \n div.innerHTML = 'Tooltip'\n \n return div\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"md`#### Geography`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"us = FileAttachment(\"states-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"states = topojson.feature(us, us.objects.states).features.filter(i=>i.properties.name != \"District of Columbia\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"md`### Design System`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"import { applyStyles } from '@zachkrall/design-system'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"applyStyles()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"