27:null 28:["$","title",null,{"children":"Los Angeles County Parks and Library Distribution | Catherine Deal's Workspace | Observable"}] 2d:Td6d,chart = { // top level SVG const svg = d3.create("svg").attr("viewBox", `0 0 ${mapWidth} ${mapHeight}`); // grouping element const g = svg.append('g'); const baseGroup = g.append('g').attr('class', 'base'); // the base county layer baseGroup .append("path") .datum(la_county) .attr("fill", '#f4f4f4') .attr("d", path); // for the roads const roadsGroup = g.append('g').attr('class', 'roads'); roadsGroup .selectAll('.road') .data(roads.features) .join('path') .attr('class', 'road') .attr('fill', 'none') .attr('opacity', 0.5) .attr('stroke', '#333333') .attr('stroke-width', 0.5) .attr('d', path); // for cities const citiesGroup = g.append('g').attr('class', 'cities'); // for each city const cityCircles = citiesGroup .selectAll('.city') .data(selectedCities) .join('g') .attr('class', 'city') .attr('data-name', d => d.name) .attr( 'transform', d => `translate(${mercator(d.coordinates)[0]}, ${ mercator(d.coordinates)[1] })` ); // city circles cityCircles .append('circle') .attr('fill', '#FFFFFF') .attr('stroke', "#333333") .attr('stroke-width', '1.0') .attr('cx', 0) .attr('cy', 0) .attr('r', 6); // city labels cityCircles .append('text') .attr('x', d => d.x || 7) .attr('y', d => d.y || 5) .attr('text-anchor', d => d.anchor || 'start') .attr('font-family', 'sans-serif') .attr('fill', 'none') .attr('stroke', 'white') .attr('stroke-width', '2.5') .attr('stroke-opacity', '0.8') .attr('font-size', '12px') .attr('pointer-events', 'none') .attr('font-style', d => (d.type === 'neighborhood' ? 'italic' : null)) .text(d => d.name); cityCircles .append('text') .attr('x', d => d.x || 7) .attr('y', d => d.y || 5) .attr('text-anchor', d => d.anchor || 'start') .attr('font-family', 'sans-serif') .attr('fill', '#222') .attr('font-size', '12px') .attr('pointer-events', 'none') .attr('font-style', d => (d.type === 'neighborhood' ? 'italic' : null)) .text(d => d.name); // for parks const parksGroup = g.append('g').attr('class', 'cities'); // for each park const parkCircles = parksGroup .selectAll('.park') .data(selectedParks) .join('g') .attr('class', 'park') .attr('data-name', d => d.name) .attr( 'transform', d => `translate(${mercator(d.coordinates)[0]}, ${ mercator(d.coordinates)[1] })` ); // parks circles parkCircles .append('circle') .attr('fill', parkCircleColor) .attr('stroke', "#FFFFFF") .attr('cx', 0) .attr('cy', 0) .attr('r', parkRadiusWidth); // for libraries const librariesGroup = g.append('g').attr('class', 'libraries'); // for each library const libraryCircles = librariesGroup .selectAll('.library') .data(selectedLibraries) .join('g') .attr('class', 'library') .attr('data-name', d => d.name) .attr( 'transform', d => `translate(${mercator(d.coordinates)[0]}, ${ mercator(d.coordinates)[1] })` ); // library circles libraryCircles .append('circle') .attr('fill', libraryCircleColor) .attr('stroke', '#7f7f7f') .attr('cx', 0) .attr('cy', 0) .attr('r', libraryRadiusWidth); g.node().appendChild(citiesGroup.node()); return svg.node(); }2e:T4ee,cityList = [ { name: 'Downtown', type: 'neighborhood', coordinates: [-118.24859619140626, 34.043556504127444], }, { name: "Malibu", type: 'city', coordinates: [-118.7798, 34.05], x: "-9", anchor: "end" }, { name: "Long Beach", type: 'city', coordinates: [-118.21426391601561, 33.804255802014865], }, { name: "Santa Clarita", type: 'city', coordinates: [-118.53561401367188, 34.39897808891371] }, { name: "Lancaster", type: 'city', coordinates: [-118.157958984375, 34.69476751842919] }, { name: "Beverly Hills", type: 'city', coordinates: [-118.3993148803711, 34.073706174064164] }, { name: "West Hollywood", type: 'city', coordinates: [-118.35708618164064, 34.091620235447365] }, { name: "Arcadia", type: 'city', coordinates: [-118.03779602050781, 34.13709922600642] }, { name: "Santa Monica", type: 'city', coordinates: [-118.48342895507812, 34.011119420618684], x: "-9", anchor: "end" }, { name: 'Pasadena', type: 'city', coordinates: [-118.14452, 34.14778], }, { name: 'Pomona', type: 'city', coordinates: [-117.749992, 34.055103], x: '-9', anchor: 'end', } ]2f:[{"id":"9041c84bcbee730a9da863c3ffde1fd7b79d533a05299cd3c7d44dfc85f7bb9b2aef7c24edec3b67a1089c64a93f69181774028f44818b745299fe7efd575cb5","href":"https://static.observableusercontent.com/files/9041c84bcbee730a9da863c3ffde1fd7b79d533a05299cd3c7d44dfc85f7bb9b2aef7c24edec3b67a1089c64a93f69181774028f44818b745299fe7efd575cb5","name":"libraries_final.json","type":"application/json","lastModified":1749096274282.714,"size":21352},{"id":"edefe988185b389c2bce002a9c7f14ee116dfda6a4dc78321af98c0ce5c1b20adff9542cbc4b11f375c27b581139ef34704ff042d6a9b9207c7d9125540faae3","href":"https://static.observableusercontent.com/files/edefe988185b389c2bce002a9c7f14ee116dfda6a4dc78321af98c0ce5c1b20adff9542cbc4b11f375c27b581139ef34704ff042d6a9b9207c7d9125540faae3","name":"parks_final.json","type":"application/json","lastModified":1749096379849.923,"size":106700},{"id":"7ddaa5dde913a728d176b009cb2ffd6911a183a461bc07578fe6389cc563530c8af553162f56a24a66335a49180502fc66ed0a5896edf12652409cbc51647202","href":"https://static.observableusercontent.com/files/7ddaa5dde913a728d176b009cb2ffd6911a183a461bc07578fe6389cc563530c8af553162f56a24a66335a49180502fc66ed0a5896edf12652409cbc51647202","name":"parkList.json","type":"application/json","lastModified":1748578109218.661,"size":110137},{"id":"a796667902175adfbc322b04ce84d32c3f16ca9812326783f166d0b36e01978774c4d39a94258bb469f88ccae0d9fa536c08f7f1dd6c6bbd5ff5e12955973ca2","href":"https://static.observableusercontent.com/files/a796667902175adfbc322b04ce84d32c3f16ca9812326783f166d0b36e01978774c4d39a94258bb469f88ccae0d9fa536c08f7f1dd6c6bbd5ff5e12955973ca2","name":"libraryList.json","type":"application/json","lastModified":1748578109218.661,"size":9096},{"id":"a8f634ac5386273b22e86ceb85a596297919831ef492d706471f1a35c8b8b23de1a662189fcbf814ecf281839c1292c32eaa5e7e1d63ad926f243d1b670fc584","href":"https://static.observableusercontent.com/files/a8f634ac5386273b22e86ceb85a596297919831ef492d706471f1a35c8b8b23de1a662189fcbf814ecf281839c1292c32eaa5e7e1d63ad926f243d1b670fc584","name":"los-angeles-county-mercator.json","type":"application/json","lastModified":1748578109218.661,"size":17431},{"id":"087ae1d6195f20b658f89407806fab6dc69da77466dfcff053515f8030bfb259b3701b20b3a3c95a31ee97d724dc4501464347a214fef4567c747f208d693b44","href":"https://static.observableusercontent.com/files/087ae1d6195f20b658f89407806fab6dc69da77466dfcff053515f8030bfb259b3701b20b3a3c95a31ee97d724dc4501464347a214fef4567c747f208d693b44","name":"los-angeles-county-roads-mercator.json","type":"application/json","lastModified":1748578109218.661,"size":553026},{"id":"1a79740b7bc2e07fbe577046d4d184d2033a216f3f82b3c754b8d0d116357dc2e4fa4abb621ae8900576f3989d4b8d92d5c520a3b540219191d18347fd1f560f","href":"https://static.observableusercontent.com/files/1a79740b7bc2e07fbe577046d4d184d2033a216f3f82b3c754b8d0d116357dc2e4fa4abb621ae8900576f3989d4b8d92d5c520a3b540219191d18347fd1f560f","name":"librariesWithCity.json","type":"application/json","lastModified":1748578444881.418,"size":11047},{"id":"7b93cfd283b2b7b93569025cae6db661a066b1802718b91aeae75f81ce44ccb12be1e8af0d43d4375d327cc78f1baeccc4e8437a956f46f04d01315ac23563c6","href":"https://static.observableusercontent.com/files/7b93cfd283b2b7b93569025cae6db661a066b1802718b91aeae75f81ce44ccb12be1e8af0d43d4375d327cc78f1baeccc4e8437a956f46f04d01315ac23563c6","name":"parksWithCity.json","type":"application/json","lastModified":1748578522783.569,"size":130309},{"id":"f6de0443a791144d7a953336657858f9af2f7f935172c908cad275b0ba376409ecd2dc63662814104ac7304cc63049c1ed77965fdfc2f0f259a1b39aa4913e76","href":"https://static.observableusercontent.com/files/f6de0443a791144d7a953336657858f9af2f7f935172c908cad275b0ba376409ecd2dc63662814104ac7304cc63049c1ed77965fdfc2f0f259a1b39aa4913e76","name":"parksWithCoordinatesAndCity.json","type":"application/json","lastModified":1748582340191.125,"size":114969},{"id":"18ba2935e5983b57d7f6c92833d9aba70129921f8709882f5caa7d03e378577b42cb0961006dc4fec902038d0525dc10c2732998072c8056bb3e6e3f5f382400","href":"https://static.observableusercontent.com/files/18ba2935e5983b57d7f6c92833d9aba70129921f8709882f5caa7d03e378577b42cb0961006dc4fec902038d0525dc10c2732998072c8056bb3e6e3f5f382400","name":"librariesWithCoordinatesAndCity.json","type":"application/json","lastModified":1748583375506.134,"size":17862},{"id":"ea024e711afb2c4348ab04e5aebde7efd5970ca7e39ba69f90d8304f11a45b75d07beb88a672b56631bba479439e50c8532f634c8d702a08a2bd6c3694eb36fa","href":"https://static.observableusercontent.com/files/ea024e711afb2c4348ab04e5aebde7efd5970ca7e39ba69f90d8304f11a45b75d07beb88a672b56631bba479439e50c8532f634c8d702a08a2bd6c3694eb36fa","name":"librariesWithCorrectedCoordinatesAndCity.json","type":"application/json","lastModified":1748583673067.951,"size":19315}] 2b:{"id":"a7f15e4b75c33108","slug":null,"title":"Los Angeles County Parks and Library Distribution","thumbnail":"ff059d0ee8a4501ec481d94ac7c0a1459695599b3c297dc640ba4f7c9652b8dd","access_level":"public","create_time":"$D2025-05-30T04:08:29.218Z","update_time":"$D2025-06-05T04:14:22.287Z","view_time":null,"first_public_time":"$D2025-05-30T07:59:41.917Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f78043483f179305","login":"catherine-deal-ws","name":"Catherine Deal's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/4ec4a3f2b854476d7515e919a7797cce5de900ff54ad61af93e94e1d4bea24c3","tier":"starter_2024"},"version":456,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f2ee2f1935931d21","login":"catherine-deal","name":"Catherine Deal","avatar_url":"https://avatars-next.observableusercontent.com/bf2916f2279ef122e5fe796d142137e4d94f582b39b634b55f4526e7964b4374","tier":null}],"members":[{"type":"individual","id":"f2ee2f1935931d21","login":"catherine-deal","name":"Catherine Deal","avatar_url":"https://avatars-next.observableusercontent.com/bf2916f2279ef122e5fe796d142137e4d94f582b39b634b55f4526e7964b4374","tier":null,"role":"editor"},{"type":"team","id":"f78043483f179305","login":"catherine-deal-ws","name":"Catherine Deal's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/4ec4a3f2b854476d7515e919a7797cce5de900ff54ad61af93e94e1d4bea24c3","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Los Angeles County Parks and Library Distribution","cells":[{"id":0,"value":"md`# Los Angeles County Parks and Library Distribution\n\nA simple map of Los Angeles County pre-projected in the [Mercator projection](https://en.wikipedia.org/wiki/Mercator_projection).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"mercator = d3\n .geoMercator()\n .center([-118.24, 34.3])\n .scale((1 << 21) / (26 * Math.PI))\n .translate([320, 320])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"tooltip = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`### Layers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"viewof selectedCityNames = checkbox({\n title: \"Show Data For These Cities\",\n options: Array.from(new Set(cityList.map(d => d.name))).sort(),\n value: [\"Arcadia\", \"Beverly Hills\", \"Downtown\", \"Lancaster\", \"Long Beach\", \"Malibu\", \"Pasadena\", \"Pomona\", \"Santa Clarita\", \"Santa Monica\", \"West Hollywood\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"viewof parkRadiusWidth = slider({\n title: \"Park Circle Size\",\n value: 0.5,\n min: 2,\n max: 8,\n step: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof parkCircleColor = color({\n title: \"Park Dot Color\",\n value: \"#FF0000\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"viewof libraryRadiusWidth = slider({\n title: \"Library Dot Size\",\n value: 3.5,\n min: 2,\n max: 8,\n step: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof libraryCircleColor = color({\n title: \"Library Dot Color\",\n value: \"#00FFFF\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"selectedCities = cityList.filter(d => selectedCityNames.includes(d.name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"parks = {\n const file = FileAttachment(\"parks_final.json\");\n return await file.json();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"parkList = parks.map(d => ({\n name: d.name,\n city: d.city,\n coordinates: [d.longitude, d.latitude].map(Number)\n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"selectedParks = parkList.filter(d => selectedCityNames.includes(d.city))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"libraries = {\n const file = FileAttachment(\"libraries_final.json\");\n const data = await file.json();\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"libraryList = libraries.map(d => ({\n name: d.name,\n city: d.city,\n coordinates: [d.longitude, d.latitude].map(Number)\n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"selectedLibraries = libraryList.filter(d => selectedCityNames.includes(d.city))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"la_county = {\n const file = FileAttachment(`los-angeles-county-mercator.json`);\n const json = await file.json();\n return topojson.feature(json, json.objects.los_angeles_county);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"roads = {\n const file = FileAttachment(`los-angeles-county-roads-mercator.json`);\n const json = await file.json();\n return topojson.feature(json, json.objects.roads);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`### Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"mapWidth = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"mapHeight = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import {slider, color, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"