2a:null 2b:["$","title",null,{"children":"Citibike Stations | hower_teaching | Observable"}] 30:T41a, const stationLayer = L.layerGroup().addTo(citibikeMap); const canvasRenderer = L.canvas({ padding: 0.5 }); stations.forEach(function (station) { const marker = L.circleMarker([station.lat, station.lon], { renderer: canvasRenderer, radius: 4, weight: 1, color: "#333", opacity: 0.5, fillColor: colorForStation(station), fillOpacity: 0.85 }); const tooltipHtml = '

' + "" + station.name + "
" + "🚲 Bikes available: " + station.bikesAvailable + " (" + station.ebikesAvailable + " e-bikes)
" + "🅿️ Open docks: " + station.docksAvailable + "
" + "Total capacity: " + station.capacity + "
" + 'Updated ' + (station.lastReported ? station.lastReported.toLocaleTimeString() : "—") + "" + "

"; marker.bindTooltip(tooltipHtml, { sticky: true, direction: "top", offset: [0, -4] }); marker.addTo(stationLayer); }); 31:T70e,const barRects = Array.from(miniBarChart.querySelectorAll('g[aria-label="bar"] rect')); const highlightLayer = L.layerGroup().addTo(citibikeMap); const highlightMarkers = top10Sorted.map(function (station) { const marker = L.circleMarker([station.lat, station.lon], { radius: 8, weight: 2.5, color: top10Color(station.id), fillColor: top10Color(station.id), fillOpacity: 0.25, opacity: 1 }); marker.addTo(highlightLayer); return marker; }); function updateConnectorLines() { const mapRect = mapDiv.getBoundingClientRect(); while (overlaySvg.firstChild) overlaySvg.removeChild(overlaySvg.firstChild); top10Sorted.forEach(function (station, i) { const barRect = barRects[i].getBoundingClientRect(); const barPoint = { x: barRect.left - mapRect.left, y: barRect.top + barRect.height / 2 - mapRect.top }; const mapPoint = citibikeMap.latLngToContainerPoint([station.lat, station.lon]); const color = top10Color(station.id); const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute("x1", mapPoint.x); line.setAttribute("y1", mapPoint.y); line.setAttribute("x2", barPoint.x); line.setAttribute("y2", barPoint.y); line.setAttribute("stroke", color); line.setAttribute("stroke-width", "1.5"); line.setAttribute("stroke-dasharray", "4,3"); line.setAttribute("opacity", "0.85"); overlaySvg.appendChild(line); const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle"); dot.setAttribute("cx", mapPoint.x); dot.setAttribute("cy", mapPoint.y); dot.setAttribute("r", 2.5); dot.setAttribute("fill", color); overlaySvg.appendChild(dot); }); } updateConnectorLines(); citibikeMap.on("move zoom resize", updateConnectorLines);32:[] 2e:{"id":"9edfc8f20719e36c","slug":"citibikestations","title":"Citibike Stations","thumbnail":"775c44c71cd3d3fb48a844b1edbcfe54fb9f6820378e479391c48470ec43aad6","access_level":"public","create_time":"$D2026-09-02T21:32:26.797Z","update_time":"$D2026-09-02T22:41:04.774Z","view_time":null,"first_public_time":"$D2026-09-02T22:16:31.156Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0db7c8d181c130e4","login":"howerteaching","name":"hower_teaching","avatar_url":"https://avatars-next.observableusercontent.com/c84680807127542e6943c4528de050d301ffcd4bf3ba76bd86d9acdec0397b29","tier":"pro_2024"},"version":147,"publish_version":147,"role":null,"authored":false,"authors":[{"type":"individual","id":"df84799035553ff3","login":"fleeth","name":"Fleet Hower","avatar_url":"https://avatars-next.observableusercontent.com/bac6c76c1e7bcb5ac4be02b2a91e9bee64ecbb953fb1e9d52d6563dcb78eefca","tier":null}],"members":[{"type":"team","id":"0db7c8d181c130e4","login":"howerteaching","name":"hower_teaching","avatar_url":"https://avatars-next.observableusercontent.com/c84680807127542e6943c4528de050d301ffcd4bf3ba76bd86d9acdec0397b29","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Citibike Stations","cells":[{"id":44,"value":"# Citibike Stations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":29,"value":"import * as L from \"npm:leaflet\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":43,"value":"{\n const link = document.createElement(\"link\");\n link.rel = \"stylesheet\";\n link.href = \"https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css\";\n document.head.appendChild(link);\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":30,"value":"const stationInfoResp = await fetch(\"https://gbfs.citibikenyc.com/gbfs/en/station_information.json\");\nconst stationStatusResp = await fetch(\"https://gbfs.citibikenyc.com/gbfs/en/station_status.json\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":31,"value":"const stationInfoJson = await stationInfoResp.json();\nconst stationStatusJson = await stationStatusResp.json();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":32,"value":"const statusById = new Map(\n stationStatusJson.data.stations.map(function (status) {\n return [status.station_id, status];\n })\n);\n\nconst stations = stationInfoJson.data.stations\n .map(function (info) {\n const status = statusById.get(info.station_id);\n return {\n id: info.station_id,\n name: info.name,\n lon: info.lon,\n lat: info.lat,\n capacity: info.capacity,\n bikesAvailable: status ? status.num_bikes_available : null,\n ebikesAvailable: status ? status.num_ebikes_available : null,\n docksAvailable: status ? status.num_docks_available : null,\n isRenting: status ? status.is_renting === 1 : false,\n isInstalled: status ? status.is_installed === 1 : false,\n lastReported: status && status.last_reported ? new Date(status.last_reported * 1000) : null\n };\n })\n .filter(function (station) {\n return station.isInstalled && station.lon != null && station.lat != null;\n });","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":33,"value":"function colorForStation(station) {\n if (!station.capacity || station.capacity <= 0) return \"#999\";\n const frac = station.bikesAvailable / station.capacity;\n return d3.interpolateRdYlGn(Math.max(0, Math.min(1, frac)));\n}\n\nconst top10Stations = stations\n .slice()\n .sort(function (a, b) { return d3.descending(a.bikesAvailable, b.bikesAvailable); })\n .slice(0, 10);\n\nconst top10Sorted = top10Stations\n .slice()\n .sort(function (a, b) { return d3.ascending(a.bikesAvailable, b.bikesAvailable); });\n\nconst top10Color = d3.scaleOrdinal(\n top10Sorted.map(function (station) { return station.id; }),\n d3.schemeTableau10\n);\n\nconst asOfFixed = new Date(stationStatusJson.last_updated * 1000);\nconst totalBikesNow = d3.sum(stations, function (station) { return station.bikesAvailable; });\nconst totalDocksNow = d3.sum(stations, function (station) { return station.docksAvailable; });","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":34,"value":"display(html`

NYC Citi Bike Stations — Live Availability

\n 2,417 active stations · 34,174 bikes available · 31,781 open docks ·\n updated 5:57:48 PM 9/2/2026\n — hover any station for live bike/dock counts. Data: Citi Bike GBFS feed.\n

`);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":35,"value":"const mapDiv = display(html`

`);\nconst citibikeMap = L.map(mapDiv).setView([40.73, -73.95], 12);\n\nconst osmTiles = L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: '© OpenStreetMap contributors',\n maxZoom: 19\n}).addTo(citibikeMap);\n\nosmTiles.getContainer().style.filter = \"grayscale(1) brightness(1.05) contrast(0.95)\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":37,"value":"$30","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":38,"value":"const legend = L.control({position: \"bottomright\"});\nlegend.onAdd = function () {\n const div = L.DomUtil.create(\"div\", \"info legend\");\n const stops = [0, 0.25, 0.5, 0.75, 1];\n div.style.background = \"white\";\n div.style.padding = \"8px 10px\";\n div.style.borderRadius = \"6px\";\n div.style.boxShadow = \"0 1px 4px rgba(0,0,0,0.3)\";\n div.style.fontFamily = \"system-ui, sans-serif\";\n div.style.fontSize = \"11px\";\n\n const swatches = stops\n .map(function (stop) {\n return '

';\n })\n .join(\"\");\n\n div.innerHTML =\n '

% docks with bikes

' +\n '

' + swatches + \"

\" +\n '

0%100%

' +\n '

Gray = no capacity data

';\n\n return div;\n};\nlegend.addTo(citibikeMap);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":40,"value":"const miniBarChart = Plot.plot({\n width: 320,\n height: 300,\n marginLeft: 130,\n marginRight: 40,\n style: \"font-size: 9px; background: white;\",\n x: {label: \"Bikes available →\", grid: true, labelAnchor: \"center\"},\n y: {label: null},\n marks: [\n Plot.barX(top10Sorted, {\n y: \"name\",\n x: \"bikesAvailable\",\n fill: function (station) { return top10Color(station.id); },\n tip: true,\n title: function (station) {\n return station.name + \"\\nBikes: \" + station.bikesAvailable +\n \" (\" + station.ebikesAvailable + \" e-bikes)\\nDocks: \" + station.docksAvailable;\n }\n }),\n Plot.text(top10Sorted, {\n y: \"name\",\n x: \"bikesAvailable\",\n text: function (station) { return station.bikesAvailable; },\n dx: 12,\n fontWeight: \"bold\",\n fontSize: 9\n }),\n Plot.ruleX([0])\n ]\n});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":41,"value":"const barPanel = document.createElement(\"div\");\nbarPanel.style.cssText =\n \"position: absolute; top: 10px; right: 10px; width: 340px; \" +\n \"background: rgba(255,255,255,0.97); border-radius: 8px; \" +\n \"box-shadow: 0 2px 12px rgba(0,0,0,0.35); padding: 8px 10px 4px 10px; z-index: 1000;\";\n\nconst panelTitle = document.createElement(\"div\");\npanelTitle.style.cssText = \"font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600; margin-bottom: 2px;\";\npanelTitle.textContent = \"Top 10 stations by bikes available\";\n\nbarPanel.appendChild(panelTitle);\nbarPanel.appendChild(miniBarChart);\nmapDiv.appendChild(barPanel);\n\nconst overlaySvg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\noverlaySvg.setAttribute(\"style\", \"position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:650;\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":42,"value":"$31","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"2","titling":"auto"}} 2f:"$2e:body"