31:T48c,viewof selections = inputsGroup( [ [ select({ // title: 'Timeframe', description: 'Select year', options: [ { value: '2020 to Present', label: '2020 to Present'}, { value: '2018 to Present', label: '2018 to Present'}, { value: '2021', label: '2021'}, { value: '2020', label: '2020'}, { value: '2019', label: '2019'}, { value: '2018', label: '2018'}, ], value: ['2020 to Present'] }), checkbox({ // title: 'Data Values', description: 'Select values', options: [ { value: 'entries', label: 'Entries'}, { value: 'exits', label: 'Exits'}, ], value: ['entries', 'exits'] }), ], [ checkbox({ // title: 'Modes', description: 'Filter modes for display', options: [ { value: 'SUB', label: 'Subway'}, { value: 'PTH', label: 'PATH'}, { value: 'SIR', label: 'Staten Island Railway'}, { value: 'JFK', label: 'JFK Airtrain'}, { value: 'RIT', label: 'Roosevelt Island Tramway '}, ], value: ['SUB','PTH','SIR','JFK','RIT' ] }) ] ], [ ['year', 'group'], ['mode'] ] )32:T29ac,chartTurnstileSubway = { let height = 450 let margin = {top: 60, right: 80, bottom: 60, left: 100} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let chartid = "chart-turnstile-subway"; const selectType = "val"; const selectGroup = selections.group const selectDivisions = selections.mode; // array of the checkbox selections for filtering let filtered = summarizeDaily(chartSet.filter(d => selections.mode.includes(d.division))).set.filter(d => selectGroup.includes(d.id)) let extData = d3.extent(filtered, d => d[selectType]); // filter data.set for extext let yDomain = [0,extData[1]]; let yLabel = 'Total Entries / Exits'; let chartSource = 'Data: NYC Subway Turnstile Counts on Qri'; let extDates = d3.extent(filtered, d => d.date) let selectSeries = d3.group(filtered, d => d.id); let selectLookup = d3.group(filtered, d => d.date.toISOString()) let selectDates = Array.from(selectLookup).map(d => d[1][0].date); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", 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'); // Notes for no data if (selections.mode.length === 0 || selections.group.length === 0){ group.append("text") .text('Please select at least one value and mode to display') .attr("text-anchor", "middle") .attr("class", "notification") .attr("x", innerWidth/2) .attr("y", innerHeight/2) .style('fill', '#999') .style('font-size', '.85em'); } if (filtered.length === 0){ group.append("text") .text('No Data Available') .attr("text-anchor", "middle") .attr("class", "notification") .attr("x", innerWidth/2) .attr("y", innerHeight/3) .style('fill', '#999') .style('font-size', '.85em'); } let x = d3.scaleTime() .range([0, width - margin.left - margin.right]) .domain(extDates) let y = d3.scaleLinear() .range([innerHeight, 0]) .domain(yDomain) .nice(); let xAxis = d3.axisBottom(x); let yAxis = d3.axisLeft(y); if (width < 700) { xAxis.tickFormat(d3.timeFormat("%b")); } group.append("line") .attr("class", "y-highlight") .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', innerHeight) .style('stroke', '#999') .style('opacity', 0); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis); group.append("g") .attr("class", "y axis") .call(yAxis); let line = d3.line() .x(d => x(d.date)) .y(d => y(d[selectType])) let lineGroup = group.append("g") .attr('class', 'line-group') lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => line(d[1])) .attr("class", function(d) { return 'ts-line ts-line-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return 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.selectAll("#" + chartid + " .ts-line") .style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .lfl-text") .style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .lfl-leader") .style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.selectAll("#" + chartid + " .ts-line") .style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-text") .style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-leader") .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) }) // 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', chartMouseMove) .on('mouseout', chartMouseOut ); function chartMouseMove(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)]); //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.ascending(a.id, b.id)); // Disabled sorting on the lookup since entries is primary. //.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 => isNum(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 => isNum(d[selectType]) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // Custom toolTip Content let tipContent = ``; // Start content string tipContent += ``; // Unused Header // Interate over selected categories lookup.map( d => { tipContent += `` tipContent += `` // tipContent += `` }); tipContent += `

	Ridership	Change
${dataDict[d.id].name}	${format.abs(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(`${format.date1(hoverDate)}
${tipContent}`); } function chartMouseOut(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:T12b7,function summarizeStationDaily(dataset, compare) { let result = {} result.summary = {} result.summary.avg = {} result.summary.ext = {} result.summary.ext.entries = [0, d3.max(dataset, d => d.entries)]; result.summary.ext.exits = [0, d3.max(dataset, d => d.exits)]; result.summary.avg.entries = d3.mean(dataset, d => d.entries); result.summary.avg.exits = d3.mean(dataset, d => d.exits); result.summary.ext.dates = d3.extent(dataset, d => d.date) result.set = d3.groups(dataset, d => d.complex_id).map(d => { let complex_id = d[0]; let data = d[1].sort((a, b) => d3.ascending(a.date, b.date)); let firstday = data[0].date; let days = data.length; let entriesTotal = d3.sum(data, d => d.entries); let entriesAvg = d3.mean(data, d => d.entries); let entriesMax = d3.max(data, d => d.entries); let exitsTotal = d3.sum(data, d => d.exits); let exitsAvg = d3.mean(data, d => d.exits); let exitsMax = d3.max(data, d => d.exits); //result.data.push({station_id, data}) let entriesAvgMo = d3.rollup(data, v => d3.mean(v, d => d.entries), d => d.month) let exitsAvgMo = d3.rollup(data, v => d3.mean(v, d => d.exits), d => d.month) let entriesAvgMoDT = d3.rollup(data, v => d3.mean(v, d => d.entries), d => d.month, d => d.daytype) let n = 7; let movingAvg = movingAverage(data.map(e => e.entries), n) data = data.map((d, i) => { return Object.assign({entriesMAvg: Math.round(movingAvg[i])}, d) }) let entriesMAvgMax = d3.max(data, d => d.entriesMAvg); let change = {} if(compare) { let lookup = compare.map.get(complex_id) change.prev = (lookup) ? true : false; if (lookup) { change.prev = true; data = data.map(g => { let prevEntriesAvgMo = lookup[0]['entriesAvgMo'].get(g.month) // check for previous year month g.entriesChgAvgMo = null; g.entriesChgAvgMoDT = null; g.entriesMAvgChgAvgMo = null; if (prevEntriesAvgMo) { g.entriesChgAvgMo = (g.entries - prevEntriesAvgMo)/prevEntriesAvgMo; g.entriesMAvgChgAvgMo = (g.entriesMAvg - prevEntriesAvgMo)/prevEntriesAvgMo; let prevEntriesAvgMoDT = lookup[0]['entriesAvgMoDT'].get(g.month).get(g.daytype); // calculate the change over prev if (prevEntriesAvgMoDT) { g.entriesChgAvgMoDT = (g.entries - prevEntriesAvgMoDT)/prevEntriesAvgMoDT; } } return g; }) change.days = lookup[0]['days']; change.entriesTotal = lookup[0]['entriesTotal']; change.entriesTotalChg = (entriesTotal - change.entriesTotal)/change.entriesTotal; change.entriesAvg = lookup[0]['entriesAvg']; change.entriesAvgChg = (entriesAvg - change.entriesAvg)/change.entriesAvg; change.exitsTotal = lookup[0]['exitsTotal']; change.exitsTotalChg = (exitsTotal - change.exitsTotal)/change.exitsTotal; change.exitsAvg = lookup[0]['exitsAvg']; change.exitsAvgChg = (exitsAvg - change.exitsAvg)/change.exitsAvg; change.minEntriesChgAvgMo = d3.min(data, d => d.entriesChgAvgMo); change.maxEntriesChgAvgMo = d3.max(data, d => d.entriesChgAvgMo); change.minEntriesChgAvgMoDT = d3.min(data, d => d.entriesChgAvgMoDT); change.maxEntriesChgAvgMoDT = d3.max(data, d => d.entriesChgAvgMoDT); change.minEntriesMovChgAvgMo = d3.min(data, d => d.entriesMAvgChgAvgMo); change.maxEntriesMovChgAvgMovMo = d3.max(data, d => d.entriesMAvgChgAvgMo); //console.log(change.minEntriesAvgMoDT) } } return {complex_id, data, days, entriesTotal, entriesAvg, entriesMax, exitsMax, exitsTotal, exitsAvg, entriesAvgMo, exitsAvgMo, entriesAvgMoDT, entriesMAvgMax, change}; }) result.summary.ext.entriesMAvg = [0, d3.max(result.set, d => d.entriesMAvgMax)] if(compare) { result.summary.ext.entriesChgAvgMo = [ d3.min(result.set, d => d.change.minEntriesChgAvgMo), d3.max(result.set, d => d.change.maxEntriesChgAvgMo)] result.summary.ext.entriesChgAvgMoDT = [ d3.min(result.set, d => d.change.minEntriesChgAvgMoDT), d3.max(result.set, d => d.change.maxEntriesChgAvgMoDT) ]; result.summary.ext.entriesMovChgAvgMo = [ d3.min(result.set, d => d.change.minEntriesMAvgChgAvgMo), d3.max(result.set, d => d.change.maxEntriesMAvgChgAvgMo)]; result.summary.ext.entriesAvgChg = d3.extent(result.set, d => d.change.entriesAvgChg); result.summary.ext.exitsAvgChg = d3.extent(result.set, d => d.change.exitsAvgChg); } result.map = d3.group(result.set, d => d.complex_id); return result }34:T426,md`### Parsed Data + The csv files of the original qri turnstile count data attached to this notebook are reduced to include only key columns (date, complex_id, division, borough, entries, and exits). This reduced the overall filesize to work within observable by removing repetitive columns that can be looked up from tsStationComplexes dataset by complex_id. + The parseTurnstile function adds temporal details (year, month) for summary purposes. Also the BMT, IND, IRT division designations are changed SUB for Subway since station complexes can often include more than one subway division. The dataset must pull the first found devision rather than all, wouldn't be useful outside of identified any appearance of the three as subway. The other division designations are SIR (Staten Island Railway), RIT (Roosevelt Island Tramway), and JFK (JFK Airtrain) + The parseTurnstileQri function replicates the formatting of the csv files plus all actions in parseTurnstile so it can be easily joined to the local data. `35:T6da,function parseTurnstile(dataset, remote = false) { let parseDate; if(remote) { parseDate = d3.timeParse("%Y-%m-%d"); // Parsed 2020-01-03 - Remote Qri Date Format } else { parseDate = d3.timeParse("%-m/%-d/%y"); // Parses 3/1/20 - Attachment Date (Smaller Size) } //let parseDate = d3.timeParse("%Y-%m-%d"); let formatYear = d3.timeFormat("%Y"); let formatMonth = d3.timeFormat("%m"); // let formatFormat = d3.utcFormat("%U"); let formatDay = d3.timeFormat("%w"); function dayType(num) { if (num === 0 || num === 6) { return "weekend"; } else { return "weekday" } } // dataset.forEach(function(d, i) { // d.complex_id = d.complex_id // d.date = parseDate(d.date); // d.month = +formatMonth(d.date); // d.day = +formatDay(d.date); // d.daytype = dayType(d.day); // d.entries = +d.entries // d.exits = +d.exits // if(['BMT','IRT','IND'].includes(d.division)) { // d.division = 'SUB' // } // //d.dateiso = d.date.toISOString() // // if(d.date !== null) { // // d.dateiso = d.date.toISOString() // // } else { // // console.log(`Row ${i}: ${d.station_id} ${d.date}`); // // } // }); let result = dataset.map(function(d, i) { let item = {} item.complex_id = d.complex_id item.date = parseDate(d.date); item.month = +formatMonth(item.date); item.day = +formatDay(item.date); item.daytype = dayType(item.day); item.entries = +d.entries item.exits = +d.exits item.division = d.division if(['BMT','IRT','IND'].includes(item.division)) { item.division = 'SUB' } return item }); return result.sort((a, b) => d3.ascending(a.date, b.date)) }36:T6e1,request = { // Use Observable mutable values to show a status message up top while loading //mutable loadStatus = md`

${loadVisual.loading}Loading Data

`; mutable loadStatus = md`Status: Loading Data`; let source; let error_status = false; let error_res = {}; let result = {} // define object for meta info and data // The code below need to be improved for error handling and I would want to set it up to handle an array of files. // If remote mode, access qri datasets. //if (loader === 'remote') { } // access the remote metadata information file qri hosts for each dataset result.info = await d3.json("https://api.qri.cloud/get/nyc-transit-data/turnstile_daily_counts_2021").catch(function(error){ console.log(error); error_status = true; error_res['info'] = error; }) // access the remote dataset >> Need to add a timeout if (error_status === false) { result.data = await d3.csv("https://api.qri.cloud/get/nyc-transit-data/turnstile_daily_counts_2021/body.csv") .catch(function(error){ console.log(error); error_status = true; error_res['data'] = error; }) } if (error_status === true) { let error_note = ``; if (error_status === true) { error_note = `(Remote Access Error)`; } // Update mutable to success state mutable loadStatus = md`Status: ERROR ${error_note}`; } else { source = "Remote" // Update mutable to success state mutable loadStatus = md`Status: Live Qri Data Loaded`; } return {source, error_status, error_res, result} }37:Tc9f,mapBase = { const height = 600 const margin = {top: 20, right: 20, bottom: 20, left: 20} const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const projection = d3.geoMercator() .fitExtent([[margin.right,margin.top],[width-(margin.right + margin.left),height-(margin.top + margin.top)]],tsRoutes); const path = d3.geoPath().projection(projection) let g = svg.append("g"); let water = g.append("g") .attr("class", "hydro") .selectAll("path") .data(shoreline.features) .enter().append("path") .attr("d", path) .style("fill", "none") .style("stroke", "#eee") let cdmuni = topojson.feature(tsGeoTopo, tsGeoTopo.objects.nycdmuni).features let geo = g.selectAll("geo") .data(cdmuni) .enter().append("path") .attr("class", "geo") .attr("d", path) .style("fill", "#ddd") .style("stroke", "#eee") let geoHover = g.selectAll("geoHover") .data(cdmuni) .enter().append("path") .attr("class", "geoHover") .attr("d", path) .attr("fill-opacity", 0) .on('mouseover', cdMouseOver) .on('mouseout', cdMouseOut ); // Add Subway Lines let subwayLines = g.append("g") .attr("class", "lines") .selectAll("path") .data(tsRoutes.features) .enter().append("path") .attr("d", path) .style("fill", "none") .style("stroke", "#999") let stationGroup = g.append("g") .attr("class", "stations") // Update Stations > Data let station = stationGroup.selectAll("station") .data(tsStationComplexes.data, d => d['complex_id']) .join("g") .attr("class", "station") .attr("transform", function(d) { let point = projection([d.lon,d.lat]); return `translate(${point[0]},${point[1]})` }); station.append("circle") .attr("class", "station-change") .attr("cx", 0) .attr("cy", 0) // .classed("negative", function(d) { // console.log(d.Station_Name + " " + d[endDate] / d[startDate]) // return d[endDate] / d[startDate] <= 1 // }) .attr("fill", function(d) { return "#777"}) .attr("r", 0); station.append("circle") .attr("class", "station-point") .attr("cx", 0) .attr("cy", 0) .attr("r", 2); function cdMouseOver(event, d){ d3.select(event.target) .style("cursor", "pointer") .attr('stroke', '#000') .attr('stroke-width', 3); let geoid = d.properties.id; let geoInfo = tsGeoInfo.lookup.get(geoid)[0] let tipContent = ``; tipContent += `${geoInfo.name}
`; tipContent += `${geoInfo.type} (${geoid})
`; mapTip.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 cdMouseOut(event, d){ d3.select(event.target) .style("cursor", "default") .style("cursor", "pointer") .attr('stroke', '#000') .attr('stroke-width', 0); mapTip.style("display", "none"); // Hide toolTip d3.select(event.target) } return svg.node(); }38:T41a,html` `39:[{"id":"41fb14fa66ad4973fe53310a104f5aaaf6ca6573b8c3a49826fafbaf815a34d31a3e26158712c5626a9882b281684eb4c20a84b9752583224604605b20c605e5","href":"https://static.observableusercontent.com/files/41fb14fa66ad4973fe53310a104f5aaaf6ca6573b8c3a49826fafbaf815a34d31a3e26158712c5626a9882b281684eb4c20a84b9752583224604605b20c605e5","name":"nyct-turnstile-stations@1.tsv","type":"text/tab-separated-values","lastModified":1611721055694.038,"size":36529},{"id":"c46a92497172c1374949b59f4f4380af605380a8d62a9c1fa268f48a5ebc6e8ef3df05d791cc0a142605a045cef29d78d4d269fb53b6e681d4b79da850af5a57","href":"https://static.observableusercontent.com/files/c46a92497172c1374949b59f4f4380af605380a8d62a9c1fa268f48a5ebc6e8ef3df05d791cc0a142605a045cef29d78d4d269fb53b6e681d4b79da850af5a57","name":"nyct-turnstile-geo-info.csv","type":"text/csv","lastModified":1611623436053.084,"size":7885},{"id":"263f3e86d6a5fa3fa528d539c6a4c507f4e764c0adb0243f980e2f4208c75a6c898353ce7324d3fd3636b3a6c7e886030006de56a4f2b39c6baaa09742ba4cfe","href":"https://static.observableusercontent.com/files/263f3e86d6a5fa3fa528d539c6a4c507f4e764c0adb0243f980e2f4208c75a6c898353ce7324d3fd3636b3a6c7e886030006de56a4f2b39c6baaa09742ba4cfe","name":"nyct-turnstile-stations.tsv","type":"text/tab-separated-values","lastModified":1611623385507.036,"size":36595},{"id":"cee9f283eb11f65cd1e4bb251261e5db3048e73da78c3383d1ad706c98b9b64936abc28cdf6e6937b41a16b43b8c8d0bc683ae8a033a952b1c482137e3f8d3c1","href":"https://static.observableusercontent.com/files/cee9f283eb11f65cd1e4bb251261e5db3048e73da78c3383d1ad706c98b9b64936abc28cdf6e6937b41a16b43b8c8d0bc683ae8a033a952b1c482137e3f8d3c1","name":"nyct-turnstile-complex-daily-counts-2017-s.csv","type":"text/csv","lastModified":1611633290273.966,"size":4738184},{"id":"5b8b680a18e26c6b515b131e85bc03ff688f7f3a3271b78e7d5d358be8cb1260ff645e2b0492daf419e30954582da6be9267dce03d1fd2f4a3bf3656979f6549","href":"https://static.observableusercontent.com/files/5b8b680a18e26c6b515b131e85bc03ff688f7f3a3271b78e7d5d358be8cb1260ff645e2b0492daf419e30954582da6be9267dce03d1fd2f4a3bf3656979f6549","name":"nyct-turnstile-complex-daily-counts-2018-s.csv","type":"text/csv","lastModified":1611633290496.215,"size":4701289},{"id":"927e230eb785cc23bb27b2bc84d6d26bc689763d366bb0d32611f6e2987b7bbd3f610e93a73cc160c5c3c13754c4f55c702247592d5fbce4de7f4564f683d086","href":"https://static.observableusercontent.com/files/927e230eb785cc23bb27b2bc84d6d26bc689763d366bb0d32611f6e2987b7bbd3f610e93a73cc160c5c3c13754c4f55c702247592d5fbce4de7f4564f683d086","name":"nyct-turnstile-complex-daily-counts-2016-s.csv","type":"text/csv","lastModified":1611633387080.249,"size":4735001},{"id":"601d7ab5873082913bf64e7476065e565395a63c36a4efc84e64a71879e7f6c2e9a47a4ba6be25f3a01de474a799e422090ad4e59204d00a0e81043d70b109a2","href":"https://static.observableusercontent.com/files/601d7ab5873082913bf64e7476065e565395a63c36a4efc84e64a71879e7f6c2e9a47a4ba6be25f3a01de474a799e422090ad4e59204d00a0e81043d70b109a2","name":"nyct-turnstile-geo-cdmuni-10m.topojson","type":"application/octet-stream","lastModified":1611622879131.014,"size":498874},{"id":"94d2987dc12a6763121ea1248461e26207ca9656e2cc093afc6a6f5094a573ecab1e25a0f7a2939fb2eb6c52c9a0a1c32358064ee1d592270115299d6c0a72ec","href":"https://static.observableusercontent.com/files/94d2987dc12a6763121ea1248461e26207ca9656e2cc093afc6a6f5094a573ecab1e25a0f7a2939fb2eb6c52c9a0a1c32358064ee1d592270115299d6c0a72ec","name":"nyct-turnstile-routes-v2.geojson","type":"application/geo+json","lastModified":1611622874395.154,"size":720735},{"id":"173d262c059fc3eb58c2c20df6d2c4bc7370dffbc1a5a0ab4d2a136de87ff07d9cd67d93d8e93d09326d3e9b7f07ac0e26c5cb2e3b587a0899358221e917c336","href":"https://static.observableusercontent.com/files/173d262c059fc3eb58c2c20df6d2c4bc7370dffbc1a5a0ab4d2a136de87ff07d9cd67d93d8e93d09326d3e9b7f07ac0e26c5cb2e3b587a0899358221e917c336","name":"nyct-turnstile-complex-daily-counts-2020-s.csv","type":"text/csv","lastModified":1611622692271.805,"size":4587115},{"id":"239ffa2f4689893065d3d892ccd709546b8057fe11a9371e1fbfe953f309a888dce52e716e84862b7f56dcc82d4460664366428ea6f44172aad9d8e8e6618c0f","href":"https://static.observableusercontent.com/files/239ffa2f4689893065d3d892ccd709546b8057fe11a9371e1fbfe953f309a888dce52e716e84862b7f56dcc82d4460664366428ea6f44172aad9d8e8e6618c0f","name":"nyct-turnstile-complex-daily-counts-2019-s.csv","type":"text/csv","lastModified":1611622692277.67,"size":4725203},{"id":"bc9514ad2ff46073ab972bddea5996cc5b56879b140cbd064988e9ab2a9a117aa9f89d36b7c9047fe1f4a0d6bced2cf61e9aac2f61cb2ed6acea15be6426c80e","href":"https://static.observableusercontent.com/files/bc9514ad2ff46073ab972bddea5996cc5b56879b140cbd064988e9ab2a9a117aa9f89d36b7c9047fe1f4a0d6bced2cf61e9aac2f61cb2ed6acea15be6426c80e","name":"noaa-hydro-shoreline-25m-v1.geojson","type":"application/geo+json","lastModified":1611623277354.234,"size":456291},{"id":"ee354fb2312a926a5e5ec7c50b904e3129b0263bc68ac5f7d1c07c919366a5a233a76ff9d8d1b21004296bb7295b73c77d3e8664fada0a0859a005f4d1a02a96","href":"https://static.observableusercontent.com/files/ee354fb2312a926a5e5ec7c50b904e3129b0263bc68ac5f7d1c07c919366a5a233a76ff9d8d1b21004296bb7295b73c77d3e8664fada0a0859a005f4d1a02a96","name":"nyct-turnstile-geo-join.tsv","type":"text/tab-separated-values","lastModified":1611623416826.737,"size":6663}] 2f:{"title":"NYC Transit Turnstile Data","cells":[{"id":0,"value":"md`# NYC Transit Turnstile Data\nThis notebook references the Annual [NYC Subway Turnstile Counts](https://qri.cloud/nyc-transit-data) by [Chris Whong](https://twitter.com/chris_whong) from [Qri](https://qri.cloud/) along with other files and functions created to explore data and help power other visualizations observable. \n\nThe data for 2018-2020 is currently loaded off local attachments and the 2021 data, which gets updated on a regular basis, is loaded directly through Qri's public api. Data is available going back to 2015, but I haven't loaded it in the current version to avoid making the notebook more resource intensive than it its already. \n\nThis is still a work and progress and will I be looking to refine and optimize.\nThe page will likely take a moment to fully load.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`## Overview / Daily Turnstile Counts, ${selections.year}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"md`### Notes\n+ Additional information on methodolgy for the turnstile counts is available by the author on the [qri.cloud page](https://qri.cloud/nyc-transit-data/turnstile_daily_counts_2020) for each year.\n+ The dataset includes turnstile counts for the Subway, PATH, Staten Island Railway, Roosevelt Island Tramway, JFK Airtrain.\n+ The last week of 2020 is currently missing from the source dataset (as of 2021.01.26)\n+ The JFK Airtrain Data is missing from 2019\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"md`## Turnstile Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"md`### Data Dictionary\nFor labels and colors of data columns\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"dataDict = ({\n'entries': {\n 'name': 'Entries',\n 'rgb': 'rgb(51,163,220)',\n 'unit': 'abs',\n},\n'exits': {\n 'name': 'Exits',\n 'rgb': 'rgb(249,157,62)',\n 'unit': 'abs',\n}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md`### Processing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"// dataset for the chart based on timeframe selected\nchartSet = {\n switch (selections.year) {\n case '2021':\n return tsParsed2021; \n case '2020':\n return tsParsed2020;\n case '2019':\n return tsParsed2019;\n case '2018':\n return tsParsed2018;\n case '2020 to Present': \n return [...tsParsed2020,...tsParsed2021];\n case '2018 to Present': \n return [...tsParsed2018,...tsParsed2019,...tsParsed2020,...tsParsed2021];\n default:\n return [];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"function summarizeDaily(dataset) {\n\n let result = {}\n\n let s1 = d3.groups(dataset, d => d.date.toISOString()).map(function(row) {\n let n = {}\n n.date = row[1][0].date\n n.entries = d3.sum(row[1], d => d.entries)\n n.exits = d3.sum(row[1], d => d.exits)\n return n;\n })\n \n result.set = []\n let cols = ['entries', 'exits'];\n \n cols.map(function(id) {\n s1.map(function(d) {\n let day = d.date.getDay();\n result.set.push({id, date: d.date, val: d[id]});\n })\n })\n //set = d3.group(set, d => d.id);\n \n result.extVal = d3.extent(result.set, d => d.val);\n result.extTime = d3.extent(result.set, d => d.date);\n result.series = d3.group(result.set, d => d.id)\n \n return result\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"// tsStationDaily2019 = summarizeStationDaily(tsParsed2019)","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"// tsStationDaily2020 = summarizeStationDaily(tsParsed2020, tsStationDaily2019)","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"md`### Parsed Local Files`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"tsParsed2020 = await FileAttachment(\"nyct-turnstile-complex-daily-counts-2020-s.csv\").csv().then(d => parseTurnstile(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"tsParsed2019 = await FileAttachment(\"nyct-turnstile-complex-daily-counts-2019-s.csv\").csv().then(d => parseTurnstile(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"tsParsed2018 = await FileAttachment(\"nyct-turnstile-complex-daily-counts-2018-s.csv\").csv().then(d => parseTurnstile(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"// tsParsed2017 = await FileAttachment(\"nyct-turnstile-complex-daily-counts-2017-s.csv\").csv().then(d => parseTurnstile(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"// tsParsed2016 = await FileAttachment(\"nyct-turnstile-complex-daily-counts-2016-s.csv\").csv().then(d => parseTurnstile(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"md`### Latest Qri Data\nThis notebooks also attempts requests the latest 2021 turnstile data directly from Qri\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"mutable loadStatus = ''","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"commit = {\n if(request.error_status === false) {\n return md`#### Last Commit: ${request.result.info.data.name} (${request.source})\n Time: ${new Date(request.result.info.data.dataset.commit.timestamp)}
\n Title: ${request.result.info.data.dataset.commit.title}`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"tsParsed2021 = {\n if(request.error_status === false) {\n return parseTurnstile(request.result.data, true)\n } else {\n return []\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`## Map Data\nThis shows the geographic extent of the turnstile data with station complex points and routes. The station complexes indetitfy all independent fare collections areas (e.g. muliple stops/plaforms accessible by the same turnstiles)\n\nIn order to test a geographic summary of the station data I also created a base layer, merging the New York City Community Districts and NJ Municipalities for Hudson County and Newark, to cover all of the stations complexes. A join file was also created based on GIS analysis of station complexes to find both the nearest area and also all areas with a quarter mile. The reason it shows additional municipalities in New Jersey is because I would like to incorporate the Hudson Bergen Light Rail at a later point if the data is accessible.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"tsStationComplexes = {\n let result = {}\n \n //result.data = d3.csvParse(await FileAttachment(\"citibike-stations-20201210@1.csv\").text(), d3.autoType)\n result.data = d3.tsvParse(await FileAttachment(\"nyct-turnstile-stations@1.tsv\").text()).map(d => {\n d.lat = +d.lat\n d.lon = +d.lon\n \n return d\n })\n \n result.lookup = d3.group(result.data, d => d.complex_id)\n \n //result.data = d3.csvParse(await FileAttachment(\"nyc-transit-data-citibike_daily_counts_2020_s.csv\").text(), d3.autoType)\n \n// result.dataDate = d3.rollup(result.data, v => d3.sum(v, d => d.startcount), d => d.date)\n \n return result\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"tsRoutes = FileAttachment(\"nyct-turnstile-routes-v2.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"tsGeoJoins = {\n let result = {}\n\n result.data = d3.tsvParse(await FileAttachment(\"nyct-turnstile-geo-join.tsv\").text()).map(d => {\n d.geoid_near = d.geoid_near.split(\",\");\n return d\n })\n \n result.links = []\n result.data.map(d => {\n d.geoid_near.map(g => {\n result.links.push({complex_id: d.complex_id, geoid: g})\n })\n })\n\n result.lookupByComplex = d3.group(result.data, d => d.complex_id)\n result.geo = d3.groups(result.data, d => d.geoid)\n result.geoNear = d3.groups(result.links, d => d.geoid)\n return result\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"tsGeoInfo = {\n let result = {}\n\n result.data = d3.csvParse(await FileAttachment(\"nyct-turnstile-geo-info.csv\").text()).map(d => {\n d.id = d.id\n d.pop2010 = +d.pop2010\n return d\n })\n\n result.lookup = d3.group(result.data, d => d.id)\n return result\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"tsGeoTopo = FileAttachment(\"nyct-turnstile-geo-cdmuni-10m.topojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"shoreline = FileAttachment(\"noaa-hydro-shoreline-25m-v1.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"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":64,"value":"md`### Components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"format = ({\n date1: d3.timeFormat(\"%a, %b %e %Y\"), // Timeline Tooltip Date Format\n date2: d3.timeFormat(\"%b %e %Y\"), // Timeline Tooltip Date Format\n percent1d: d3.format(\".1%\"),\n pct: d3.format(\".0%\"),\n value: d3.format(\",.0f\"),\n abs: d3.format(\",.0f\"),\n avg: d3.format(\"(,.1f\"),\n chg: d3.format(\".1%\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"mapTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"mapTip\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"function isNum(n) {\n return !isNaN(parseFloat(n)) && isFinite(n) && n !== \"\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`### References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"import {select, slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"import {inputsGroup, chartTip} from '@benoldenburg/mta-daily-ridership-recovery'","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"import {legend} from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@6\") // Load D3","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}