3e:null 3f:["$","title",null,{"children":"Gas station inspections data | Alexiah Olsen | Observable"}] 45:T888,Initialpassedgasstationinspections = { // 1. Build the layered map chart exactly as before const chart = Plot.plot({ width: 900, height: 600, style: { overflow: "hidden" }, projection: { type: "mercator", domain: SLOCountymap // Automatically anchors the zoom window to SLO County }, marks: [ // LAYER 1: The overall County boundary shape Plot.geo(SLOCountymap, { stroke: "#94a3b8", fill: "#f8fafc" }), // LAYER 2: Your TIGER/Line Roads file Plot.geo(SLO_roads, { stroke: "#cbd5e1", strokeWidth: 0.5, opacity: 0.7 }), // LAYER 3: Your custom CSV points Plot.dot(Passed_inspections, { x: (row) => { const values = Object.values(row).map(v => parseFloat(String(v).trim())); return values.find(num => num < 0 && num > -180); }, y: (row) => { const values = Object.values(row).map(v => parseFloat(String(v).trim())); return values.find(num => num > 0 && num < 90); }, r: 5, fill: "green", stroke: "white", strokeWidth: 0.5, title: (row) => row.name || row.Name || "Data Point" }) ] }); // 2. Attach the D3 interactive zoom handler (Targets the nested graphic groups) const svg = d3.select(chart); svg.call( d3.zoom() .extent([[0, 0], [850, 600]]) // Matches your actual map dimensions .scaleExtent([1, 15]) // Target just the map graphic layers so the wrapper/labels don't move .translateExtent([[0, 0], [900, 600]]) .on("zoom", (event) => { svg.selectAll("g").attr("transform", event.transform); }) ); // 3. Create a clean HTML container to hold your title and your map separate return html`

SLO County gas station inspections: passed

Zoom and pan to inspect streets and specific gas stations.

${chart} `; }46:T86f,Failedgasstationinspections = { // 1. Build the layered map chart exactly as before const chart = Plot.plot({ width: 900, height: 600, style: { overflow: "hidden" }, projection: { type: "mercator", domain: SLOCountymap // Automatically anchors the zoom window to SLO County }, marks: [ // LAYER 1: The overall County boundary shape Plot.geo(SLOCountymap, { stroke: "#94a3b8", fill: "#f8fafc" }), // LAYER 2: Your TIGER/Line Roads file Plot.geo(SLO_roads, { stroke: "#cbd5e1", strokeWidth: 0.5, opacity: 0.7 }), // LAYER 3: Your custom CSV points Plot.dot(Failed_inspections, { x: (row) => { const values = Object.values(row).map(v => parseFloat(String(v).trim())); return values.find(num => num < 0 && num > -180); }, y: (row) => { const values = Object.values(row).map(v => parseFloat(String(v).trim())); return values.find(num => num > 0 && num < 90); }, r: 5, fill: "red", stroke: "white", strokeWidth: 0.5, title: (row) => row["Name of business"] }) ] }); // 2. Attach the D3 interactive zoom handler (Targets the nested graphic groups) const svg = d3.select(chart); svg.call( d3.zoom() .extent([[0, 0], [850, 600]]) // Matches your actual map dimensions .scaleExtent([1, 15]) .translateExtent([[0, 0], [900, 600]]) .on("zoom", (event) => { // Target just the map graphic layers so the wrapper/labels don't move svg.selectAll("g").attr("transform", event.transform); }) ); // 3. Create a clean HTML container to hold your title and your map separate return html`

SLO County gas station inspections: failed

Zoom and pan to inspect streets and specific gas stations.

${chart} `; }47:Ta88,Mostviolationspergasstation = { // 1. Specify dimensions const width = 600; const height = 500; const margin = 1; // Fixed mapping to handle your business name split safely const name = d => d.id; const names = d => name(d).split(/\s+/g); const format = d3.format(",d"); // Create the pack layout const pack = d3.pack() .size([width - margin * 2, height - margin * 2]) .padding(3); // Map your CSV array const formattedData = Most_violations.map(row => ({ id: row["Name of business"], value: Number(row["Number of violations"]) })); const root = pack(d3.hierarchy({children: formattedData}) .sum(d => d.value)); const color = d3.scaleSequential() .domain([0, root.leaves().length]) .interpolator(d3.interpolateRgb("#146EDB", "#06BF0C")); // Create the SVG container const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-margin, -margin, width, height]) .attr("style", "max-width: 100%; height: auto; font: 8px sans-serif;") .attr("text-anchor", "middle"); const node = svg.append("g") .selectAll() .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`); node.append("title") .text(d => `${d.data.id}\nViolations: ${format(d.value)}`); node.append("circle") .attr("fill-opacity", 0.7) .attr("fill", (d, i) => color(i)) .attr("r", d => d.r); const text = node.append("text") .attr("clip-path", d => `circle(${d.r})`); // FIXED: Passed d.data directly to match your top-level helper function text.selectAll() .data(d => d.value > 1 ? names(d.data) : []) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.35}em`) .text(d => d); // FIXED: Passed d.data directly to match your top-level helper function text.append("tspan") .attr("x", 0) .attr("y", d => `${names(d.data).length / 2 + 0.35}em`) .attr("fill-opacity", 0.7) .text(d => d.value > 1 ? format(d.value) : ""); // Extract the raw DOM node out of D3 const chartElement = svg.node(); // 2. Wrap everything together in your HTML template and return it return html`

Most violations per SLO County gas station

This data comes from 2025 inspection reports provided by the county's Weights and Measures department.

${chartElement}

`; }48:T4ea,Violationspercategory = { const chart = Plot.plot({ width: 900, height: 900, margin: 200, margintop: 0, marginbottom: 20, x: { domain: [0, 30] }, y: { // 1. Turns off the automatic axis layout so it doesn't double-render axis: null, padding: 0.3 }, marks: [ // 2. Explicitly add the axis as a mark to unlock layout controls Plot.axisY({ // Wrap lines when a word goes past ~15 characters (measured in ems) lineWidth: 12, // Forces the stacked text blocks to align nicely against the axis line textAnchor: "end", fontSize: 12 }), Plot.barX(Violation_category, { x: (d) => Number(d["Count "]), y: "Category", sort: {y: "x", reverse: true}, fill: "#0507A3", }), Plot.ruleX([0]) ] }); return html`

Most SLO County gas station violations per category

This data comes from 2025 inspection reports provided by the county's Weights and Measures department.

${chart}

`; }49:[{"id":"2b05bd622431c48a830e3dee1a3fb06680298842fff0b1e3bfae79949226ecd2d3c7035433dfae03ba1ce81d8feb674017da34198597b3200ccb32fc6a97bdb0","href":"https://static.observableusercontent.com/files/2b05bd622431c48a830e3dee1a3fb06680298842fff0b1e3bfae79949226ecd2d3c7035433dfae03ba1ce81d8feb674017da34198597b3200ccb32fc6a97bdb0","name":"Observable_ Gas Station Data - Copy of All violations listed.csv","type":"text/csv","lastModified":1782949674166.92,"size":602},{"id":"e23f9af3aed7c5ef2f46d0e94714f1c1eae8a34808bd97aa3fbd4c30eb1380b29fae5515a1c72265d53f586cfbc15fe9032c4b50eed04df869b23bd5aacf0ea2","href":"https://static.observableusercontent.com/files/e23f9af3aed7c5ef2f46d0e94714f1c1eae8a34808bd97aa3fbd4c30eb1380b29fae5515a1c72265d53f586cfbc15fe9032c4b50eed04df869b23bd5aacf0ea2","name":"Observable_ Gas Station Data - Failed inspections violation totals.csv","type":"text/csv","lastModified":1782941307428.874,"size":5422},{"id":"05a44061d4c75159983dddeccf848eafcb1c3b7efa06fc4fad3de9ed42fa5a3463ab3f88c097926227da4aca294a5e437071f7c94533a0f0bbfc3ba46c7a9097","href":"https://static.observableusercontent.com/files/05a44061d4c75159983dddeccf848eafcb1c3b7efa06fc4fad3de9ed42fa5a3463ab3f88c097926227da4aca294a5e437071f7c94533a0f0bbfc3ba46c7a9097","name":"oVRPH--insert-title-here-.geojson","type":"application/geo+json","lastModified":1781576902958.918,"size":7042},{"id":"3d3f5952d58b01b71c329dac3edc3c79fd1a3b7cf2a0f8f80849b5827db7746e5151edbbf8cd9c08f04f1d11c02813388b6656a9629ee383af43ea16240e172f","href":"https://static.observableusercontent.com/files/3d3f5952d58b01b71c329dac3edc3c79fd1a3b7cf2a0f8f80849b5827db7746e5151edbbf8cd9c08f04f1d11c02813388b6656a9629ee383af43ea16240e172f","name":"tl_2024_06079_roads.json","type":"application/json","lastModified":1781579583250.497,"size":14855961},{"id":"022bfd6839d3b2c6892a59593ee94e205bcc627c4a7fd47e9789c5332bc349a53525c20e728a864ced38bc75844d05e5af7e6fba97f3085ddfc5c092012fe38f","href":"https://static.observableusercontent.com/files/022bfd6839d3b2c6892a59593ee94e205bcc627c4a7fd47e9789c5332bc349a53525c20e728a864ced38bc75844d05e5af7e6fba97f3085ddfc5c092012fe38f","name":"Observable_ Gas Station Data - Failed gas station locations@2.csv","type":"text/csv","lastModified":1783022328641.653,"size":5271},{"id":"0214c62712af08da671c32cbc322a4807cebd134077b26914385ca6cafbf4a347bd7df0f62bafe89be956a1ec5bb0a3257e6ba82dab3196af30ed3c991818a1f","href":"https://static.observableusercontent.com/files/0214c62712af08da671c32cbc322a4807cebd134077b26914385ca6cafbf4a347bd7df0f62bafe89be956a1ec5bb0a3257e6ba82dab3196af30ed3c991818a1f","name":"Observable_ Gas Station Data - Passed gas station locations@2.csv","type":"text/csv","lastModified":1783022328631.783,"size":3265},{"id":"8e8b7afd653ca14a330396c82a0c6c69544ec6538d4a1072613c57c9469d3f15c551060e8d65c1deef01cfa2d460afa17059c7163af1b4af47f97cadfc62c81d","href":"https://static.observableusercontent.com/files/8e8b7afd653ca14a330396c82a0c6c69544ec6538d4a1072613c57c9469d3f15c551060e8d65c1deef01cfa2d460afa17059c7163af1b4af47f97cadfc62c81d","name":"Gas station inspections data - All gas stations@1.csv","type":"text/csv","lastModified":1783536817243.952,"size":6687}] 43:{"id":"e7d0ce0e02f15ed2","slug":null,"title":"Gas station inspections data","thumbnail":"9bd1a488dda05dd51461882d5e6669cd55289a8d04a90e177561de133f53a26c","access_level":"public","create_time":"$D2026-06-16T02:27:48.451Z","update_time":"$D2026-07-08T20:15:10.866Z","view_time":null,"first_public_time":"$D2026-07-02T21:02:41.938Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"33333e7f200bdbdc","login":"alexiah-olsenn","name":"Alexiah Olsen","avatar_url":"https://avatars-next.observableusercontent.com/1f16310472144633a1f73283a5e093b3d5b7a2baf680c78d911be32bdd50bffb","tier":"free_2026","bio":"","following":false},"version":495,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b83e6a13c50f2e5c","login":"alexiah-olsenn","name":"Alexiah Olsen","avatar_url":"https://avatars-next.observableusercontent.com/1f16310472144633a1f73283a5e093b3d5b7a2baf680c78d911be32bdd50bffb","tier":null,"bio":"Service journalism reporter for the San Luis Obispo Tribune","following":false}],"members":[{"type":"team","id":"33333e7f200bdbdc","login":"alexiah-olsenn","name":"Alexiah Olsen","avatar_url":"https://avatars-next.observableusercontent.com/1f16310472144633a1f73283a5e093b3d5b7a2baf680c78d911be32bdd50bffb","tier":"free_2026","role":"editor"},{"type":"individual","id":"b83e6a13c50f2e5c","login":"alexiah-olsenn","name":"Alexiah Olsen","avatar_url":"https://avatars-next.observableusercontent.com/1f16310472144633a1f73283a5e093b3d5b7a2baf680c78d911be32bdd50bffb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Gas station inspections data","cells":[{"id":0,"value":"# Gas station inspections data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"SLOCountymap = FileAttachment(\"oVRPH--insert-title-here-.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"SLO_roads = FileAttachment(\"tl_2024_06079_roads.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"Passed_inspections = FileAttachment(\"Observable_ Gas Station Data - Passed gas station locations@2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"Failed_inspections = FileAttachment(\"Observable_ Gas Station Data - Failed gas station locations@2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"Most_violations = FileAttachment(\"Observable_ Gas Station Data - Failed inspections violation totals.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"Violation_category = FileAttachment(\"Observable_ Gas Station Data - Copy of All violations listed.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"All_gas_stations = FileAttachment(\"Gas station inspections data - All gas stations@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"Gas_station_finder = md`\n# Gas Station Finder #\n## Search for your local gas station inspection grade ##\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"viewof search = Inputs.search(All_gas_stations, {\n placeholder: \"Search by name, address, or grade...\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"viewof table = Inputs.table(search, {\n format: {\n // Keep your color formatting code here\n \"Inspections Grade\": grade => {\n let bgColor = grade === \"Failed\" ? \"#ffccd5\" // Soft light red background\n : grade === \"Passed\" ? \"#d4edda\" // Soft light green background\n : \"transparent\";\n let textColor = grade === \"Failed\" ? \"#990011\" // Dark red text\n : grade === \"Passed\" ? \"#155724\" // Dark green text\n : \"inherit\";\n return htl.html`

${grade}

`;\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 44:"$43:body"