31:T36d0,chart = { let height = 360 let margin = {top: 40, right: 150, bottom: 60, left: 80} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let chartid = "chart-moving-avg"; let chartSource = 'Data: MTA, BLS, and Additional Sources' const cVar = 'color'; const selectType = fareSelect.metric // "cost_infla"; const selectUnit = (selectType === "cost_chg") ? "chg" : "usd"; const selectGroup = fareSelect.type; // array of the checkbox selections for filtering let filtered = fareData.set.filter(d => selectGroup.includes(d.id)); // filter data.set for extext let extData = d3.extent(filtered, d => d[selectType]); // filter data.set for extext let yDomain = (selectUnit === "chg") ? extData : [0,extData[1]]; let yLableSet = { "cost": 'Fare Cost' , "cost_infla": 'Fare Cost (2023 Dollars)' , "cost_chg": 'Fare Change' , } let yLabel = yLableSet[selectType]; let extDates = d3.extent(filtered, d => d.date) let selectSeries = d3.groups(filtered, d => d.id); let selectLookup = d3.group(filtered, d => d.dateiso); let selectDates = Array.from(selectLookup.keys) // 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(yLabel) .attr("text-anchor", "middle") .attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#555') .style('font-size', '.85em'); // Source group.append("text") .attr("class", "graph-source") .text(chartSource) .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 fare type 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([10, width - margin.left - margin.right]) .domain(extDates) let y = d3.scaleLinear() .range([innerHeight, 0]) .domain(yDomain) .nice(); let xAxis = d3.axisBottom(x); let yAxis = d3.axisLeft(y); yAxis.tickFormat(format[selectUnit]); //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 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])) //.curve(d3.curveStepAfter); lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => line(d[1])) .attr("class", function(d) { return 'data-line data-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 }).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 + " .data-line") .transition().style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .data-point") .transition().style('opacity', g => { return g.id === 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 + " .data-line") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .data-point") .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) }) let linePoints = group.append("g") .attr('class', 'data-points') let linePoint = linePoints.append('g') .selectAll('data-point') .data(filtered) .join('g') .attr("class", function(d) { return `data-point point-${d.id}-${d.step}` }) .attr('transform', d => `translate(${x(d.date)},${y(d[selectType])})`); linePoint.append('circle') .attr("r", 3) .attr("class", "point-circle") .attr('pointer-events', 'none') .attr("fill", d => dataDict[d.id].color); linePoint.append('circle') .attr("r", 8) .attr("fill", "#FFF") .attr("fill-opacity", 0) .attr("class", "point-hover") .on('mouseover', pointMouseOver) .on('mouseout', pointMouseOut ); function pointMouseOver(event, d){ d3.select(event.target).style("cursor", "pointer"); //d3.select(`.station-${d['station_id']} .bubble`) d3.select(`.point-${d.id}-${d.step} .point-hover`) .transition() .attr('stroke', 'orange') .attr('stroke-width', 2); let tipContent = ``; tipContent += `${format.date1(d.date)}
`; tipContent += `${dataDict[d.id].name}
`; tipContent += `${format.usd(d.cost)} (${d.cost_chg > 0 ? '+' : ''}${format.chg(d.cost_chg)})
`; tipContent += `${format.usd(d.cost_infla)} (2023 Dollars)
`; if(d.mc_bonus) { tipContent += `Bonus: ${format.pct(d.mc_bonus)} on ${format.usd(d.mc_bonus_min)}+`; } console.log(event) chartTip.style("left", () => { if (innerWidth - d.x < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(`${tipContent}`); } function pointMouseOut(event, d){ d3.select(event.target).style("cursor", "default"); chartTip.style("display", "none"); // Hide toolTip d3.select(`.point-${d.id}-${d.step} .point-hover`) .transition() .attr('stroke', '#FFF') .attr('stroke-width', 0); } // 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 = (ferryDailyMA.dates[bisect(ferryDailyMA.dates, 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][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
${dataDict[d.id].name}	${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:T279a,chartInflation = { let height = 360 let margin = {top: 40, right: 150, bottom: 60, left: 80} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let chartid = "chart-inflation"; let chartSource = 'Data: MTA, BLS, and Additional Sources' const cVar = 'color'; const xVar = 'date'; // let dataDict = { // "cost": { // "color": "DodgerBlue" // }, // "cost_infla": { // "color": "#c7417b" // } // } const selectVal = "cost" const selectVal2 = "cost_infla" //const selectType = fareSelect.metric // "cost_infla"; //const selectUnit = (selectType === "cost_chg") ? "chg" : "usd"; //const selectGroup = fareSelect.type; // array of the checkbox selections for filtering // let filtered = fareData.set.filter(d => selectGroup.includes(d.id)); // filter data.set for extext const selectType = fareSelect.metric // "cost_infla"; const selectUnit = "usd"; const selectGroup = "base"; // array of the checkbox selections for filtering let filtered = baseFareInflationSeries // filter data.set for extext let extData = d3.extent(filtered, d => d["cost_infla"]); // filter data.set for extext let yDomain = (selectUnit === "chg") ? extData : [0,extData[1]]; let yLableSet = { "cost": 'Fare Cost' , "cost_infla": 'Fare Cost (2023 Dollars)' , "cost_chg": 'Fare Change' , } let yLabel = yLableSet["cost"] // yLableSet[selectType]; let extDates = d3.extent(filtered, d => d[xVar]) let selectSeries = d3.groups(filtered, d => d.id); let selectLookup = d3.group(filtered, d => d.date.toISOString()) let selectLookupYears = d3.group(filtered, d => d.year) 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(yLabel) .attr("text-anchor", "middle") .attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#555') .style('font-size', '.85em'); // Source group.append("text") .attr("class", "graph-source") .text(chartSource) .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 fare type 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([10, width - margin.left - margin.right]) .domain(extDates) let y = d3.scaleLinear() .range([innerHeight, 0]) .domain(yDomain) .nice(); let xAxis = d3.axisBottom(x); let yAxis = d3.axisLeft(y); //xAxis.tickFormat(d3.format(".0f")); yAxis.tickFormat(format[selectUnit]); //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 lineGroup = group.append("g") .attr('class', 'line-group') let line = d3.line() .defined(d => !isNaN(d[selectVal])) .x(d => x(d[xVar])) .y(d => y(d[selectVal])) .curve(d3.curveStepAfter); lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => line(d[1])) .attr("class", function(d) { return 'data-line data-line-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return dataDict[selectVal].color }); let line2 = d3.line() .defined(d => !isNaN(d[selectVal2])) .x(d => x(d[xVar])) .y(d => y(d[selectVal2])) .curve(d3.curveStepAfter); lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => line2(d[1])) .attr("class", function(d) { return 'data-line data-line-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return dataDict[selectVal2].color }); // 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) => {}) .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()[0]); let lookup = selectLookupYears.get(hoverDate.getFullYear())[0]; // Display and position vertical line d3.select("#" + chartid + " .y-highlight") .attr('x1',x(hoverDate)) .attr('x2',x(hoverDate)) .style('opacity', 1); // For highlighting multiple points let pointVars = [selectVal, selectVal2] let pointSet = []; let lookupPoints = pointVars.map(g => { let obj = {} obj.id = g obj.date = lookup.date obj.val = lookup[g] obj.color = dataDict[g].color pointSet.push(obj); }) // Update Pattern for the Point Highlights const yPoint = yPoints.selectAll('g') .data(pointSet, g => g.id) .join( enter => enter.append("g") .attr('class', 'y-highlight-point') .attr('transform', g => `translate(${x(g.date)},${y(g.val)})`) .attr('opacity', g => isNum(g.val) ? 1 : 0) // hide if value is NaN, .append('circle') .attr('r', 3) .attr('fill', g => g.color), update => update .attr('transform', g => `translate(${x(g.date)},${y(g.val)})`) .attr('opacity', g => isNum(g.val) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) const formatYear = d3.timeFormat("%Y"); // Custom toolTip Content let tipContent = ``; // Start content string tipContent += `${formatYear(hoverDate)}
` if (lookup.action === "opening"){ tipContent += `System Opens
${format.date3(lookup.increase.date)}` } if (lookup.action === "increase"){ tipContent += `Increase: ${format.date3(lookup.increase.date)}` tipContent += `
` tipContent += `+${format.usd(lookup.increase.diff)} (${format.percent1d(lookup.increase.chg)})
`; tipContent } tipContent += `

Nominal Fare
` tipContent += `${format.usd(lookup[selectVal])}

` tipContent += `

Inflation Adjusted
` tipContent += `${format.usd(lookup[selectVal2])}
` // tipContent += ` // // // // // ` // Start Table // tipContent += `` // tipContent += `` // tipContent += `` // tipContent += `` // tipContent += `` // Start Table // tipContent += `

	Cost
Nominal Fare	${format.usd(lookup[selectVal])}
Inflation Adjusted	${format.usd(lookup[selectVal2])}

`; // Close Table chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+160) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(tipContent); // toolTip Content }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip d3.select("#" + 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:T8ce, fareData = { let result = {} // res.raw = d3.tsvParse(await FileAttachment("NYC-Private-Ferries-Daily-Summary-2020-Latest.tsv").text()) // d3.autoType result.raw = d3.tsvParse(await FileAttachment("nyct-fare-history@18.tsv").text()) result.set = []; result.sources = []; let parseDate = d3.timeParse("%Y-%m-%d"); Object.entries(dataDict).map(g => { let prev = null; // reset previous cost to calculate change let step = 1; result.raw.map(function(d, i){ let date = parseDate(d['date']); let dateiso = date.toISOString(); let id = g[0]; let cost = parseFloat(d[id]); let infla = +d['dollar_infla'] let inflaCalc = calcInCurrentDollars(cost, date, current) if(isNum(cost)){ let item = {} item.id = id; item.step = step; item.cost = cost; item.date = date; item.year = date.getFullYear(); item.dateiso = dateiso; item.cost_prev = prev; item.cost_chg = isNum(prev) ? (item.cost - item.cost_prev)/item.cost_prev : 0; if (item.id === 'base' && d.mc_bonus !== ''){ item.mc_bonus = +d.mc_bonus; item.mc_bonus_min = +d.mc_bonus_min; } prev = cost; // update previous cost to current step++ // increment step //item.cost_infla = item.cost*infla; item.cost_infla = inflaCalc //item.cost_infla2 = inflaCalc result.set.push(item) } }) }) result.raw.map(function(d, i){ result.sources.push({ date: parseDate(d.date), action: d.action, event: d.event, ref: d.ref, ref_source: d.ref_source, ref_link: d.ref_link }) }); result.series = d3.group(result.set, d => d.id) // res.extDates = d3.extent(res.set, d => d.date) // // res.extVal = d3.extent(set, d => d.val) // // res.extChg = d3.extent(set, d => d.chg) // res.seriesDate = d3.group(res.set, d => d.date) // Group data by lines //res.seriesMode = d3.group(res.set, d => d.id) // Group data by lines return result; }34:T603,baseFareInflationSeries = { let fareType = "base" let data = fareData.series.get(fareType) let increaseYears = data.map(d => d.year) let dataLookup = d3.group(data, d => d.year) let minYear = d3.min(data, d => d.year) let parseYear = d3.timeParse("%Y"); let series = [] let prevIncrease = null let currIncrease = null let yearsSinceLast = 0 for (let i = minYear; i <= 2023; i++) { let item = {} item.year = i item.date = parseYear(i) if (increaseYears.includes(i)) { if (i === 1904) { item.action = "opening" } else { item.action = "increase" } yearsSinceLast = 0 if (currIncrease !== null) { prevIncrease = currIncrease } currIncrease = dataLookup.get(i)[0] item.prevIncrease = prevIncrease item.currIncrease = currIncrease item.cost = currIncrease.cost item.cost_infla = calcInCurrentDollars(item.cost, currIncrease.date, current) item.increase = {} item.increase.date = currIncrease.date if (prevIncrease) { item.increase.prevCost = prevIncrease.cost item.increase.diff = (currIncrease.cost - prevIncrease.cost) item.increase.chg = item.increase.diff/prevIncrease.cost; } } else { item.action = "stay" yearsSinceLast++ item.cost = currIncrease.cost item.cost_infla = calcInCurrentDollars(item.cost, parseYear(i), current, true) } item.yearsSinceLast = yearsSinceLast series.push(item) } return series }35:[{"id":"ecb6cd8ab188ebc8f4929cad822ac5bae8b0b130e7aad811d07152af67aee50145da4f9bdca7b4c914626b3ca55bfaedbdc8d38cced1c4dc8e421790132a33e6","href":"https://static.observableusercontent.com/files/ecb6cd8ab188ebc8f4929cad822ac5bae8b0b130e7aad811d07152af67aee50145da4f9bdca7b4c914626b3ca55bfaedbdc8d38cced1c4dc8e421790132a33e6","name":"cpi-history-minneapolisfed.tsv","type":"text/tab-separated-values","lastModified":1691875402004.29,"size":3253},{"id":"d38f916ff0ddb8f89b25e233117f1525df0ae92a86047ba7ba7a9229b83adf4362e60a283e19d4cae3a58baf2cea4850839cde615a7e5e018b3539fab687980e","href":"https://static.observableusercontent.com/files/d38f916ff0ddb8f89b25e233117f1525df0ae92a86047ba7ba7a9229b83adf4362e60a283e19d4cae3a58baf2cea4850839cde615a7e5e018b3539fab687980e","name":"cpi-u-history-bls.tsv","type":"text/tab-separated-values","lastModified":1691875421151.235,"size":9162},{"id":"49a69271054372360d3811a3e9eed02c416dc2cc5a31ae50a2f44c40bfc98068c03e121ddc535823499ce2f348b9cab608ecf23914b1c8875416a613e14a1b05","href":"https://static.observableusercontent.com/files/49a69271054372360d3811a3e9eed02c416dc2cc5a31ae50a2f44c40bfc98068c03e121ddc535823499ce2f348b9cab608ecf23914b1c8875416a613e14a1b05","name":"nyct-fare-history@18.tsv","type":"text/tab-separated-values","lastModified":1691965559527.537,"size":6440}] 2f:{"title":"NYC Transit Fare History","cells":[{"id":0,"value":"md`# NYC Transit Fare History\nOriginally inspired by discussions around MTA's proposed January 2021 fare hike ([which had been postponed](https://gothamist.com/news/mta-postpones-fare-hike-planned-2021-because-people-are-suffering \"MTA Postpones Planned 2021 Fare Hike \"For Several Months\" Because \"People Are Suffering\" (Gothamist)\")) this notebook explores the historical fare increases for New York City Transit subways and buses including single ride and unlimited metrocards including the newest changes that [go into effect on August 20, 2023](https://new.mta.info/press-release/mta-board-adopts-fare-and-toll-increases-take-effect-august).\n\nWork in progress\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"## Fare Increases","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"viewof fareSelect = inputsGroup(\n[\n [\n select({\n //title: 'Metric',\n description: 'Fare Metric',\n options: [\n { value: 'cost', label: 'Cost'},\n { value: 'cost_infla', label: 'Cost (2023 Dollars)'},\n { value: 'cost_chg', label: 'Change Over Previous'},\n ],\n value: ['cost']\n }),\n checkbox({\n //title: 'Fare Type',\n description: 'Filter fare types for display',\n options: [\n { value: 'base', label: 'Base Fare'},\n { value: 'single', label: 'Single Ride'},\n { value: 'unlim1', label: '1-Day Unlimited'},\n { value: 'unlim7', label: '7-Day Unlimited'},\n { value: 'unlim30', label: '30-Day Unlimited'},\n\n ],\n value: ['base','single']\n })\n ]\n],\n \n[\n ['metric', 'type']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"Chart Notes\n\n+ On 1948-07-01 the Standard Bus fare was increased only to 7 cents ([Source](https://babel.hathitrust.org/cgi/pt?id=mdp.39015023094926&view=1up&seq=96 \"HathiTrust Digital Library\")) and then to 10 cents on 1950-07-01 ([Source](https://www.nytimes.com/1950/06/07/archives/fare-on-city-buses-goes-to-10c-july-1-pay-rise-granted-mayor.html \"New York Times\")) at after which it continued to match the subway fare.\n+ The current MTA base and single ride fares also cover limited and Select Bus Service buses, PATH, Staten Island Railway (SIR), Roosevelt Island Tram.\n+ This data doesn't track the slightly higher historical combination fare for bus-subway transfer trips that existed prior to free transfers.\n+ The 1-Day unlimited metrocard was discontinued in 2010.\n+ Inflation calculated based on the CPI of the month the change went into effect or Average Annual CPI for date before 1914. See below for details on the CPI source data.\n\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":591,"value":"## Inflation Adjusted\nThe inflation adjusted fare is calculated based on the [Bureau of Labor Statistics Consumer Price Index (CPI) Data](https://data.bls.gov/timeseries/CUUR0000SA0) for All Urban Consumers (CPI-U) which is available monthly or as an annual average from 1914 to Present. Earlier values are calculated using the average annual CPI estimates published by the [Federal Reserve Bank of Minneapolis](https://www.minneapolisfed.org/about-us/monetary-policy/inflation-calculator/consumer-price-index-1800-).","pinned":false,"hidden":false,"mode":"md"},{"id":617,"value":"### Base Fare Over Time\nNominal Fare vs Inflation Adjusted (2023 Dollars)","pinned":false,"hidden":false,"mode":"md"},{"id":596,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"Chart Notes\n\n+ Inflation calculated based the average annual CPI for all years. 2023 average is based months available so far.\n+ Format inspired by a previous [NYTimes chart](https://www.nytimes.com/2019/04/12/nyregion/mta-fare-hike.html) on the same subject and drawn using d3's curveStepAfter line modifier.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":634,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":2,"value":"md`### Fare Change Dates and References\nThe dates of fare changes and key events related to fare collection are listed below with reference links. Many links were originally referenced through [wikipedia](https://en.wikipedia.org/wiki/New_York_City_transit_fares \"New York City Transit Fares (wikipedia)\") or through archived MTA news posts and press releases.\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"sources = {\n function renderItems() {\n let content = ``\n let df = d3.timeFormat(\"%Y-%m-%d\")\n fareData.sources.map(d => {\n content += `

${df(d.date)}: (${d.action})` \n if(d.event !== \"\") {\n content += ` + ${d.event}`\n }\n content += `
${d.ref} (${d.ref_source})

`\n })\n return content;\n }\n \n return html`

${renderItems()}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"dataDict = ({\n base: {\n name: \"Base Fare\",\n color: \"DodgerBlue\"\n },\n single: {\n name: \"Single Ride\",\n color: \"CornflowerBlue\"\n },\n unlim1: {\n name: \"1-Day Unlimited\",\n color: \"Blue\"\n },\n unlim7: {\n name: \"7-Day Unlimited\",\n color: \"DarkBlue\"\n },\n unlim30: {\n name: \"30-Day Unlimited\",\n color: \"GoldenRod\"\n },\n cost: {\n name: \"Nominal Cost\",\n color: \"DodgerBlue\"\n },\n cost_infla: {\n name: \"Inflation Adjusted\",\n color: \"#c7417b\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"### Inflation Calculation","pinned":false,"hidden":false,"mode":"md"},{"id":715,"value":"Process a series of base fare cost and effective fare (in current dollars) for each year","pinned":false,"hidden":false,"mode":"md"},{"id":547,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"Reference Date for Calculating Current Dollars (First of the latest year/month in the BLS CPI Table)","pinned":false,"hidden":false,"mode":"md"},{"id":495,"value":"current = d3.timeParse(\"%Y-%m-%d\")(\"2023-07-01\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"Test Calculation for calcInCurrentDollars()","pinned":false,"hidden":false,"mode":"md"},{"id":455,"value":"calcInCurrentDollars(0.10, d3.timeParse(\"%Y-%m-%d\")(\"1948-7-1\"), current)","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"calcInCurrentDollars(2.90, d3.timeParse(\"%Y-%m-%d\")(\"2023-8-1\"), current)","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"function calcInCurrentDollars(value, date, currDate, annual = false){\n let formatAbbrMonth = d3.timeFormat(\"%b\");\n \n let prevCPI, currCPI\n let year = date.getFullYear();\n let month = formatAbbrMonth(date)\n let currYear = currDate.getFullYear();\n let currMonth = formatAbbrMonth(currDate);\n console.log({year, month, currYear, currMonth })\n\n // fix to address that the increase is ahead or the data\n // need to fix to fall back to latest data available for future situations\n if (currYear == 2023) {\n month = \"Jul\"\n currMonth = \"Jul\"\n }\n \n if (year < 1914) {\n prevCPI = cpi_lookup.mf.get(year)[0].aai\n currCPI = cpi_lookup.mf.get(currYear)[0].aai\n } else {\n prevCPI = cpi_lookup.bls.get(year)[0][annual ? \"Annual\" : month]\n currCPI = cpi_lookup.bls.get(currYear)[0][annual ? \"Annual\" : currMonth]\n }\n console.log({prevCPI, currCPI})\n // Year 2 Price = Year 1 Price x (Year 2 CPI/Year 1 CPI)\n let currValue = value * (currCPI/prevCPI)\n return currValue \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"cpi_lookup = {\n let raw_mf = d3.tsvParse(await FileAttachment(\"cpi-history-minneapolisfed.tsv\").text(), d3.autoType)\n let raw_bls = d3.tsvParse(await FileAttachment(\"cpi-u-history-bls.tsv\").text(), d3.autoType)\n\n let data = {}\n data.mf = d3.group(raw_mf, d => d.year)\n data.bls = d3.group(raw_bls, d => d.Year)\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"### Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"format = ({\n date1: d3.timeFormat(\"%a, %b %e %Y\"), // Timeline Tooltip Date Format\n date2: d3.timeFormat(\"%b %e %Y\"), // Timeline Tooltip Date Format\n date3: d3.timeFormat(\"%b %e\"), // Timeline Tooltip Date Format\n percent1d: d3.format(\".1%\"),\n pct: d3.format(\".0%\"),\n usd: d3.format(\"$,.2f\"),\n abs: d3.format(\",.0f\"),\n avg: d3.format(\"(,.1f\"),\n chg: d3.format(\".1%\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"function isNum(n) {\n return !isNaN(parseFloat(n)) && isFinite(n) && n !== \"\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"import {inputsGroup, chartTip} from '@benoldenburg/mta-daily-ridership-recovery'","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"import {select, slider, checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}