2b:null 2c:["$","title",null,{"children":"NYC Transit Trends | Jacqueline Cannon Allen | Observable"}] 31:T2ad1,viewof m3 = { var container = html`

` var content = html` ${container}

${subway_lines}

${color_encodings}

${date_text(year_t,0)}

Use Slider to Change Date (or select a point from above!):

a space

${toggle_3d}

a space

` yield content var map = new mapboxgl.Map({ container: 'map', center: [-73.986753, 40.734693], // nyc [ -73.79, 40.744693] zoom: 10, maxZoom: 18.5, // how close you can zoom in minZoom: 9, // how far out you can zoom out style: 'mapbox://styles/mapbox/dark-v9', }); var nav = new mapboxgl.NavigationControl(); map.addControl(nav, 'bottom-left'); map.on('load', function() { // Subway LINES var url = 'https://gist.githubusercontent.com/the-observables/7fd9846f47fad8d98a6bafbb91704c85/raw/fbbe2a2270f9f1d6a8e7d73500094c81839e7cd3/subway-lines.geojson'; map.addSource('subway_line_data', { type: 'geojson', data: url}); map.addLayer({ 'id': 'subway_lines', 'type': 'line', 'source': 'subway_line_data', 'paint': { // want: 'line-color': palette.get(color(['get', 'rt_symbol'])), 'line-color': [ 'match', ['get', 'rt_symbol'], // IND Eighth Avenue Line: Dark Blue (A-C-E) 'A', '#0096e5', 'C', '#0096e5', 'E', '#0096e5', // IND Sixth Avenue Line: Orange (B-D-F-M) 'B', '#ff9600', 'D', '#ff9600', 'F', '#ff9600','M', '#ff9600', // IND Crosstown Line: Light Green or "Lime" (G) 'G', '#80b62d', // BMT Canarsie Line: Light Gray (L) 'L', '#bebebe', // BMT Nassau Street Line: Brown (J-Z) 'J', '#b47e1e', 'Z', '#b47e1e', // BMT Broadway Line: Yellow (N-Q-R-W) 'N', '#ffd200', 'Q', '#ffd200', 'R', '#ffd200', 'W', '#ffd200', // IRT Broadway – Seventh Avenue Line: Red (1-2-3) '1', '#ff553c', '2', '#ff553c', '3', '#ff553c', // IRT Lexington Avenue Line: Green (4-5-6) '4', '#00b95b', '5', '#00b95b', '6', '#00b95b', // IRT Flushing Line: Purple (7) '7', '#c373d2', // Shuttles: Gray 'S', '#9c9d9f', // Other: '#ccc' ], 'line-width': 2, 'line-opacity': 0.75 } }); var in_3D = false var filterDate = ['==', ['string', ['get', 'date']], year_t+'-01-01'] // STATIONS map.addSource('subway_station_data', { type: 'geojson', data: data[year_t] }); map.addSource('subway_station_data_3D', { type: 'geojson', data: data_3d[year_t] }); //3D map.addLayer({ 'id': '3d-points', 'source': 'subway_station_data_3D', 'type': 'fill-extrusion', 'paint': { 'fill-extrusion-color': [ 'interpolate', ['linear'], ['to-number',['get', 'percent_entries']], 25, 'red',50, 'white', 75, 'blue' ], 'fill-extrusion-height': [ 'interpolate', ['linear'], ['to-number',['get', 'daily_tot']], 0, 2, 224240, 10000 ], 'fill-extrusion-opacity': 0.6 }, filter: ['all', filterDate], filter: ['all', in_3D] }); map.addLayer({ 'id': 'station', 'type': 'circle', 'source': 'subway_station_data', 'paint': { 'circle-color': [ // shade according to percentage of volume that is exit vs. entry 'interpolate', ['linear'], ['to-number',['get', 'percent_entries']], 25, 'red',50, 'white', 75, 'blue' ], 'circle-radius': [ 'interpolate', ['linear'], ['to-number',['get', 'daily_tot']], 0, 2, 224240, 55 ], /* ['to-number',['get', 'percent_entries']], 0, '#ff0000', 50, 'white', 100, 'blue' */ 'circle-stroke-color': [ //#00FFFF /*'case', ['boolean', ['feature-state', 'hover'], false ],*/ 'interpolate', ['linear'], ['to-number',['get', 'percent_entries']], 0, '#ff0000', 50, 'white', 100, 'blue' // '#00FFFF' ], 'circle-stroke-width': 1, 'circle-opacity': 0.8 }, filter: ['all', filterDate], }); // SELECTION LAYER - Pseudo Voroni: increase region user can click to show pop-up map.addLayer({ 'id': 'select-station-region', 'type': 'circle', 'source': 'subway_station_data', 'paint': { 'circle-color': 'rgba(0,0,0,0)', // transparent 'circle-stroke-color': 'rgba(0,0,0,0)', 'circle-radius': [ 'interpolate', ['linear'], ['to-number',['get', 'daily_tot']], 0, 8, 224240, 55 ], } }); // FILTERS document.getElementById('yr').addEventListener('input', function(e) { var year=e.target.value //resetting to same date var slider_val = document.getElementById('slider').value if (document.getElementById('slider').value > dates[year].length-1){ slider_val=dates[year].length-1 } var new_date_selection = dates[year][slider_val] document.getElementById('active-day').innerText = date_text(year,slider_val) //rescaling document.getElementById('slider').max=dates[year].length-1 filterDate = ['==', ['string', ['get', 'date']], new_date_selection] map.getSource('subway_station_data').setData(data[year]) map.getSource('subway_station_data_3D').setData(data_3d[year]) if(in_3D){ map.setFilter('3d-points', ['all', filterDate]) map.setFilter('station', ['all', !in_3D]) }else{ map.setFilter('station', ['all', filterDate]) map.setFilter('3d-points', ['all', in_3D]) } }); document.getElementById('3D').addEventListener('input', function(e) { in_3D=!in_3D if(in_3D){ map.setPitch(60) map.setFilter('3d-points', ['all', filterDate]) map.setFilter('station', ['all', !in_3D]) }else{ map.setPitch(0) map.setFilter('station', ['all', filterDate]) map.setFilter('3d-points', ['all', in_3D]) } }); var popup_subway; var popup_train; function slider_change(e) { var v = parseInt(e.target.value) var new_date_selection = dates[year_t][v] filterDate = ['==', ['string', ['get', 'date']], new_date_selection] if(in_3D){ map.setFilter('3d-points', ['all', filterDate]) map.setFilter('station', ['all', !in_3D]) }else{ map.setFilter('station', ['all', filterDate]) map.setFilter('3d-points', ['all', in_3D]) } document.getElementById('active-day').innerText = date_text(year_t,v) if (typeof popup_subway != "undefined"){ popup_subway.remove();} if (typeof popup_train != "undefined"){ popup_train.remove(); } // switch highlighted point d3.select('#time_series').selectAll("circle") .data(a) .attr("stroke", "rgb(25,26,26)") // purple between the exit red, entry-blue .style("stroke-width", 1.5) .attr("r", 3) .attr("fill","none") d3.select('#time_series').selectAll("circle") .data(a) // old blue:#01B8E0 .filter(function(d) {return (parseInt(d.index)-1)%7 == parseInt(e.target.value)%7; }) .attr("stroke", "#03B1C6") // same day of the week: darker blue outline .style("stroke-width", 1.5) .attr("r", 3) .attr("fill","#1EE0FF") // same day of the week: lighter blue center (same as selected day) d3.select('#time_series').selectAll("circle") .data(a) .filter(function(d) {return parseInt(d.index)-1 == parseInt(e.target.value); }) .attr("stroke", "#002BFF") // selected/current date: BLUE outline + slightly larger .style("stroke-width", 2.5) .attr("r", 5) .attr("fill","#1EE0FF") // selected/current date: lighter blue center } document.getElementById('time_series_circle').addEventListener('click',function(e) { document.getElementById('slider').value= parseInt(e.target.__data__.index-1) slider_change({"target":{"value":e.target.__data__.index-1}}) }); document.getElementById('slider').addEventListener('input', slider_change) // CLICK POP-UP map.on('click', 'select-station-region', function(e) { var coordinates = e.features[0].geometry.coordinates.slice(); var station_properties = e.features[0].properties; if(station_properties.daytime_routes != ""){ popup_subway = new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(build_subway_sign(station_properties)) .addTo(map); }else{ popup_train = new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(`

Train Station

${station_properties.station}

`) .addTo(map); } }); //CURSOR CHANGE (hint at functionality) map.on('mouseenter', 'select-station-region', function() { map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'select-station-region', function() { map.getCanvas().style.cursor = ''; }); }); invalidation.then(() => map.remove()) }32:Taad,md` There were several steps to the data analysis and cleaning that we performed. Our first step was simply to obtain the cleaned-up dataset with its inclusion of lat/long coordinates from the writers of the linked Medium article, in lieu of continuing to download and clean the raw weekly datasets from the MTA | Turnstile Data page ourselves. From there, we added two columns: total volume of each station (exits and entries combined) by day, and relative proportion of exits to entries by day. The inclusion of the proportion of entries to exits provided a quick indication of the relative popularity of a staton as a destination vs. starting location, which we then used to color encode circles (blue - all entries, white - even split, red - all exits) while the volume became our source of scaling both the 2D and 3D representations of the data. For our final step before mapping the data, we converted each year’s data file type from csv to geojson for easier use of Mapbox’s point-plotting API. For our second phase of data cleaning and visualizing, we aggregated all of the stations together to see larger trends, such as changes on weekends and on holidays, _citywide_. The scatter plot located just above the map displays this data. From there, we further chose to display dates as “day of the week, month, year” (e.g 01-01-2019 as Wednesday Jan 01) to make weekends vs. weekdays apparent. The current date is then highlighted on the scatterplot, as are all other dates falling on that same day of the week. The user may then directly select any point of interest on the scatterplot (or via the slider below), to refresh the map with a new date’s data. In addition to all of the above, the scatterplots points were combined into a natural fit line through D3, emphasizing the highly cyclical nature of the dataset in terms of citywide turnstile usage on a daily basis; It becomes visually apparent that when there are no major holidays, poor weather conditions, etc., each week follows roughly the same cadence as the one before. We considered adding a polynomial regression line, but felt that the estimations might prove too distracting. Finally, 2D coordinates were transformed into 3D ones via Terraformer to allow for multiple perspectives on the data. The flexibility to toggle between 2D and 3D allows the user to focus on the stats of a single station (in 2D by zooming and clicking on a point) or on broader trends (in 3D by using the time slider to animate the changes in volume over time). The 2D view has the added bonus of emphasizing clusters of entry-heavy stations deeper into the outer boroughs, while 3D separates overlapping stations in midtown manhattan into discrete rectangles. `33:T9c4,md` __Main Features__: 1. __YTD Scattplot__: shows total volume of city wide turnstile usage on a daily basis through out one year - User has the ability to click on any point in the scatterplot to refresh the map with that date's data - The currently selected date (via the slider below) is highlighted on the scatter plot along with all other dates falling on that same day of the year (e.g if the date selected is a Monday in the year 2020, all Mondays in 2020 are highlighted blue) - __Year Selection__: select the year to display from a dropdown - __Daily Slider__: User may drag or click slider to refresh the data on the map - __2D to 3D Map Toggle__: User may switch between 2D and 3D perspective using the radio button above the map - 2D tends to emphasize the dispersion of color (which stations are proportionally more exits than entries, etc...) - 3D tends to emphasize the scale/volume of turnstile activity (specifically, de-clustering midtown manhattan for easier comparison of the busiest stations in the city) - __Map__: an overview of a particular day - Subway stations are plotted and scaled accoridng to their volume of turnstile usage - User may click a station to reveal its name and daytime routes (and exact exit and entry numbers for the current date) - Fully supported zoom, pan, and tilt __Reasoning:__ Clarity was our primary consideration throughout the entire design process. We wanted to make it as simple and quick as possible to identify the main trends and outliers. On its most basic level, this meant scaling stations by the volume of total turnstile exits and entries, and color encoding stations by their proportion of exits to entries. The addition of the scatter plot was our second level of clarifying trends over time. We felt that this allowed the user to get a broader perspective on the dataset while maintaining the ability to dig deeper on particular days or stations through the map. Highlighting all days falling on the same day of the week as the current was also designed to improve the user’s ability to spot true outliers. Rather than comparing a random weekday date to a random weekend date, it is easier for the user to identify and compare Sundays to Sundays, Mondays to Mondays, etc,... The ability to click on a given station and see the lines that run to that station as well as the subway lines on the map itself allow clarity for those who are familiar with the NYC subway system as well as for those who are not. `34:Tc79,function time_series(yr){ var data = a // daily citywide stats var x = d3.scaleLinear() .domain(d3.extent(data, d => parseInt(d.index))) .range([margin.left, width - margin.right]) var y = d3.scaleLinear() .domain(d3.extent(data, d => parseInt(d.daily_total))) .range([height - margin.bottom, margin.top]) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", "time_series"); var line = d3.line() .x(function(d) { return x(d.index); }) // set the x values for the line generator .y(function(d) { return y(d.daily_total); }) // set the y values for the line generator .curve(d3.curveNatural) var scatterplot_line = svg.append("path") .datum(data) .attr("class", "line") .style("stroke-color", "Indigo") .style("stroke-width", .5) .style("stroke-opacity", .85) .style("stroke", "000") .attr("d", line); var y_axis = d3.axisLeft() .scale(y) .tickFormat(d => d/1000000);; // plot all totals var circles = svg.append("g") // purple = #800080; gray = rgb(25,26,26, .8) .attr("stroke", "rgb(25,26,26)") .attr("stroke-width", 1.5) .attr("fill", "none") .attr("id", "time_series_circle") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.index)) .attr("cy", d => y(d.daily_total)) .attr("r", 3) //.attr("transform", transform(d3.zoomIdentity)) .on("mouseover",tooltipMouseOver) .on("mouseout", tooltipMouseOut) .on("mouseleave", function(e) { svg.style("cursor", "default") }) .on("mouseenter", function(e) { svg.style("cursor", "pointer") }) .on("click", function(e) { document.getElementById('slider').value = parseInt(e.target.__data__.index-1) }) // uniquely color specific circles circles .filter(function(d) {return (parseInt(d.index)-1)%7 == 0%7; }) .attr("stroke", "#03B1C6") // same day of the week: darker blue outline .style("stroke-width", 2) .attr("r", 3) .attr("fill","#1EE0FF") // same day of the week: lighter blue center (same as selected day) .filter(function(d) {return parseInt(d.index)-1 == 0; }) // current date (slightly larger) .data(a) .attr("stroke", "#002BFF") .style("stroke-width", 2.5) .attr("r", 5) .attr("fill","#1EE0FF") svg.append("g").attr("transform", "translate(20, 0)").call(y_axis); // ZOOOM /*const gx = svg.append("g"); const gy = svg.append("g"); svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([.25, 5]) .on("zoom", zoomed)); function zoomed() { const {transform} = d3.event; svg.selectAll("circle").attr("transform", d => `translate(${transform.apply(d)})`) svg.selectAll("path").attr("transform", transform) const zy = transform.rescaleY(y).interpolate(d3.interpolateRound); //gx.call(y_axis, zy); //scatterplot_line //y_axis.call(zy); //y_axis.attr("transform", transform); line.attr("transform", transform); }*/ return svg.node() }35:T448,function build_subway_sign(station_properties){ var station = station_properties.station; var lines = station_properties.daytime_routes.split(" "); var subway_sign = "" var lines_html = "" for (let subway_line of lines.values()){ var line_color = palette.get(colors(subway_line)) // background circle var text_color = (colors(subway_line) === "yellow" ? "#000" : "#fff") // black or white var entries = station_properties.entries; var exits = station_properties.exits; lines_html += `

${subway_line}

` } subway_sign = (`

${station}

${lines_html}

Entries: ${numberWithCommas(entries)}

Exits: ${numberWithCommas(exits)}

` ) return subway_sign; }36:T4fa,styles = { const fontFamily = "Helvetica, sans-serif"; const bgColor = "#e2e2e2"; const black = "#000"; const white = "#FFF"; const minWidth = "140px"; return html`` }37:T4ad,md` - Animated Run https://observablehq.com/@pstuffa/visualizing-running-part-v - Map using google maps (subway line and colors) - https://observablehq.com/@the-observables/testing - Draw geojson data - https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers/ - Clustering (general): https://docs.mapbox.com/help/troubleshooting/working-with-large-geojson-data/ - Convert csv data to geojson: https://github.com/mapbox/csv2geojson - Expressions: https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#data-expressions - Map Visualizations: https://docs.mapbox.com/geographic-analytics/overview/visualization/ - ** Clustering Properties: https://blog.mapbox.com/clustering-properties-with-mapbox-and-html-markers-bb353c8662ba - Filtering Map Data by Time through Legend: https://observablehq.com/@benjaminadk/mapbox-tutorials - Using R to Data Wrangle: http://transitdatatoolkit.com/lessons/subway-turnstile-data/ - Formatting Data: https://medium.com/qri-io/taming-the-mtas-unruly-turnstile-data-c945f5f96ba0 - Data-driven sliders: https://observablehq.com/@bumbeishvili/data-driven-range-sliders - auto play slider https://observablehq.com/@mbostock/scrubber#Scrubber `38:[{"id":"dd6e8945b4a3c8dc7a942d4c955b4cae0ca7ea21738631d6f5197cb1ef915c66ba63702d91d101bd71efab1a7c31386775772924bb7dc1d232b3a3d2fbd23fb7","href":"https://static.observableusercontent.com/files/dd6e8945b4a3c8dc7a942d4c955b4cae0ca7ea21738631d6f5197cb1ef915c66ba63702d91d101bd71efab1a7c31386775772924bb7dc1d232b3a3d2fbd23fb7","name":"terraformer.js","type":"application/javascript","lastModified":1587839980581.544,"size":16604}] 2f:{"id":"4dd01a809b1ed819","slug":"nyc-transit-historical-trends","title":"NYC Transit Trends","thumbnail":"c3b4ac9f9b7ec25300eb660565f7170171824750392c24df530268c14090e50b","access_level":"public","create_time":"$D2020-04-09T18:04:26.938Z","update_time":"$D2020-05-16T16:41:53.214Z","view_time":null,"first_public_time":"$D2020-04-09T18:20:42.662Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c34fadd0b81defff","login":"ja3143","name":"Jacqueline Cannon Allen","avatar_url":"https://avatars-next.observableusercontent.com/2173641f38a7c7c191d28ad0c6e706518f680203212be14af71396e74f3b63d4","tier":"starter_2024"},"version":1967,"publish_version":1967,"role":null,"authored":false,"authors":[{"type":"individual","id":"85dde5f87cdbdc25","login":"ja3143","name":"Jacqueline Cannon Allen","avatar_url":"https://avatars-next.observableusercontent.com/2173641f38a7c7c191d28ad0c6e706518f680203212be14af71396e74f3b63d4","tier":null}],"members":[{"type":"individual","id":"85dde5f87cdbdc25","login":"ja3143","name":"Jacqueline Cannon Allen","avatar_url":"https://avatars-next.observableusercontent.com/2173641f38a7c7c191d28ad0c6e706518f680203212be14af71396e74f3b63d4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":49,"collection":null,"type":"notebook","body":{"title":"NYC Transit Trends","cells":[{"id":0,"value":"md`# NYC Transit Trends`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`by Jacqueline Allen, Alexander Kutner, Catherine Chu, Montserrat Pladevall\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1386,"value":"md`\n## MTA - Background Information\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1385,"value":"md`\nWhy this project?\n\nThe [Metropolitan Transportation Authority (MTA)](https://new.mta.info) provides transportation to millions of people each day. Usage of that transportation is tracked through weekly blocks in [MTA's Turnstile Data](http://web.mta.info/developers/turnstile.html), which helps the MTA time repairs, improve service, and identify problems. \n\nUnruly data organization, however, from inconsistent station names across docs to glitches in the turnstile tracking system, renders efffective use of this dataset a frustrating and inaccessible task for developers. \n\nEnter our project!\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"md` \n# Our Final Visualization \n\n---\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"viewof year_t = {\n const select = html``;\n Promises.delay(4).then(() => {\n select.dispatchEvent(new CustomEvent(\"input_year\"));\n });\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"time_series(year_t)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1383,"value":"md` ---\n# The Final Report:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1863,"value":"md`## Project Goals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1759,"value":"md` \n\nThis project seeks to cleanly and simply show the volume of turnstile usage over time and location, emphasizing the __typical cadence of user turnstile usage__ against __disruptive micro and macro events__ for that usage.\n\nWith a typical cadence established, the impact of any one holiday, weather condition, or global health pandemic becomes immediately apparant from both a daily and a yearly perspective, as the dispersion and scale of exits and entries citywide are color-encoded and then animated over both time scales.\n\nWe sought to provide __easy__ and __readily available__ answers for questions such as - which stations are the busiest? Are there some stations that are more popular destinations (more exits) than starts (more entries)? What are the relative impacts of holidays on turnstile usage? Are there any strong seasonal or weekly trends?\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1872,"value":"md` ## Related Work`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1875,"value":"md` Fortunately for us, after a week of attempting to clean the data ourselves we found [Taming the MTA’s Unruly Turnstile Data](https://medium.com/qri-io/taming-the-mtas-unruly-turnstile-data-c945f5f96ba0), a [Medium](https://medium.com) article in which the author [Chris Whong](https://medium.com/@chris.m.whong) not only aggregated turnstile activity by day, but also mapped stations to locations.\n\nThis find was critical. All prior attempts to properly match [MTA provided locations](http://web.mta.info/developers/data/nyct/subway/Stations.csv) to our main dataset of station names and aggregated daily volumes (raw source [here](http://web.mta.info/developers/turnstile.html)) proved nightmarish; Files with the turnstile logs did not carry any geographic data and subway station names were inconsistent. By providing a usable dataset, as well as method to create usable versions of other years, this article faciliated the development of our final visualization. `\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1382,"value":"md` ## Methodology `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1947,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1789,"value":"md` ## Design - Overview `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1911,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1792,"value":"md` ## Implementation `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1938,"value":"md`\nWe used Github’s large file storage (LFS) to host our data as well as terraformer.js to create the 3d plots. We tried uploading the data directly to observable, but discovered that the files were too large. Even after dividing into years, observable and github would not allow the files to be hosted directly. \n\nWhile we considered hosting a SQL server of our own to service the visualization, Github LFS allowed us to upload and store our data despite slight performance issues. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1794,"value":"md ` ## Discussion `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1952,"value":"md`\nWe find the final visual encoding and interaction satisfying and informative. Some interesting insights were the clear trends over time with respect to week-long blocks (All Mondays are typically at the same level of activity, while Mon-Sun follows the same cadence week-to-week, and day-by-day).\n\nThis makes it easy to identify the impact of storms and epidemics as there are sudden and noticeable disruptions to the data. We saw the downward trend in subway usage over the summer as the subway gets hot and people go on vacation.\n\nFurthermore we saw the trend of higher entries than exits in outer boroughs, specifically at smaller stations, suggesting anything from users getting off at different stops and walking, to users taking a cab or uber home later at night .\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1796,"value":"md` ## Future Work and Areas for Improvement `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1798,"value":"md` Main changes to the project include \n- Introducing an hourly view to show usage through out the day\n- Fine tuning the provided information on station lines (Day vs Night, Weekend vs. Weekday routes)\n- Introducing voroni selection for easier use of the scatterplot \n- Introducing a weather component providing the users with the type (rain, sun, etc) and high/low temperature of the day\n- Explicitly adding to the displayed date any holiday information (eg \"Wednesday, Jan 01, 2020 - New Year's Day\")\n- Expanding the years available\n- Improving the run-time of the data loading and visualizaiton\n\nFor our __Resources and References list__, scroll all the way down (past the code section)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"md`-----\n# -- Code --\n------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"md`## Scatterplot `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1193,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1197,"value":"function mouseoverscatter(d,i){\n console.log(d)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1377,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"md`## Color Key - Red Exits; Blue Entries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"color_encodings = html`\n\n

Entries vs. Exits

All
Entries

All
Exits

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"html` \n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`## Subway Lines - Legend\n_ legend container html located under map _`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"subway_lines = html`\n

Subway Lines

A-C-E

B-D-F-M

J, Z

N-Q-R-W

1-2-3

4-5-6

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`## Subway Signage\n\nSource: https://observablehq.com/@clhenrick/nyc-subway-station-signs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"colors = d3.scaleOrdinal()\n .domain([\n ...[\"B\", \"D\", \"F\", \"M\"],\n ...[\"A\", \"C\", \"E\"],\n \"G\",\n ...[\"J\", \"Z\"],\n \"L\",\n ...[\"N\", \"Q\", \"R\", \"W\"],\n \"S\",\n ...[\"1\", \"2\", \"3\"],\n ...[\"4\", \"5\", \"6\"],\n \"7\"\n ])\n .range([\n ...Array(4).fill(\"orange\"),\n ...Array(3).fill(\"blue\"),\n \"lime\",\n ...Array(2).fill(\"brown\"),\n \"light-grey\",\n ...Array(4).fill(\"yellow\"),\n \"medium-grey\",\n ...Array(3).fill(\"red\"),\n ...Array(3).fill(\"green\"),\n \"purple\"\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"palette = {\n // http://web.mta.info/developers/resources/line_colors.htm\n const p = new Map();\n p.set(\"blue\", \"#0096e5\"); // A,C,E (prev: 0039A6)\n p.set(\"orange\", \"#f56600\") // B,D,F,M (prev: FF6319)\n p.set(\"lime\", \"#80b62d\"); // G (prev: 6CBE45)\n p.set(\"brown\", \"#b47e1e\"); // J,Z (prev: 996633)\n p.set(\"light-grey\", \"#bebebe\"); // L (prev: A7A9AC)\n p.set(\"yellow\", \"#ffd200\"); // N,Q,R,W (prev: FCCC0A)\n p.set(\"medium-grey\", \"#808183\"); // S\n p.set(\"red\", \"#EE352E\"); // 1,2,3\n p.set(\"green\", \"#00933C\"); // 4,5,6\n p.set(\"purple\", \"#B933AD\"); // 7\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`\n-----\n# -- Data --\n\n------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"md` ## __Data Selection __ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"dates = ({\n '2020':unique_dates(yr_2020),\n '2019':unique_dates(yr_2019)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"function unique_dates(year){\n var arr = []\n for (var i = 0; i < year.features.length; i++) {\n var date = year.features[i].properties.date\n if(!arr.includes(date))\n arr.push(date)\n }\n return arr\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"md` ## Raw Data - Years `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"yr_2020 = fetch(\"https://media.githubusercontent.com/media/AlexK3987/DataViz_A5/master/2020.geojson\")\n .then(function(response){\n return response.json();\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"yr_2019 = fetch(\"https://media.githubusercontent.com/media/AlexK3987/DataViz_A5/master/2019.geojson\")\n .then(function(response){\n return response.json();\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"data = ({\n \"2020\":yr_2020,\n \"2019\":yr_2019\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"data_3d = {\n var d = {}\n var i;\n for (i in data){\n d[i]=terr_3d(data[i])\n }\n return d\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`----\n# -- Set Up --\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"d3 = require(\"d3@5\",\"d3-regression\", \"d3-delaunay@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"import {slider, color, input} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.43.0');\n mapboxgl.accessToken = 'pk.eyJ1IjoiamFjYWxsZW4iLCJhIjoiY2s3Y2xlc3l0MGc2bDNrcHVwdTQ5ODJyZSJ9.rNoxR-HmGCM6gS0ciMwdQQ';\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1152,"value":"Terraformer = require(terraformer_source_file_url )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"terraformer_source_file_url = FileAttachment('terraformer.js').url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"//station_entrances = FileAttachment(\"Subway_Entrances.geojson\").json() // entry/exit points to stations\nmd`-----`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`\n# Data Sources: \n1. Data \nhttp://web.mta.info/developers/turnstile.html \n\n- Station Entrances:\nhttp://web.mta.info/developers/data/nyct/subway/StationEntrances.csv\n\n- All Data Combined: \nhttps://media.githubusercontent.com/media/AlexK3987/DataViz_A5/master/turnstile_data.csv\n\n-----\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`# Resources / References `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"