31:T18f8,map_turnstile_change_by_nycdmuni = { let vizId = 'map-nycdmuni' // Data Source let vizSource = 'Data: NYC Subway Turnstile Counts on Qri' const height = 700 const margin = {top: 20, right: 20, bottom: 20, left: 20} const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); let cHighlight = '#660F68' let selectVal = 'entriesTotalChange' // 'exitsTotalChange' 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") .attr("id", vizId); 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 color = d3.scaleQuantize() // .range(colorsArea) // .domain(d3.extent(tsGeo2020.set, d => d.entriesTotalChange)) let color = d3.scaleLinear() .range(colorsArea) .domain(d3.extent(tsGeographic2020.set, d => d[selectVal])) // Basemap Layout let geo = g.selectAll("geo") .data(cdmuni) .enter().append("path") .attr("class", "geo") .attr("d", path) .style("fill", d => { let geo_id = d.properties.id; let lookup = tsGeographic2020.map.get(geo_id) if (lookup) { return (lookup[0].stations > 0 ) ? color(lookup[0][selectVal]) : "#CCC"; } else { return "#CCC"; } }) // Copy of Basemap Layer to use for hover/highlighting. let geoHover = g.selectAll("geoHover") .data(cdmuni) .enter().append("path") .attr("class", "geoHover") .attr("d", path) .attr("fill-opacity", 0) .attr('stroke-linejoin', 'round') .on('mouseover', cdMouseOver) .on('mouseout', cdMouseOut ); // Add Subway Lines var subwayLines = g.append("g") .attr("class", "lines") .selectAll("path") .data(tsRoutes.features) .enter().append("path") .attr("d", path) .attr('pointer-events', 'none') .style("fill", "none") .style("stroke", "#999") // Source g.append("text") .attr("class", "chart-source") .text(vizSource) .attr("text-anchor", "left") .attr("x", margin.left) .attr("y", height-margin.bottom) .attr('paint-order', 'stroke') .attr('stroke-linejoin', 'round') .attr('stroke', '#FFF') .attr('stroke-width', '6px') .attr('fill', function(d) { return '#999'; }) .style('font-size', '.60em') .style('font-family', 'sans-serif'); 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('pointer-events', 'none') .attr("cx", 0) .attr("cy", 0) .attr("r", 2); function cdMouseOver(event, d){ d3.select(event.target) .style("cursor", "pointer") .attr('stroke', cHighlight) .attr('stroke-width', 3); // d3.select(`.station-sub-${d['complex_id']} .bubble`) // .transition() // .attr('stroke', 'red') // .attr('stroke-width', 3); let geoid = d.properties.id; let geoInfo = tsGeoInfo.lookup.get(geoid.toString())[0] let tipContent = ``; tipContent += `${geoInfo.type} (${geoid})
`; tipContent += `

${geoInfo.name}

`; if (geoInfo.id_type === 'nycd') { tipContent += `(${geoInfo.desc})
`; } else { //tipContent = `${geoInfo.name}
`; } let lookup = tsGeographic2020.map.get(geoid) if (lookup !== undefined) { let v = lookup[0]; d3.selectAll(`#${vizId} .station-point`) .attr("opacity", d => v.stations_id.includes(d.complex_id) ? 1 : 0.2 ) tipContent += `Stations with data: ${v.stations}
`; tipContent += `` // Start Table tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `

	2020	2019	Chg
Entries	${format.abs(v['entriesTotal'])}	${(v.entriesTotalPrev) ? format.abs(v.entriesTotalPrev) : 'N/A'}	${(v.entriesTotalChange) ? format.chg(v.entriesTotalChange) : 'N/A'}

`; // Close Table } else { // tipContent += `No Stations` } //console.log(event) mapTip.style("left", () => { console.log({innerWidth, dX: d.x, eventX: event.pageX}) if (innerWidth - event.pageX < 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', '#FFF') .attr('stroke-width', 0); d3.selectAll(`#${vizId} .station-point`) .attr("opacity", 1 ) mapTip.style("display", "none"); // Hide toolTip } // Legend g.append("g") .attr("transform", `translate(${20},${50})`) .append(() => legend({ color, title: 'Change', width: 200, //ticks: 6, // tickValues: d3.utcYear.every(5).range(...color.domain()), tickFormat: format.pct })); return svg.node(); }32:T677,md`#### Data Notes + The dataset includes turnstile counts for Subway, PATH, Staten Island Railway (SIR), Roosevelt Island Tramway (RIT), and JFK Airtrain. See [this base notebook](https://observablehq.com/@benoldenburg/nyc-transit-turnstile-data) for additional information on the data and processes (including the geographic data) used in this visualization. + While turnstile counts don't represent the official ridership numbers, it does trend closely with [adjusted numbers](https://new.mta.info/agency/new-york-city-transit/subway-bus-ridership-2019 "Subway and bus ridership for 2019 (MTA)") published by MTA. For 2019 the comparison of the the turnstile total to the official numbers, the difference is: Times Sq-42 St (${format.percent1d((65602365-65020294)/65020294)}) and Grand Central-42 St (${format.percent1d((45186782-45745700)/45186782)}) + Only the two northern stations on the Staten Island Railway, St George (by the Staten Island Ferry) and Tompkinsville, have turnstiles. Travel on the rest of the line is free and while the MTA may have ridership estimates it is not availabile in this dataset. + The Merged Community District (NYC) and Municipality (NJ) layer was an attemp to have a somewhat similar geography for all stations complexed to aggregate to. Stations are linked based on the quater mile buffer, which means some are counted in more than one community district. + The New York City Community Distric file inlcudes the 12 joint interest areas (JIAs) which are parks or airports not contained within a district. Since some still classify as destinations of interest for this exercise they were included in the summaries. `33:T2bd5,station_map = { // ID to isolate viz for any d3 selections let vizId = 'leaflet-change' // Accessible description for title or aria-lable let vizDesc = 'Map of NYC turnstile date by station shwo ' // Data Source let vizDataSource = 'Data: NYC Subway Turnstile Counts on Qri' let cHighlight = '#A8234E'; let container = DOM.element('div', { id: vizId, style: `width:${width}px;height:${width/1.6}px`, 'aria-label': vizDesc }); yield container; //let map = L.map(container).setView([53.2527, -123.1207], 5).fitBounds(L.geoJson(Wcities).getBounds()); let map = L.map(container).setView([40.747, -73.988], 12) map.scrollWheelZoom.disable(); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); map.attributionControl.addAttribution(vizDataSource); // add route lines L.geoJSON(tsRoutes, { style: { "color": "#999", "weight": 1, //"opacity": 0.65 } }).addTo(map); //initialize svg to add to map L.svg().addTo(map) const overlay = d3.select(map.getPanes().overlayPane) const svg = overlay.select('svg') let stationSubway = svg.selectAll("station") .data(tsStationComplexes.data, d => d['complex_id']) .join('g') .attr('class', d => `station station-sub-${d['complex_id']}`) .attr('transform', d => { let point = map.latLngToLayerPoint([d.lat,d.lon]) return `translate(${point.x},${point.y})` }) .attr("pointer-events","visible") .on('mouseover', stationMouseOver) .on('mouseout', stationMouseOut ); stationSubway.append('circle') .attr('class', 'bubble') //.attr('pointer-events', 'none') .attr('r', d => { //d.r = r(d[selectR]) return 2 }) .attr('fill-opacity', 0.4) .attr('fill', 'rgb(0, 152, 228)') stationSubway.append('circle') .attr('class', 'point') .attr('pointer-events', 'none') .attr('r', 2) .attr('fill', '#333') const update = () => stationSubway .attr('transform', d => { let point = map.latLngToLayerPoint([d.lat,d.lon]) return `translate(${point.x},${point.y})` }) map.on("zoomend", update) function stationMouseOver(event, d){ d3.select(event.target).style("cursor", "pointer"); d3.select(`.station-sub-${d['complex_id']} .bubble`) .transition() .attr('stroke', cHighlight) .attr('stroke-width', 3); let complex = tsStationComplexes.lookup.get(d['complex_id'])[0] let tipContent = ``; tipContent = `

${complex.station_name}

`; //(${d['complex_id']}) let lookup = tsStationDaily2020.map.get(d['complex_id']) let services = complex.service_day if(services) { tipContent += `

` //tipContent += `Services: ${complex.service_day}` // let shape = (complex.group === 'Subway') ? 'circle' : 'rect'; // if(complex.group === 'Subway' || complex.group === 'PATH') { // tipContent += `

${complex.group}

` // } // services.split('-').map(s => { // let label = (complex.group === 'PATH') ? routesDict[s].label : s; // console.log(label) // tipContent += `

${label}

` // }) tipContent += `

${complex.group}

` if(['Subway','PATH','JFK'].includes(complex.group)) { services.split('-').map(s => { let label = (complex.group === 'PATH') ? routesDict[s].label : s; console.log(label) tipContent += `

${label}

` }) } tipContent += `

` } if (lookup !== undefined) { let v = lookup[0]; tipContent += `` // Start Table // Interate over selected categories tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += ``; tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += ``; tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `

	2020	2019	Chg
Days	${format.abs(v['days'])}	${(v.change.prev) ? format.abs(v.change['days']) : 'N/A'}
Entries
Total	${format.abs(v['entriesTotal'])}	${(v.change.prev) ? format.abs(v.change['entriesTotal']) : 'N/A'}	${(v.change.prev) ? format.chg(v.change['entriesTotalChg']) : 'N/A'}
Daily Avg	${format.avg(v['entriesAvg'])}	${(v.change.prev) ? format.avg(v.change['entriesAvg']) : 'N/A'}	${(v.change.prev) ? format.chg(v.change['entriesAvgChg']) : 'N/A'}
Exits
Total	${format.abs(v['exitsTotal'])}	${(v.change.prev) ? format.abs(v.change['exitsTotal']) : 'N/A'}	${(v.change.prev) ? format.chg(v.change['exitsTotalChg']) : 'N/A'}
Daily Avg	${format.avg(v['exitsAvg'])}	${(v.change.prev) ? format.avg(v.change['exitsAvg']) : 'N/A'}	${(v.change.prev) ? format.chg(v.change['exitsAvgChg']) : 'N/A'}

`; // Close Table if (v.change.prev) { // Tooltip Chart let tcWidth = 200; let tcHeight = 50; let tcMargin = {top: 10, right: 0, bottom: 15, left: 36} let tcInnerWidth = tcWidth - tcMargin.left - tcMargin.right; let tcInnerHeight = tcHeight - tcMargin.top - tcMargin.bottom; let tcSvg = d3.create("svg") .attr("viewBox", [0, 0, tcWidth, tcHeight]) .attr("class", "tipChart"); const tcGroup = tcSvg.append("g") .attr("transform", "translate(" + tcMargin.left + "," + tcMargin.top + ")"); let tcVar = 'entriesChgAvgMo' let tcX = d3.scaleTime() .range([0, tcInnerWidth]) .domain(d3.extent(v.data, d => d.date)) let tcY = d3.scaleLinear() .range([tcInnerHeight, 0]) .domain(d3.extent(v.data, d => d[tcVar])) .nice(); let yAxis = d3.axisLeft(tcY).ticks(3).tickFormat(format.pct); let xAxis = d3.axisBottom(tcX).tickSize(3).tickFormat(d => d3.timeFormat("%b")(d).charAt(0)) tcGroup.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${tcInnerHeight})`) .call(xAxis); tcGroup.append("g") .attr("class", "y axis") .call(yAxis); console.log(d3.extent(v.data, d => d[tcVar])) tcGroup.append("line") .attr("class", "baseline") .attr('x1', 0) .attr('x2', tcInnerWidth) .attr('y1', tcY(0)) .attr('y2', tcY(0)) .attr('stroke-dasharray', '5,5') .style('stroke', '#CCC'); let tclineEntries = d3.line() .defined(d => !isNaN(d[tcVar])) .x(d => tcX(d.date)) .y(d => tcY(d[tcVar])) tcGroup.append("path") .datum(v.data) .attr("fill", "none") .attr("stroke", "rgb(51,163,220)") .attr("stroke-width", 1) .attr("d", tclineEntries) tipContent += `` tipContent += ``; tipContent += `

Daily Change over 2019 (Entries)

${tcSvg.node().outerHTML}

`; // Close Table } } else { // tipContent += `Data not found` } //console.log(event) 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 stationMouseOut(event, d){ d3.select(event.target).style("cursor", "default"); mapTip.style("display", "none"); // Hide toolTip d3.select(`.station-sub-${d['complex_id']} .bubble`) .transition() .attr('stroke', '#FFF') .attr('stroke-width', 0); } container.updateView = function(variable) { console.log('UPDATE VIEW') // Options Settings // let options = mapSelect.rVal.split('-');variable let options = variable.rVal.split('-'); // variable let change = (options[0] === 'chg') ? true : false; let selectVal = options[1]; let rMaxSize = (change) ? 12 : 12; // if showing change use larger radius Max let r = d3.scaleSqrt() .range([1, rMaxSize]) if (change) { r.domain([0, d3.max(tsStationDaily2020.set, d => Math.abs(d.change[selectVal]))]) } else { r.domain([0, d3.max(tsStationDaily2020.set, d => Math.abs(d[selectVal]))]) } let color = d3.scaleQuantize() //let color = d3.scaleLinear() .range(colorsStations) if (change) { color.domain(d3.extent(tsStationDaily2020.set, d => d.change[selectVal])) } else { color.domain([0, d3.max(tsStationDaily2020.set, d => Math.abs(d[selectVal]))]) } tsStationDaily2020.set.forEach(d => { let value = (change) ? d.change[selectVal] : d[selectVal]; d3.select(`#${vizId} .station-sub-${d['complex_id']} .bubble`) .transition().duration(1000) .attr('r', isNum(value) ? r(Math.abs(value)) : 2) //.attr('fill', (value > 0) ? 'rgb(0, 152, 228)' : 'rgb(255, 0, 0)'); .attr('fill', (value > 0) ? 'rgb(0, 152, 228)' : color(value)); d3.select(`#${vizId} .station-sub-${d['complex_id']} .point`) .transition().duration(1000) .attr('fill', () => { if (change) { return (change) ? '#333' : 'orange'; } else { return '#333'; } }) }) } yield container; }34:T1415,function summarizeStationDaily(dataset, compare) { // The Summary Uses Several Standard Variable Codes // MAvg = Moving Average // AvgMo = Average Month of the Previous Year // AvgMoDT = Average Month of the Previous Year by Day Type (Weekday/Weekend) // As an example 'entriesMAvgChgAvgMo' = Entries Moving Average Change Over the Average Month of the previous year 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 }35:T8db,tsGeographic2020 = { let result = {} result.set = tsGeoJoins.geoNear.map(d => { let c = {} c.geoid = +d[0] c.data = []; c.stations_id = []; c.alldata = []; d[1].map(g => { let lookup = tsStationDaily2020.map.get(g.complex_id) if (lookup) { c.data.push(lookup[0]) c.stations_id.push(g.complex_id) c.alldata = c.alldata.concat(lookup[0].data); } }) c.stations = c.data.length c.entriesTotal = d3.sum(c.data, d => d.entriesTotal) c.entriesTotalPrev = d3.sum(c.data, d => d.change.entriesTotal) c.entriesTotalChange = (c.entriesTotal - c.entriesTotalPrev)/c.entriesTotalPrev; c.exitsTotal = d3.sum(c.data, d => d.exitsTotal) c.exitsTotalPrev = d3.sum(c.data, d => d.change.exitsTotal) c.exitsTotalChange = (c.exitsTotal - c.exitsTotalPrev)/c.exitsTotalPrev; c.tsByDate = d3.groups(c.alldata, d => d.date.toISOString()).map(function(row) { let n = {} n.date = row[1][0].date n.entries = d3.sum(row[1], d => d.entries) n.exits = d3.sum(row[1], d => d.exits) return n; }) c.tsByDate let n = 7; let movingAvg = movingAverage(c.tsByDate.map(e => e.entries), n) c.tsByDate = c.tsByDate.map((e, i) => { return Object.assign(e, {entriesMAvg: Math.round(movingAvg[i])}) }) // let set = [] // let cols = ['entries', 'exits']; // cols.map(function(id) { // s1.map(function(d) { // let day = d.date.getDay(); // set.push({id, date: d.date, day, val: d[id]}); // }) // }) // //set = d3.group(set, d => d.id); // ds.extVal = d3.extent(set, d => d.val); // ds.extTime = d3.extent(set, d => d.date); // ds.series = d3.group(set, d => d.id) // return ds return c }) // result.set = processed2020.set.map(d => { // complexJoins // return d // }) result.ext = {} result.ext.entriesTotalChange = d3.extent(result.set, d => d.entriesTotalChange); result.ext.exitsTotalChange = d3.extent(result.set, d => d.exitsTotalChange); result.ext.dates = tsStationDaily2020.summary.ext.dates result.map = d3.group(result.set, d => d.geoid); return result }36:Tc52,// In process function for drawing tooltip charts // let tipChartVar = 'entriesMAvg' // let extDates = tsGeographic2020.ext.dates // // let tcInfo = { // // 'startMAvgChgAvgMo': { // // 'label': `2020 Daily Trips Change
7-Day Avg over 2019 Same Month Avg` // // }, // // 'startcount': { // // 'label': `2020 Daily Trip Starts` // // } // // } // let tipChart = makeTipChart(tipChartVar, v.tsByDate, extDates, false) // console.log({tipChart}) // if(tipChart.show) { // tipContent += `` // tipContent += ``; // tipContent += `

Daily Entries (7-Day Avg)

${tipChart.svg}

`; // Close Table // } function makeTipChart(cVar, cData, cExtDates, cPrev) { console.log({cVar, cData, cExtDates, cPrev}); let chart = {} let cIsChg = cVar.toLowerCase().includes("chg"); let cVarExt = d3.extent(cData, d => d[cVar]); let cIsExtent = (isNum(cVarExt[0]) && isNum(cVarExt[1])) console.log({cIsChg, cVarExt, cIsExtent}); chart.show = ((cIsChg && cPrev && cIsExtent ) || (!cIsChg && cIsExtent)) console.log(chart.show); if (chart.show) { let tcWidth = 200; let tcHeight = 64; let tcMargin = {top: 10, right: 36, bottom: 15, left: 0} let tcInnerWidth = tcWidth - tcMargin.left - tcMargin.right; let tcInnerHeight = tcHeight - tcMargin.top - tcMargin.bottom; let tcSvg = d3.create("svg") .attr("viewBox", [0, 0, tcWidth, tcHeight]) .attr("class", "tipChart"); const tcGroup = tcSvg.append("g") .attr("transform", "translate(" + tcMargin.left + "," + tcMargin.top + ")"); let tcX = d3.scaleTime() .range([0, tcInnerWidth]) .domain(cExtDates) let tcY = d3.scaleLinear() .range([tcInnerHeight, 0]) .domain((cIsChg) ? cVarExt : [0, cVarExt[1]]) .nice(); let yAxis = d3.axisRight(tcY).ticks(3).tickFormat((cIsChg) ? format.pct : format.abs); let xAxis = d3.axisBottom(tcX).tickSize(3).tickFormat(d => d3.timeFormat("%b")(d).charAt(0)) tcGroup.append("g") .attr("class", "y axis") .attr("transform", `translate(${tcInnerWidth}, 0)`) .call(yAxis); tcGroup.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${tcInnerHeight})`) .call(xAxis); if (!cIsChg || (cIsChg && cVarExt[0] < 0)) { tcGroup.append("line") .attr("class", "baseline") .attr('x1', 0) .attr('x2', tcInnerWidth) .attr('y1', tcY(0)) .attr('y2', tcY(0)) .attr('stroke-dasharray', (cIsChg) ? '5,5' : '0') .style('stroke', (cIsChg) ? '#AAA' : '#CCC'); } let cLine = d3.line() .defined(d => isNum(d[cVar])) .x(d => tcX(d.date)) .y(d => tcY(d[cVar])) tcGroup.append("path") .datum(cData) .attr("fill", "none") .attr("stroke", "rgb(51,163,220)") .attr("stroke-width", 1) .attr("d", cLine) chart.svg = tcSvg.node().outerHTML } // END IF return chart } 37:T816,html``38:T407,html` `39:[] 2f:{"title":"NYC Transit Turnstile Change, 2019-2020","cells":[{"id":0,"value":"md`# NYC Transit Turnstile Change, 2019-2020\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/) to show 2020 changes over 2019. The turnstile data represents entries and exits for station complexes across New York City and extending into New Jersey for PATH. While the data doesn't represent the offical ridership, it should trend with agency adjusted numbers, and can be viewed daily.\n\nCharts of the systemwide downturn over the course of 2020 have been produced but I was interested in exploring how evenly those changes were distributed across the city base on 2019 numbers, espeically with the ongoing risk of service cuts and fare increases as the city recovers.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`#### //////////// Preliminary ////////////\nThe summary is incomplete becuase the last six days of 2020 have not yet been added yet to the original dataset. This will get updated once that happens but it shouldn't have a significant impact on the current change as \nAlso I'm still refinining some functionality and design and interested in feedback or ideas around revisions and other useful views. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"md`## Geographic Change\nThis map was an experiment in summarizing the station change to a larger geography, but one that had more detail than the NYC Borughts which more easily availble. It also needed to cover the fact that the data includes PATH which runs into New Jersey, so the result blends New York City Community Districts and NJ Municipalities. Data is aggregated for any station that is within a quarter mile and any station that falls near multiple geographics is counted in each.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`### Change in Annual Turnstile Entry Counts Aggregated by Adjoining NYC Community District or NJ Municipality, 2019–2020\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"md`#### Issues / Future Improvements\n+ The Jamaica Airtrain Stop should probably be linked to the JFK JIA, but the source dataset is currently missing the 2019 data so the change can't be computed anyway.\n+ The reason the geographic layer includes all of the Hudson County (NJ) Municipalities is that I was hoping to to inlcude the Hudson Bergen Light Rails in future version, but don't currently know if the data is available.\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"md`## Change by Station`","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"md`\nIn addition to the geographic aggregate I also created a view of turnstile count changes at the station level.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`### Annual Turnstile Counts by Individual Station Complex, 2019–2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"viewof mapSelect = inputsGroup(\n[\n [\n select({\n // title: 'Order by',\n description: 'Bubble Value',\n options: [\n { value: 'chg-entriesAvgChg', label: 'Avg Daily Entries (Change over 2019)'},\n { value: 'chg-exitsAvgChg', label: 'Avg Daily Exits (Change over 2019)'},\n //{ value: 'chg-entriesTotal', label: 'Total Entries 2020'},\n { value: 'abs-entriesAvg', label: 'Daily Avg Entries 2020'},\n ],\n value: 'chg-entriesAvgChg' // set initial value\n })\n ]\n],\n \n[\n ['rVal']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`## Data Processing\nThese visualizations use data from this [base notebook](https://observablehq.com/@benoldenburg/nyc-transit-turnstile-data) which is based on 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/). The parsed turnstile counts are imported into this notebook an summarized below by station and then again by geography for the aggregate map.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"tsStationDaily2019 = summarizeStationDaily(tsParsed2019)","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"tsStationDaily2020 = summarizeStationDaily(tsParsed2020, tsStationDaily2019)","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`### Components and Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"station_map.updateView && station_map.updateView(mapSelect) // this cell is what is necessary to let the leaflet map update with out reloading the full cell","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"// Route Styles and Data Dictionary","pinned":true,"hidden":false,"mode":"ojs"},{"id":363,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"routesDict = ({\n'NE': {label: 'Newark–Exchange', abbr: 'EWR-EXC'},\n'NW': {label: 'Newark–WTC', abbr: 'EWR-WTC'},\n'HW': {label: 'Hoboken–WTC', abbr: 'HOB-WTC'},\n'H3': {label: 'Hoboken–33 St', abbr: 'HOB-33S'},\n'J3': {label: 'Journal–33 St', abbr: 'JSQ-33S'},\n'JH': {label: 'Journal–33 St (Hob)', abbr: 'JSQ-33S (HOB)'},\n\n\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"// Scale Color ","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"colorsArea = [\"#bd0026\",\"#ffffb2\"] // ['#C80004','#FEBA05']","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"colorsStations = colorSets['a']","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"colorSets = ({\n'a': ['#bd0026','#f03b20','#fd8d3c','#fecc5c','#ffffb2'], // map\n'b': [\"#7f0000\",\"#b30000\",\"#d7301f\",\"#ef6548\",\"#fc8d59\",\"#fdbb84\",\"#fdd49e\"],\n'c': [\"#bd0026\", \"#f03b20\", \"#fd8d3c\", \"#feb24c\", \"#fed976\",\"#ffffb2\"],\n'e': [\"#662506\",\"#993404\",\"#cc4c02\",\"#ec7014\",\"#fe9929\",\"#fec44f\",\"#fee391\"],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"// Tooltip","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"mapTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"mapTip\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"// Formatting","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"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":19,"value":"function isNum(n) {\n return !isNaN(parseFloat(n)) && isFinite(n) && n !== \"\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"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":27,"value":"md`### References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"import {tsParsed2019, tsParsed2020, tsStationComplexes, tsRoutes, tsGeoJoins, tsGeoInfo, tsGeoTopo, shoreline} from '@benoldenburg/nyc-transit-turnstile-data'","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import {inputsGroup, chartTip} from '@benoldenburg/mta-daily-ridership-recovery'","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"import {select, slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"import {legend} from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"md`### JS Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"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":8,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\") // Load D3","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}