25:null 26:["$","title",null,{"children":"NYC Transit Trends | Jacqueline Cannon Allen | Observable"}] 2b:T4e6,html`

Subway Lines

A-C-E

B-D-F-M

J, Z

N-Q-R-W

1-2-3

4-5-6

${slider} `2c:T153c,{ // Load GeoJSON from a data URL (instead of holding it in a JavaScript object and passing to a Mapbox GL GeoJSON Source ==> reduces client memory overhead) 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 } }); // STATIONS map.addSource('subway_station_data', { type: 'geojson', data: stations, cluster: true, clusterRadius: 45 // Radius of each cluster when clustering points (defaults to 50) }); // TODO: Scale by volume of entries&exits in cluster instead of cluster count /* Steps/To-Do List for Clustering: https://blog.mapbox.com/clustering-properties-with-mapbox-and-html-markers-bb353c8662ba 1. Scale cluster by the aggregated volume of all the stations in the cluster 2. Scale stations by each one's volume of daily activity 3. Possible: on-click reveal bar graph of that station's hourly break down of entries/exits - different endpoint */ map.addLayer({ id: 'clusters', type: 'circle', source: 'subway_station_data', filter: ['has', 'point_count'], // # in cluster paint: { // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step) 'circle-color': [ 'step', ['get', 'point_count'], // switch to gradient based off exit-to-entry ratio '#51bbd6', 20, // blue if cluster < 20 exit/entry points '#f1f075', 50, // yellow if cluster 20 < x < 50 exit/entry points '#f1f075', 300, // yellow if cluster of 50 < x < 300 exit/entry points '#f28cb1' // pink if cluster of >= 300 exit/entry points ], 'circle-radius': [ 'step', ['get', 'point_count'], 9, 20, // radius = 9px if cluster < 20 exit/entry points 12, 50, // radius = 12px if cluster 20 < x < 50 exit/entry points 18, 300, // radius = 818px if cluser 50 < x < 300 exit/entry points 30 // radius = 30px if cluster of >= 300 exit/entry points ] } }); map.addLayer({ id: 'cluster-count', type: 'symbol', source: 'subway_station_data', filter: ['has', 'point_count'], layout: { 'text-field': '{point_count_abbreviated}', 'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'], 'text-size': 12 } }); // ['!', ['has','point_count']] map.addLayer({ 'id': 'station', 'type': 'circle', 'source': 'subway_station_data', 'filter': ['!', ['has','point_count']], 'paint': { 'circle-color': 'white', 'circle-radius': 4, 'circle-stroke-color': 'blue', 'circle-stroke-width': 1 } }); //pseudo voroni (increase region user can click to show pop-up) map.addLayer({ 'id': 'select-station-region', 'type': 'circle', 'source': 'subway_station_data', 'filter': ['!', ['has','point_count']], 'paint': { 'circle-color': 'rgba(0,0,0,0)', // transparent 'circle-stroke-color': 'rgba(0,0,0,0)', 'circle-radius': 10 // change to scale by volume } }); // Station Pop-up on-click map.on('click', 'select-station-region', function(e) { var coordinates = e.features[0].geometry.coordinates.slice(); var name = e.features[0].properties.name; new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(build_subway_sign(name)) .addTo(map); }); map.on('mouseenter', 'select-station-region', function() { map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'select-station-region', function() { map.getCanvas().style.cursor = ''; }); }); }2d:T4fa,styles = { const fontFamily = "Helvetica, sans-serif"; const bgColor = "#e2e2e2"; const black = "#000"; const white = "#FFF"; const minWidth = "140px"; return html`` }2e:T431,md` 1. Subway images (if we want them for an on-hover or on-click station functionality) https://observablehq.com/@clhenrick/nyc-subway-station-signs - Animated Marker https://observablehq.com/@giorgi-ghviniashvili/animated-marker-and-path-in-mapboxgl - Animated Run https://observablehq.com/@pstuffa/visualizing-running-part-v - Map using google maps (subway line and colors) - https://observablehq.com/@the-observables/testing - Toggle layers - https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/ - 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/ - ** DONUT AROUND DOTS: https://blog.mapbox.com/clustering-properties-with-mapbox-and-html-markers-bb353c8662ba `2f:[{"id":"d403be284a12fc38950fd403ef75033ddf77dd5b676e67c193bfc303ef4065e3758fd733ff4d49e9311a96c3e88d6fb2ea3e1cb7b99736fb84b4ffe91de7ab5e","href":"https://static.observableusercontent.com/files/d403be284a12fc38950fd403ef75033ddf77dd5b676e67c193bfc303ef4065e3758fd733ff4d49e9311a96c3e88d6fb2ea3e1cb7b99736fb84b4ffe91de7ab5e","name":"Subway Stations.geojson","type":"application/geo+json","lastModified":1586804780218.669,"size":119916},{"id":"31eb595f33a3a4982b6f55876e64d98a9bccb2617d1a27e604391948c528024c804fb76c47a979d93d4ee3a017e48d4ba74838323ec6928e33bb88253eddcd15","href":"https://static.observableusercontent.com/files/31eb595f33a3a4982b6f55876e64d98a9bccb2617d1a27e604391948c528024c804fb76c47a979d93d4ee3a017e48d4ba74838323ec6928e33bb88253eddcd15","name":"turnstile_200328_grouped.csv","type":"text/csv","lastModified":1586804780218.669,"size":1148172}] 29:{"id":"5d4fa98e6fde0963","slug":"nyc-transit-trends/11","title":"NYC Transit Trends","thumbnail":"d0cd9d03cbebbc2141311f58e295c9aca215c24d688add5a2fd6b56645ccfed3","access_level":"public","create_time":"$D2020-04-13T19:06:20.218Z","update_time":"$D2020-04-13T21:04:12.322Z","view_time":null,"first_public_time":"$D2020-04-13T19:24:26.694Z","fork":{"id":"4dd01a809b1ed819","slug":"nyc-transit-historical-trends","title":"NYC Transit Trends","owner":{"id":"c34fadd0b81defff","login":"ja3143","name":"Jacqueline Cannon Allen"}},"stars":1,"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":510,"publish_version":510,"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":0,"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 Catherine Chu, Alexander Kutner, Montserrat Pladevall and Jacqueline Allen`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`## Overview`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`(_EDIT_) A visualiztion of long-term trends of turnstile data, historical to present, with an accompanying analysis into various macro events that have impacted MTA ridership.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`# Final Visualization\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"md ` -\n [dummy space for time slider ]\n\n-`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$2b","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":343,"value":"md`## Map`","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.eyJ1IjoidG1jdyIsImEiOiJjamN0Z3ZiOXEwanZkMnh2dGFuemkzemE3In0.gibebYiJ5TEdXvwjpCY0jg';\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"map = new mapboxgl.Map({\n container: 'map',\n center: [ -73.897753, 40.754693], // nyc [ -73.986753, 40.754693]\n zoom: 10.6,\n maxZoom: 18.5, // how close you can zoom in\n minZoom: 6, // how far out you can zoom out\n style: 'mapbox://styles/mapbox/dark-v9',\n});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"md`## Data Mapping & Interactivity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`\"\" __TODO__: Plot, Scale, and Color-Encode Stations (+ Clusters) by Exit and Entry #'s\"\"\n\n- Decide on time-frame and list of stations to focus on (ex: top 15 stations over 15-years, or all stations over 1 year)\n- Re-structure data for plotting and ensure it is a manageable size for observablehq\n For each data object:\n - lat\n - long\n - total daily entries\n - total daily exits\n - name off station \n - date\n => 437 stations x 365 days = 172,645 datapoints (or 10x365 = 3,650)\n- Scale and color clusters and individual stations according to volume and proportion of exits/entries (code is already there, just by cluster size - swap out for volume and proportion)\n- Include legends for scale and color `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"md`## Time Slider \nSource: https://docs.mapbox.com/mapbox-gl-js/example/timeline-animation/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"md`\"\" TODO: Make Slider Functional \"\"\n\n- add days (however many we decide on) to slider as slider options\n- program data on map to re-scale and re-color according to selected date\n- make animation smooth `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"slider = html`\n

Transit Exits and Entries: ${date_selected}

\n \n \n

\n`","pinned":true,"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`## Legend\n_ legend html located under map _`","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`## Signage - Colors & Station-to-Lines Mapping\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":417,"value":"function build_subway_sign(station){\n var lines = station_lines.get(station)\n var subway_sign = \"\"\n \n var lines_html = \"\"\n \n for (let subway_line of lines.values()){\n var line_color = palette.get(color(subway_line)) // background circle\n var text_color = (color(subway_line) === \"yellow\" ? \"#000\" : \"#fff\") // black or white\n lines_html += `\n

${subway_line}

`\n }\n \n subway_sign = (`
\n

${station}

\n ${lines_html}\n

`\n )\n return subway_sign; \n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"color = 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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"station_lines = {\n const data = await d3.csv(\"https://gist.githubusercontent.com/clhenrick/a585388c95c14074ebe512458e359197/raw/189cfaa73aa6dc0676e33fed17c22158b40394fe/nyc_subway_names_lines.csv\")\n console.log(data);\n return data\n .sort((a, b) => {\n const nameA = a.name.toUpperCase();\n const nameB = b.name.toUpperCase();\n return nameA.localeCompare(nameB, \"en\", {numeric: true, sensitivity: 'base'});\n })\n .reduce((acc, cur, i) => {\n const re = RegExp(\"Express\")\n const name = cur.name;\n let line = cur.line\n .split(\"-\")\n .sort()\n .filter(d => d.indexOf(\"Express\") === -1);\n if (acc.get(name)) {\n acc.set(`${name}%${i}`, new Set([...line]))\n } else {\n acc.set(name, new Set(line));\n }\n return acc;\n }, new Map());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"$2d","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":453,"value":"md` __Data Manipulation__`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"curr_day = {\n \n //pull all datapoints from the month that match the selected day\n var daily_data = yearly_data.filter(function (el) {\n return el.DATE == date_selected\n });\n \n // combine entry and exit information by station\n \n return daily_data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"date_selected = \"03/21/2020\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"yearly_data = march_2020 // make the full range","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"md`__ Raw Data__`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"stations = FileAttachment(\"Subway Stations.geojson\").json() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"march_2020 = d3.csvParse(await FileAttachment(\"turnstile_200328_grouped.csv\").text(), d3.autoType)","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\")","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. Initial Sources:\n-- http://web.mta.info/developers/turnstile.html \n-- https://data.ny.gov/widgets/i9wp-a4ja\n\n3. Station Entrances:\nhttp://web.mta.info/developers/data/nyct/subway/StationEntrances.csv\n\n4. All Data Combined (massive): \nhttps://media.githubusercontent.com/media/AlexK3987/DataViz_A5/master/turnstile_data.csv\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":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2a:"$29:body"