${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()) }