2a:null 2b:["$","title",null,{"children":"NYC Subway Turnstile Counts on Qri | Ben Oldenburg | Observable"}] 30:T844,request = { // Use Observable mutable values to show a status message up top while loading mutable loadStatus = md`

${loadVisual.loading}Loading Data

`; let source; let error_status = false; let error_res = {}; let ts2020 = {} // 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 ts2020.info = await d3.json("https://api.qri.cloud/get/nyc-transit-data/turnstile_daily_counts_2020").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) { ts2020.data = await d3.csv("https://api.qri.cloud/get/nyc-transit-data/turnstile_daily_counts_2020/body.csv") .catch(function(error){ console.log(error); error_status = true; error_res['data'] = error; }) } // If local mode set or if remote access error load local copy of data if (error_status === true || loader === 'local') { // access remote data file ts2020.info = await FileAttachment("nyc-transit-data-turnstile_daily_counts_2020.json").json() ts2020.data = await FileAttachment("nyc-transit-data-turnstile_daily_counts_2020.csv").csv() source = "Local" let error_note = ``; if (error_status === true) { error_note = `(Remote Access Error)`; } // Update mutable to success state mutable loadStatus = md`

${loadVisual.loaded_local}Local Data Loaded ${error_note}

`; } else { source = "Remote" // Update mutable to success state mutable loadStatus = md`

${await FileAttachment("Success-Icon-128.gif").image()}

Live Qri Data Loaded

`; } return {source, error_status, error_res, ts2020} }31:T2849,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 = ['entries','exits'] // New logic for checkbox set // let filtered = data.set.filter(d => selectGroup.includes(d.id)); // let selectExt = d3.extent(filtered, d => d[selectType]); // let selectSeries = d3.group(filtered, d => d.id); // let filtered = data.series let selectExt = data.extVal let selectSeries = data.series 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('Total Entries / Exits') .attr("text-anchor", "middle") .attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#555') .style('font-size', '.85em'); // Source group.append("text") .attr("class", "graph-source") .text('Data: NYC Subway Turnstile Counts 2020 on Qri') .attr("text-anchor", "left") .attr("x", 0) .attr("y", innerHeight + margin.bottom - 18) .style('fill', '#999') .style('font-size', '.60em') .style('font-family', 'sans-serif'); if (selectGroup.length === 0){ group.append("text") .text('Please select a transit mode above to display') .attr("text-anchor", "middle") .attr("class", "notification") .attr("x", innerWidth/2) .attr("y", innerHeight/2) .style('fill', '#999') .style('font-size', '.85em'); } let x = d3.scaleTime() .range([0, width - margin.left - margin.right]) .domain(data.extDates) let y = d3.scaleLinear() .range([innerHeight, 0]) //.domain([0, selectExt[1]]) .domain([0, selectExt[1]]) .nice(); let xAxis = d3.axisBottom(x); let yAxis = d3.axisLeft(y); if (width < 700) { xAxis.tickFormat(d3.timeFormat("%b")); } group.append("line") .attr("class", "y-highlight") .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', innerHeight) .style('stroke', '#999') .style('opacity', 0); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis); group.append("g") .attr("class", "y axis") .call(yAxis); let line = d3.line() .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) }) // Timeline // drawTimeline(chartid, group, x, innerWidth); // Chart Area Tooltip // Group for line highligt points, sits below tootTip area so point don't interfere with hover let yPoints = group.append("g") .attr('class', 'y-highlight-points') // Chart toolTip Area (defines where hover with be active) let tipArea = group.append("g") .attr("class", "tip-area"); tipArea.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('width', innerWidth) .attr('height', innerHeight) .attr('opacity', 0) .attr('pointer-events', 'all') .on('mousemove', (event) => { // 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 = (data.dates[bisect(data.dates, invert)]); //it would return 2. // let lookup = data.seriesDate.get(hoverDate).sort((a, b) => d3.descending(a[selectType], b[selectType])); // 1) Lookup/Get values by date 2) Filter by selection group 3) Sort by top values let lookup = data.seriesDate.get(hoverDate).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 => !isNaN(d[selectType]) ? 1 : 0) // hide if value is NaN, .append('circle') .attr('r', 3) .attr('fill', d => dataDict[d.id].rgb), update => update .attr('transform', function(d) { return `translate(${x(d.date)},${y(d[selectType])})` }) .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // Custom toolTip Content let tipContent = ``; // Start content string tipContent += ``; // Unused Header // Interate over selected categories lookup.map( d => { tipContent += `` tipContent += `` // tipContent += `` }); tipContent += `

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

`; chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(`${tlDateFormat(hoverDate)}
${tipContent}`); }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip d3.select("#" + chartid + " .y-highlight").style('opacity', 0); // Hide y-highlight line d3.selectAll("#" + chartid + " .y-highlight-point").remove(); // Remove y-highlight points }); return svg.node(); }32:T2849,chartTurnstilePath = { 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-path"; const selectType = "val"; const selectGroup = ['entries','exits'] // New logic for checkbox set // let filtered = data.set.filter(d => selectGroup.includes(d.id)); // let selectExt = d3.extent(filtered, d => d[selectType]); // let selectSeries = d3.group(filtered, d => d.id); // let filtered = data.series let selectExt = dataPath.extVal let selectSeries = dataPath.series 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('Total Entries / Exits') .attr("text-anchor", "middle") .attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#555') .style('font-size', '.85em'); // Source group.append("text") .attr("class", "graph-source") .text('Data: NYC Subway Turnstile Counts 2020 on Qri (includes PATH)') .attr("text-anchor", "left") .attr("x", 0) .attr("y", innerHeight + margin.bottom - 18) .style('fill', '#999') .style('font-size', '.60em') .style('font-family', 'sans-serif'); if (selectGroup.length === 0){ group.append("text") .text('Please select a transit mode above to display') .attr("text-anchor", "middle") .attr("class", "notification") .attr("x", innerWidth/2) .attr("y", innerHeight/2) .style('fill', '#999') .style('font-size', '.85em'); } let x = d3.scaleTime() .range([0, width - margin.left - margin.right]) .domain(data.extDates) let y = d3.scaleLinear() .range([innerHeight, 0]) .domain([0, selectExt[1]]) .nice(); let xAxis = d3.axisBottom(x); let yAxis = d3.axisLeft(y); if (width < 700) { xAxis.tickFormat(d3.timeFormat("%b")); } group.append("line") .attr("class", "y-highlight") .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', innerHeight) .style('stroke', '#999') .style('opacity', 0); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis); group.append("g") .attr("class", "y axis") .call(yAxis); let line = d3.line() .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) }) // Timeline // drawTimeline(chartid, group, x, innerWidth); // Chart Area Tooltip // Group for line highligt points, sits below tootTip area so point don't interfere with hover let yPoints = group.append("g") .attr('class', 'y-highlight-points') // Chart toolTip Area (defines where hover with be active) let tipArea = group.append("g") .attr("class", "tip-area"); tipArea.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('width', innerWidth) .attr('height', innerHeight) .attr('opacity', 0) .attr('pointer-events', 'all') .on('mousemove', (event) => { // 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 = (dataPath.dates[bisect(dataPath.dates, invert)]); //it would return 2. // let lookup = data.seriesDate.get(hoverDate).sort((a, b) => d3.descending(a[selectType], b[selectType])); // 1) Lookup/Get values by date 2) Filter by selection group 3) Sort by top values let lookup = dataPath.seriesDate.get(hoverDate).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 => !isNaN(d[selectType]) ? 1 : 0) // hide if value is NaN, .append('circle') .attr('r', 3) .attr('fill', d => dataDict[d.id].rgb), update => update .attr('transform', function(d) { return `translate(${x(d.date)},${y(d[selectType])})` }) .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // Custom toolTip Content let tipContent = ``; // Start content string tipContent += ``; // Unused Header // Interate over selected categories lookup.map( d => { tipContent += `` tipContent += `` // tipContent += `` }); tipContent += `

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

`; chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(`${tlDateFormat(hoverDate)}
${tipContent}`); }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip d3.select("#" + chartid + " .y-highlight").style('opacity', 0); // Hide y-highlight line d3.selectAll("#" + chartid + " .y-highlight-point").remove(); // Remove y-highlight points }); return svg.node(); }33:Tc4e,html` `34:[{"id":"2edc66966fa850d18583548436678c7e671c39a41cd67888e395d223b8d5eb7d67dc52223980d10e7a823a561698cea0e761c6c2c9cee1a5bd320e31b2412586","href":"https://static.observableusercontent.com/files/2edc66966fa850d18583548436678c7e671c39a41cd67888e395d223b8d5eb7d67dc52223980d10e7a823a561698cea0e761c6c2c9cee1a5bd320e31b2412586","name":"nyc-transit-data-turnstile_daily_counts_2020.json","type":"application/json","lastModified":1603165859475.847,"size":6636},{"id":"bfda08ac4c34b9b8edfdfcc538d00feae8103e3e1a96e6700b12b6ef4f475bbb33ea6eed8f0f86b029c1999a3ab67ab0bb5358fbe9fca6223904796a5cb02d98","href":"https://static.observableusercontent.com/files/bfda08ac4c34b9b8edfdfcc538d00feae8103e3e1a96e6700b12b6ef4f475bbb33ea6eed8f0f86b029c1999a3ab67ab0bb5358fbe9fca6223904796a5cb02d98","name":"nyc-transit-data-turnstile_daily_counts_2020.csv","type":"text/csv","lastModified":1603153447788.598,"size":11179782},{"id":"8e1c8e2f5f2b0a83812633f76144fed25d8a37b92fe98133b3aaeea4f497f2193844933d951c93b3ee1d3a8238ea482c42cbc75f69dcd33ba1580fc405c5bae4","href":"https://static.observableusercontent.com/files/8e1c8e2f5f2b0a83812633f76144fed25d8a37b92fe98133b3aaeea4f497f2193844933d951c93b3ee1d3a8238ea482c42cbc75f69dcd33ba1580fc405c5bae4","name":"Success-Icon-128.gif","type":"image/gif","lastModified":1603311668590.239,"size":39534}] 2e:{"id":"22355965448a7710","slug":"nyc-subway-turnstile-counts-on-qri","title":"NYC Subway Turnstile Counts on Qri","thumbnail":"4698da00c261ccb9441ba1e172df0e86ddc1d24ead317a4e0b4b96e8b74f080c","access_level":"public","create_time":"$D2020-10-16T18:04:25.939Z","update_time":"$D2021-01-26T04:41:31.874Z","view_time":null,"first_public_time":"$D2020-10-21T20:29:43.759Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"113f2867d5a070ee","login":"benoldenburg","name":"Ben Oldenburg","avatar_url":"https://avatars-next.observableusercontent.com/8a88f07aaf262f0c6598eefd37083f84a94a8d06481968e87848779677f30fd6","tier":"starter_2024"},"version":1019,"publish_version":1019,"role":null,"authored":false,"authors":[{"type":"individual","id":"e38da6b448cb1251","login":"benoldenburg","name":"Ben Oldenburg","avatar_url":"https://avatars-next.observableusercontent.com/8a88f07aaf262f0c6598eefd37083f84a94a8d06481968e87848779677f30fd6","tier":null}],"members":[{"type":"individual","id":"e38da6b448cb1251","login":"benoldenburg","name":"Ben Oldenburg","avatar_url":"https://avatars-next.observableusercontent.com/8a88f07aaf262f0c6598eefd37083f84a94a8d06481968e87848779677f30fd6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"af69dbb5fba7adce","slug":"transit","title":"Transit","owner":{"id":"113f2867d5a070ee","login":"benoldenburg","name":"Ben Oldenburg"}},"type":"notebook","body":{"title":"NYC Subway Turnstile Counts on Qri","cells":[{"id":0,"value":"md`# NYC Subway Turnstile Counts on Qri\nThe is an example that tests loading a larger [Qri](https://qri.cloud/) dataset into observable. Since the platform allows versioning and metadata, datasets like the [NYC Subway Turnstile Counts - 2020](https://qri.cloud/nyc-transit-data/turnstile_daily_counts_2020) by [Chris Whong](https://twitter.com/chris_whong) which are updated on a regular basis, can always be loaded with the latest updates and referenceable commit information. The draft loading pattern also can switch to local observable attachments if and error or just for development purposes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":931,"value":"md`#### //////////// Work in progress ////////////\nStill testing the live data link and refining how this loading pattern works. Aiming to have the code better respond to load errors and have a timeout set so it switces to the local code it the load takes too long in addition to when there is an error.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":677,"value":"// Manual switch for Remote Qri Data vs Local Attachments for Backup/Dev","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":392,"value":"viewof loader = select({\n description: 'Data Access Settings',\n options: [\n { value: 'remote', label: 'Access Live Qri Data (Remote)'},\n { value: 'local', label: 'Access Attachment (Local / Dev Mode)'},\n ],\n value: 'remote' // set the default value\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"// Load Status","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"mutable loadStatus = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":387,"value":"// Data Request Object >> Feeds into the date processing section below","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"commit = {\n return md`#### Last Commit: ${request.ts2020.info.data.name} (${request.source})\n Time: ${new Date(request.ts2020.info.data.dataset.commit.timestamp)}
\n Title: ${request.ts2020.info.data.dataset.commit.title}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":885,"value":"// Charts","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":785,"value":"md`## NYC Subway Turnstile Counts - 2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":695,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":861,"value":"md`### Notes\n+ Details on the sources, methodology, and frequency of updates are available on the [qri.cloud](https://qri.cloud/nyc-transit-data/turnstile_daily_counts_2020) page. You can also file issues on, see the history of, and download or find instructions to pull/clone dataset with qri desktop/cli. \n+ The dataset includes the Roosevelt Island Tram turnstile data which use MTA Metrocards and is included in the daily summaries for the subway system.\n+ The dataset also includes the daily turnstile numbers for the Port Authority PATH system which is shown separately in the chart below.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":832,"value":"md`## PATH Turnstile Counts - 2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":824,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":765,"value":"md`### Data Processing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":751,"value":"// Date object to format the chart series","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":818,"value":"dataPath = {\n\n let result = {}\n \n let filtered = dataParsed.filter(d => d.division === 'PTH')\n \n let s1 = d3.groups(filtered, d => d.dateiso).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 }).sort((a, b) => d3.ascending(a.date, b.date))\n \n let set = []\n let cols = ['exits','entries'];\n cols.map(function(id) {\n s1.map(function(d) {\n let day = d.date.getDay();\n set.push({id, date: d.date, day, val: d[id]});\n })\n })\n //set = d3.group(set, d => d.id);\n \n result.extVal = d3.extent(set, d => d.val);\n result.extDates = d3.extent(set, d => d.date);\n result.series = d3.group(set, d => d.id)\n result.seriesDate = d3.group(set, d => d.date)\n result.dates = Array.from(result.seriesDate).map(d => d[0]);\n \n return result\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1011,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":657,"value":"data = {\n\n let result = {}\n \n let subways = dataParsed.filter(d => d.division !== 'PTH')\n //let subways = dataParsed;\n let path = dataParsed.filter(d => d.division === 'PTH')\n \n let s1 = d3.groups(subways, d => d.dateiso).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 }).sort((a, b) => d3.ascending(a.date, b.date))\n \n let set = []\n let cols = ['exits','entries'];\n cols.map(function(id) {\n s1.map(function(d) {\n let day = d.date.getDay();\n set.push({id, date: d.date, day, val: d[id]});\n })\n })\n //set = d3.group(set, d => d.id);\n \n result.extVal = d3.extent(set, d => d.val);\n result.extDates = d3.extent(set, d => d.date);\n result.series = d3.group(set, d => d.id)\n result.seriesDate = d3.group(set, d => d.date)\n result.dates = Array.from(result.seriesDate).map(d => d[0]);\n \n return result\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":772,"value":"// Parse Raw Data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"dataParsed = request.ts2020.data.map(d => {\n return {\n date: parseDate(d.date),\n division: d.division,\n dateiso: parseDate(d.date).toISOString(),\n complex_id: d.complex_id,\n entries: +d.entries,\n exits: +d.exits\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":768,"value":"// Data Dictionary to lookup legend labels and colors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":706,"value":"dataDict = ({\n'entries': {\n 'name': 'Entries',\n 'rgb': 'rgb(51,163,220)'\n},\n'exits': {\n 'name': 'Exits',\n 'rgb': 'rgb(249,157,62)'\n}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":761,"value":"// Formats","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":697,"value":"tlDateFormat = d3.timeFormat(\"%a, %b %e\"); // Timeline Tooltip Date Format","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":643,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":770,"value":"formatValue = d3.format(\",.0f\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":777,"value":"md`### Components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":715,"value":"chartTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip chartTip\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":716,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":283,"value":"md`### Loading Status Visuals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"loadVisual = ({\n 'loading': `

`,\n 'loaded': ``,\n 'loaded_local': ``\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":564,"value":"html`

${loadVisual.loading}Loading Data

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":170,"value":"html`

${loadVisual.loaded}Live Data Loaded

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":417,"value":"html`

${loadVisual.loaded_local}Local Data Loaded

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":557,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":957,"value":"md`

${await FileAttachment(\"Success-Icon-128.gif\").image()}

Live Qri Data Loaded

_{Custom sucess state only for this Qri example}`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":897,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":573,"value":"md`### Referenced Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":394,"value":"import {select, slider, checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\") // Load D3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"