31:T3225,citibike_daily_trips = { let height = 300 let margin = {top: 40, right: 140, bottom: 60, left: 100} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let vizId = "chart-historical"; let vizDesc = `Line chart of Bay Wheels 7-Day Moving Average and Daily Trips`; // Accessibility let vizSource = `Data: Analysis of Bay Wheels Trip Data`; let cbDictionary = bwDictionary; let dDictionary = ({ "mavg7": { "label": "7-day Avg", "color": cbDictionary['bw'].color, }, "val": { "label": "Daily trips", "color": cbDictionary['bw'].coloralt, } }) const cVar = 'color'; // color variable from data dictionary const selectVal = "mavg7"; // main variable const selectVal2 = "val"; // background comparison const selectGroup = ['bw'] // set to select/checkboxes if multiple let filtered = baywheelsDaily.set.filter(d => d.year >= chartSelect.timeframe[0] && d.year <= chartSelect.timeframe[1]) let extDates = d3.extent(filtered, d => d.date) let extData = d3.extent(filtered, d => d[selectVal2]); // filter data.set for extext let yDomain = [0,extData[1]]; let yLabel = 'Trips'; console.log({extDates, extData, yDomain}) 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) .attr("aria-label", vizDesc); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // xAxis Label // group.append("text") // .text('Label') // .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(yLabel) .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'); // Note for No Data 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(yDomain) .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 Total Trips let lineGroupCompare = group.append("g") .attr('class', 'line-group-compare') let lineC = d3.line() .defined(d => isNum(d[selectVal2])) .x(d => x(d.date)) .y(d => y(d[selectVal2])) 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 }); // Add Moving Average Lines let lineGroup = group.append("g") .attr('class', 'line-group') let line = d3.line() .defined(d => isNum(d[selectVal])) .x(d => x(d.date)) .y(d => y(d[selectVal])) 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][selectVal]; 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'); 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('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)) return `translate(${d.x},${d.y})` }); forceLabelLeader .attr("x2", d => d.x-2) .attr("y2", d => d.y) }) // 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', (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[selectVal], b[selectVal])); // 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 = [selectVal, selectVal2] 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 // 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[selectVal])})` // }) // .attr('opacity', d => isNum(d[selectVal]) ? 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[selectVal])})` // }) // .attr('opacity', d => isNum(d[selectVal]) ? 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 += `` if (d.prev) { tipContent += `` tipContent += `` } }) tipContent += `

Total Trips	${format.abs(d.val)}
7-Day Avg	${isNum(d.mavg7) ? format.abs(d.mavg7) : "N/A"}
Active Stations	${format.abs(d.stations)}

`; // 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(tipContent); // toolTip Content }) .on('mouseout', (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(); }32:T371d,chart_change_mo = { let height = 300 let margin = {top: 40, right: 140, bottom: 60, left: 100} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let vizId = `chart-change-over-mo-avg`; // Accessibility let vizDesc = `Line chart of Bay Wheels 7-Day moving average and daily total trips change over equivalent month average of the previous year`; let vizSource = `Data: Analysis of Bay Wheels Trip Data`; const selectType = "chgMov7MoAvg"; const selectType2 = "chgMoAvg"; const selectGroup = ['bw'] let cbDictionary = bwDictionary; const dDictionary = { "chgMov7MoAvg": { "desc": "7-day avg trips over previous year monthly avg", "label": "7-day Avg Change", "color": cbDictionary['bw'].color, }, "chgMoAvg": { "desc": "Daily trips previous year monthly avg", "label": "Daily Trips Change", "color": cbDictionary['bw'].coloralt, } } // New logic for checkbox set //let filtered = citibikeSystemDaily.filter(d => selectGroup.includes(d.id) && (d.year > 2019) ); let filtered = baywheelsDaily.set.filter(d => d.year >= chartSelect2.timeframe[0] && d.year <= chartSelect2.timeframe[1]) 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) .attr("aria-label", vizDesc); 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 => isNum(d[selectType2])) .x(d => x(d.date)) .y(d => y(d[selectType2])) 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 }); // Add Lines let line = d3.line() .defined(d => isNum(d[selectType])) .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 chartid, 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(chartid, 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', (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].rgb), // 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 += `` if (d.prev) { tipContent += `` tipContent += `` tipContent += `` } }) tipContent += `

	Trips	Change
Total	${format.abs(d.val)}	${format.percent1d(d.chgMoAvg)}
7-Day Avg	${isNum(d.mavg7) ? format.abs(d.mavg7) : "N/A"}	${isNum(d.mavg7) ? format.percent1d(d.chgMov7MoAvg) : "N/A"}
${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); }) .on('mouseout', (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 }33:T66f,md`#### Notes + The current dataset starts in June 2017 when [launched as Ford GoBike](https://techcrunch.com/2017/06/27/ford-gobike-launches-in-the-bay-area-starting-tomorrow/) in partnership with Motivate. After Lyft acquired Motivate the system was [rebranded as Bay Wheels](https://www.lyft.com/blog/posts/introducing-bay-wheels-new-bikes-and-a-new-name) in June 2019 + I don't have local knowledge of the system changes or potential city actions around covid or public transit that may better explain some of the trends in daily trips. The early 2020 growth seems related to the [introduction of new ebikes into the system](https://medium.com/@baywheels/bringing-ebikes-back-in-san-francisco-and-upcoming-ebike-pricing-changes-b574f621f2db) and subsequent drop in march seems like it may be related to both the fare increase (also mentioned in the article) and area [sheter in place order](https://abc7news.com/timeline-of-coronavirus-us-covid-19-bay-area-sf/6047519/) that went into effect on March 17, 2020. + Any further explorations of ridership by station would require a more complex analysis than was done for NYC because newer Bay Wheels Ebikes [can be parked at any city bike rack](https://www.lyft.com/blog/posts/introducing-bay-wheels-new-bikes-and-a-new-name) in the service area aside from regular stations. Ebikes that are parked outside a station don't use a standard start/end station ID and are just given a stat and end lat/lon which would need a different aggregation method. Also, the station ID numbers appear to have all changed format in April 2020 which would also make linking trips over time more involved process. `34:T7ad,baywheelsDaily = { let result = {} let raw = d3.csvParse(await FileAttachment("baywheels-daily@2.csv").text()) let parseDate = d3.timeParse("%Y-%m-%d"); let formatYear = d3.timeFormat("%Y"); let formatMonth = d3.timeFormat("%m"); let formatDay = d3.timeFormat("%w"); function dayType(num) { if (num === 0 || num === 6) { return "weekend"; } else { return "weekday" } } let parsed = []; function parseData(dataset) { dataset.forEach(function(d){ let obj = {} obj.id = 'bw'; obj.date = parseDate(d['date']); obj.year = +formatYear(obj.date); obj.month = +formatMonth(obj.date); obj.val = +d.total_trips; parsed.push(obj) }) } parseData(raw) parsed.sort((a, b) => d3.ascending(a.date, b.date)) let N = 7 let movingAvg = movingAverage(parsed.map(e => e.val), N) let lookupMonthAvg = d3.rollup(parsed, v => d3.mean(v, d => d.val), d => d.year, d => d.month) result.set = [] parsed.map((f, i) => { f.mavg7 = movingAvg[i] // check for previous year f.chgMoAvg = null f.chgMovMoAvg = null let prevYr = lookupMonthAvg.get(f.year - 1); if (prevYr !== undefined) { let prevMoAvg = prevYr.get(f.month) // check for previous year month if (prevMoAvg !== undefined) { // calculate the change over prev f.chgMoAvg = (f.val - prevMoAvg)/prevMoAvg; f.chgMov7MoAvg = (movingAvg[i] - prevMoAvg)/prevMoAvg; } } console.log(f.chgMoAvg) console.log(f.chgMovMoAvg) result.set.push(f) }) // res.extDates = d3.extent(res.set, d => d.date) // // res.extVal = d3.extent(set, d => d.val) // // res.extChg = d3.extent(set, d => d.chg) // res.seriesDate = d3.group(res.set, d => d.date) // Group data by lines //res.seriesMode = d3.group(res.set, d => d.id) // Group data by lines return result; }35:[{"id":"df4b99f2ece73f45a705847d6dd214abbdb02338fe89cf746290945d15ede0acefe1c3f0aee3ffbb2a8fb67861966c7fbd357eb5307eecccd2016289c366854f","href":"https://static.observableusercontent.com/files/df4b99f2ece73f45a705847d6dd214abbdb02338fe89cf746290945d15ede0acefe1c3f0aee3ffbb2a8fb67861966c7fbd357eb5307eecccd2016289c366854f","name":"baywheels-daily@2.csv","type":"text/csv","lastModified":1612998113138.407,"size":33112}] 2f:{"title":"Bay Wheels Trips","cells":[{"id":0,"value":"md`# Bay Wheels Trips`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`An initial look at the [daily trips data](https://www.lyft.com/bikes/bay-wheels/system-data) from the [Bay Wheels](https://www.lyft.com/bikes/bay-wheels) bike-share system in the San Francisco Bay Area. Based on similar visualization around the [NYC Citi Bike system](https://observablehq.com/@benoldenburg/nyc-citi-bike-trips-overview). The data doesn't represent official ridership but would be expected to trend close to any adjusted numbers.\n\nPreliminary Data: Due to some inconsistencies in the formatting of the trip data files over time, the numbers still require some additional review, so the current summary should be treated as a preliminary draft.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`### Bay Wheels Daily Trips, ${(chartSelect.timeframe[0] === chartSelect.timeframe[1] ? chartSelect.timeframe[0] : chartSelect.timeframe[0]+'–'+chartSelect.timeframe[1])}\n7-Day moving average and daily total trips\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof chartSelect = inputsGroup(\n[\n [\n \n rangeSlider({\n min: 2017,\n max: 2021,\n step: 1,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [2019, 2021],\n //title: 'Select Timeframe',\n color: '#2d76f6', // match standard slider color\n description: 'Select Timeframe',\n})\n \n ]\n],\n \n[\n ['timeframe']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`### Bay Wheels Change in Trips, ${(chartSelect2.timeframe[0] === chartSelect2.timeframe[1] ? chartSelect2.timeframe[0] : chartSelect2.timeframe[0]+'–'+chartSelect2.timeframe[1])}\n7-Day moving average and daily total trips change over equivalent month average of the previous year\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"viewof chartSelect2 = inputsGroup(\n[\n [\n \n rangeSlider({\n min: 2018,\n max: 2021,\n step: 1,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [2020, 2021],\n //title: 'Select Timeframe',\n color: '#2d76f6', // match standard slider color\n description: 'Select Timeframe',\n})\n \n ]\n],\n \n[\n ['timeframe']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"bwDictionary = ({\n bw: {\n name: \"Bay Wheels\",\n color: '#660F56', // 'rgb(0, 152, 228)'\n coloralt: '#b459a3',\n },\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"import {inputsGroup, movingAverage, chartTip} from '@benoldenburg/mta-daily-ridership-recovery'","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"function isNum(n) {\n return !isNaN(parseFloat(n)) && isFinite(n) && n !== \"\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"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":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"import {select, slider, checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}