31:T2cf0,chartFerryAvg = { 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 cVar = 'color'; const selectType = "mavg"; const selectGroup = ridershipCheckbox.mode; // array of the checkbox selections for filtering let filtered = ferryDailyMA.set.filter(d => selectGroup.includes(d.id)); // filter data.set for extext let extData = d3.extent(filtered, d => d.val); // 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 selectSeries = ferryDailyMA.filter(d => selectGroup.includes(d[0])); // filter moving avg series // let filtered = ferryDailyMA.set.filter(d => selectGroup.includes(d.id)); // filter data.set for extext // let selectExt = d3.extent(filtered, d => d.val); // filter data.set for extext 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('Daily Ridership') .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: NYCDOT Ferry Division 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.val)) .x(d => x(d.date)) .y(d => y(d.val)) lineGroupCompare.append('g') .attr("opacity", ".2") .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => lineC(d[1])) .attr("class", function(d) { return 'ts-line ts-line-bg-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return ferryDict[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 ferryDict[d[0]].color }); // Label Object let labelset = Array.from(selectSeries).map(d => { let obj = {} obj.id = d[0]; obj.label = ferryDict[obj.id].label; obj.color = ferryDict[obj.id].color; obj.val = d[1][d[1].length - 1][selectType]; return obj }).sort((a, b) => d3.descending(a.val, b.val)) // 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, 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.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(forceLabelR)); simulation.on('tick', () => { forceLabel.attr('transform', function(d) { d.x = innerWidth + forceLabelOffset; // constrain x for all labels d.y = Math.max(forceLabelR, Math.min((innerHeight+margin.bottom/2) - forceLabelR, d.y)) //Math.max(Math.min(innerHeight, d.y), 0); // constrain y to vertical chart area return `translate(${d.x},${d.y})` }); forceLabelLeader .attr("x2", d => d.x-2) .attr("y2", d => d.y) }) // Timeline // drawTimeline(chartid, group, x, innerWidth); // Group for line highligt points, sits below tootTip area so let yPoints = group.append("g") .attr('class', 'y-highlight-points') // Chart toolTip Area (defines where hover with be active) let tipArea = group.append("g") .attr("class", "tip-area"); tipArea.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('width', innerWidth) .attr('height', innerHeight) .attr('opacity', 0) .attr('pointer-events', 'all') .on('mouseover', (event) => { console.log('mouseover'); }) .on('mousemove', (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 => ferryDict[d.id][cVar]), update => update .attr('transform', function(d) { return `translate(${x(d.date)},${y(d[selectType])})` }) .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // Custom toolTip Content let tipContent = ``; // Start content string tipContent += `` // Interate over selected categories lookup.map( d => { let mavgVal = isNaN(d.mavg) ? "–" : format.abs(d.mavg); // format NaNs tipContent += `` tipContent += `` tipContent += `` }) // Close Table tipContent += `

	${N}-Day Avg	Ridership
${ferryDict[d.id].label}	${mavgVal}	${format.abs(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(`${format.date1(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(); }32:T2e40,chartFerryChange = { 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-change"; const cVar = 'color'; const selectType = "chgMovMoAvg"; const selectGroup = ridershipCheckboxB.mode; // array of the checkbox selections for filtering let filtered = ferryDailyChange.set.filter(d => selectGroup.includes(d.id) && (d.year > 2019)); // filter data.set for extext 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 selectSeries = ferryDailyMA.filter(d => selectGroup.includes(d[0])); // filter moving avg series // let filtered = ferryDailyMA.set.filter(d => selectGroup.includes(d.id)); // filter data.set for extext // let selectExt = d3.extent(filtered, d => d.val); // filter data.set for extext 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('Daily Ridership Change') .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: NYCDOT Ferry Division 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(extData) .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("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'); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis); group.append("g") .attr("class", "y axis") .call(yAxis); // // Append Ghosted Daily Ridership // let lineGroupCompare = group.append("g") // .attr('class', 'line-group-compare') // let lineC = d3.line() // .defined(d => !isNaN(d.val)) // .x(d => x(d.date)) // .y(d => y(d.val)) // lineGroupCompare.append('g') // .attr("opacity", ".2") // .selectAll('path') // .data(selectSeries) // .join('path') // .attr('d', (d) => lineC(d[1])) // .attr("class", function(d) { // return 'ts-line ts-line-bg-' + d[0]; // // }) // .attr("fill", "none") // .style("stroke", function(d) { // return ferryDict[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 ferryDict[d[0]].color }); // Label Object let labelset = Array.from(selectSeries).map(d => { let obj = {} obj.id = d[0]; obj.label = ferryDict[obj.id].label; obj.color = ferryDict[obj.id].color; obj.val = d[1][d[1].length - 1][selectType]; return obj }).sort((a, b) => d3.descending(a.val, b.val)) // 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, 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.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(forceLabelR)); simulation.on('tick', () => { forceLabel.attr('transform', function(d) { d.x = innerWidth + forceLabelOffset; // constrain x for all labels d.y = Math.max(forceLabelR, Math.min((innerHeight+margin.bottom/2) - forceLabelR, d.y)) //Math.max(Math.min(innerHeight, d.y), 0); // constrain y to vertical chart area return `translate(${d.x},${d.y})` }); forceLabelLeader .attr("x2", d => d.x-2) .attr("y2", d => d.y) }) // Timeline // drawTimeline(chartid, group, x, innerWidth); // Group for line highligt points, sits below tootTip area so let yPoints = group.append("g") .attr('class', 'y-highlight-points') // Chart toolTip Area (defines where hover with be active) let tipArea = group.append("g") .attr("class", "tip-area"); tipArea.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('width', innerWidth) .attr('height', innerHeight) .attr('opacity', 0) .attr('pointer-events', 'all') .on('mouseover', (event) => { console.log('mouseover'); }) .on('mousemove', (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 => ferryDict[d.id][cVar]), update => update .attr('transform', function(d) { return `translate(${x(d.date)},${y(d[selectType])})` }) .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // Custom toolTip Content let tipContent = ``; // Start content string tipContent += `` // Interate over selected categories lookup.map( d => { //let mavgVal = isNum(d.mavg) ? "–" : format.abs(d.mavg); // format NaNs tipContent += `` tipContent += `` tipContent += `` }) // Close Table tipContent += `

	${Nb}-Day Avg	Change
${ferryDict[d.id].label}	${isNum(d.mavg) ? format.abs(d.mavg) : 'N/A'}	${format.chg(d[selectType])}

` chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(`${format.date1(hoverDate)}
${tipContent}`); // toolTip Content }) .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(); }33:T686,ferryDaily = { let res = {} // res.raw = d3.tsvParse(await FileAttachment("NYC-Private-Ferries-Daily-Summary-2020-Latest.tsv").text()) // d3.autoType let raw2019 = d3.tsvParse(await FileAttachment("nyc-area-ferries-daily-ridership-2019.tsv").text()) let raw2020 = d3.tsvParse(await FileAttachment("nyc-area-ferries-daily-ridership-2020.tsv").text()) let raw2021 = d3.tsvParse(await FileAttachment("nyc-area-ferries-daily-ridership-2021.tsv").text()) res.set = []; //res.dates = []; 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" } } function parseFerry(dataset) { dataset.forEach(function(d){ let date = parseDate(d['date']); //let datestr = d['date']; //let dateiso = date.toISOString(); let year = +formatYear(date); let month = +formatMonth(date); //res.dates.push(date) Object.entries(ferryDict).map(g => { let col = g[0]; d[col] = +d[col]; res.set.push({date, year, month, id: col, val: d[col]}) }) }) } parseFerry(raw2019) parseFerry(raw2020) parseFerry(raw2021) // 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 res; }34:T473,ferryDailyMA = { let result = {} result.set = [] Array.from(d3.group(ferryDaily.set, d => d.id)).map( d => { let movingAvg = movingAverage(d[1].map(e => e.val), N) let lookupMonthAvg = d3.rollup(d[1], v => d3.mean(v, d => d.val), d => d.year, d => d.month) d[1].map((f, i) => { f.mavg = 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.chgMovMoAvg = (movingAvg[i] - prevMoAvg)/prevMoAvg; } } console.log(f.chgMoAvg) console.log(f.chgMovMoAvg) result.set.push(f) }) }) // result.series = d3.groups(result.set, d => d.id) // result.dates = ferryDaily.dates // result.lookup = d3.group(result.set, d => d.dateiso) return result }35:T475,ferryDailyChange = { let result = {} result.set = [] Array.from(d3.group(ferryDaily.set, d => d.id)).map( d => { let movingAvg = movingAverage(d[1].map(e => e.val), Nb) let lookupMonthAvg = d3.rollup(d[1], v => d3.mean(v, d => d.val), d => d.year, d => d.month) d[1].map((f, i) => { f.mavg = 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.chgMovMoAvg = (movingAvg[i] - prevMoAvg)/prevMoAvg; } } console.log(f.chgMoAvg) console.log(f.chgMovMoAvg) result.set.push(f) }) }) //result.series = d3.groups(result.set, d => d.id) //result.dates = ferryDaily.dates //result.lookup = d3.group(result.set, d => d.dateiso) return result }36:[{"id":"dd57e1a205804239df945b556be6d81bd5f78d886da4535234d9ff1edc60ae2e76d36bdf94f2774915b2b2c297d08e4ff7e5e6c3661b704327cc9095a36d38c5","href":"https://static.observableusercontent.com/files/dd57e1a205804239df945b556be6d81bd5f78d886da4535234d9ff1edc60ae2e76d36bdf94f2774915b2b2c297d08e4ff7e5e6c3661b704327cc9095a36d38c5","name":"nyc-area-ferries-daily-ridership-2020.tsv","type":"text/tab-separated-values","lastModified":1611545525012.192,"size":16354},{"id":"fedf9040c4972ee40bf2a8febdf743fd90981677111e43a71ba4dcd3e5cb020d7b37f12eb1d51727d51706ae9ea34b25186b3687f5c33ab056d14fdaf3017a57","href":"https://static.observableusercontent.com/files/fedf9040c4972ee40bf2a8febdf743fd90981677111e43a71ba4dcd3e5cb020d7b37f12eb1d51727d51706ae9ea34b25186b3687f5c33ab056d14fdaf3017a57","name":"nyc-area-ferries-daily-ridership-2019.tsv","type":"text/tab-separated-values","lastModified":1611545541877.832,"size":19752},{"id":"641adb07a3fb4d041e53dd226caa2d5deba52bfbe35a04a3a517b67064315bb2e92329c9ade5f6012411d18a0046b323bbf0f78c2724a7fca2dff808d2cc913c","href":"https://static.observableusercontent.com/files/641adb07a3fb4d041e53dd226caa2d5deba52bfbe35a04a3a517b67064315bb2e92329c9ade5f6012411d18a0046b323bbf0f78c2724a7fca2dff808d2cc913c","name":"nyc-area-ferries-daily-ridership-2021.tsv","type":"text/tab-separated-values","lastModified":1616620651300.051,"size":2548},{"id":"17c3fcbcddc251058b4e2c645ac5cd18528f9e73bd49f512c4ea30ad8e6140ae3bd9faf1d1e267ca38b37f61e3b249f6c0d625f33aef6a485e081ab987b764f0","href":"https://static.observableusercontent.com/files/17c3fcbcddc251058b4e2c645ac5cd18528f9e73bd49f512c4ea30ad8e6140ae3bd9faf1d1e267ca38b37f61e3b249f6c0d625f33aef6a485e081ab987b764f0","name":"nyc-area-ferries-daily-ridership-2021@1.tsv","type":"text/tab-separated-values","lastModified":1641348699323.633,"size":15334}] 2f:{"title":"NYC Area Ferry Ridership","cells":[{"id":0,"value":"md`# NYC Area Ferry Ridership\nExploring the [ferry ridership](https://www1.nyc.gov/html/dot/html/about/datafeeds.shtml) published by the New York City Department of Transportation (NYCDOT) for private carriers and the Staten Island Ferry.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"md`## Ferry Ridership, 2019–2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"viewof 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})","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"viewof ridershipCheckbox = inputsGroup(\n[\n [\n checkbox({\n description: 'Filter ferry modes for display',\n options: [\n { value: 'nyc', label: 'NYC Ferry'},\n { value: 'nyw_pi', label: 'NY Waterway PI'},\n { value: 'nyw_bb', label: 'NY Waterway BB'},\n { value: 'ss', label: 'SeaStreak'},\n { value: 'nywt', label: 'NY Water Taxi'},\n { value: 'llf', label: 'Liberty Landing Ferry'},\n { value: 'private_total', label: 'Private Ferry Total'},\n { value: 'siferry', label: 'Staten Island Ferry'}\n\n ],\n value: ['nyc','nyw_pi','nyw_bb','ss','nywt','llf','private_total','siferry' ]\n })\n ]\n],\n \n[\n ['mode']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`#### Notes\n\n+ Private ferry services (and the total) include: NYC Ferry, NY Waterway Port Imperial, NY Waterway BillyBey, SeaStreak, Liberty Landing Ferry, New York Water Taxi\n+ In January 2019, Three year averages were used to calculate Staten Island ferry ridership due to technical difficulties with the Countwise System.\n+ On 2019-06-09 the Billy Bey ridership for BPT-Paulus Hook was adjusted from 178,555 to 1,785 based on what looked to be an input error compared to the same day of the week.\n\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"md`## Ferry Ridership Change, 2019–2020\nCompares the ${Nb}-day moving average from 2020 to the equalent 2019 montly average\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"viewof ridershipCheckboxB = inputsGroup(\n[\n [\n checkbox({\n description: 'Filter ferry modes for display',\n options: [\n { value: 'nyc', label: 'NYC Ferry'},\n { value: 'nyw_pi', label: 'NY Waterway PI'},\n { value: 'nyw_bb', label: 'NY Waterway BB'},\n { value: 'ss', label: 'SeaStreak'},\n { value: 'nywt', label: 'NY Water Taxi'},\n { value: 'llf', label: 'Liberty Landing Ferry'},\n { value: 'private_total', label: 'Private Ferry Total'},\n { value: 'siferry', label: 'Staten Island Ferry'}\n\n ],\n value: ['nyc','nyw_pi','nyw_bb','ss','nywt','llf','private_total','siferry' ]\n })\n ]\n],\n \n[\n ['mode']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"Nb = 7; // moving average days for the change chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"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":68,"value":"ferryDict = ({\n nyc: {\n label: \"NYC Ferry\",\n color: \"DodgerBlue\"\n },\n nyw_pi: {\n label: \"NY Waterway PI\",\n color: \"CornflowerBlue\"\n },\n nyw_bb: {\n label: \"NY Waterway BB\",\n color: \"CornflowerBlue\"\n },\n ss: {\n label: \"SeaStreak\",\n color: \"DarkBlue\"\n },\n nywt: {\n label: \"NY Water Taxi\",\n color: \"GoldenRod\"\n },\n llf: {\n label: \"Liberty Landing Ferry\",\n color: \"Grey\"\n },\n private_total: {\n label: \"Private Ferry Total\",\n color: \"Purple\"\n },\n siferry: {\n label: \"Staten Island Ferry\",\n color: \"DarkOrange\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"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 abs: d3.format(\",.0f\"),\n avg: d3.format(\"(,.1f\"),\n chg: d3.format(\".1%\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"function isNum(n) {\n return !isNaN(parseFloat(n)) && isFinite(n) && n !== \"\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"import {inputsGroup, chartTip} from '@benoldenburg/mta-daily-ridership-recovery'","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"import {select, slider, checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\") // Load D3","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}