2b:null 2c:["$","title",null,{"children":"SF PlantFinder Tornado Chart | Arogya Koirala | Observable"}] 31:T584,b = { const plot = Plot.plot({ height: 400, marginLeft: 100, marginLeft: 100, x: { axis: null, grid: true, nice: true, domain: [-1*d3.max(getData().map(d=> d.count))-50, d3.max(getData().map(d=> d.count))+50] // tickFormat: d => d3.format(".0s")(Math.abs(d)) }, y: { label: choice, domain: d3.groupSort(getData(), g => -d3.sum(g, d => d.count), d => d['group']) }, marks: [ Plot.barX(getData(), Plot.stackX({ x: d => d.count * (d['climate'] === "CA Native" ? -1 : 1), y: d => d['group'], fill: d => d['climate'], title: d => `${d['climate']}\n${d['group']}\n${fmt(d.count)}` })), Plot.text(getData(), { filter: d => d['climate'] === "CA Native", dx: -5, x: d => -d.count, y: d => d['group'], text: d => d.count, textAnchor: "end", fontWeight: "bold" }), Plot.text(getData(), { filter: d => d['climate'] === "Exotic", dx: 5, x: d => d.count, y: d => d['group'], text: d => d.count, textAnchor: "start", fontWeight: "bold" }), Plot.ruleX([0]) ] }) return wrap( plot, Swatches({color: d3.scaleOrdinal(aq.from(getData()).select('climate').dedupe().objects().map(d=>d['climate']), d3.schemeTableau10)}), ) }32:T4e2,function radio(config = {}) { let { value: formValue, title, description, submit, options, disabled } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "radio", title, description, submit, getValue: input => { if (input.checked) return input.value; const checked = Array.prototype.find.call(input, radio => radio.checked); return checked ? checked.value : undefined; }, form: html` ` }); form.output.remove(); return form; }33:T906,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }34:T62a, a = { const plot = Plot.plot({ height: 500, marginLeft: 100, marginLeft: 100, x: { axis: null, grid: true, nice: true, domain: [-200, 200] // tickFormat: d => d3.format(".0s")(Math.abs(d)) }, y: { label: "Plant Type", domain: d3.groupSort(plants, g => -d3.sum(g, d => d.count), d => d[column]) }, marks: [ Plot.barX(plants, Plot.stackX({ x: d => d.count * (d[facet] === "CA Native" ? -1 : 1), y: d => d[column], fill: facet, title: d => `${d[facet]}\n${d[column]}\n${fmt(d.count)}` })), Plot.text(plants, { filter: d => d[facet] === "CA Native", dx: -5, x: d => -d.count, y: d => d[column], text: d => d.count, textAnchor: "end", fontWeight: "bold" }), Plot.text(plants, { filter: d => d[facet] === "Exotic", dx: 5, x: d => d.count, y: d => d[column], text: d => d.count, textAnchor: "start", fontWeight: "bold" }), // Plot.text(tornado, { // filter: d => d["year"] === "CY2015", // dx: 5, // x: d => d.profit, // y: d => d["territory"], // text: d => d3.format(".3s")(d.profit), // textAnchor: "start", // fontWeight: "bold" // }), Plot.ruleX([0]) ] }) return wrap( Swatches({color: d3.scaleOrdinal(aq.from(plants).select(facet).dedupe().objects().map(d=>d[facet]), d3.schemeTableau10)}), plot ) }35:[{"id":"237cc00cffa87c88d89e0922c88909631996c2b8908a9162d8e3b6e6e19786a1f21655372d38cbed38ad07bb2d3dd4b29ec2f54db6125896f9934c015f2138fb","href":"https://static.observableusercontent.com/files/237cc00cffa87c88d89e0922c88909631996c2b8908a9162d8e3b6e6e19786a1f21655372d38cbed38ad07bb2d3dd4b29ec2f54db6125896f9934c015f2138fb","name":"ribbon@1.csv","type":"text/csv","lastModified":1682239624388.838,"size":2470},{"id":"6a9f7842c32602afc4713c2ffda41af7a95b3faa76c5b47f410ebde1f96add33cd02b497215d4e7d66e116422c729f13d27beaee93b31bb8011cf65bb7210650","href":"https://static.observableusercontent.com/files/6a9f7842c32602afc4713c2ffda41af7a95b3faa76c5b47f410ebde1f96add33cd02b497215d4e7d66e116422c729f13d27beaee93b31bb8011cf65bb7210650","name":"tornado.csv","type":"text/csv","lastModified":1682239624388.838,"size":534},{"id":"11e67f9e7ab9eb8a1be97f0c8365c299fac11a688443d2ee0977085f1f9475bc1c593ff79776954bebce89797f65fcfe3231209310f11e5fbd0525c4ca8553d4","href":"https://static.observableusercontent.com/files/11e67f9e7ab9eb8a1be97f0c8365c299fac11a688443d2ee0977085f1f9475bc1c593ff79776954bebce89797f65fcfe3231209310f11e5fbd0525c4ca8553d4","name":"linedot.csv","type":"text/csv","lastModified":1682239624388.838,"size":416},{"id":"ccdcd8a98c6338131a78dfffbaf1955d04d7048292520b57cd157d64c728b214ce4bbc18e1f2c064829ec96643bf16742ae9c3317029ad2499ca6dc6c559250b","href":"https://static.observableusercontent.com/files/ccdcd8a98c6338131a78dfffbaf1955d04d7048292520b57cd157d64c728b214ce4bbc18e1f2c064829ec96643bf16742ae9c3317029ad2499ca6dc6c559250b","name":"funnel.csv","type":"text/csv","lastModified":1682239624388.838,"size":180},{"id":"d67b23d671c2b06c544cb3142a3e6e93137a6ab40c05b816da74835e72131c25a84c5b4f5c3dc5059307a8a75ceab5066f9dc59e98b1422bb6984371b79d0faf","href":"https://static.observableusercontent.com/files/d67b23d671c2b06c544cb3142a3e6e93137a6ab40c05b816da74835e72131c25a84c5b4f5c3dc5059307a8a75ceab5066f9dc59e98b1422bb6984371b79d0faf","name":"cleaned.csv","type":"text/csv","lastModified":1682239864288.507,"size":238303},{"id":"82e84c0285ac59ab12fabfb6f62decfdb5bb9bb6f57e77149c26fe4b2a778c336f5d70e179e840cd067bac02823ccfc37e3e77bbd074a1fee9a171ee5e60d6a2","href":"https://static.observableusercontent.com/files/82e84c0285ac59ab12fabfb6f62decfdb5bb9bb6f57e77149c26fe4b2a778c336f5d70e179e840cd067bac02823ccfc37e3e77bbd074a1fee9a171ee5e60d6a2","name":"pyramid.csv","type":"text/csv","lastModified":1683592216265.982,"size":1913}] 2f:{"id":"fce07755982f8df0","slug":null,"title":"SF PlantFinder Tornado Chart","thumbnail":"32cfc558ea1dc0415491711047bc25afea3141000571d204963625461f96ae9c","access_level":"public","create_time":"$D2023-04-23T08:47:04.388Z","update_time":"$D2023-05-09T03:31:45.098Z","view_time":null,"first_public_time":"$D2023-04-23T08:47:04.388Z","has_unpublished_edits":null,"fork":{"id":"d91ee8a412201d38","slug":"plot-powerbi","title":"Hacking Power BI Charts with Plot","owner":{"id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3eb6175bfef7a73a","login":"akoirala","name":"Arogya Koirala","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":"starter_2024"},"version":536,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f16655bda0a03677","login":"akoirala","name":"Arogya Koirala","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":null}],"members":[{"type":"individual","id":"f16655bda0a03677","login":"akoirala","name":"Arogya Koirala","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"SF PlantFinder Tornado Chart","cells":[{"id":532,"value":"# SF PlantFinder Tornado Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":507,"value":"viewof choice = radio({\n title: \"Explore SF's native and exotic plant distributions\",\n description: 'Please select another option to update the chart',\n options: [\n { label: 'Plant Type', value: 'Type of Plant' },\n { label: 'Water Needs', value: 'Water Needs' },\n { label: 'Soil Needs', value: 'Soil Needs' },\n { label: 'Habitat Value', value: 'Habitat Value' },\n { label: 'Suitable Sites', value: 'Site Conditions' },\n { label: 'Associated Wildlife', value: 'Associated Wildlife' },\n ],\n value: 'Type of Plant'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"d3format = require(\"d3-format@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"plants = aq.from(plants_raw).groupby([column, facet]).count().objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"viewof column = Inputs.radio([\"Plant_Type\", \"Size_at_Maturity\", \"Soil_Type\"], {value: \"red\", label: html`Show distribution by`, value:'Plant_Type', format: x => html`${x.replaceAll(\"_\", \" \")}`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"radioToColumn = { return {\n \"Type of Plant\": \"type\", \n \"Associated Wildlife\": \"wild\", \n \"Habitat Value\": \"habitat\", \n \"Soil Needs\": \"soil\", \"Water Needs\": \"water\", \"Location\": \"loc\", \"Site Conditions\": \"site\"\n}}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"getData()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"getData = () => {\n return pyramid.filter(d => d.category==radioToColumn[choice]).map((d)=> {return {\n climate: d.Climate_Appropriate_Plants,\n group: d.variable,\n count: d.value\n }})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"pyramid = await FileAttachment(\"pyramid.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"pyramid","database":"$undefined"},{"id":328,"value":"facet = \"Climate_Appropriate_Plants\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"plants_raw = await FileAttachment(\"cleaned.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"tornado = await FileAttachment(\"tornado.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"fmt = n => d3.format(\",d\")(n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"wrap = (...elems) => {\n const div = document.createElement(\"div\");\n div.className = \"margins\";\n elems.forEach(el => div.appendChild(el));\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"import { aq, op } from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"import {swatches as Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"d3.max(getData().map(d=> d.count))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"md`🌐[ericlo.dev](https://ericlo.dev) 🐱[GitHub Repositories](https://github.com/analyzer2004?tab=repositories) 🐦[Twitter](https://twitter.com/analyzer2004)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"