31:T61e,md`# MTA Daily Ridership Recovery Visualizing [Day-by-Day Ridership Numbers](https://new.mta.info/coronavirus/ridership) that the New York Metropolitan Transportation Authority (MTA) began publishing from March 2020. The dataset shows daily 2020 ridership by transit mode (or traffic for bridges and tunnels) along with the change over an equivalent day or average from 2019. A simple interactive timeline of events related to New York's Response to COVID-19 is included that references information from [Investopedia](https://www.investopedia.com/historical-timeline-of-covid-19-in-new-york-city-5071986) and MTA Press Releases. Additional notes can be found below. Hover over the timeline points for event details, the line labels to highligt a single transit mode or over the chart plot area to display the data for an individual day (sorted by top ridership/change on the respective charts) The charts below can also be saved as an svg or png by clicking on the cell menu button ( ) to the left of each. I hope these visuals can be a useful resource for dialogue around transit improvements and will continue to refine and update as MTA publishes additional data. Latest Data Imported: ${d3.timeFormat("%A, %B %-d, %Y")(mtaDaily.extDates[1])} #savetransit

`32:T286d,chartRidership = { let height = 500 let margin = {top: 60, right: 150, bottom: 60, left: 100} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let chartid = "chart-ridership"; const selectType = "val"; const selectGroup = ridershipCheckbox.mode; // New logic for checkbox set let filtered = mtaDaily.set.filter(d => selectGroup.includes(d.id)); let selectExt = d3.extent(filtered, d => d[selectType]); let extData = d3.extent(filtered, d => d[selectType]); // filter data.set for extext let extDates = d3.extent(filtered, d => d.date) let selectSeries = d3.groups(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", chartid); 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('Ridership / Traffic') .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('Data: MTA Day-by-Day Ridership Numbers') .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); let line = d3.line() .defined(d => !isNaN(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 dataDict[d[0]].rgb }); // Add Line Labels // let lineLabels = group.append("g") // .attr('class', 'line-labels') // lineLabels.selectAll() // .data(data.seriesMode).enter() // .append('text') // .attr('class', 'line-label') // .html(d => dataDict[d[0]].name) // .attr('fill', d => dataDict[d[0]].color) // .attr('alignment-baseline', 'left') // .attr('x', innerWidth) // .attr('dx', '.5em') // .attr('y', d => y(d[1][d[1].length - 1].val)) // .style('font-size', '.7em'); // Label Object let labelset = Array.from(selectSeries).map(d => { let obj = {} obj.id = d[0]; obj.label = dataDict[obj.id].name; obj.color = dataDict[obj.id].rgb; obj.val = d[1][d[1].length - 1][selectType]; console.log(obj) return obj }) // Force Line Labels - Basic Version 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("#" + chartid + " .ts-line") .transition().style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .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("#" + chartid + " .ts-line") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .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(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) }) // Timeline drawTimeline(chartid, group, x, innerWidth); // Chart Area Tooltip // 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('mousemove', (event) => { let invert = x.invert(d3.pointer(event)[0]) let bisect = d3.bisector(function(d) { return d; }).right; let hoverDate = (selectDates[bisect(selectDates, invert)]); //it would return 2. // 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("#" + chartid + " .y-highlight") .attr('x1',x(hoverDate)) .attr('x2',x(hoverDate)) .style('opacity', 1); // 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 => dataDict[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 += ``; // Interate over selected categories lookup.map( d => { tipContent += `` tipContent += `` tipContent += `` }); tipContent += `

	Ridership	Change
${dataDict[d.id].name}	${formatValue(d.val)}	${formatPercent1d(d.chg)}

`; 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(`${tlDateFormat(hoverDate)}
${tipContent}`); }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip d3.select("#" + chartid + " .y-highlight").style('opacity', 0); // Hide y-highlight line d3.selectAll("#" + chartid + " .y-highlight-point").remove(); // Remove y-highlight points }); return svg.node(); }33:T27ee,chartChange = { let height = 500 let margin = {top: 80, right: 150, bottom: 60, left: 100} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let chartid = "chart-change"; const selectType = "chg"; // New logic for checkbox set let filtered = mtaDaily.set.filter(d => changeCheckbox.mode.includes(d.id)); let extData = d3.extent(filtered, d => d[selectType]); // filter data.set for extext let extDates = d3.extent(filtered, d => d.date) let selectSeries = d3.groups(filtered, d => d.id); let selectLookup = d3.group(filtered, d => d.date.toISOString()) let selectDates = Array.from(selectLookup).map(d => d[1][0].date); let selectGroup = Array.from(selectSeries).map(d => { return d[0]}); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); 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 Ridership / Traffic') .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('Data: MTA Day-by-Day Ridership Numbers') .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(formatPercent); 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', '#CCC'); // Add Lines let line = d3.line() .x(d => x(d.date)) .y(d => y(d.chg)) 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 dataDict[d[0]].color }); // Add Line Labels // Label Object let labelSet = Array.from(selectSeries).map(d => { let obj = {} obj.id = d[0] obj.label = dataDict[obj.id].name obj.color = dataDict[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("#" + chartid + " .ts-line") .transition().style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .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("#" + chartid + " .ts-line") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-leader") .transition().style('opacity', 1 ); }); forceLabel.append('text') .attr("class", 'lfl-text') .html(d => dataDict[d.id].name) .attr('fill', d => dataDict[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("#" + chartid + " .y-highlight") .attr('x1',x(hoverDate)) .attr('x2',x(hoverDate)) .style('opacity', 1); // 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 => dataDict[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 += `` // Start Table // Interate over selected categories lookup.map( d => { tipContent += `` tipContent += `` tipContent += `` }) tipContent += `

	Change	Ridership
${dataDict[d.id].name}	${formatPercent1d(d.chg)}	${formatValue(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(`${tlDateFormat(hoverDate)}
${tipContent}`); }) .on('mouseout', (event) => { console.log('mouseout'); chartTip.style("display", "none"); // Hide toolTip d3.select("#" + chartid + " .y-highlight").style('opacity', 0); // Hide y-highlight line d3.selectAll("#" + chartid + " .y-highlight-point").remove(); // Remove y-highlight points }); return svg.node(); // Return SVG }34:T2c28,chartMovingAvg = { let height = 400 let margin = {top: 40, right: 150, bottom: 60, left: 100} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let chartid = "chart-moving-avg"; const selectType = "mavg"; const selectType2 = "val"; const selectGroup = movingAvgCheckbox.mode; // array of the checkbox selections for filtering // let selectSeries = seriesModeMA.filter(d => selectGroup.includes(d[0])); // filter moving avg series // let filtered = mtaDailyMA.filter(d => selectGroup.includes(d.id)); // filter data.set for extext // let selectExt = d3.extent(filtered, d => d.val); // filter data.set for extext let filtered = mtaDailyMA.filter(d => d.year >= chartSelect.timeframe[0] && d.year <= chartSelect.timeframe[1] && movingAvgCheckbox.mode.includes(d.id)) //let filtered = mtaDailyMA.filter(d => movingAvgCheckbox.mode.includes(d.id)); let extData = d3.extent(filtered, d => d[selectType2]); // filter data.set for extext let extDates = d3.extent(filtered, d => d.date) let selectSeries = d3.groups(filtered, d => d.id); console.log(selectSeries) 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", chartid); 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('Ridership / Traffic') .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('Data: MTA Day-by-Day Ridership Numbers') .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[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 dataDict[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 dataDict[d[0]].color }); // Label Object let labelset = Array.from(selectSeries).map(d => { let obj = {} obj.id = d[0]; obj.label = dataDict[obj.id].name; obj.color = dataDict[obj.id].color; obj.val = d[1][d[1].length - 1][selectType]; return obj }) // Force Line Labels - Basic Version 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("#" + chartid + " .ts-line") .transition().style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .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("#" + chartid + " .ts-line") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .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(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) }) // 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', (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("#" + chartid + " .y-highlight") .attr('x1',x(hoverDate)) .attr('x2',x(hoverDate)) .style('opacity', 1); // 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[selectType])})` }) .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0) // hide if value is NaN, .append('circle') .attr('r', 3) .attr('fill', d => dataDict[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 += `` // Interate over selected categories lookup.map( d => { let mavgVal = isNaN(d.mavg) ? "–" : formatValue(d.mavg); // format NaNs tipContent += `` tipContent += `` tipContent += `` }) // Close Table tipContent += `

	${chartSelect.N}-Day Avg	Ridership
${dataDict[d.id].name}	${mavgVal}	${formatValue(d.val)}

` 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(`${tlDateFormat(hoverDate)}
${tipContent}`); // toolTip Content }) .on('mouseout', (event) => { console.log('mouseout'); chartTip.style("display", "none"); // Hide toolTip d3.select("#" + chartid + " .y-highlight").style('opacity', 0); // Hide y-highlight line d3.selectAll("#" + chartid + " .y-highlight-point").remove(); // Remove y-highlight points }); return svg.node(); }35:T2171,chartModeByDay = { const height = 400 const margin = {top: 40, right: 150, bottom: 60, left: 100} const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const chartid = "chart-mode-day"; const selectType = byDaySelect.type; const selectMode = byDaySelect.mode; let extDates = d3.extent(mtaDaily.set, d => d.date) let groupDay = d3.group(mtaDaily.set, d => d.id, d => d.day) // Group data by lines let groupMode = d3.group(mtaDaily.set, d => d.id) // Group data by lines let selectSeries = Array.from(groupDay.get(selectMode)).sort((a, b) => d3.descending(a[1][a[1].length - 1][selectType], b[1][b[1].length - 1][selectType])); let extData = d3.extent(groupMode.get(selectMode), d => d[selectType]); if (selectType === "val" && extData[0] > 0){ extData = [0, extData[1]]; // zero the lower extent if an absolute value } const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // xAxis Label // group.append("text") // .attr("class", "x-title") // .text('Season') // .attr("text-anchor", "middle") // .attr("y", innerHeight + (margin.bottom / 2)) // .attr("x", ((width - margin.left - margin.right) / 2.0)); // yAxis Label group.append("text") .text(() => selectType === "val" ? "Ridership / Traffic" : "Change" ) .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('Data: MTA Day-by-Day Ridership Numbers') .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); // add percent format to y axis if change if (width < 700) { xAxis.tickFormat(d3.timeFormat("%b")); } if (byDaySelect.type === "chg") { yAxis.tickFormat(formatPercent); } 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', '#CCC') .style('opacity', () => { }); // 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, i) { // return dataDict[selectMode].color //return RGB_Linear_Shade(-0.50+(d[1][0].day*0.12), dataDict[selectMode].rgb) return RGB_Linear_Shade(-0.50+(i*0.12), dataDict[selectMode].rgb) }); // Add Line Labels let lineLabels = group.append("g") .attr('class', 'line-labels') // Processed data array to generate the line labels. let labelset = Array.from(selectSeries).map((d, i) => { let obj = {}; obj.id = d[0]; obj.label = d3.timeFormat("%A")(d[1][0].date); obj.day = d[1][0].day; obj.color = dataDict[selectMode].rgb obj.val = d[1][d[1].length - 1][selectType]; obj.lastpos = d[1][d[1].length - 1].date; return obj }).sort((a, b) => d3.descending(a.val, b.val)) // Static Line Labels - Simple inital label code but resulted in overlap // lineLabels.selectAll() // .data(labelset).enter() // .append('text') // .html(d => d.label) // .attr('fill', d.color) // .attr('alignment-baseline', 'left') // .attr('x', innerWidth) // .attr('dx', '.5em') // .attr('y', d => y(d[1][d[1].length - 1][selectType])) // .style('font-size', '.7em'); // Force Line Labels // Advances version using custom rectangle collision force to deal with the denser placement let forceLabelOffset = 14 // offset of labels from right side of chart 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', d => x(d.lastpos) + 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, i) { // contrains node x,y to bounds d.x = innerWidth + forceLabelOffset; // d.y = y(d.val); d.y = innerHeight/3 + (i * 15); // initializes the labels in a stepped return `translate(${d.x},${d.y})` }) .on("mouseover", (event, d) => { d3.select(event.target).style("cursor", "pointer"); d3.selectAll("#" + chartid + " .ts-line") .transition().style('opacity', g => { return g[0] === d.id ? 1 : 0.10; }); d3.selectAll("#" + chartid + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.15; }); d3.selectAll("#" + chartid + " .lfl-leader") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.15; }); }) .on("mouseout", (event, d) => { d3.select(event.target).style("cursor", "default"); d3.selectAll("#" + chartid + " .ts-line") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-leader") .transition().style('opacity', 1 ); });; forceLabel.append('text') .attr("class", 'lfl-text') .html(d => d.label) .attr('fill', (d, i) => { //return RGB_Linear_Shade(-0.50+(d.day*.12), d.color) // shade by day of week return RGB_Linear_Shade(-0.50+(i*.12), d.color) // shade by high high to low if sorted //return d.color }) .attr('alignment-baseline', 'middle') .style('font-size', '.75em'); forceLabel.append('rect') .attr("class", 'lfl-rect') .attr("fill", "none"); // .attr("stroke", "#EEE"); // displays the collision boundary - dev only let firstTick = true; let firstTickAction = function () { d3.selectAll("#" + chartid + " .lfl-text") .select(function(d, i) { d.bbox = this.getBBox(); d.width = d.bbox.width; d.height = d.bbox.height; }) d3.selectAll("#" + chartid + " .lfl-rect") .attr("width", d => d.width) .attr("height", d => d.height) .attr('transform', function(d) { return 'translate(' + 0 + ',' + (-d.height / 2) + ')'; }); firstTick = false; } 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("rect_collision", rectCollide()) .force('collision', d3.forceCollide().radius(10)) simulation.on('tick', () => { if(firstTick){ firstTickAction() } forceLabel.attr('transform', function(d) { // contrains node x,y to bounds d.y = Math.max(Math.min(innerHeight, d.y), 0); // constrain y to vertical chart area 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) }) return svg.node(); // Return SVG }36:T659,eventsCSV = `date,note,short 2020-03-01,"First COVID-19 case in New York State",First Case 2020-03-16,"NYC public schools close",Schools Close 2020-03-17,"NYC bars and restaurants close, except for delivery",Delivery Only 2020-03-22,"NYS on Pause Program begins, all non-essential workers must stay home",NYS PAUSE 2020-03-23,"MTA stops collection fares on local buses",Back of Bus Boarding 2020-05-06,"MTA suspends night passenger service (1-5 a.m.) on the subway",Subway Nigth Closures 2020-06-08,"NYC begins Phase 1 reopening",Phase 1 2020-06-22,"NYC begins phase 2 of reopening",Phase 2 2020-07-06,"NYC begins Phase 3 of reopening, without indoor dining",Phase 3 2020-07-19,"NYC begins Phase 4 reopening, excluding malls, museums and indoor dining/bars",Phase 4 2020-08-31,"MTA Resumes collecting fares on local buses",Bus Fares Resume 2020-09-29,"Elementary students return to public school classrooms across NYC",PS Start 2020-09-30,"Indoor dining in NYC resumes with a 25% occupancy limit",25% Dining 2020-11-19,"NYC public schools close due to increase in cases",Schools Close 2020-12-14,"NYC indoor dining suspended" 2021-02-12,"NYC indoor dining resumes with a 25% occupancy limit" 2021-02-26,"NYC indoor dining limit increased to 35%" 2021-03-19,"NYC indoor dining limit increased to 50%" 2021-03-22,"NYC high schools reopen" 2021-05-17,"24-hour subway service resumes" 2021-05-19,"NYC indoor dining full capacity" 2021-06-25,"Last day for NYC public schools" 2021-09-13,"First day for NYC public schools" 2021-12-02,"First recorded case of the Omicron variant in NYC" 2022-06-27,"Last day for NYC public schools"`37:T817,drawTimeline = function(id, targetElement, x, innerWidth){ let tlOffset = -30; // timeline offset from top of chart area let timeline = targetElement.append("g") .attr("class", "timeline") timeline.append("text") .attr('x', innerWidth+5) .attr('y', tlOffset) .attr("text-anchor", "start") .attr("alignment-baseline", "middle") .text('Timeline') .attr('fill', '#555') .style('font-size', '.85em'); timeline.append("line") .attr("class", "tl-baseline") .attr("class", "baseline") .attr('x1', 0) .attr('x2', innerWidth) .attr('y1', tlOffset) .attr('y2', tlOffset) .style('stroke', '#CCC'); let tlEvent = timeline.append('g') .selectAll('.event') .data(events) .join('g') .attr("class", "event") .attr('transform', d => { return 'translate(' + x(d.date) + ',' + tlOffset + ')'; }); tlEvent.append('circle') .attr('fill', "#999") .attr("r", 4) .on("mouseover", (event, d) => { d3.select(event.target).attr("fill", "#222"); console.log(targetElement); d3.select("#" + id + " .y-highlight") .attr('x1',x(d.date)) .attr('x2',x(d.date)) .style('opacity', 1); eventTip .style("left", event.pageX + 24 + "px") .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(`${tlDateFormat(d.date)}
${d.note}`);}) .on("mouseout", (event, d) => { d3.select(event.target).attr("fill", "#999"); eventTip.style("display", "none"); d3.select("#" + id + " .y-highlight") .style('opacity', 0); }); // Static Short Labels > Current looks too busy to use // tlEvent.append('text') // .text(d => d.short) // .attr('x', 5) // .attr("y", -5) // .attr("transform", "rotate(-45)") // .style('font-size', '.7em') // .style('fill', '#999'); }38:T788,mtaDaily = { let result = {} // initialize object to data let nonValues = ["", "TBD", "N/A","#VALUE!"] // Process preformatted percent values. const processPct = function (val) { return (parseFloat(val.replace("%", ""))/100).toFixed(3); } // custom parsing for the MTA's posted csv file let parseDate = d3.timeParse("%-m/%-d/%Y"); // Parses 3/1/2020 let parsed = [] dataRaw.map(d => { let row = {} row.date = parseDate(d['Date']); dataColumns.map(g => { //row[g.id] = +d[g.name]; let n = d[g.name]; console.log(g) console.log(n) if (nonValues.includes(n)) { //if (d[g.name] === "") { row[g.id] = null; } else if (n.includes("%")) { row[g.id] = +processPct(d[g.name]) } else { row[g.id] = +d[g.name] } }) parsed.push(row) }) // Sort Parsed Data parsed.sort((a, b) => d3.ascending(a.date, b.date)) // Maps data to individual rows by day/mode // This could probably be merged into the parsing code above, but that code is very unique to the dataset so it was left separate. let set = [] let weekFormat = d3.utcFormat("%U"); dataColumns.map(function(g) { parsed.map(function(d) { let id = g.id; if (!id.includes("_cp") && d[id] !== null ) { let day = d.date.getDay(); let week = parseInt(weekFormat(d.date)) let year = d.date.getFullYear() set.push({id, date: d.date, day, week, year, val: d[id], cp: d[id +'_cp'], chg: -1 + d[id +'_cp']}); } }) }) // set = set.filter(function(d) { return [0,6].includes(d.day) }) // filter weekends // set = set.filter(function(d) { return [1,2,3,4,5].includes(d.day) }) // filter weekends // Summary result.set = set; result.extDates = d3.extent(set, d => d.date) result.mapMode = d3.group(set, d => d.id) // Group data by lines return result; }39:T463,dataDict = ({ 'subway': { 'name': 'Subways', 'val': 'Total Estimated Ridership', 'chg': '% Change From Pre-Pandemic Equivalent Day', 'color': '#2261a7', 'rgb': 'rgb(34,97,167)' }, 'bus': { 'name': 'Bus', 'val': 'Total Estimated Ridership', 'chg': '% Change From Pre-Pandemic Equivalent Day', 'color': '#ee2b7b', 'rgb': 'rgb(238,43,123)' }, 'lirr': { 'name': 'LIRR', 'val': 'Total Estimated Ridership', 'chg': '% Change From 2019 Monthly Weekday/Saturday/Sunday Average', 'color': '#f99d3e', 'rgb': 'rgb(249,157,62)' }, 'mnr': { 'name': 'Metro-North', 'val': 'Total Estimated Ridership', 'chg': '% Change From 2019 Monthly Weekday/Saturday/Sunday Average', 'color': '#a066aa', 'rgb': 'rgb(160,102,170)' }, 'accessaride': { 'name': 'Access-A-Ride', 'val': 'Total Scheduled Trips', 'chg': '% Change From Pre-Pandemic Equivalent Day', 'color': '#27c3ed', 'rgb': 'rgb(39,195,237)' }, 'bridgestunnels': { 'name': 'Bridges & Tunnels', 'val': 'Total Traffic', 'chg': '% Change From Pre-Pandemic Equivalent Day', 'color': '#818385', 'rgb': 'rgb(129,131,133)' } })3a:T4f3,function rectCollide() { let nodes; function force(alpha) { const quad = d3.quadtree(nodes, d => d.x, d => d.y); for (const d of nodes) { quad.visit((q, x1, y1, x2, y2) => { let updated = false; if(q.data && q.data !== d){ let x = d.x - q.data.x, y = d.y - q.data.y, xSpacing = 2 + (q.data.width + d.width) / 2, ySpacing = 2 + (q.data.height + d.height) / 2, absX = Math.abs(x), absY = Math.abs(y), l, lx, ly; if (absX < xSpacing && absY < ySpacing) { l = Math.sqrt(x * x + y * y); lx = (absX - xSpacing) / l; ly = (absY - ySpacing) / l; // the one that's barely within the bounds probably triggered the collision if (Math.abs(lx) > Math.abs(ly)) { lx = 0; } else { ly = 0; } d.x -= x *= lx; d.y -= y *= ly; q.data.x += x; q.data.y += y; updated = true; } } return updated; }); } } force.initialize = _ => nodes = _; return force; }3b:T83e,mtaDailyLive = { let result = {} // initialize object to data let nonValues = ["", "TBD", "N/A","#VALUE!"] // Process preformatted percent values. const processPct = function (val) { return (parseFloat(val.replace("%", ""))/100).toFixed(3); } // custom parsing for the MTA's posted csv file //let parseDate = d3.timeParse("%-m/%-d/%Y"); // Parses 3/1/2020 let parseDate = d3.utcParse("%Y-%m-%dT%H:%M:%S.%L") // Parses 2020-04-04T00:00:00.000 let parsed = [] request.data.map(d => { let row = {} row.date = parseDate(d['date']); console.log(d.date) console.log(row.date) dataColumnsLive.map(g => { //row[g.id] = +d[g.name]; let n = d[g.name]; // console.log(g) // console.log(n) if (nonValues.includes(n) || n === undefined ) { //if (d[g.name] === "") { row[g.id] = null; } else if (n.includes("%")) { row[g.id] = +processPct(d[g.name]) } else { row[g.id] = +d[g.name] } }) parsed.push(row) }) // Sort Parsed Data parsed.sort((a, b) => d3.ascending(a.date, b.date)) // Maps data to individual rows by day/mode // This could probably be merged into the parsing code above, but that code is very unique to the dataset so it was left separate. let set = [] let weekFormat = d3.utcFormat("%U"); dataColumns.map(function(g) { parsed.map(function(d) { let id = g.id; if (!id.includes("_cp") && d[id] !== null ) { let day = d.date.getDay(); let week = parseInt(weekFormat(d.date)) let year = d.date.getFullYear() set.push({id, date: d.date, day, week, year, val: d[id], cp: d[id +'_cp'], chg: -1 + d[id +'_cp']}); } }) }) // set = set.filter(function(d) { return [0,6].includes(d.day) }) // filter weekends // set = set.filter(function(d) { return [1,2,3,4,5].includes(d.day) }) // filter weekends // Summary result.set = set; result.extDates = d3.extent(set, d => d.date) result.mapMode = d3.group(set, d => d.id) // Group data by lines return result; }3c:T4d6,viewof selectionsPrev = { const div = html` Mode Select: Type: `; let modeEl = div.querySelector("#select-mode"); let typeEl = div.querySelector("#select-type"); let mode = modeEl.value let type = typeEl.value // div.value = {} // function update(){ // div.value.mode = modeEl.value; // div.valuetype = typeEl.value; // } // modeEl.addEventListener('change', () => div.value.mode = modeEl.value) // typeEl.addEventListener('change', () => div.value.typeEl.value) //div.value = mode; div.value = { 'mode': modeEl.value, 'type': typeEl.value } return div; }3d:[{"id":"04d25d6c1d364abc4f77c03dfc304885f3e888b7aadd04493aacf0369b218d6b3839daa9a93e961b433d75d51e5efb72401224dddc0246457b7768db6f5f88da","href":"https://static.observableusercontent.com/files/04d25d6c1d364abc4f77c03dfc304885f3e888b7aadd04493aacf0369b218d6b3839daa9a93e961b433d75d51e5efb72401224dddc0246457b7768db6f5f88da","name":"MTA_recent_ridership_data_20210329.csv","type":"text/csv","lastModified":1617202149431.917,"size":34838},{"id":"9bd53f5b24888f1ba7aa42ce8afdc80fa9109fb54500b4b2f42564134942d1eca40ce05282c50288f03c142a2081656656ae2d98727307cdbea1e27c05a75068","href":"https://static.observableusercontent.com/files/9bd53f5b24888f1ba7aa42ce8afdc80fa9109fb54500b4b2f42564134942d1eca40ce05282c50288f03c142a2081656656ae2d98727307cdbea1e27c05a75068","name":"MTA_recent_ridership_data_20210407.csv","type":"text/csv","lastModified":1617936005100.834,"size":35618},{"id":"de0a0e4569886e11a44392ff4162ae1db581e827a097b39eba70afe581b034498aeee2e703e49b5e4165f7532d1cb526933a2918042e26c9c8fed7b58ae3dcc8","href":"https://static.observableusercontent.com/files/de0a0e4569886e11a44392ff4162ae1db581e827a097b39eba70afe581b034498aeee2e703e49b5e4165f7532d1cb526933a2918042e26c9c8fed7b58ae3dcc8","name":"MTA_recent_ridership_data_20210420.csv","type":"text/csv","lastModified":1619064191225.162,"size":36754},{"id":"1d8b34c76b92bad13b10fdcd0b6367f928ca01394d42b551178c0b13dd8a897b72cb28082e370f7a857b33f3a746d799c82fa075e3a3296c37f57183ae5310f8","href":"https://static.observableusercontent.com/files/1d8b34c76b92bad13b10fdcd0b6367f928ca01394d42b551178c0b13dd8a897b72cb28082e370f7a857b33f3a746d799c82fa075e3a3296c37f57183ae5310f8","name":"MTA_recent_ridership_data_20210701.csv","type":"text/csv","lastModified":1625505215538.143,"size":43245},{"id":"5ed939e5c27ebafd873a66653d91bf8a1a67fe2d25adaeba5cffccc468a70655ea66016b2f59f6632f7410ecd8d910b490731726e6d8a558428713c3a68fb25c","href":"https://static.observableusercontent.com/files/5ed939e5c27ebafd873a66653d91bf8a1a67fe2d25adaeba5cffccc468a70655ea66016b2f59f6632f7410ecd8d910b490731726e6d8a558428713c3a68fb25c","name":"MTA_recent_ridership_data_20210602.csv","type":"text/csv","lastModified":1622833644284.741,"size":40626},{"id":"e4e9b5b08b0af5a312a9cc953f800c6860142053c1552a72cae387c09a8dc702d3b6bbfed222c81966b9b7fc6e7ba6275eaebbbf4ff6a0aaa7e9f6ede1090625","href":"https://static.observableusercontent.com/files/e4e9b5b08b0af5a312a9cc953f800c6860142053c1552a72cae387c09a8dc702d3b6bbfed222c81966b9b7fc6e7ba6275eaebbbf4ff6a0aaa7e9f6ede1090625","name":"MTA_Daily_Ridership_Data__Beginning_2020@9.csv","type":"text/csv","lastModified":1663254844095.564,"size":78710},{"id":"ffea5b040cadca4e16a38297ff91e41a7f87e7a500e629c57e3242a3062707bffb0bff2c8e76ec8a33f1637b2098bd1361986f2d5e4e834b8249fe6e84d49893","href":"https://static.observableusercontent.com/files/ffea5b040cadca4e16a38297ff91e41a7f87e7a500e629c57e3242a3062707bffb0bff2c8e76ec8a33f1637b2098bd1361986f2d5e4e834b8249fe6e84d49893","name":"MTA_recent_ridership_data_20210822.csv","type":"text/csv","lastModified":1629762485522.95,"size":47399},{"id":"6e0bb854f9dc1fb21be0a3334faa17ea6c004d89802838e0bba34e00eb6df5f2f81699ef28f5f55f5646296436d63fb53b06fe1beeeea7e0c098326182f2f98d","href":"https://static.observableusercontent.com/files/6e0bb854f9dc1fb21be0a3334faa17ea6c004d89802838e0bba34e00eb6df5f2f81699ef28f5f55f5646296436d63fb53b06fe1beeeea7e0c098326182f2f98d","name":"MTA_recent_ridership_data_20211108.csv","type":"text/csv","lastModified":1636515079751.174,"size":54422},{"id":"8614d29893e321ef221e6c5f4454341a8ea120ea74dfccf564764c07062c14dbdd669ff562ccf4cc8f2eb420560c33d6ac57014d7ce387b5c70b80d2d9531beb","href":"https://static.observableusercontent.com/files/8614d29893e321ef221e6c5f4454341a8ea120ea74dfccf564764c07062c14dbdd669ff562ccf4cc8f2eb420560c33d6ac57014d7ce387b5c70b80d2d9531beb","name":"MTA_recent_ridership_data_20210919@1.csv","type":"text/csv","lastModified":1632172904521.348,"size":49889},{"id":"b072cf3c7e356c88d5d66379ee30f72c1cffa74a82bd38662d563a2310e5aae3fe6c49c2763441ca0c3d69c7664b5b7c06c5966fb5dfd75bbe16425147cfa601","href":"https://static.observableusercontent.com/files/b072cf3c7e356c88d5d66379ee30f72c1cffa74a82bd38662d563a2310e5aae3fe6c49c2763441ca0c3d69c7664b5b7c06c5966fb5dfd75bbe16425147cfa601","name":"MTA_recent_ridership_data_20211005.csv","type":"text/csv","lastModified":1633565181758.874,"size":51339},{"id":"30fb8974c2f020637e4275f1ffd501d8679d724db9444c84a598cfd0cafa828120d0ddff1e80bfb547870bc689691ff69a74c8a55d9a418e583356cd4822c388","href":"https://static.observableusercontent.com/files/30fb8974c2f020637e4275f1ffd501d8679d724db9444c84a598cfd0cafa828120d0ddff1e80bfb547870bc689691ff69a74c8a55d9a418e583356cd4822c388","name":"MTA_recent_ridership_data_20211005@1.csv","type":"text/csv","lastModified":1633565439557.498,"size":51333},{"id":"89957235ffb275e0a80f289b8a1364d1401a47be6475bfd29061b4112647e1950a662c18e0aca637a56b4c98f6c3c1314a69da6832987946c5b63e5d621f2f32","href":"https://static.observableusercontent.com/files/89957235ffb275e0a80f289b8a1364d1401a47be6475bfd29061b4112647e1950a662c18e0aca637a56b4c98f6c3c1314a69da6832987946c5b63e5d621f2f32","name":"MTA_recent_ridership_data_20211201.csv","type":"text/csv","lastModified":1638550793125.369,"size":52880},{"id":"782cdf9ea3c9ed7ba9f1129f739bdb3c05075e5b383729e03aa0442e56fe2fa0ed4b5f5a0163abaf2a6c06c949ca03be38c63400d5e651424eeaadd25f98ffbb","href":"https://static.observableusercontent.com/files/782cdf9ea3c9ed7ba9f1129f739bdb3c05075e5b383729e03aa0442e56fe2fa0ed4b5f5a0163abaf2a6c06c949ca03be38c63400d5e651424eeaadd25f98ffbb","name":"MTA_recent_ridership_data_20220102.csv","type":"text/csv","lastModified":1641251637759.985,"size":55601},{"id":"41a39090db29356b2f2e3f9954aa69975b2ef62867b64b570290d4beffb2df514e775d11780261275b6e699833333918c02d71df760ce81e0d9968e5ee3c1537","href":"https://static.observableusercontent.com/files/41a39090db29356b2f2e3f9954aa69975b2ef62867b64b570290d4beffb2df514e775d11780261275b6e699833333918c02d71df760ce81e0d9968e5ee3c1537","name":"MTA_recent_ridership_data_20220111.csv","type":"text/csv","lastModified":1642040630767.929,"size":56354},{"id":"e3ae6281fb1766cdf739fc0ed096f4d527e95174d67366a5bdcafac731d51d026fdef5bcc323e7cab393dd7566fad439662caf05f2be1653dc8fafa7cfcb74c7","href":"https://static.observableusercontent.com/files/e3ae6281fb1766cdf739fc0ed096f4d527e95174d67366a5bdcafac731d51d026fdef5bcc323e7cab393dd7566fad439662caf05f2be1653dc8fafa7cfcb74c7","name":"MTA_recent_ridership_data_20220228.csv","type":"text/csv","lastModified":1646276138281.28,"size":60426},{"id":"454cc0f634ec9db4bd936e7c09c27a556e05e5e237ce6b2fd9a057cbf9c2b1cf51ad6830789c739dcf58ac124063f9f16dcee43e5fc512ca9c99c129716226f2","href":"https://static.observableusercontent.com/files/454cc0f634ec9db4bd936e7c09c27a556e05e5e237ce6b2fd9a057cbf9c2b1cf51ad6830789c739dcf58ac124063f9f16dcee43e5fc512ca9c99c129716226f2","name":"MTA_Daily_Ridership_Data__Beginning_2020@3.csv","type":"text/csv","lastModified":1653743608019.013,"size":69198},{"id":"c11158b393d9df4f8086c2bb93ea368ce697cca6616aa2a70f7e671dace0d4490b73156c359f3352f3230dd5d89cd78ce89ab9a4f721a3d6ce53872b4b49879b","href":"https://static.observableusercontent.com/files/c11158b393d9df4f8086c2bb93ea368ce697cca6616aa2a70f7e671dace0d4490b73156c359f3352f3230dd5d89cd78ce89ab9a4f721a3d6ce53872b4b49879b","name":"MTA_Daily_Ridership_Data__Beginning_2020.csv","type":"text/csv","lastModified":1649005205594.636,"size":60792},{"id":"833424506181ce500b8b29777d367fca222c2aa5e7d9272ae826839eaa16617b8bbfe78f1c3b7e15a4476bac72a3e67e896101d16560fd2535207d83eb933c4a","href":"https://static.observableusercontent.com/files/833424506181ce500b8b29777d367fca222c2aa5e7d9272ae826839eaa16617b8bbfe78f1c3b7e15a4476bac72a3e67e896101d16560fd2535207d83eb933c4a","name":"MTA_Daily_Ridership_Data__Beginning_2020@5.csv","type":"text/csv","lastModified":1656180379079.796,"size":71621},{"id":"74c6f4376cb5c5b1741f0637208a912d2591bb2e5b7ac7bdabaade2ddb2a798578318f3b5efb1da6f20c2cfb64d8ea4af4634b915cf92540a48b3ca6d5da38af","href":"https://static.observableusercontent.com/files/74c6f4376cb5c5b1741f0637208a912d2591bb2e5b7ac7bdabaade2ddb2a798578318f3b5efb1da6f20c2cfb64d8ea4af4634b915cf92540a48b3ca6d5da38af","name":"MTA_Daily_Ridership_Data__Beginning_2020@1.csv","type":"text/csv","lastModified":1649267758440.547,"size":64695},{"id":"f0e6867e9531fdc76f8d3d5d44858b88bc24e370d6d706f624be0c659db14c474292e2b11e704fb986ecdb6d36a200d27caea6afac6546a717351bb972c8f437","href":"https://static.observableusercontent.com/files/f0e6867e9531fdc76f8d3d5d44858b88bc24e370d6d706f624be0c659db14c474292e2b11e704fb986ecdb6d36a200d27caea6afac6546a717351bb972c8f437","name":"MTA_Daily_Ridership_Data__Beginning_2020@2.csv","type":"text/csv","lastModified":1650327808156.487,"size":65778},{"id":"6956241d8de5ee8ae5facaa7e1e7d296518724a7cf278637d7c477f886079c1c560f043df7024aab2febf602c6d04af763eea2c2a38a3ccbcce8873a6e5b3648","href":"https://static.observableusercontent.com/files/6956241d8de5ee8ae5facaa7e1e7d296518724a7cf278637d7c477f886079c1c560f043df7024aab2febf602c6d04af763eea2c2a38a3ccbcce8873a6e5b3648","name":"MTA_Daily_Ridership_Data__Beginning_2020@7.csv","type":"text/csv","lastModified":1660842474275.943,"size":76286},{"id":"d65f9b4cda508ae750f1680303bbba1bc8bcf4bee4baf229d189554e71feb97523b9d1b480778efdd9c9724b0bea947024e08473e543b94a1d1ac2813d7c12e0","href":"https://static.observableusercontent.com/files/d65f9b4cda508ae750f1680303bbba1bc8bcf4bee4baf229d189554e71feb97523b9d1b480778efdd9c9724b0bea947024e08473e543b94a1d1ac2813d7c12e0","name":"MTA_Daily_Ridership_Data__Beginning_2020@8.csv","type":"text/csv","lastModified":1662774402153.616,"size":78268}] 2f:{"title":"MTA Daily Ridership Recovery","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"md`## Estimated MTA Ridership & Traffic, March 2020 - Present\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1671,"value":"viewof ridershipCheckbox = inputsGroup(\n[\n [\n checkbox({\n description: 'Filter transit modes for display',\n options: [\n { value: 'subway', label: 'Subway'},\n { value: 'bus', label: 'Bus'},\n { value: 'lirr', label: 'LIRR'},\n { value: 'mnr', label: 'Metro-North'},\n { value: 'accessaride', label: 'Access-A-Ride'},\n { value: 'bridgestunnels', label: 'Bridges and Tunnels' },\n ],\n value: ['subway','bus','lirr','mnr','accessaride','bridgestunnels']\n })\n ]\n],\n \n[\n ['mode']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`## Change in Estimated MTA Ridership & Traffic From Pre-COVID Equivalent, March 2020 - Present`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2373,"value":"viewof changeCheckbox = inputsGroup(\n[\n [\n checkbox({\n description: 'Filter transit modes for display',\n options: [\n { value: 'subway', label: 'Subway'},\n { value: 'bus', label: 'Bus'},\n { value: 'lirr', label: 'LIRR'},\n { value: 'mnr', label: 'Metro-North'},\n { value: 'accessaride', label: 'Access-A-Ride'},\n { value: 'bridgestunnels', label: 'Bridges and Tunnels' },\n ],\n value: ['subway','bus','lirr','mnr','accessaride','bridgestunnels']\n })\n ]\n],\n \n[\n ['mode']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2317,"value":"md`## Additional Views`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2063,"value":"md`## Estimated MTA Ridership & Traffic, ${chartSelect.N}-Day Moving Average, March 2020 - Present\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2074,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2060,"value":"viewof movingAvgCheckbox = inputsGroup(\n[\n [\n checkbox({\n // title: 'Mode',\n description: 'Filter transit modes for display',\n options: [\n { value: 'subway', label: 'Subway'},\n { value: 'bus', label: 'Bus'},\n { value: 'lirr', label: 'LIRR'},\n { value: 'mnr', label: 'Metro-North'},\n { value: 'accessaride', label: 'Access-A-Ride'},\n { value: 'bridgestunnels', label: 'Bridges and Tunnels' },\n ],\n value: ['subway','bus','lirr','mnr','accessaride','bridgestunnels']\n })\n ]\n],\n \n[\n ['mode']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2478,"value":"viewof chartSelect = inputsGroup(\n[\n [\n \n rangeSlider({\n min: 2020,\n max: 2022,\n step: 1,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [2020, 2022],\n //title: 'Select Timeframe',\n color: '#2d76f6', // match standard slider color\n description: 'Select Timeframe',\n}),\n slider({\n min: 1, \n max: 21, \n step: 1, \n value: 7, \n // title: \"Window\",\n description: \"N (days), used to calculate moving averages.\"\n })\n \n ]\n],\n \n[\n ['timeframe','N']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2505,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":955,"value":"md`## MTA Ridership and Change by Day of the Week\nBelow is an experimental view to see if there were any interesting trends on riderhsip by day of the week. The order and shading of labels is just based on highest ridership or change on the last day recorded.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1052,"value":"viewof byDaySelect = inputsGroup(\n[\n [\n select({\n title: 'Transit Mode',\n description: 'Select a transit mode',\n options: [\n { value: 'subway', label: 'Subway'},\n { value: 'bus', label: 'Bus'},\n { value: 'lirr', label: 'LIRR'},\n { value: 'mnr', label: 'Metro-North'},\n { value: 'accessaride', label: 'Access-A-Ride'},\n { value: 'bridgestunnels', label: 'Bridges and Tunnels' },\n ],\n value: 'mnr' // set initial value\n }),\n select({\n title: 'Value Type',\n description: 'Select the value type',\n options: [\n { value: 'val', label: 'Ridership / Traffic'},\n { value: 'chg', label: 'Change over Pre-COVID'}\n ],\n value: 'chg' // set initial value\n })\n ]\n],\n \n[\n ['mode','type']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"md`\n## Data Notes\n#### Gerenal\n+ MTA Bridges and Tunnels operates seven bridges (Robert F. Kennedy, Throgs Neck, Verrazzano-Narrows, Bronx-Whitestone, Henry Hudson, Marine Parkway-Gil Hodges Memorial, and Cross Bay Veterans Memorial) and two tunnels (Hugh L. Carey Tunnel and the Queens Midtown Tunnel ) all within New York City. ([source](https://new.mta.info/bridges-and-tunnels/about))\n+ Metro-North and LIRR change in ridership is based on the 2019 Monthly Weekday/Saturday/Sunday Average\n+ Additional notes on the data and change over 2019 calculations are available with [data source](https://new.mta.info/coronavirus/ridership).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"md` ## COVID Related Events\nKey events related to New York's COVID response were referenced from Investopedia's [A Historical Timeline of COVID-19 in New York City](https://www.investopedia.com/historical-timeline-of-covid-19-in-new-york-city-5071986). Additional relevant transit service changes were referenced from MTA's Press Release Archive.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"events = {\n let set = d3.csvParse(eventsCSV)\n set.forEach(function(d){\n d.date = d3.timeParse(\"%Y-%m-%d\")(d.date); // Parses 2020-01-01\n })\n return set \n}\n// Alternate Example\n// events = d3.csvParse(eventsCSV).map(d => {\n// return {\n// date: d3.timeParse(\"%Y-%m-%d\")(d.date),\n// note: d.note,\n// short: d.short\n// }\n// }) //.filter(d => d.mean == 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"// tlDateFormat = d3.timeFormat(\"%a, %b %e\"); // Timeline Tooltip Date Format\ntlDateFormat = d3.timeFormat(\"%a, %b %e %Y\"); // Timeline Tooltip Date Format","pinned":true,"hidden":false,"mode":"ojs"},{"id":1088,"value":"md`## In Development\nArea for developing additional views of the data. I'm Interested in additional variations or features might be helpful.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2168,"value":"md` ## Notebook Components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"md`### Tooltip`","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"eventTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip eventTip\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":1894,"value":"chartTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip chartTip\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"md`### Formats & Data Processing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2302,"value":"// Formats","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"formatPercent = d3.format(\".0%\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1927,"value":"formatPercent1d = d3.format(\".1%\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1354,"value":"formatValue = d3.format(\",.0f\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":2140,"value":"// Moving Average Function from @d3/moving-average","pinned":true,"hidden":false,"mode":"ojs"},{"id":2055,"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"},{"id":2218,"value":"// Dateset with moveing average processed and separate map by date for tooltip value lookup","pinned":true,"hidden":false,"mode":"ojs"},{"id":2051,"value":"mtaDailyMA = {\n let set = []\n d3.groups(mtaDaily.set, d => d.id).forEach( d => { \n let movingAvg = movingAverage(d[1].map(e => e.val), chartSelect.N)\n d[1].map((e, i) => {\n set.push(Object.assign(e, {mavg: Math.round(movingAvg[i])}))\n })\n })\n return set\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2287,"value":"// Primary Data Object","pinned":true,"hidden":false,"mode":"ojs"},{"id":662,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"// Array to map the longer column heading on the source file to more usable ids","pinned":true,"hidden":false,"mode":"ojs"},{"id":692,"value":"dataColumns = [\n {id: 'subway', name: 'Subways: Total Estimated Ridership'},\n {id: 'subway_cp', name:'Subways: % of Comparable Pre-Pandemic Day'},\n {id: 'bus', name: 'Buses: Total Estimated Ridership'},\n {id: 'bus_cp', name: 'Buses: % of Comparable Pre-Pandemic Day'},\n {id: 'lirr', name: 'LIRR: Total Estimated Ridership'},\n {id: 'lirr_cp', name: 'LIRR: % of 2019 Monthly Weekday/Saturday/Sunday Average'},\n {id: 'mnr', name: 'Metro-North: Total Estimated Ridership'},\n {id: 'mnr_cp', name: 'Metro-North: % of 2019 Monthly Weekday/Saturday/Sunday Average'},\n {id: 'accessaride', name: 'Access-A-Ride: Total Scheduled Trips'},\n {id: 'accessaride_cp', name: 'Access-A-Ride: % of Comprable Pre-Pandemic Day'},\n {id: 'bridgestunnels', name: 'Bridges and Tunnels: Total Traffic'},\n {id: 'bridgestunnels_cp', name: 'Bridges and Tunnels: % of Comparable Pre-Pandemic Day'}\n\t]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2462,"value":"dataColumnsOld = [\n {id: 'subway', name: 'Subways: Total Estimated Ridership'},\n {id: 'subway_chg', name:'Subways: % Change From Pre-Pandemic Equivalent Day'},\n {id: 'bus', name: 'Buses: Total Estimated Ridership'},\n {id: 'bus_chg', name: 'Buses: % Change From Pre-Pandemic Equivalent Day'},\n {id: 'lirr', name: 'LIRR: Total Estimated Ridership'},\n {id: 'lirr_chg', name: 'LIRR: % Change From 2019 Monthly Weekday/Saturday/Sunday Average'},\n {id: 'mnr', name: 'Metro-North: Total Estimated Ridership'},\n {id: 'mnr_chg', name: 'Metro-North: % Change From 2019 Monthly Weekday/Saturday/Sunday Average'},\n {id: 'accessaride', name: 'Access-A-Ride: Total Scheduled Trips'},\n {id: 'accessaride_chg', name: 'Access-A-Ride: % Change From Pre-Pandemic Equivalent Day'},\n {id: 'bridgestunnels', name: 'Bridges and Tunnels: Total Traffic'},\n {id: 'bridgestunnels_chg', name: 'Bridges and Tunnels: % Change From Pre-Pandemic Equivalent Day'}\n\t]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"// Custom data dictionary to hold labels and color information for each more.","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1121,"value":"// Raw data file that MTA hosts","pinned":true,"hidden":false,"mode":"ojs"},{"id":669,"value":"dataRaw = FileAttachment(\"MTA_Daily_Ridership_Data__Beginning_2020@9.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1099,"value":"md`### Referenced Components & Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"// Lighten/Darker color functions \n// https://css-tricks.com/snippets/javascript/lighten-darken-color). - Wasn't working on some lighter colors\n// https://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors) > Requries rgb color","pinned":true,"hidden":false,"mode":"ojs"},{"id":1324,"value":"function LightenDarkenColor(col, amt) {\n \n var usePound = false;\n \n if (col[0] == \"#\") {\n col = col.slice(1);\n usePound = true;\n }\n \n var num = parseInt(col,16);\n \n var r = (num >> 16) + amt;\n \n if (r > 255) r = 255;\n else if (r < 0) r = 0;\n \n var b = ((num >> 8) & 0x00FF) + amt;\n \n if (b > 255) b = 255;\n else if (b < 0) b = 0;\n \n var g = (num & 0x0000FF) + amt;\n \n if (g > 255) g = 255;\n else if (g < 0) g = 0;\n \n return (usePound?\"#\":\"\") + (g | (b << 8) | (r << 16)).toString(16);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1809,"value":"RGB_Linear_Shade=(p,c)=>{\n var i=parseInt,r=Math.round,[a,b,c,d]=c.split(\",\"),P=p<0,t=P?0:255*p,P=P?1+p:1-p;\n return\"rgb\"+(d?\"a(\":\"(\")+r(i(a[3]==\"a\"?a.slice(5):a.slice(4))*P+t)+\",\"+r(i(b)*P+t)+\",\"+r(i(c)*P+t)+(d?\",\"+d:\")\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"// Custom force to handle rectangle collision on the force label placement","pinned":true,"hidden":false,"mode":"ojs"},{"id":1232,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"// slightly modified version of https://observablehq.com/@bumbeishvili/input-groups","pinned":true,"hidden":false,"mode":"ojs"},{"id":1135,"value":"\nfunction inputsGroup(views,names){\n const form = html`

${\n views.map(row => html`

${\n row.map(input => html`

${input}

`)\n }

`;\n \n form.oninput = () => {\n form.value = views.map(row => row.map(input => input.value))\n if(names){\n names.forEach((row,i)=>row.forEach((c,j)=> form.value[i][j]!=null && (form.value[c]=form.value[i][j])))\n }\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"// imported observable componenets","pinned":true,"hidden":false,"mode":"ojs"},{"id":1097,"value":"import {select, slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1303,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2480,"value":"import {rangeSlider} from \"@mootari/range-slider\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1332,"value":"// load d3","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2518,"value":"## Live Data","pinned":false,"hidden":false,"mode":"md"},{"id":2524,"value":"request = {\n let result = {}\n let data\n result.error_status = false;\n \n // access the remote metadata information file qri hosts for each dataset\n data = await d3.json(\"https://data.ny.gov/resource/vxuj-8kew.json?$limit=5000\").catch(function(error){\n console.log(error);\n result.error_status = true;\n result.error_response = error;\n })\n if (result.error_status === false) {\n result.data = data\n } else { \n let error_note = ``;\n if (result.error_status === true) {\n error_note = `(Remote Access Error)`;\n } \n }\n return result\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2541,"value":"dataColumnsLive = [\n {id: 'subway', name: 'subways_total_estimated'},\n {id: 'subway_cp', name:'subways_of_comparable_pre'},\n {id: 'bus', name: 'buses_total_estimated'},\n {id: 'bus_cp', name: 'buses_of_comparable_pre'},\n {id: 'lirr', name: 'lirr_total_estimated_ridership'},\n {id: 'lirr_cp', name: 'lirr_of_2019_monthly_weekday'},\n {id: 'mnr', name: 'metro_north_total_estimated'},\n {id: 'mnr_cp', name: 'metro_north_of_2019_monthly'},\n {id: 'accessaride', name: 'access_a_ride_total_scheduled'},\n {id: 'accessaride_cp', name: 'access_a_ride_of_comprable'},\n {id: 'bridgestunnels', name: 'bridges_and_tunnels_total'},\n {id: 'bridgestunnels_cp', name: 'bridges_and_tunnels_of'}\n\t]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2544,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":2580,"value":"request_new = {\n let result = {}\n let data\n result.error_status = false;\n \n // access the remote metadata information file qri hosts for each dataset\n data = await d3.json(\"https://data.ny.gov/resource/sayj-mze2.json?$limit=20000\").catch(function(error){\n console.log(error);\n result.error_status = true;\n result.error_response = error;\n })\n if (result.error_status === false) {\n result.data = data\n } else { \n let error_note = ``;\n if (result.error_status === true) {\n error_note = `(Remote Access Error)`;\n } \n }\n return result\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2046,"value":"md`### !! Unsued or in development components`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1726,"value":"// Previous Select Option for Ridership Chart","pinned":true,"hidden":false,"mode":"ojs"},{"id":1721,"value":"viewof ridershipSelect = inputsGroup(\n[\n [\n select({\n description: 'Select a transit service',\n options: [\n { value: 'all', label: 'All Services'},\n { value: 'subway', label: 'Subway'},\n { value: 'bus', label: 'Bus'},\n { value: 'lirr', label: 'LIRR'},\n { value: 'mnr', label: 'Metro-North'},\n { value: 'accessaride', label: 'Access-A-Ride'},\n { value: 'bridgestunnels', label: 'Bridges and Tunnels' },\n ],\n value: 'all' // set initial value\n })\n ]\n],\n \n[\n ['mode']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1087,"value":"// Non working select elements. Decided to use @jashkenas/inputs instead","pinned":true,"hidden":false,"mode":"ojs"},{"id":1084,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}