{"id":"4f96eae389c0810b","slug":"trees-in-sf","trashed":false,"description":"","likes":1,"publish_level":"live","forks":0,"fork_of":null,"has_importers":false,"update_time":"2024-05-28T06:39:51.275Z","first_public_version":207,"paused_version":null,"publish_time":"2024-05-28T06:26:45.728Z","publish_version":231,"latest_version":231,"thumbnail":"f42aa357f477f0c0b896c97d29b00b551a1611ae57b12f2412dee867ae459ff6","default_thumbnail":"f42aa357f477f0c0b896c97d29b00b551a1611ae57b12f2412dee867ae459ff6","roles":[],"sharing":null,"owner":{"id":"4a29764d3c5ac978","avatar_url":"https://avatars.observableusercontent.com/avatar/c2ab36a2b36058e9d5ad6cab5c830958647aa34d40616ae28603a9a9e5d0064a","login":"joshuahhh","name":"Joshua Horowitz","bio":"","home_url":"http://joshuahhh.com","type":"team","tier":"starter_2024"},"creator":{"id":"ddc378ed3cec53e0","avatar_url":"https://avatars.observableusercontent.com/avatar/c2ab36a2b36058e9d5ad6cab5c830958647aa34d40616ae28603a9a9e5d0064a","login":"joshuahhh","name":"Joshua Horowitz","bio":"","home_url":"http://joshuahhh.com","tier":"public"},"authors":[{"id":"ddc378ed3cec53e0","avatar_url":"https://avatars.observableusercontent.com/avatar/c2ab36a2b36058e9d5ad6cab5c830958647aa34d40616ae28603a9a9e5d0064a","name":"Joshua Horowitz","login":"joshuahhh","bio":"","home_url":"http://joshuahhh.com","tier":"public","approved":true,"description":""}],"collections":[],"files":[{"id":"eb94ff1a907141168e28030d601ed1c45f31e0b33edb52c341d07e180e6b8fcdf0273730264f69cfac15a8d33574a1abbefe6a7d181532016e39e6bacae0701f","url":"https://static.observableusercontent.com/files/eb94ff1a907141168e28030d601ed1c45f31e0b33edb52c341d07e180e6b8fcdf0273730264f69cfac15a8d33574a1abbefe6a7d181532016e39e6bacae0701f","download_url":"https://static.observableusercontent.com/files/eb94ff1a907141168e28030d601ed1c45f31e0b33edb52c341d07e180e6b8fcdf0273730264f69cfac15a8d33574a1abbefe6a7d181532016e39e6bacae0701f?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27Street_Tree_List.csv.gz","name":"Street_Tree_List.csv.gz","create_time":"2024-05-28T06:21:15.801Z","mime_type":"application/gzip","status":"public","size":13959463,"content_encoding":null,"private_bucket_id":null}],"comments":[],"commenting_lock":null,"suggestion_from":null,"suggestions_to":[],"version":231,"title":"Street Trees in SF","license":null,"copyright":"","nodes":[{"id":0,"value":"md`# Street Trees in SF`","pinned":false,"mode":"js","data":null,"name":null},{"id":208,"value":"**2024 update**: When I made this in 2019, there were no functioning SF tree maps on the web. Fortunately, there are now several good options, including [an official one from SF DPW](https://bsm.sfdpw.org/urbanforestry/) and [another from the Chronicle](https://www.sfchronicle.com/projects/2022/san-francisco-street-trees/). Please check those out! (But I'm leaving this one up, for old times' sake. ❤️)","pinned":false,"mode":"md","data":null,"name":""},{"id":4,"value":"map = {\n  let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n  yield container;\n\n  let map = L.map(container).setView([37.783333, -122.416667], 12);\n  let osmLayer = L.tileLayer('https://b.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n      attribution: '&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors'\n  }).addTo(map);\n  \n  let markers = markerClusterGroup({spiderfyOnMaxZoom: false, disableClusteringAtZoom: 18});\n  for (var i = 0; i < data.length / 1; i += 1) {\n    markers.addLayer(L.circleMarker([+data[i].Latitude, +data[i].Longitude], {radius: 5})\n                      .bindPopup(data[i].qSpecies));\n  }\n  map.addLayer(markers);\n}","pinned":false,"mode":"js","data":null,"name":null},{"id":140,"value":"md`\nPlease give the map **10 seconds** to load – there are 100,000s of trees to show!\n\nData from [DataSF](https://data.sfgov.org/City-Infrastructure/Street-Tree-List/tkzw-k3nq). Leaflet assistance from [this tutorial](https://observablehq.com/@tmcw/leaflet). 🙏\n`","pinned":false,"mode":"js","data":null,"name":null},{"id":141,"value":"md``","pinned":false,"mode":"js","data":null,"name":null},{"id":150,"value":"md``","pinned":false,"mode":"js","data":null,"name":null},{"id":152,"value":"md``","pinned":false,"mode":"js","data":null,"name":null},{"id":210,"value":"## Appendix","pinned":false,"mode":"md","data":null,"name":""},{"id":2,"value":"L = require('leaflet@1.2.0')","pinned":false,"mode":"js","data":null,"name":null},{"id":69,"value":"markerClusterGroup = {\n  await require('leaflet.markercluster');\n  return L.markerClusterGroup;\n}","pinned":false,"mode":"js","data":null,"name":null},{"id":6,"value":"html`\n  [Stylesheets included invisibly in this cell.]\n  <link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />\n  <link href='${resolve('leaflet.markercluster/dist/MarkerCluster.Default.css')}' rel='stylesheet' />\n  <link href='${resolve('leaflet.markercluster/dist/MarkerCluster.css')}' rel='stylesheet' />\n`","pinned":false,"mode":"js","data":null,"name":null},{"id":19,"value":"d3 = require(\"d3@5\")","pinned":false,"mode":"js","data":null,"name":null},{"id":175,"value":"data = {\n  let decompressedStream =\n    (await FileAttachment(\"Street_Tree_List.csv.gz\").stream())\n    .pipeThrough(new DecompressionStream(\"gzip\"));\n  let text = await new Response(decompressedStream).text();\n  return d3.csvParse(text);\n}","pinned":false,"mode":"js","data":null,"name":null}],"resolutions":[],"schedule":null,"last_view_time":null}