2a:null 2b:["$","title",null,{"children":"NYC Citi Bike Trips Change, 2019–2020 | Ben Oldenburg | Observable"}] 30:T427,md`# NYC Citi Bike Trips Change, 2019–2020 This notebook explores Citi Bike trip changes in New York City and Jersey City between 2019 and 2020. Most transit modes saw a significant decline in 2020 and I was curious to see how Citi Bike compared with those trends and explore how evenly change was spread geographically. The dataset is an aggregate of the raw trip data published by [Citi Bike](https://www.citibikenyc.com/system-data) using the [process](https://medium.com/qri-io/building-a-daily-aggregate-dataset-from-raw-citibike-trip-data-2b6502009871) shared by [Chris Whong](https://twitter.com/chris_whong) plus some additional refinement and processing of stations data to create the visualizations below. It doesn't represent official ridership but it should trend close to any adjusted numbers. The notebook may take a moment to load since the summary runs in real-time. I'm still refinining and refactoring a few aspects and am also interested in ways it could be improved or provide other helpful views. `31:T2b00,map_citibike_change_by_station = { // ID to isolate viz for any d3 selections let vizId = "leaflet-change" // Accessible description for title or aria-lable let vizDesc = "Map showing showing 2020 Citi Bike trips by station as daily average or change over 2019" // Data Source let vizDataSource = "Data: Analysis of Citi Bike Trip Data" let stationColor = { pos: "rgb(0, 152, 228)", neg: "#FA7E5A", //F94065 station: "#222", nochg: "#999", highlight: "#A8234E" } let container = DOM.element("div", { id: vizId, style: `width:${width}px;height:${width/1.6}px`, "aria-label": vizDesc }); yield container; // Initialize Leaflet Map //let map = L.map(container).setView([53.2527, -123.1207], 5).fitBounds(L.geoJson(Wcities).getBounds()); 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); map.attributionControl.addAttribution(vizDataSource); // Initialize svg to add to map L.svg().addTo(map) const overlay = d3.select(map.getPanes().overlayPane) const svg = overlay.select('svg') let mode; // Add station points let stationSelection = citibikeStationsHistory.set.filter(d => d.last_year > 2019) let extDates = citibikeByStation2020.summary.dates let compExtDates = citibikeByStation2020.summary.compareDates let station = svg.selectAll("station") .data(stationSelection, 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 2 }) .attr('fill-opacity', 0.2) .attr('fill', 'rgb(0, 152, 228)') station.append('circle') .attr('class', 'point') .attr('pointer-events', 'none') .attr('r', 2) .attr('fill', stationColor.station) // Update point position on map zoom function update() { station.attr('transform', d => { let point = map.latLngToLayerPoint([d.lat,d.lon]) return `translate(${point.x},${point.y})` }) } map.on("zoomend", update) // Station MouseOver Function function stationMouseOver(event, d){ d3.select(event.target).style("cursor", "pointer"); d3.select(`.station-${d['station_id']} .bubble`) .transition() .attr('stroke', stationColor.highlight) .attr('stroke-width', 3); let tipContent = ``; tipContent = `(${d.station_id}) ${d.name}
`; let lookup = citibikeByStation2020.map.get(d['station_id'].toString()) if (lookup !== undefined) { let v = lookup[0]; tipContent += `` // Start Table // Interate over selected categories tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `

	2020	2019	Change
Active Days	${format.abs(v['days'])}	${(v.change.prev) ? format.abs(v.change['days']) : 'N/A'}
Starts Total	${format.abs(v['startTotal'])}	${(v.change.prev) ? format.abs(v.change['startTotal']) : 'N/A'}
Starts Daily Avg	${format.avg(v['startAvg'])}	${(v.change.prev) ? format.avg(v.change['startAvg']) : 'N/A'}	${(v.change.prev) ? format.chg(v.change['startAvgChg']) : 'N/A'}
End Total	${format.abs(v['endTotal'])}	${(v.change.prev) ? format.abs(v.change['endTotal']) : 'N/A'}
End Daily Avg	${format.avg(v['endAvg'])}	${(v.change.prev) ? format.avg(v.change['endAvg']) : 'N/A'}	${(v.change.prev) ? format.chg(v.change['endAvgChg']) : 'N/A'}

`; // Close Table // Tooltip Chart let tcVar = (mode === 'chg') ? 'startMAvgChgAvgMo' : 'startcount' let tcChg = tcVar.toLowerCase().includes("chg"); let tcVarExt = d3.extent(v.data, d => d[tcVar]); console.log({tcVarExt}); let tcIsExtent = (isNum(tcVarExt[0]) && isNum(tcVarExt[1])) let showTc = (tcChg && v.change.prev && tcIsExtent || (!tcChg && tcIsExtent)) console.log({showTc}); if (showTc) { let tcInfo = { 'startMAvgChgAvgMo': { 'label': `2020 Daily Trips Change
7-Day Avg over 2019 Same Month Avg` }, 'startcount': { 'label': `2020 Daily Trip Starts` } } let tcWidth = 200; let tcHeight = 64; let tcMargin = {top: 10, right: 36, bottom: 15, left: 0} let tcInnerWidth = tcWidth - tcMargin.left - tcMargin.right; let tcInnerHeight = tcHeight - tcMargin.top - tcMargin.bottom; let tcSvg = d3.create("svg") .attr("viewBox", [0, 0, tcWidth, tcHeight]) .attr("class", "tipChart"); const tcGroup = tcSvg.append("g") .attr("transform", "translate(" + tcMargin.left + "," + tcMargin.top + ")"); let tcX = d3.scaleTime() .range([0, tcInnerWidth]) .domain(extDates) let tcY = d3.scaleLinear() .range([tcInnerHeight, 0]) .domain((tcChg) ? tcVarExt : [0, tcVarExt[1]]) .nice(); let yAxis = d3.axisRight(tcY).ticks(3).tickFormat((tcChg) ? format.pct : format.abs); let xAxis = d3.axisBottom(tcX).tickSize(3).tickFormat(d => d3.timeFormat("%b")(d).charAt(0)) tcGroup.append("g") .attr("class", "y axis") .attr("transform", `translate(${tcInnerWidth}, 0)`) .call(yAxis); tcGroup.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${tcInnerHeight})`) .call(xAxis); if (!tcChg || (tcChg && tcVarExt[0] < 0)) { tcGroup.append("line") .attr("class", "baseline") .attr('x1', 0) .attr('x2', tcInnerWidth) .attr('y1', tcY(0)) .attr('y2', tcY(0)) .attr('stroke-dasharray', (tcChg) ? '5,5' : '0') .style('stroke', (tcChg) ? '#AAA' : '#CCC'); } let tclineEntries = d3.line() .defined(d => isNum(d[tcVar])) .x(d => tcX(d.date)) .y(d => tcY(d[tcVar])) tcGroup.append("path") .datum(v.data) .attr("fill", "none") .attr("stroke", "rgb(51,163,220)") .attr("stroke-width", 1) .attr("d", tclineEntries) tipContent += `` tipContent += ``; tipContent += `

${tcInfo[tcVar].label}

${tcSvg.node().outerHTML}

`; // Close Table } // END IF tipContent += `

` if (v.change.prev) { if (v.change.extDates[0] > compExtDates[0] || v.change.extDates[1] < compExtDates[1]) { tipContent += `2019: (${format.date4(v.change.extDates[0])}– ${format.date4(v.change.extDates[1])}) ` } } if (v.extDates[0] > extDates[0] || v.extDates[1] < extDates[1]) { tipContent += `2020 (${format.date4(v.extDates[0])}–${format.date4(v.extDates[1])})` } tipContent += `

` // END IF LOOKUP } else { // tipContent += `Data not found` } // Add Map Tooltip // console.log(event) 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}`); } // Station MouseOut Function function stationMouseOut(event, d){ d3.select(event.target).style("cursor", "default"); chartTip.style("display", "none"); // Hide toolTip d3.select(`.station-${d['station_id']} .bubble`) .transition() .attr('stroke', '#FFF') .attr('stroke-width', 0); } container.updateView = function(variable) { console.log('UPDATE VIEW') // Options Settings // let options = mapSelect.rVal.split('-');variable let options = variable.rVal.split('-'); // variable let change = (options[0] === 'chg') ? true : false; let selectVal = options[1]; mode = (options[0]); console.log({mode}) let rMaxSize = (change) ? 36 : 16; // if showing change use larger radius Max console.log('d3.extent') console.log(d3.extent(citibikeByStation2020.set, d => Math.abs(d.change[selectVal]))) let r = d3.scaleSqrt() .range([2, rMaxSize]) if (change) { r.domain([0, d3.max(citibikeByStation2020.set, d => Math.abs(d.change[selectVal]))]) } else { r.domain([0, d3.max(citibikeByStation2020.set, d => Math.abs(d[selectVal]))]) } citibikeByStation2020.set.forEach(d => { let value = (change) ? d.change[selectVal] : d[selectVal]; // console.log(isNum(value) ? r(Math.abs(value)) : 2) d3.select(`#${vizId} .station-${d['station_id']} .bubble`) .transition().duration(1000) .attr('r', d => { d.rSize = isNum(value) ? r(Math.abs(value)) : 2; return d.rSize; }) .attr('fill', (value > 0) ? stationColor.pos : stationColor.neg); d3.select(`#${vizId} .station-${d['station_id']} .point`) .transition().duration(1000) .attr('fill', () => { if (change) { return (d.change.prev) ? stationColor.station : stationColor.nochg; } else { stationColor.station; } }) }) update() } yield container; }32:T723,md`#### Notes + Trip data is aggregated by day and station ID and linked to the latest location by ID. All stations that appear in the trip data are included. While the [source trips data](https://www.citibikenyc.com/system-data) mentions that the data how been cleaned of administrative trips and test stations, there are a very small number of stations that appear not to be public and have been left in without an official list of stations to check against available to filter against. + The data doesn't represent the official ridership but should trend close to any adjusted numbers. Citi Bike's [2020 Review](https://mailchi.mp/b37132f25f10/2020-year-in-review-399565?e=3471a1a56a) cited the highest day ever of 103,139 rides on September 12, 2020, which is only 264 trips (0.25%) off from the 103,403 trips that appear in this data, so there may be additional administrative/service trips that did not get filtered out of the source data. + There are still some stations that skew the scales (map bubble size) slightly due to being installed in the latter half of the previous year where ridership tends to be a little lower due to the weather. Because of that the comparisons are done with daily averages but am interested if there are strategies to refine those outliers more. + Because of the increased variability of station openings and closings in additions to a few seasonal stations (Governors Island) it is noted at the bottom of a tooltip if a station first appeared after January 1st or closed before December 31st. If a station otherwise shows less than 365/366 active days it may have been closed during the year for maintenance or weather. Only days with at least one start or stop appear in current data so the tooltip chart will not drop to zero for closed days, but extended closures would be visible. `33:T3254,chart_citibike_daily_trips = { // ID to isolate viz for any d3 selections let vizId = 'chart-moving-avg-2' // Data Source let vizSource = 'Data: Analysis of Citi Bike Trip Data' let height = 360 let margin = {top: 40, right: 140, bottom: 60, left: 100} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; const cVar = 'color'; // selects attribute to use for color in cbDictionary. const altColor = '#8da6b9' const selectType = "mavg7"; // primary variable to use const selectType2 = "val"; // primary variable to use let dDictionary = ({ "mavg7": { "label": "7-day Avg", "color": cbDictionary['citibike'].color, }, "val": { "label": "Daily trips", "color": cbDictionary['citibike'].coloralt, } }) //const selectGroup = ridershipCheckbox.mode; // array of the checkbox selections for filtering const selectGroup = ['citibike'] let filtered = citibikeSystemDaily.filter(d => selectGroup.includes(d.id) && (d.year > 2019 && d.year < 2021) ); let extData = d3.extent(filtered, d => d.val); // filter data.set for extext let extDates = d3.extent(filtered, d => d.date) let selectSeries = d3.group(filtered, d => d.id); let selectLookup = d3.group(filtered, d => d.date.toISOString()) let selectDates = Array.from(selectLookup).map(d => d[1][0].date); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", vizId); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // xAxis Label // group.append("text") // .text('Season') // .attr("text-anchor", "middle") // .attr("class", "graph-title") // .attr("x", ((width - margin.left - margin.right) / 2.0)) // .attr("y", innerHeight + (margin.bottom / 2)); // yAxis Label group.append("text") .attr("class", "chart-y-title") .text('Daily Trips') .attr("text-anchor", "middle") .attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#555') .style('font-size', '.85em'); // Source group.append("text") .attr("class", "graph-source") .text(vizSource) .attr("text-anchor", "left") .attr("x", 0) .attr("y", innerHeight + margin.bottom - 18) .style('fill', '#999') .style('font-size', '.60em') .style('font-family', 'sans-serif'); if (selectGroup.length === 0){ group.append("text") .text('Please select a transit mode above to display') .attr("text-anchor", "middle") .attr("class", "notification") .attr("x", innerWidth/2) .attr("y", innerHeight/2) .style('fill', '#999') .style('font-size', '.85em'); } let x = d3.scaleTime() .range([0, width - margin.left - margin.right]) .domain(extDates) let y = d3.scaleLinear() .range([innerHeight, 0]) .domain([0,extData[1]]) .nice(); let xAxis = d3.axisBottom(x); let yAxis = d3.axisLeft(y); if (width < 700) { xAxis.tickFormat(d3.timeFormat("%b")); } group.append("line") .attr("class", "y-highlight") .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', innerHeight) .style('stroke', '#999') .style('opacity', 0); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis); group.append("g") .attr("class", "y axis") .call(yAxis); // Append Ghosted Daily Ridership let lineGroupCompare = group.append("g") .attr('class', 'line-group-compare') let lineC = d3.line() .defined(d => !isNaN(d.val)) .x(d => x(d.date)) .y(d => y(d.val)) lineGroupCompare.append('g') .attr("opacity", ".2") .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => lineC(d[1])) .attr("class", function(d) { return 'ts-line ts-line-bg-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return cbDictionary[d[0]].color }); // Append Moving Average Lines let lineGroup = group.append("g") .attr('class', 'line-group') let line = d3.line() .defined(d => !isNaN(d[selectType])) .x(d => x(d.date)) .y(d => y(d[selectType])) lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => line(d[1])) .attr("class", function(d) { return 'ts-line ts-line-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return cbDictionary[d[0]].color }); // Label Object let labelset = Array.from(selectSeries).map(d => { let obj = {} obj.id = d[0]; obj.label = cbDictionary[obj.id].name; obj.color = cbDictionary[obj.id].color; obj.val = d[1][d[1].length - 1][selectType]; return obj }) // Force Line Labels - Basic Version let forceLabelOffset = 14 let forceLabelR = 10 let forceLabels = group.append("g") .attr('class', 'line-force-labels') const forceLabelLeader = forceLabels.selectAll('line') .data(labelset) .join('line') .attr("class", 'lfl-leader') .attr('x1', innerWidth + 2) .attr('x2', innerWidth + forceLabelOffset) .attr('y1', d => y(d.val)) .attr('y2', d => y(d.val)) .attr('stroke', '#CCC') const forceLabel = forceLabels.selectAll('g') .data(labelset) .join('g') .attr('transform', function(d) { // contrains node x,y to bounds d.x = innerWidth + forceLabelOffset; d.y = y(d.val); return `translate(${d.x},${d.y})` }) .on("mouseover", (event, d) => { d3.select(event.target).style("cursor", "pointer"); d3.selectAll("#" + vizId + " .ts-line") .transition().style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .lfl-leader") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.select(event.target).style("cursor", "default"); d3.selectAll("#" + vizId + " .ts-line") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .lfl-leader") .transition().style('opacity', 1 ); }); forceLabel.append('text') .attr("class", 'lfl-text') .html(d => d.label) .attr('fill', d => d.color) .attr('alignment-baseline', 'middle') .style('font-size', '.75em'); // forceLabel.append('rect') // .attr("class", 'lfl-rect') const simulation = d3.forceSimulation(labelset) .force("charge", d3.forceManyBody().strength(-10)) .force('y', d3.forceY().y(d => y(d.val))) .force('x', d3.forceX().x(innerWidth + forceLabelOffset)) //.force("rectcollide", rectCollide()) .force('collision', d3.forceCollide().radius(forceLabelR)); simulation.on('tick', () => { forceLabel.attr('transform', function(d) { d.x = innerWidth + forceLabelOffset; // constrain x for all labels d.y = Math.max(forceLabelR, Math.min((innerHeight+margin.bottom/2) - forceLabelR, d.y)) //Math.max(Math.min(innerHeight, d.y), 0); // constrain y to vertical chart area return `translate(${d.x},${d.y})` }); forceLabelLeader .attr("x2", d => d.x-2) .attr("y2", d => d.y) }) // Timeline // drawTimeline(chartid, group, x, innerWidth); // Group for line highligt points, sits below tootTip area so let yPoints = group.append("g") .attr('class', 'y-highlight-points') // Chart toolTip Area (defines where hover with be active) let tipArea = group.append("g") .attr("class", "tip-area"); tipArea.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('width', innerWidth) .attr('height', innerHeight) .attr('opacity', 0) .attr('pointer-events', 'all') .on('mouseover', (event) => { console.log('mouseover'); }) .on('mousemove', tipAreaMouseMove) .on('mouseout', tipAreaMouseOut); function tipAreaMouseMove(event) { console.log('mousemove'); // Get the date on the y axis for the mouse position let invert = x.invert(d3.pointer(event)[0]) let bisect = d3.bisector(function(d) { return d; }).right; let hoverDate = (selectDates[bisect(selectDates, invert)]); // 1) Lookup/Get values by date 2) Filter by selection group 3) Sort by top values let lookup = selectLookup.get(hoverDate.toISOString()).filter(d => selectGroup.includes(d.id)).sort((a, b) => d3.descending(a[selectType], b[selectType])); // Display and position vertical line d3.select("#" + vizId + " .y-highlight") .attr('x1',x(hoverDate)) .attr('x2',x(hoverDate)) .style('opacity', 1); // For highlighting multiple points let pointVars = [selectType, selectType2] let pointSet = []; let lookupPoints = pointVars.map(g => { let obj = {} obj.id = g obj.date = lookup[0].date obj.val = lookup[0][g] obj.color = dDictionary[g].color pointSet.push(obj); }) console.log({pointSet}) // Update Pattern for the Point Highlights const yPoint = yPoints.selectAll('g') .data(pointSet, g => g.id) .join( enter => enter.append("g") .attr('class', 'y-highlight-point') .attr('transform', g => `translate(${x(g.date)},${y(g.val)})`) .attr('opacity', g => isNum(g.val) ? 1 : 0) // hide if value is NaN, .append('circle') .attr('r', 3) .attr('fill', g => g.color), update => update .attr('transform', g => `translate(${x(g.date)},${y(g.val)})`) .attr('opacity', g => isNum(g.val) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // Update Pattern for the Point Highlights // FOR MULTIPLE GROUPS // const yPoint = yPoints.selectAll('g') // .data(lookup) // .join( // enter => enter.append("g") // .attr('class', 'y-highlight-point') // .attr('transform', function(d) { // return `translate(${x(d.date)},${y(d[selectType])})` // }) // .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0) // hide if value is NaN, // .append('circle') // .attr('r', 3) // .attr('fill', d => cbDictionary[d.id][cVar]), // update => update // .attr('transform', function(d) { // return `translate(${x(d.date)},${y(d[selectType])})` // }) // .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0), // hide if value is NaN // exit => exit.remove() // ) // Custom toolTip Content let tipContent = ``; // Start content string lookup.map( d => { tipContent += `` // Start Table tipContent += `` tipContent += `` tipContent += `` tipContent += `` }) tipContent += `

	Trips
Total	${format.abs(d.val)}
7-Day Avg	${format.abs(d.mavg7)}

`; // Close Table chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(`${format.date1(hoverDate)}
${tipContent}`); // toolTip Content } function tipAreaMouseOut(event) { chartTip.style("display", "none"); // Hide toolTip d3.select("#" + vizId + " .y-highlight").style('opacity', 0); // Hide y-highlight line d3.selectAll("#" + vizId + " .y-highlight-point").remove(); // Remove y-highlight points }; return svg.node(); }34:T35d9,chart_citibike_daily_trips_change = { // ID to isolate viz for any d3 selections let vizId = "chart-change-over-mo-avg" // Data Source let vizSource = 'Data: Analysis of Citi Bike Trip Data' let height = 360 let margin = {top: 40, right: 140, bottom: 60, left: 100} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; const selectType = "chgMov7MoAvg"; const selectType2 = "chgMoAvg"; const selectGroup = ['citibike'] const dDictionary = { "chgMov7MoAvg": { "desc": "7-day avg trips over previous year monthly avg", "label": "7-day Avg Change", "color": cbDictionary['citibike'].color, }, "chgMoAvg": { "desc": "Daily trips previous year monthly avg", "label": "Daily Trips Change", "color": cbDictionary['citibike'].coloralt, } } const altColor = '#8da6b9' // New logic for checkbox set let filtered = citibikeSystemDaily.filter(d => selectGroup.includes(d.id) && (d.year > 2019 && d.year < 2021) ); let extData = d3.extent(filtered, d => d[selectType2]); let extDates = d3.extent(filtered, d => d.date) let selectSeries = d3.group(filtered, d => d.id); let selectLookup = d3.group(filtered, d => d.date.toISOString()) let selectDates = Array.from(selectLookup).map(d => d[1][0].date); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", vizId); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // xAxis Label // group.append("text") // .text('Season') // .attr("text-anchor", "middle") // .attr("class", "graph-title") // .attr("y", innerHeight + (margin.bottom / 2)) // .attr("x", ((width - margin.left - margin.right) / 2.0)); // yAxis Label group.append("text") .text('Change in Trips') .attr("text-anchor", "middle") .attr("class", "graph-title") .attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#555') .style('font-size', '.85em'); // Source group.append("text") .attr("class", "graph-source") .text(vizSource) .attr("text-anchor", "left") .attr("x", 0) .attr("y", innerHeight + margin.bottom - 18) .style('fill', '#999') .style('font-size', '.60em') .style('font-family', 'sans-serif'); let x = d3.scaleTime() .range([0, width - margin.left - margin.right]) .domain(extDates) let y = d3.scaleLinear() .range([innerHeight, 0]) .domain(extData) .nice(); let xAxis = d3.axisBottom(x); let yAxis = d3.axisLeft(y).tickFormat(d3.format(".0%")); if (width < 700) { xAxis.tickFormat(d3.timeFormat("%b")); } group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis); group.append("g") .attr("class", "y axis") .call(yAxis); group.append("line") .attr("class", "y-highlight") .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', innerHeight) .style('stroke', '#999') .style('opacity', 0); group.append("line") .attr("class", "baseline") .attr("x1", 0) .attr("x2", innerWidth) .attr("y1", y(0)) .attr('y2', y(0)) .attr('stroke-dasharray', '5,5') .style('stroke', '#AAA'); // Append Ghosted Daily Ridership let lineGroupCompare = group.append("g") .attr('class', 'line-group-compare') let lineC = d3.line() .defined(d => !isNaN(d[selectType2])) .x(d => x(d.date)) .y(d => y(d[selectType2])) lineGroupCompare.append('g') .attr("opacity", ".25") .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => lineC(d[1])) .attr("class", function(d) { return 'ts-line ts-line-bg-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return cbDictionary[d[0]].color }); // Add Lines let line = d3.line() .x(d => x(d.date)) .y(d => y(d[selectType])) let lineGroup = group.append("g") .attr('class', 'line-group') lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => line(d[1])) .attr("class", function(d) { return 'ts-line ts-line-' + d[0]; }) .attr("fill", "none") .style("stroke", function(d) { return cbDictionary[d[0]].color }); // Add Line Labels // Label Object let labelSet = Array.from(selectSeries).map(d => { let obj = {} obj.id = d[0] obj.label = cbDictionary[obj.id].name obj.color = cbDictionary[obj.id].color obj.val = d[1][d[1].length - 1][selectType] return obj }) // Force Line Labels // VAR REF vizId, innerWidth, y labelset let forceLabelOffset = 14 let forceLabels = group.append("g") .attr('class', 'line-force-labels') const forceLabelLeader = forceLabels.selectAll('line') .data(labelSet) .join('line') .attr("class", 'lfl-leader') .attr('x1', innerWidth + 2) .attr('x2', innerWidth + forceLabelOffset) .attr('y1', d => y(d.val)) .attr('y2', d => y(d.val)) .attr('stroke', '#CCC') const forceLabel = forceLabels.selectAll('g') .data(labelSet) .join('g') .attr('transform', function(d) { // contrains node x,y to bounds d.x = innerWidth + forceLabelOffset; d.y = y(d.val); return `translate(${d.x},${d.y})` }).on("mouseover", (event, d) => { d3.select(event.target).style("cursor", "pointer"); d3.selectAll("#" + vizId + " .ts-line") .transition().style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .lfl-leader") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.select(event.target).style("cursor", "default"); d3.selectAll("#" + vizId + " .ts-line") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .lfl-leader") .transition().style('opacity', 1 ); }); forceLabel.append('text') .attr("class", 'lfl-text') .html(d => cbDictionary[d.id].name) .attr('fill', d => cbDictionary[d.id].color) .attr('alignment-baseline', 'middle') .style('font-size', '.75em'); forceLabel.append('rect') .attr("class", 'lfl-rect') const simulation = d3.forceSimulation(labelSet) .force("charge", d3.forceManyBody().strength(-10)) .force('y', d3.forceY().y(d => y(d.val))) .force('x', d3.forceX().x(innerWidth + forceLabelOffset)) //.force("rectcollide", rectCollide()) .force('collision', d3.forceCollide().radius(10)); simulation.on('tick', () => { forceLabel.attr('transform', function(d) { d.x = innerWidth + forceLabelOffset; // constrain x for all labels return `translate(${d.x},${d.y})` }); forceLabelLeader .attr("x2", d => d.x-2) .attr("y2", d => d.y) }) // // Add Timeline // let showTimeline = true; // Consider update to control // if (showTimeline) { // drawTimeline(vizId, group, x, innerWidth); // } // Group for line highligt points, sits below tootTip area so point don't interfere with hover let yPoints = group.append("g") .attr('class', 'y-highlight-points') // Chart toolTip Area (defines where hover with be active) let tipArea = group.append("g") .attr("class", "tip-area"); tipArea.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('width', innerWidth) .attr('height', innerHeight) .attr('opacity', 0) .attr('pointer-events', 'all') .on('mouseout', function (event) { // on mouse out hide line, circles and text d3.select(".mouse-line") .style("opacity", "0"); d3.selectAll(".mouse-per-line circle") .style("opacity", "0"); d3.selectAll("#tooltip") .style('display', 'none') }) .on('mousemove', tipAreaMouseMove) .on('mouseout', tipAreaMouseOut); function tipAreaMouseMove(event) { // Get the date on the y axis for the mouse position let invert = x.invert(d3.pointer(event)[0]) let bisect = d3.bisector(function(d) { return d; }).right; let hoverDate = (selectDates[bisect(selectDates, invert)]); // 1) Lookup/Get values by date 2) Filter by selection group 3) Sort by top values let lookup = selectLookup.get(hoverDate.toISOString()).filter(d => selectGroup.includes(d.id)).sort((a, b) => d3.descending(a[selectType], b[selectType])); // Display and position vertical line d3.select("#" + vizId + " .y-highlight") .attr('x1',x(hoverDate)) .attr('x2',x(hoverDate)) .style('opacity', 1); // For highlighting multiple points let pointVars = [selectType, selectType2] let pointSet = []; let lookupPoints = pointVars.map(g => { let obj = {} obj.id = g obj.date = lookup[0].date obj.val = lookup[0][g] pointSet.push(obj); }) console.log({pointSet}) // Update Pattern for the Point Highlights const yPoint = yPoints.selectAll('g') .data(pointSet, g => g.id) .join( enter => enter.append("g") .attr('class', 'y-highlight-point') .attr('transform', g => `translate(${x(g.date)},${y(g.val)})`) .attr('opacity', g => isNum(g.val) ? 1 : 0) // hide if value is NaN, .append('circle') .attr('r', 3) .attr('fill', g => dDictionary[g.id].color), update => update .attr('transform', g => `translate(${x(g.date)},${y(g.val)})`) .attr('opacity', g => isNum(g.val) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // // Update Pattern for the Point Highlights // const yPoint = yPoints.selectAll('g') // .data(lookup, d => d.id) // .join( // enter => enter.append("g") // .attr('class', 'y-highlight-point') // .attr('transform', function(d) { // return `translate(${x(d.date)},${y(d[selectType])})` // }) // .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0) // hide if value is NaN, // .append('circle') // .attr('r', 3) // .attr('fill', d => cbDictionary[d.id].color), // update => update // .attr('transform', function(d) { // return `translate(${x(d.date)},${y(d[selectType])})` // }) // .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0), // hide if value is NaN // exit => exit.remove() // ) // Custom toolTip Content let tipContent = ``; // Start content string tipContent += `${format.date1(hoverDate)}
` lookup.map( d => { tipContent += `` // Start Table // Interate over selected categories // ${cbDictionary[d.id].name} tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` }) tipContent += `

	Trips	Change
Total	${format.abs(d.val)}	${format.percent1d(d.chgMoAvg)}
7-Day Avg	${format.abs(d.mavg7)}	${format.percent1d(d.chgMov7MoAvg)}
${d.prev} Avg	${format.abs(d.prevMoAvg)}

`; // Close Table // tipContent += `` // Start Table // // Interate over selected categories // lookup.map( d => { // tipContent += `` // tipContent += `` // tipContent += `` // }) // tipContent += `

	Change	Ridership
${cbDictionary[d.id].name}	${format.percent1d(d.chgMoAvg)}	${format.abs(d.val)}

`; // Close Table // Display chartTip with Custom Content chartTip .style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 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 tipAreaMouseOut(event) { chartTip.style("display", "none"); // Hide toolTip d3.select("#" + vizId + " .y-highlight").style('opacity', 0); // Hide y-highlight line d3.selectAll("#" + vizId + " .y-highlight-point").remove(); // Remove y-highlight points }; return svg.node(); // Return SVG }35:T1d47,map_citibike_change_by_nycdmuni = { // ID to isolate viz for any d3 selections let vizId = 'map-nycdmuni' // Data Source let vizSource = 'Data: Analysis of Citi Bike Trip Data' const height = 700 const margin = {top: 20, right: 20, bottom: 20, left: 20} const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", vizId); let cHighlight = '#A8234E' // '#AE2D68' let selectVal = 'startTotalChg' // 'exitsTotalChange' const projection = d3.geoMercator() .fitExtent([[margin.right,margin.top],[width-(margin.right + margin.left),height-(margin.top + margin.top)]],cbFrame); // 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") .style("stroke", "#dedede") // Source g.append("text") .attr("class", "chart-source") .text(vizSource) .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', '.60em') .style('font-family', 'sans-serif'); let cdmuni = topojson.feature(tsGeoTopo, tsGeoTopo.objects.nycdmuni).features let extData = d3.extent(cbGeographic2020.set, d => d[selectVal]) let color = d3.scaleDiverging() .domain([extData[0], 0, 1]) .range(["#F5AC4E", "#EFEFEF", "#53CCEC"]) // Red #FB8465 //.interpolator(d3.interpolatePuOr) let colorXP = d3.scaleSequential() .domain([1, 5]) .range(["#4AA6D7", "#3D87C8"]) // ["#1974D3", "#165BAA"] .clamp(true) let geo = g.selectAll("geo") .data(cdmuni) .enter().append("path") .attr("class", "geo") .attr("d", path) .style("fill", d => { let geo_id = d.properties.id; let lookup = cbGeographic2020.map.get(geo_id.toString()) if (lookup) { if (lookup[0].stations_prev > 0 ) { return (lookup[0][selectVal] < 1) ? color(lookup[0][selectVal]) : colorXP(lookup[0][selectVal]); } else { return "#CCC"; // no change data }; } else { return "none"; // no stations } }) let geoHover = g.selectAll("geoHover") .data(cdmuni) .enter().append("path") .attr("class", "geoHover") .attr("d", path) .attr('stroke-linejoin', 'round') .attr("fill-opacity", 0) .on('mouseover', cdMouseOver) .on('mouseout', cdMouseOut ); let stationGroup = g.append("g") .attr("class", "stations") let stationSelection = citibikeStationsHistory.set.filter(d => d.last_year > 2019) // Update Stations > Data let station = stationGroup.selectAll("station") .data(stationSelection, 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("fill", "#333") .attr("r", 1.5); const activeGeoids = Array.from(cbGeographic2020.map.keys()) function cdMouseOver(event, d){ d3.select(event.target) .style("cursor", "pointer") .attr('stroke', cHighlight) .attr('stroke-width', 3); let geoid = d.properties.id.toString(); let geoInfo = tsGeoInfo.lookup.get(geoid)[0] let tipContent = ``; tipContent += `${geoInfo.type} (${geoid})
`; tipContent += `

${geoInfo.name}

`; if (geoInfo.id_type === 'nycd') { tipContent += `(${geoInfo.desc})
`; } let lookup = cbGeographic2020.map.get(geoid) if (lookup !== undefined) { let v = lookup[0]; console.log(v.stations_id) d3.selectAll(`#${vizId} .station-point`) .attr("opacity", d => v.stations_id.includes(d.station_id) ? 1 : 0.2) tipContent += `${v.stations} stations within 1/4 mile
`; //Within a 1/4mi with data tipContent += `` // Start Table tipContent += `` tipContent += `` tipContent += `` tipContent += `` //tipContent += `` // tipContent += `` // tipContent += `` // tipContent += `` // tipContent += `` // tipContent += `` // tipContent += `` // tipContent += `` // tipContent += `` // tipContent += `` // tipContent += `` // tipContent += `` tipContent += `

	2020	2019	Chg
Entries	${format.abs(v.startTotal)}	${(v.startTotalPrev) ? format.abs(v.startTotalPrev) : 'N/A'}	${(v.startTotalChg) ? format.chg(v.startTotalChg) : 'N/A'}
${(v.entriesTotalChange) ? format.chg(v.entriesTotalChange) : 'N/A'}
Entries Daily Avg	${format.avg(v['entriesAvg'])}	${(v.change.prev) ? format.avg(v.change['entriesAvg']) : 'N/A'}	${(v.change.prev) ? format.chg(v.change['entriesAvgChg']) : 'N/A'}
Exits Total	${format.abs(v['exitsTotal'])}	${(v.change.prev) ? format.abs(v.change['exitsTotal']) : 'N/A'}
Exits Daily Avg	${format.avg(v['exitsAvg'])}	${(v.change.prev) ? format.avg(v.change['exitsAvg']) : 'N/A'}	${(v.change.prev) ? format.chg(v.change['exitsAvgChg']) : 'N/A'}

`; // Close Table } else { // tipContent += `No Stations` } //console.log(event) mapTip.style("left", () => { console.log({innerWidth, dX: d.x, eventX: event.pageX}) if (innerWidth - event.pageX < 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 cdMouseOut(event, d){ d3.select(event.target) .style("cursor", "default") .style("cursor", "pointer") .attr('stroke', '#FFF') .attr('stroke-width', 0); d3.selectAll(`#${vizId} .station-point`) .attr("opacity", 1) mapTip.style("display", "none"); // Hide toolTip } // Legend g.append("g") .attr("transform", `translate(${20},${50})`) .append(() => legend({ color, title: 'Change', width: 200, // ticks: 6, // tickValues: d3.utcYear.every(5).range(...color.domain()), // tickFormat: format.pct tickFormat: "+%" })); g.append("g") .attr("transform", `translate(${250},${50})`) .append(() => legend({ color: colorXP, title: '', width: 75, ticks: 2, // tickValues: d3.utcYear.every(5).range(...color.domain()), //tickFormat: format.pct tickFormat: "+%" })); return svg.node(); }36:T5ee,citibikeSystemDaily = { let result = {} let formatMonth = d3.timeFormat("%b"); result.set = [] cbParsedSystemDaily.map(d => result.set.push(d)) let lookupSet = d3.group(result.set, d => d.date.toISOString()) // Group data by lines let lookupMonthAvg = d3.rollup(result.set, v => d3.mean(v, d => d.val), d => d.year, d => d.month) let lookupMonthAvgDT = d3.rollup(result.set, v => d3.mean(v, d => d.val), d => d.year, d => d.month, d => d.daytype) let movingAvg7 = movingAverage(result.set.map(e => e.val), 7) result.set.map((d, i) => { d.mavg7 = movingAvg7[i] let prevYr = lookupMonthAvg.get(d.year - 1); let prevYrDT = lookupMonthAvgDT.get(d.year - 1); d.prevMoAvg = null; d.chgMoAvg = null; d.chgMoAvgDT = null; d.chgMov7MoAvg = null; d.prev = null; // check for previous year if (prevYr !== undefined) { let prevMoAvg = prevYr.get(d.month) // check for previous year month if (prevMoAvg !== undefined) { d.prev = `${formatMonth(d.date)} '${(d.year - 1).toString().substring(2)}`; let prevMoAvgDT = prevYrDT.get(d.month).get(d.daytype); // calculate the change over prev d.prevMoAvg = prevMoAvg; d.chgMoAvg = (d.val - prevMoAvg)/prevMoAvg; d.chgMoAvgDT = (d.val - prevMoAvgDT)/prevMoAvgDT; d.chgMov7MoAvg = (d.mavg7 - d.prevMoAvg)/d.prevMoAvg; console.log(d.chgMoAvgDT) } } return d }) return result.set }37:Tdea,function summarizeByStation(dataset, compare) { let result = {} result.summary = {} result.summary.startMax = d3.max(dataset, d => d.startcount); result.summary.endMax = d3.max(dataset, d => d.endcount); result.summary.max = Math.max(result.summary.startMax, result.summary.endMax) result.summary.startAvg = d3.mean(dataset, d => d.startcount); result.summary.endAvg = d3.mean(dataset, d => d.endcount); result.summary.dates = d3.extent(dataset, d => d.date); result.set = [] d3.groups(dataset, d => d.station_id).forEach(d => { let item = {} item.station_id = d[0]; item.data = d[1].sort((a, b) => d3.ascending(a.date, b.date)); //item.firstday = item.data[0].date; item.extDates = d3.extent(item.data, g => g.date); item.days = item.data.length; item.startTotal = d3.sum(item.data, g => g.startcount); item.startAvg = d3.mean(item.data, g => g.startcount); item.startMax = d3.max(item.data, g => g.startcount); item.endTotal = d3.sum(item.data, g => g.endcount); item.endAvg = d3.mean(item.data, g => g.endcount); item.endMax = d3.max(item.data, g => g.endcount); //result.data.push({station_id, data}) // Generate Monthly Summaries item.startAvgMo = d3.rollup(item.data, v => d3.mean(v, d => d.startcount), d => d.month) item.endAvgMo = d3.rollup(item.data, v => d3.mean(v, d => d.endcount), d => d.month) item.startAvgMoDT = d3.rollup(item.data, v => d3.mean(v, d => d.startcount), d => d.month, d => d.daytype) // Process Moving Average for Each Stations Daily Data let n = 7; let movingAvg = movingAverage(item.data.map(e => e.startcount), n) item.data = item.data.map((e, i) => { return Object.assign(e, {startMAvg: Math.round(movingAvg[i])}) }) // Process Change let change = {}; if(compare) { let lookup = compare.map.get(item.station_id) change.prev = (lookup) ? true : false; if (lookup) { result.summary.compareDates = compare.summary.dates; item.data.forEach(g => { let prevStartAvgMo = lookup[0]['startAvgMo'].get(g.month) g.startChgAvgMo = null; g.startChgAvgMoDT = null; g.startMAvgChgAvgMo = null; if (prevStartAvgMo) { g.startChgAvgMo = (g.startcount - prevStartAvgMo)/prevStartAvgMo; g.startMAvgChgAvgMo = (g.startMAvg - prevStartAvgMo)/prevStartAvgMo; let prevStartAvgMoDT = lookup[0]['startAvgMoDT'].get(g.month).get(g.daytype); // calculate the change over prev if (prevStartAvgMoDT) { g.startChgAvgMoDT = (g.startcount - prevStartAvgMoDT)/prevStartAvgMoDT; } } }) //change.firstday = lookup[0]['firstday']; change.extDates = lookup[0]['extDates']; change.days = lookup[0]['days']; change.startTotal = lookup[0]['startTotal']; change.startAvg = lookup[0]['startAvg']; let startAvgChg = (item.startAvg - change.startAvg)/change.startAvg; change.startAvgChg = isFinite(startAvgChg) ? startAvgChg : null; change.endTotal = lookup[0]['endTotal']; change.endAvg = lookup[0]['endAvg']; let endAvgChg = (item.startAvg - change.endAvg)/change.endAvg; change.endAvgChg = isFinite(endAvgChg) ? endAvgChg : null; } } item.change = change; //return item; result.set.push(item) }) result.map = d3.group(result.set, d => d.station_id); return result }38:T9c9,cbGeographic2020 = { let result = {} result.dates = citibikeByStation2020.summary.dates result.set = cbGeoJoins.geoNear.map(d => { let c = {} c.geoid = d[0] let geoInfo = tsGeoInfo.lookup.get(c.geoid)[0]; c.geotype = geoInfo.type; c.geoname = geoInfo.name; c.data = []; c.stations_id = []; c.stations_prev = 0; c.alldata = []; d[1].map(g => { let lookup = citibikeByStation2020.map.get(g.id) if (lookup) { if (lookup[0].change.prev) { c.stations_prev++ } c.data.push(lookup[0]) c.stations_id.push(g.id) c.alldata = c.alldata.concat(lookup[0].data); } }) c.stations = c.data.length c.startTotal = d3.sum(c.data, d => d.startTotal) c.endTotal = d3.sum(c.data, d => d.endTotal) c.startTotalPrev = null; c.startTotalChg = null; c.endTotalPrev = null; c.endTotalChg = null; // console.log({d}) if(c.stations_prev > 0) { c.startTotalPrev = d3.sum(c.data, d => d.change.startTotal) c.startTotalChg = (c.startTotal - c.startTotalPrev)/c.startTotalPrev; c.endTotalPrev = d3.sum(c.data, d => d.change.endTotal) c.endTotalChg = (c.endTotal - c.endTotalPrev)/c.endTotalPrev; } c.tripsByDate = d3.groups(c.alldata, d => d.date.toISOString()).map(function(row) { let n = {} n.date = row[1][0].date n.startcount = d3.sum(row[1], d => d.startcount) n.endcount = d3.sum(row[1], d => d.endcount) return n; }) c.tripsByDateMax = d3.max(c.tripsByDate, d => d.startcount) // let set = [] // let cols = ['entries', 'exits']; // cols.map(function(id) { // s1.map(function(d) { // let day = d.date.getDay(); // set.push({id, date: d.date, day, val: d[id]}); // }) // }) // //set = d3.group(set, d => d.id); // ds.extVal = d3.extent(set, d => d.val); // ds.extTime = d3.extent(set, d => d.date); // ds.series = d3.group(set, d => d.id) // return ds return c }) // result.set = processed2020.set.map(d => { // complexJoins // return d // }) result.ext = {} result.ext.entriesTotalChange = d3.extent(result.set, d => d.entriesTotalChange); result.ext.exitsTotalChange = d3.extent(result.set, d => d.exitsTotalChange); result.map = d3.group(result.set, d => d.geoid); return result }39:T46a,html` `3a:[{"id":"ccbb53e0fc00ebca3c4b42b04882610eb6a2de64ecb81f1048200832af5faa1ae2daf89b2c66bb8f01b2e6f8a7ba717f8eba9dc656bfbbc1640d4c501c3a6036","href":"https://static.observableusercontent.com/files/ccbb53e0fc00ebca3c4b42b04882610eb6a2de64ecb81f1048200832af5faa1ae2daf89b2c66bb8f01b2e6f8a7ba717f8eba9dc656bfbbc1640d4c501c3a6036","name":"cbFrame.geojson","type":"application/geo+json","lastModified":1611988102750.133,"size":498}] 2e:{"id":"e3e5946181dccaab","slug":"nyc-citi-bike-trips-change-2019-2020","title":"NYC Citi Bike Trips Change, 2019–2020","thumbnail":"b897723464ac1ef9ff4111998266d67119cee56d6d7b3f4ab68655ed9b3d866e","access_level":"public","create_time":"$D2021-01-27T08:51:08.067Z","update_time":"$D2022-04-01T19:35:06.416Z","view_time":null,"first_public_time":"$D2021-02-07T16:06:16.196Z","fork":false,"stars":28,"starred":false,"owner":{"type":"team","id":"113f2867d5a070ee","login":"benoldenburg","name":"Ben Oldenburg","avatar_url":"https://avatars-next.observableusercontent.com/8a88f07aaf262f0c6598eefd37083f84a94a8d06481968e87848779677f30fd6","tier":"starter_2024"},"version":1126,"publish_version":1126,"role":null,"authored":false,"authors":[{"type":"individual","id":"e38da6b448cb1251","login":"benoldenburg","name":"Ben Oldenburg","avatar_url":"https://avatars-next.observableusercontent.com/8a88f07aaf262f0c6598eefd37083f84a94a8d06481968e87848779677f30fd6","tier":null}],"members":[{"type":"individual","id":"e38da6b448cb1251","login":"benoldenburg","name":"Ben Oldenburg","avatar_url":"https://avatars-next.observableusercontent.com/8a88f07aaf262f0c6598eefd37083f84a94a8d06481968e87848779677f30fd6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":9,"collection":{"id":"af69dbb5fba7adce","slug":"transit","title":"Transit","owner":{"id":"113f2867d5a070ee","login":"benoldenburg","name":"Ben Oldenburg"}},"type":"notebook","body":{"title":"NYC Citi Bike Trips Change, 2019–2020","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"md`## Trips by Station\nTrips can be viewed as starts/ends by change over 2019 or average daily in 2020. If viewing change, grey stations points were installed in 2020 and had no data from the previous year (including northern Manhattan and the Bronx) installed in 2020, won't show any change. Some of the most extreme changes are often seen on stations that were installed near the end of 2019 (Bushwick) but in general stations, outside the city center still performed much better than stations in the city center even though accounted for a lower overall percentage of trips.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"viewof mapSelect = inputsGroup(\n[\n [\n select({\n // title: 'Order by',\n description: 'Bubble Value',\n options: [\n { value: 'chg-startAvgChg', label: 'Avg Daily Trip Starts (Change over 2019)'},\n { value: 'chg-endAvgChg', label: 'Avg Daily Trip Ends (Change over 2019)'},\n { value: 'abs-startAvg', label: 'Avg Daily Trip Starts, 2020'},\n { value: 'abs-endAvg', label: 'Avg Daily Trip Ends, 2020'},\n // { value: 'abs-startTotal', label: 'Total Trip Starts, 2020'},\n // { value: 'abs-endTotal', label: 'Total Trip Ends, 2020'},\n ],\n value: 'chg-startAvgChg' // set initial value\n })\n ]\n],\n \n[\n ['rVal']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":435,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":592,"value":"md`## Total Trips and Change by Day\nWhile trips had shown a steep decline after the New York City COVID-19 lockdown started, the recovery occurred much faster than other modes (see comparative [MTA ridership numbers](https://observablehq.com/@benoldenburg/mta-daily-ridership-recovery)). Noteably the system only saw [around a 5% decrease](https://observablehq.com/@benoldenburg/nyc-citi-bike-trips-overview) over 2019 and still performed better than 2018.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"md`### Citi Bike Daily Trips, 2020\n7-Day moving average and daily total trips\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"md`### Citi Bike Change in Trips, 2020\n7-Day moving average and daily total trips
change over equivalent month average in 2019\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":405,"value":"md`## Geographic Change in Trips 2019–2020\nThis map was an experiment in summarizing trip changes to larger geography. Using the New York City Community Districts and NJ Municipalities (for Jersey City Station), trips are aggregated for any station that is within a quarter-mile. Any station that falls near multiple geographics is counted in each.\n\nThe data around Brooklyn 4/5/16 and Queens 5 is an outlier because many of the stations in or nearby those areas were installed later in 2019, which is why I set them on a different scale. It is also debatable whether areas like Union City, Hoboken, and Brooklyn 5/16, should be included. However, they do follow an observation that stations on the edge of the system tended to show increased ridership (even ignoring the stations that were installed in late 2019).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1023,"value":"md`### Change in Annual Trip Counts Aggregated by Adjoining NYC Community District or NJ Municipality, 2019–2020\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1021,"value":"md`#### Notes\n+ The current crosswalk of stations to the geography is based on a purely spatial quarter mile versus a walk analysis so there a few outliers (like the edge of Manhattan and the Bronx) that could be further refined out.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1038,"value":"md`## Data\nThe dataset is an aggregate of the raw trip data published by [Citi Bike](https://www.citibikenyc.com/system-data) using the [process](https://medium.com/qri-io/building-a-daily-aggregate-dataset-from-raw-citibike-trip-data-2b6502009871) shared by [Chris Whong](https://twitter.com/chris_whong). Addtional information can be found on my [source notebook](https://observablehq.com/@benoldenburg/nyc-citi-bike-trip-data) and I've also done [annual summaries](https://observablehq.com/d/82bcbbcfc45b33cc) for the full system history.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":837,"value":"md`The 2019 and 2020 daily trips by station are summarized below to create a data object for each station that can be visualized and used as a lookup when stations are styled or hovered over in the map. The summarizeByStation function will perform the process on the initial parsed data for a year. It can also take a dataset that had already been processed as a compare option and will append change data.\n\nI may rewrite this function so is can just take in a full range of data which I've used for smaller datasets and could more easily handle a range of multiple years and partial data if a similar viz was done for the 2021 data. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"citibikeByStation2020 = summarizeByStation(cbParsed2020, citibikeByStation2019)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"citibikeByStation2019 = summarizeByStation(cbParsed2019)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":721,"value":"citibikeByStation2020.map.get('3621')[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":811,"value":"md`The raw parsed data and support files for the mapping, styling and data joints are imported from other notebooks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"import {cbParsed2019, cbParsed2020, cbParsedSystemDaily, citibikeStationsHistory, cbGeoJoins, cbDictionary} from '@benoldenburg/nyc-citi-bike-trip-data'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"import {tsRoutes, tsGeoInfo, tsGeoTopo, shoreline} from '@benoldenburg/nyc-transit-turnstile-data'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"cbFrame = FileAttachment(\"cbFrame.geojson\").json() // simple bounding box of the stations to use for setting map extent","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":773,"value":"md`### Improvements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"// nycBikeRoutes = FileAttachment(\"Bicycle-Routes-0001.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"md`### Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":552,"value":"map_citibike_change_by_station.updateView && map_citibike_change_by_station.updateView(mapSelect) // this cell is what is necessary to let the leaflet map update with out reloading the full cell","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"mapTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"mapTip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"function movingAverage(values, N) {\n let i = 0;\n let sum = 0;\n const means = new Float64Array(values.length).fill(NaN);\n for (let n = Math.min(N - 1, values.length); i < n; ++i) {\n sum += values[i];\n }\n for (let n = values.length; i < n; ++i) {\n sum += values[i];\n means[i] = sum / N;\n sum -= values[i - N + 1];\n }\n return means;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"function isNum(n) {\n return !isNaN(parseFloat(n)) && isFinite(n) && n !== \"\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"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 date3: d3.timeFormat(\"%Y-%m-%d\"), // Timeline Tooltip Date Format\n date4: d3.timeFormat(\"%-m/%-d\"), // 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","author":"$undefined","summary":"$undefined"},{"id":23,"value":"md`### References`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"import {select, slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"import {inputsGroup, chartTip} from '@benoldenburg/mta-daily-ridership-recovery'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"import {legend} from '@d3/color-legend'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"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","author":"$undefined","summary":"$undefined"},{"id":113,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 2f:"$2e:body"