31:T12b2,citibike_stations_leaflet = { let vizId = 'leaflet-stations' let vizDesc = 'Map showing showing historical current and future citibike stations' let container = DOM.element('div', { id: vizId, style: `width:${width}px;height:${width/1.6}px`, 'aria-label': vizDesc }); yield container; let map = L.map(container).setView([40.747, -73.988], 12) map.scrollWheelZoom.disable(); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); //initialize svg to add to map L.svg().addTo(map) const overlay = d3.select(map.getPanes().overlayPane) const svg = overlay.select('svg') let stations = svg.append('g') .attr('class', 'station-set') let station = stations.selectAll("station") .data(citibikeStationsSummary.setAll.filter(d => d.type !== 'T2'), d => d['station_id']) .join('g') .attr('class', d => `station station-${d['station_id']}`) .attr('transform', d => { let point = map.latLngToLayerPoint([d.lat,d.lon]) return `translate(${point.x},${point.y})` }) .attr("pointer-events","visible") .on('mouseover', stationMouseOver) .on('mouseout', stationMouseOut ); station.append('circle') .attr('class', 'bubble') //.attr('pointer-events', 'none') .attr('r', d => { //d.r = r(d[selectR]) return 6 }) .attr('fill-opacity', 0) .attr('fill', '#FFF') station.append('circle') .attr('class', 'point') //.attr('pointer-events', 'none') .attr('r', d => (d.class === 'legacy') ? 2 : 3) .attr('fill', d => cStation[d.class]) const update = () => station .attr('transform', d => { let point = map.latLngToLayerPoint([d.lat,d.lon]) return `translate(${point.x},${point.y})` }) map.on("zoomend", update) function stationMouseOver(event, d){ d3.select(event.target).style("cursor", "pointer"); d3.select(`.station-set .station-${d['station_id']} .bubble`) .transition() .attr('stroke', 'orange') .attr('stroke-width', 2); // let stationLookup = citibikeStationsSummary.mapAll.get(d['station_id'])[0] let formatDate = d3.timeFormat("%Y-%m-%d") let tipContent = ``; tipContent += `(${d.station_id}) ${d.name}
`; // tipContent += `${d.first_year}–${d.last_year}
`; if(d.class === 'new') { tipContent += `Status: New Station
` } if(d.class === 'future') { tipContent += `Status: Future Station
` } if(d.class === 'legacy') { tipContent += `Status: Legacy Station
` } if(d.class === 'active') { tipContent += `Status: Active Station
` } if(d.indata) { tipContent += `` // Start Table tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `

Data Summary
First Appeared	${d.first_date}
Last Appeared	${d.last_date}
Active Days	${format.abs(d.data_days)}
Total Starts	${format.abs(d.data_starts)}
Total Ends	${format.abs(d.data_ends)}

`; // Close Table } else { tipContent += `No Historical Data` } chartTip.style("left", () => { if (innerWidth - d.x < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(`${tipContent}`); } function stationMouseOut(event, d){ d3.select(event.target).style("cursor", "default"); chartTip.style("display", "none"); // Hide toolTip d3.select(`.station-set .station-${d['station_id']} .bubble`) .transition() .attr('stroke', '#FFF') .attr('stroke-width', 0); } }32:T871,citibikeStationsSummary = { let result = {} let parseDate = d3.timeParse("%Y-%m-%d") //result.data = d3.csvParse(await FileAttachment("citibike-stations-20201210@1.csv").text(), d3.autoType) result.setData = [] let raw = await FileAttachment("citibike-stations-data-summary@1.tsv").tsv().then( function(data) { data.forEach(function(d) { d.lon = +d.lon; d.lat = +d.lat; //d.first_date = parseDate(d.first_date); d.first_year = +d.first_year; //d.last_date = parseDate(d.last_date); d.last_year = +d.last_year; d.data_days = +d.data_days; d.data_starts = +d.data_starts; d.data_ends = +d.data_ends; d.indata = true; if (typeof citibikeGBFS !== 'undefined') { let lookup = citibikeGBFS.mapStations.get(d.station_id) d.infeed = (typeof lookup !== 'undefined') d.is_installed = (d.infeed) ? lookup[0].status.is_installed : 0; if(d.infeed){ d.last_year = 2021; } // assign class d.class = (d.infeed) ? 'active' : 'legacy' } result.setData.push(d) }); return data; }) let setDataIDs = result.setData.map(d => d.station_id) let setAdded = [] if (typeof citibikeGBFS !== 'undefined') { citibikeGBFS.stations.forEach(d => { if(!setDataIDs.includes(d.station_id)) { let item = {} item.station_id = d.station_id; item.name = d.name; item.region_id = d.region_id; item.lon = +d.lon; item.lat = +d.lat; item.indata = false; item.infeed = true; item.first_year = 2021; item.last_year = 2021; item.is_installed = d.status.is_installed; item.class = (item.is_installed === 1)? 'new' : 'future' setAdded.push(item) } }) } result.setDataMap = d3.group(result.setData, d => d.station_id) if (typeof citibikeGBFS !== 'undefined') { result.setAll = [...result.setData,...setAdded] result.setAllMap = d3.group(result.setAll, d => d.station_id) } return result }33:T792,md`#### Station Dataset Structure + station_id / name / lat / lon: standard info + indata: stations that were in the 2013-2020 trip data + first_date/last_date: for (indata) stations first/last date appeared in the data + first_year/last_year: first/last year the station appeared in the data (for easier filtering). If the station is found in the feed last_year will also get updated to 2021. + data_days: for (indata) stations the number of days a start or end trip was recorded thorough 2020 + data_starts/data_ends: for (indata) stations all time trip starts/ends thorough 2020 + code: I was using to try and identify stations that seemed to be used for testing, depots, or special circumstances due to the low count or trips of active days. (T1 = Test Stations with location; T2 = Test station without location data or located outside NYC; D = Depot; S = Special Event). This classification is only based on inference from the station name. + boro: code for NYC Borough or Jersey City (MN = Manhattan, BK = Brooklyn, QN = Queens, BX = Bronx, JC = Jersey City). This is only avialable on the (indata) stations since it isn't referenced in the feed + geoid: An additional geographic identifier that maps to Community Distric in NYC or Municipality in New Jersey (Jersey City). This was used to test additional aggrigations and only avialable on the (indata) station. + region_id Identifies New York City (71) of Jersey City (70) + infeed: stations that were in the current station feed + is_installed For (infeed) station references the same variable from the feed. If equal to 0 it implies the station is new but not open yet. + class: assigned based on the current state of the stations (see legend above) `34:T4e2,citibikeGBFS = { let result = {} result.request_info = await d3.json("https://gbfs.citibikenyc.com/gbfs/en/station_information.json") result.request_status = await d3.json("https://gbfs.citibikenyc.com/gbfs/en/station_status.json") // result.stations = result.request_info.data.stations.map(d => { // let item = {} // item.station_id = d.station_id // "72" // item.name = d.name // "W 52 St & 11 Ave" // item.lon = d.lon // -73.99392888 // item.lat = d.lat // 40.76727216 // item.legacy_id = d.legacy_id // "72" // item.region_id = d.region_id // "71" // // item.external_id: "66db237e-0aca-11e7-82f6-3863bb44ef7c" // item.has_kiosk = d.has_kiosk // true // item.eightd_has_key_dispenser = d.eightd_has_key_dispenser // false // item.short_name = d.short_name // "6926.01" // return item; // }) let mapStatus = d3.group(result.request_status.data.stations, d => d.station_id) result.ids = result.request_info.data.stations.map(d => d.station_id) result.stations = result.request_info.data.stations.map(d => { d.status = mapStatus.get(d.station_id)[0] return d }) result.mapStations = d3.group(result.stations, d => d.station_id) return result; }35:T13e8,map_citibike_stations_by_year = { const height = 700; const margin = {top: 20, right: 20, bottom: 20, left: 20} const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const vizId = 'stations-by-year' const vizDesc = 'Map showing citibike stations by year 2013-2021' const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", vizId) .attr("title", vizDesc); //let selectVal = 'startTotalChange' // 'exitsTotalChange' let stationsFiltered = citibikeStationsSummary.setAll.filter(d => d.first_year <= scrubberYear); const projection = d3.geoMercator() .fitExtent([[margin.right,margin.top],[innerWidth,innerHeight]],cbStationFrame); // tsRoutes const path = d3.geoPath().projection(projection) let g = svg.append("g"); let water = g.append("g") .attr("class", "hydro") .selectAll("path") .data(shoreline.features) .enter().append("path") .attr("d", path) .style("fill", "none") .attr('stroke-width', .75) .style("stroke", "#CDCDCD") // let cdmuni = topojson.feature(tsGeoTopo, tsGeoTopo.objects.nycdmuni).features let stationGroup = g.append("g") .attr("class", "stations") // Update Stations > Data let station = stationGroup.selectAll("station") .data(stationsFiltered, d => d['station_id']) .join("g") .attr("class", "station") .attr("transform", function(d) { let point = projection([d.lon,d.lat]); return `translate(${point[0]},${point[1]})` }); station.append("circle") .attr("class", "station-point") .attr('pointer-events', 'none') .attr("cx", 0) .attr("cy", 0) .attr("r", d => (d.last_year < scrubberYear) ? 1.5 : 2.5) .attr("fill", d => { if (d.first_year == scrubberYear) { return cStation.new } else if(d.last_year < scrubberYear) { return cStation.legacy } else { return '#777' // cStation.active } }) let legendData = [ {class: 'legacy', label: 'Closed'}, {class: 'active', label: 'Existing'}, {class: 'new', label: 'New'} ] // Year Label g.append("text") .attr("class", function(d) { return 'label' }) .attr('x', margin.left) .attr('y', margin.top) .attr("alignment-baseline", "hanging") .text(scrubberYear) .attr('paint-order', 'stroke') .attr('stroke-linejoin', 'round') .attr('stroke', '#FFF') .attr('stroke-width', '8px') .attr('fill', function(d) { return '#AAA'; }) .style('font-size', '72px') g.append("text") .attr("class", function(d) { return 'label' }) .attr('x', margin.left+2) .attr('y', margin.top+65) .attr("alignment-baseline", "hanging") .text('Citi Bike Stations') .attr('paint-order', 'stroke') .attr('stroke-linejoin', 'round') .attr('stroke', '#FFF') .attr('stroke-width', '8px') .attr('fill', function(d) { return '#AAA'; }) .style('font-size', '24px') // Source g.append("text") .attr("class", "chart-source") .text('Data: Citi Bike historical trips data and real-time station feed / Design: @benoldenburg') .attr("text-anchor", "left") .attr("x", margin.left) .attr("y", height-margin.bottom) .attr('paint-order', 'stroke') .attr('stroke-linejoin', 'round') .attr('stroke', '#FFF') .attr('stroke-width', '6px') .attr('fill', function(d) { return '#999'; }) .style('font-size', '12px') g.append("text") .attr("class", "chart-note") .text(`Note: New 2021 stations only based on feed as of ${d3.timeFormat("%B %Y")(Date.now())}`) .attr("text-anchor", "left") .attr("x", margin.left) .attr("y", height-margin.bottom-16) .attr('paint-order', 'stroke') .attr('stroke-linejoin', 'round') .attr('stroke', '#FFF') .attr('stroke-width', '6px') .attr('fill', function(d) { return '#999'; }) .style('font-size', '12px') // Legend let legend = g.append("g") .attr("class", "legend") .attr("transform", `translate(${margin.left+10},${margin.top+100})`) var legendElement = legend.selectAll("engine") .data(legendData) .enter().append("g") .attr("class", (d) => { return 'type-' + d.type }) .attr("transform", function(d, i) { return `translate(0,${i*17})`; }) legendElement.append("circle") .attr("r", 6) .attr('fill', d => cStation[d.class]) .attr('opacity', '1.0') .attr('paint-order', 'stroke') .attr('stroke', '#FFF') .attr('stroke-width', '6px') legendElement.append("text") .attr("class", function(d) { return 'label' }) .attr('x', 12) .attr('dy', '.35em') .attr("text-anchor", "start") .text(function(d) { return d.label }) .attr('paint-order', 'stroke') .attr('stroke-linejoin', 'round') .attr('stroke', '#FFF') .attr('stroke-width', '6px') .attr('fill', function(d) { return '#777'; }) .style('font-size', '12px') return svg.node(); }36:[{"id":"6cc4655a8198fbab43714ccb860f809069dfd60090e11145508e66c3f80a0a31815f2f4bf2c386b1918e23541c441378234eff8f6697b9c0bfc07ee72b4f4524","href":"https://static.observableusercontent.com/files/6cc4655a8198fbab43714ccb860f809069dfd60090e11145508e66c3f80a0a31815f2f4bf2c386b1918e23541c441378234eff8f6697b9c0bfc07ee72b4f4524","name":"citibike-stations-data-summary@1.tsv","type":"text/tab-separated-values","lastModified":1612136487918.099,"size":156753},{"id":"8fa1ffbda2f23d3d251882f6afa8bbbe2d17670c6f17c44264d83b9aab0d89590edfc1f5fc725f1ad0825e410d446ca377c0b2e153993bfad78ba60d6f3be621","href":"https://static.observableusercontent.com/files/8fa1ffbda2f23d3d251882f6afa8bbbe2d17670c6f17c44264d83b9aab0d89590edfc1f5fc725f1ad0825e410d446ca377c0b2e153993bfad78ba60d6f3be621","name":"cb-station-frame@1.geojson","type":"application/geo+json","lastModified":1612162137821.715,"size":506}] 2f:{"title":"NYC Citi Bike Stations","cells":[{"id":0,"value":"md`# NYC Citi Bike Stations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"md`This notebook is an unofficial set of all Citi Bike stations for New York City and Jersey City, both historical and active. It was developed to for use in [visualizing the historical trip data](https://observablehq.com/@benoldenburg/nyc-citi-bike-trips-change-2019-2020) and to explore the system build out.\n\nNote: This visualization is not currently diplaying the station status properly due to changes in the citibike station feed. Will try to update at a future point.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"md`## Complete Station Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`The map below shows all the stations found in the historical trips data (that lat/lon in the NYC area) and cross references it with the lastest GBFS feed. I've classified them in the map below as:\n+ Legacy: Appear in the historical data but not in the current feed.\n+ Active: In the feed and have data from 2020 or earlier.\n+ New: In the feed but no historical data.\n+ Future: In the feed but not set as installed (is_installed = 0).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"md`#### Notes \n+ This maps was also built to help determine if stations with the same id moved over time. That does not appear to be the case as stations that are moved even slightly and keep the same name are assigned a new ID number. This leaves an open question about the legacy_id columns in the station information feed which never differ from the station_id even when a station does appear to be moved slightly from a previous location.\n+ One condition that isn't addressed is that the current dataset will treat seasonal stations (like Governors Island) as closed since they don't apprear in the off-season feed. I didn't have an easy way to figure out if there were any others but there could be some type of classification they prevents them from being marked as legacy station.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"md`## Station Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`### Stations in Trip Data\nThis station summary file is based on a summary of for all stations that appear in the raw trips data from 2013-2020 which also included test stations, depots, and what appear to be special events. The list is cross referenced with the current feed and any new or future (is_installed = 0) stations are added. \n\nThe setData object includes just the stations in from the data and setAll is the complete merged set. Both Set also have a map to lookup a station by ID.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"md`### The two list can also be\nThe setData object includes just the stations in from the data and setAll is the complete merged set. Both Set also have a map to lookup a station by ID.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"citibike_stations_data = citibikeStationsSummary.setData","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"citibike_stations_all = citibikeStationsSummary.setAll","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`#### Live Station Feed\nThe latest station info and status feeds are accessed when this notebook loads to check against and merge with the historical list`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"md`## Additional Views`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"md`## Stations Over Time\nAnimates the stations every year from the system opening in 2013 to present. The new 2021 stations only represent what is what is currently listed in the feed and not the full year.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"viewof scrubberYear = Scrubber(\n [2013,2014,2015,2016,2017,2018,2019,2020,2021], \n{\n autoplay: false,\n delay: 1500,\n loop: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"citibikeStationsSummary.setAll.filter(d => d.first_year <= 2019 && d.last_year >= 2019 && d.region_id == \"70\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"md`## Components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"cStation = ({\n 'legacy': '#FFA874',\n 'active': '#777777', //'#003B64'\n 'new': '#0098E4',\n 'future': '#B63082'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"cbStationFrame = FileAttachment(\"cb-station-frame@1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"import {tsGeoTopo, shoreline} from '@benoldenburg/nyc-transit-turnstile-data'","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"import {cbGeoJoins, cbDictionary} from '@benoldenburg/nyc-citi-bike-trip-data'","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"format = ({\n date1: d3.timeFormat(\"%a, %b %e %Y\"), // Timeline Tooltip Date Format\n date2: d3.timeFormat(\"%b %e %Y\"), // Timeline Tooltip Date Format\n percent1d: d3.format(\".1%\"),\n pct: d3.format(\".0%\"),\n abs: d3.format(\",.0f\"),\n avg: d3.format(\"(,.1f\"),\n chg: d3.format(\".1%\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"import {inputsGroup, chartTip} from '@benoldenburg/mta-daily-ridership-recovery'","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@6\") // Load D3","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"stationsFiltered = citibikeStationsSummary.setAll.filter(d => d.first_year <= scrubberYear);","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}