33:T429,aIntro = md `--- ## Introduction Citi Bike is the operator for New York City's bike sharing service. They operate over 12,000 bikes across 750 stations. This project seeks to equip city planners with a better idea of how Citi Bike users travel around New York City. Specifically, we want to inform city planners which days Citi Bike users ride, under what weather conditions, and at which stations. The visualization includes: - 3 brushable scatter plots, which show correlation between weather and ridership - 1 brushable bar chart, which show daily ridership over the year 2018 - 1 heat map, which display stations and how active they are When scatter plots and bar chart are brushed, they update the heat map based on three selection options, explained later on. Here are some of the questions we propose the visualization will address: - How does weather affect where Citi Bike users travel in New York City? - Under what weather conditions do Citi Bike users ride? - Which stations are more active than others? - Which days are there more ridership? Why?`34:T6d4,viewof scatter = embed( { data: {values: ridershipWeather}, vconcat: [{ name: "weather", repeat: { column: ["Avg Air Temperature (℉)", "Total Precipitation (inches)", "Avg Wind Speed (mph)"], row: ["Trips"] }, spec: { height: 150, mark: { type: "point", stroke: colour.blue, }, selection: { brush: { type: "interval", resolve: selectionStyle, encoding: ["x", "y"] } }, encoding: { x: { field: {repeat: "column"}, type: "quantitative", }, y: {field: {repeat: "row"}, type: "quantitative"}, color: {condition: {selection: "brush"}, value: "lightgrey"} } } }, { name: "ridership", width: width-200, height: 60, mark: { type: "bar", fill: colour.blue, }, selection: { brush: { type: "interval", resolve: selectionStyle, encodings: ["x"], } }, encoding: { x: { field: "date", type: "ordinal", scale: { type: "band", rangeStep: 0, }, axis: { labelAngle: 0, labelAlign: "left", tickExtra: false, ticks: false, values: ["2018-01-01", "2018-02-01", "2018-03-01", "2018-04-01", "2018-05-01", "2018-06-01", "2018-07-01", "2018-08-01", "2018-09-01", "2018-10-01", "2018-11-01", "2018-12-01"], title: "Date" } }, y: { field: "Trips", type: "quantitative", }, color: {condition: {selection: "brush"}, value: "lightgrey"} } }] }) 35:T823,viewof top10List = embed ( { "title": "Top 10 Stations Used for Deparatures and Arrivals Based on Selection", "config": { "mark": { "tooltip": null, }, "text": { "baseline": "middle" } }, "hconcat": [ { "data": {values: topDepartures}, "transform": [{ "window": [{"op": "row_number", "as": "row_number"}] }], "hconcat": [{ "title": "Station Name", "mark": "text", "width": 250, "encoding": { "text": {"field": "name", "type": "nominal"}, "y": {"field": "row_number", "type": "ordinal", "axis": null}, } }, { "title": "Days Active", "mark": "text", "width": 50, "encoding": { "text": {"field": "daysActive", "type": "quantitative"}, "y": {"field": "row_number", "type": "ordinal", "axis": null} } }, { "title": "Departures", "mark": "text", "width": 50, "encoding": { "text": {"field": "sum", "type": "quantitative"}, "y": {"field": "row_number", "type": "ordinal", "axis": null} } }] }, { "data": {values: topArrivals}, "transform": [{ "window": [{"op": "row_number", "as": "row_number"}] }], "hconcat": [{ "title": "Station Name", "mark": "text", "width": 250, "encoding": { "text": {"field": "name", "type": "nominal"}, "y": {"field": "row_number", "type": "ordinal", "axis": null} } }, { "title": "Days Active", "mark": "text", "width": 50, "encoding": { "text": {"field": "daysActive", "type": "nominal"}, "y": {"field": "row_number", "type": "ordinal", "axis": null} } }, { "title": "Arrivals", "mark": "text", "width": 50, "encoding": { "text": {"field": "sum", "type": "quantitative"}, "y": {"field": "row_number", "type": "ordinal", "axis": null} } }] } ] } )36:T4bd,function getTopNUniqueStations(type, n) { let output = new Array(); // get top n unique stations based on sorted source // this will the source array in descending order by either departures or arrivals let source = filteredActivity.sort((a, b) => b[type] - a[type]); // get only the names of all rows let namesOnly = new Array(); source.forEach(function(item){ namesOnly.push(item.name); }); // get only the unique rows // https://stackoverflow.com/questions/9229645/remove-duplicate-values-from-js-array let uniqueNamesOnly = [...new Set(namesOnly)]; // slice based on size n let uniqueNamesOnlySizeN = uniqueNamesOnly.slice(0, n) // go through array again for each station to get: // number of times it shows up let count = 0; // sum of type let sum = 0; for (let i = 0; i < n; i++) { let currentName = uniqueNamesOnlySizeN[i]; source.forEach(function(item){ if (item.name == currentName) { count++; sum += +item[type]; } }); let toAdd = { ['name']: currentName, ['daysActive']: count, ['sum']: sum } output.push(toAdd); // reset count = 0; sum = 0; } return output; }37:[] 32:{"title":"Final Project","cells":[{"id":0,"value":"md`# Final Project\n**Created by [Job Lee](https://joblee.ca) and [Ray Low](https://raynathanlow.com/)** \nFor IAT 355 Introduction to Visual Analytics, Spring 2018`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"md `---\n### Contents\n- Report\n - [Introduction](#aIntro)\n - [Data Dimensions](#aDimensions)\n - [Idiom and Encoding](#aIdiom)\n - [The Visualization](#aVis)\n - [Unimplemented Features](#aFeatures)\n - [Conclusion](#aConclusion)\n- Code\n - [Data Import and Cleaning](#aData)\n - [Brushing](#aBrushing)\n - [Libraries](#aLibraries)\n - [References](#aReferences)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1513,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2292,"value":"aDimensions = md `---\n## Data Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1522,"value":"md `\n### Bike Trips\nWe used 2 different datasets from Citi Bike: Daily Ridership and Membership Data, and Trip Histories. \n\nDaily Ridership and Membership Data were used in the scatter plots and bar graphs. The scatter plots compare the number of trips with the weather dimensions, which allows us to see if there are any correlations between weather and bike usage. The bar graph shows quantitative data of **trip counts** for each day in 2018 (ordinal data). \n\nThere were about 1 million trips for each month in our Trip Histories dataset. To make it more manageable, we aggregated the trips by counting how many trips started and ended at each station each day. From there, we used nominal location data (**name**, **latitude** and **longitude**) to add it to the heatmap. The top 10 active stations based on departures and arrivals are added to a table. The heatmap colour is based on the quantitative count of **trips departing or arriving for each station**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md `### Weather\nThe Network for Environment and Weather Application (NEWA) Weather Dataset included daily weather summaries for the year of 2018 and have multiple dimensions. We selected the following quantitative dimensions that best represent what bike users would care about the most: **Average Air Temperature**, **Total Precipitation**, and **Average Wind Speed**.\n\nBased off the map of Citi Bike stations, we chose NEWA's [NYC-Central Park](http://newa.cornell.edu/index.php?page=weather-station-page&WeatherStation=knyc) weather station because it is the closest to the majority of Citi Bike activity.\n\n*Here is an overview of all the Citi Bike stations in New York City and where our Weather Station is located.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1837,"value":"viewof stationMap = {\n var startPoint = [40.76, -73.96];\n var ws = [40.78, -73.97];\n \n // create container for leaflet\n let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });\n yield container;\n \n // map layer\n let map = Leaflet.map(container).setView(startPoint, 12);\n let osmLayer = Leaflet.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png', {\n attribution: '© OpenStreetMap, © CARTO',\n subdomains: 'abcd',\n }).addTo(map);\n \n // stations\n stationMapMarkers.addTo(map);\n \n // Central Park Weather Station Marker\n var marker = Leaflet.marker(ws).addTo(map);\n // add a popup for the Weather Station\n marker.bindPopup(\"NYC-Central Park Weather Station\").openPopup();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1588,"value":"md `[Read more about the data importing and cleaning process →](#aData)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2262,"value":"aIdiom = md `## Idiom and Encoding\n\nScatter plots are used for the weather dimensions to show if there were any correlations with ridership. They can help users see under what weather conditions Citi Bike users ride in.\n\nThe bar chart is used to show the ridership for each day of 2018. This idiom enables users see the changes in ridership over the days of 2018.\n\nA heat map is used to show how active each station is based on the user's selection. The stations are blue with a dark blue outline to match the Citi Bike colour scheme while the heat gradient used is light grey, yellow, orange and red.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1557,"value":"md `### Interaction\nOur main interaction is **brushing**. Because trip data is the common dimension between all the graphs, brushing allows users to highlight different aspects of weather to better understand how ridership is affected. Brushing is also linked with the map so we are able to have a general sense of the effects on ridership based on different aspects of weather.\n\nWe also provide three brushing selection options for the four brushable views: three scatter plots, and one bar chart. Selecting any of them changes what data is shown based on what the user brushed in the views. \n\n- If \"Only one selection\" is chosen, data from only one brushable view is shown (ie. the user can only brush one view).\n- If \"Any selection\" is chosen, data from within any of the brushed views will be shown. \n- If \"All selection criteria\" is chosen, only data that is within all the brushed views will be shown.\n\n[See the code behind the brushing interaction →](#brushing)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"aVis = md `---\n## The Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"viewof selectionStyle = radio({\n title: \"Show data that fits within...\", \n options: [\n {label: \"Only one selection\", value: \"global\"}, \n {label: \"Any selection\", value: \"union\"}, \n {label: \"All selection criteria\", value: \"intersect\"}\n ],\n value: \"union\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"viewof countType = radio({\n title: \"Which trips would you like to see?\", \n options: [\n {label: \"Departures\", value: 0}, \n {label: \"Arrivals\", value: 1}\n ],\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2288,"value":"html `

Legend

\n $\"Station$ Station (visible when zoomed in)\nLeast Active Station Most Active Station\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1634,"value":"container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });","pinned":false,"hidden":false,"mode":"ojs"},{"id":1893,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1701,"value":"aFeatures = md `---\n## Unimplemented Features\nTo give more context to station activity on the heatmap, we would show the number of departures and arrivals in the tooltip.\n\nThere may be a difference between the travel activities of subscriber and single-use customers. Showing a histogram of the different user groups would reveal if there are differences in travel patterns.\n\nIn our current visualization, we do not show the trips users are taking. Visualizing the different routes people take may reveal more information about the effects of weather.\n\nA final feature we would like to have added are points of interest and public transportation layers for the map. This would give more context as to why some stations are more active, why some stations are still active during inclement weather, and why some stations see minimal usage.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1703,"value":"aConclusion = md `---\n## Conclusion\nThere is a correlation between weather and travel patterns for Citi Bike users. Temperature and precipitation have the greatest affect on travel patterns. However, given certain weather conditions, we can infer that specific stations still receive a larger number of users due to their proximity to other modes of transportation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"aData = md `---\n## Data Import and Cleaning`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1409,"value":"md `### Station Map\nStations list aggregated from Citi Bike Trip Histories.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1418,"value":"stationsList = \"https://gist.githubusercontent.com/raynathanlow/eaa8467cb431ffb0fa18f7adb9278cef/raw/02ca6d594c7f5b7c4b3fcef3c1bb838f452ec58b/StartLatLongCount.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2048,"value":"md `As there are many stations, we created a smaller icon to be used with our station marker.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2051,"value":"stationIcon = Leaflet.icon({\n iconUrl: icon.station,\n iconSize: [9, 9],\n iconAnchor: [4.5, 4.5],\n popAnhor: [4.5, 4.5]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2010,"value":"md `We create the marker to be used in the station map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2029,"value":"stationMapMarkers = omnivore.csv(stationsList).on('ready', function () {\n this.eachLayer(function (layer) {\n layer.setIcon(stationIcon);\n layer.setOpacity(.6);\n layer.bindPopup(layer.feature.properties.name);\n });\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md `### Ridership and Weather\n2018 Citi Bike Daily Ridership and Membership Data from [Citi Bike System Data](https://www.citibikenyc.com/system-data), where quarterly data was manually combined into one file.\n\n2018 Daily Weather Summary from [Cornell University's Network for Environment and Weather Applications ](http://newa.cornell.edu/index.php?page=daily-weather)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"md `Before we import the data here, we manually combined ridership and weather data for each day.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1806,"value":"ridershipWeatherSource = \"https://gist.githubusercontent.com/YoshiJL/9dcebba815ee3e40872802c71ca209de/raw/233eebe34a2244408fae1f44f84c42682c2c14a9/ridership-weather.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"ridershipWeather = d3.csv(ridershipWeatherSource)","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"md `We listed the dates in the dataset in a seperate array.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"ridershipWeatherDates = ridershipWeather.map(data => data.date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"md `### Station Activity Heat Map\n2018 Station Activity based on counts of the departures and arrivals from stations found in the Trip Histories data set of [Citi Bike System Data](https://www.citibikenyc.com/system-data). Counts were manually done through Tableau and combined with Microsoft Excel.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1813,"value":"stationActivitySource = 'https://raw.githubusercontent.com/YoshiJL/iat355/master/2018-citibike-stationactivity.csv'","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"stationActivity = d3.csv(stationActivitySource)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1687,"value":"md `We create Leaflet map object and set the basemap using an Open Street Maps layer from [CARTO](https://github.com/CartoDB/basemap-styles).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1636,"value":"map = Leaflet.map(container).setView([40.739287, -73.962526], 12);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1638,"value":"osmLayer = Leaflet.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png', {\n attribution: '© OpenStreetMap, © CARTO',\n subdomains: 'abcd',\n maxZoom: 14,\n minZoom: 11\n }).addTo(map)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2014,"value":"md `We'll add the stations to the heat map, based on the zoom level of the map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2016,"value":"markerLayer = omnivore.csv(stationsList).on('ready', function () {\n this.eachLayer(function (layer) {\n layer.setIcon(stationIcon);\n layer.setOpacity(.8);\n layer.bindPopup(layer.feature.properties.name);\n });\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2078,"value":"md `To keep the heatmap clean, we will hide the markers when we zoom out. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2081,"value":"mapUpdate = map.on('zoomend', function () {\n var threshold = 14;\n \n if (map.getZoom() < threshold) {\n if (map.hasLayer(markerLayer)) {\n map.removeLayer(markerLayer);\n }\n }\n \n if (map.getZoom() >= threshold) {\n if (!map.hasLayer(markerLayer)) {\n map.addLayer(markerLayer);\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1692,"value":"md `Lastly, we initialize and setup our \\`stationActivity\\` heat map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1640,"value":"stationsLayer = heatLayer(\n stationActivity.map(h => [h.latitude, h.longitude, h.departures]), \n {\n minOpacity: 0, \n max: 365 * 60, \n maxZoom: 16,\n radius: 15, \n blur: 10, \n gradient: {0.1: 'transparent', 0.33: \"yellow\", 0.66: \"orange\", 1: \"red\"}\n }\n).addTo(map)","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"md `### Branding\nCiti Bike Colours (based on the Citi Bike Website)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1457,"value":"colour = ({\n darkBlue: \"#052b6c\",\n blue: \"#0098e4\",\n red: \"#ed2e14\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2285,"value":"icon = ({\n station: 'https://raw.githubusercontent.com/raynathanlow/iat355/master/icon.png'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"aBrushing = md `---\n## Brushing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"md `Listener for the brush selection.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"selection = Generators.observe(notify => {\n const signaled = (name, value) => notify(scatter.data(\"brush_store\"));\n scatter.addEventListener(\"mouseup\", signaled);\n return notify(scatter.data(\"brush_store\"));\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"md `### Selecting by Date\nFind the \\`dateRange\\` in the \\`dateSelection\\`. \n*If \\`dateSelection\\` is undefined (i.e. no dates selected), return the dataset's date domain, so all dates will be shown.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"dateSelection = selection.find(selected => selected.unit === \"ridership\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"//dateRange = dateSelection === undefined ? ridershipWeatherDates : selection.find(dates => dates.unit === \"ridership\").values[0]\ndateRange = dateSelection === undefined ? [] : selection.find(dates => dates.unit === \"ridership\").values[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"md `### Selecting by Weather`","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"md `#### Average Air Temp`","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"tempBrush = selection.find(selected => selected.unit === \"weather_child_Trips_Avg_Air_Temperature____\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"tempSelection = tempBrush === undefined ? [] : ridershipWeather.filter(function(d) {\n // get the selected precip range\n var tempRange = [tempBrush.values[0][0], tempBrush.values[0][1]];\n\n // get the selected trips\n var tripRange = [tempBrush.values[1][0], tempBrush.values[1][1]];\n\n // return the data point\n return d['Avg Air Temperature (℉)'] >= tempRange[0] && d['Avg Air Temperature (℉)'] <= tempRange[1] && \n d['Trips'] >= tripRange[1] && d['Trips'] <= tripRange[0];\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"md `#### Total Precipitation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"precipBrush = selection.find(selected => selected.unit === \"weather_child_Trips_Total_Precipitation__inches_\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"precipSelection = precipBrush === undefined ? [] : ridershipWeather.filter(function(d) {\n // get the selected precip range\n var precipRange = [precipBrush.values[0][0], precipBrush.values[0][1]];\n \n // get the selected trips\n var tripRange = [precipBrush.values[1][0], precipBrush.values[1][1]];\n \n // return the data point\n return d['Total Precipitation (inches)'] >= precipRange[0] && d['Total Precipitation (inches)'] <= precipRange[1] && \n d['Trips'] >= tripRange[1] && d['Trips'] <= tripRange[0];\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"md `#### Average Wind Speed`","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"windBrush = selection.find(selected => selected.unit === \"weather_child_Trips_Avg_Wind_Speed__mph_\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"windSelection = windBrush === undefined ? [] : ridershipWeather.filter(function(d) {\n // get the selected precip range\n var windRange = [windBrush.values[0][0], windBrush.values[0][1]];\n \n // get the selected trips\n var tripRange = [windBrush.values[1][0], windBrush.values[1][1]];\n \n // return the data point\n return d['Avg Wind Speed (mph)'] >= windRange[0] && d['Avg Wind Speed (mph)'] <= windRange[1] && \n d['Trips'] >= tripRange[1] && d['Trips'] <= tripRange[0];\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"md `### Brushing Output`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"md `If union selected, then combine all selections:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"brushUnion = tempSelection.concat(precipSelection, windSelection).map(data => data.date).concat(dateRange);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"md `If intersect selected, filter all selected based on each selection:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1190,"value":"intersect = tempSelection.concat(precipSelection, windSelection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1186,"value":"intersectTemp = tempSelection.length != 0 ? intersect.filter(data => tempSelection.includes(data)) : intersect","pinned":false,"hidden":false,"mode":"ojs"},{"id":1204,"value":"intersectPrecip = precipSelection.length != 0 ? intersectTemp.filter(data => precipSelection.includes(data)) : intersectTemp","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"intersectWind = windSelection.length != 0 ? intersectPrecip.filter(data => windSelection.includes(data)) : intersectPrecip","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"brushIntersect = \nintersect.length == 0 ? brushUnion : \ndateRange.length != 0 ? \nintersectWind.map(data => data.date).filter(data => dateRange.includes(data)) : \nintersectWind.map(data => data.date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1215,"value":"md `Brush Output based on selection style: \\`${selectionStyle}\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"brushOutput = selectionStyle === \"global\" || selectionStyle === \"union\" ? brushUnion : brushIntersect","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"md `Filter \\`stationActivity\\` based on brush selection. \n*If nothing is selected, return the original, unfiltered array.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"filteredActivity = stationActivity.filter(function(d) {\n if (selection.length === 0) return stationActivity;\n return brushOutput.includes(d.date);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1828,"value":"md `To give more detail to what stations are most active, we extract the top 10 departures and arrivals from \\`filteredActivity\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1823,"value":"topDepartures = getTopNUniqueStations(\"departures\", 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1822,"value":"topArrivals = getTopNUniqueStations(\"arrivals\", 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2115,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"md `Scale \\`stationActivity\\` intensity based on number of dates in dateRange. \n*If \\`dateSelection\\` is undefined, return the dataset's date domain count.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"numSelection = brushOutput.length === 0 ? ridershipWeatherDates.length : brushOutput.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"md `Based on whether departures or arrivals are selected, prepare \\`filteredActivity\\` to be displayed on the map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1358,"value":"stations = countType == 0 ? \nfilteredActivity.map(h => [h.latitude, h.longitude, h.departures]) :\nfilteredActivity.map(h => [h.latitude, h.longitude, h.arrivals])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1681,"value":"md `When the \\`filteredActivity\\` dataset is updated, we reset the heatmap, then read them. We also set the heatmap's maximum point intensity does not get too intense.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1665,"value":"updateStationsLayer = stationsLayer.setLatLngs(stations).setOptions({\n max: numSelection * 60,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"aImports = md `---\n## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"md `### d3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"md `### Data Frame`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"dfjs = require('https://bundle.run/dataframe-js@1.3.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"md `### Vega`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"embed = require(\"vega-embed@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"md `### Inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"md `### Mapping`","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"Leaflet = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"html`Link Leaflet Stylesheet`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"heatLayer = Leaflet, require('leaflet.heat').catch(() => Leaflet.heatLayer)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1858,"value":"omnivore = Leaflet, require('//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.0.1/leaflet-omnivore.min.js').catch(() => Leaflet.omnivore)","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"md `### Moment (Cleaner Dates)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"aReferences = md `---\n## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"md `Brushing Scatter Plot to show data on a table. (n.d.). Retrieved from https://vega.github.io/vega-lite/examples/brush_table.html\n\nMapping Airport Connections Tutorial. (n.d.). Retrieved from https://vega.github.io/vega/tutorials/airports/\n\nNowak, S. (2019, April 01). 2018 Vancouver Crime Data. Retrieved from https://observablehq.com/@stanisouce/2018-vancouver-crime-data-dashboard\n\nOverview and Detail. (n.d.). Retrieved from https://vega.github.io/vega-lite/examples/interactive_overview_detail.html\n\nSFU IAT 355. (2019, Feb 12). Interaction. Retrieved from https://observablehq.com/@sfu-iat355/interaction\n\nStudent 1511212, Riccardo 1, & Abettermap 316311. (2016, February 29). Leaflet layers on different zoom levels. How? Retrieved from https://gis.stackexchange.com/questions/182628/leaflet-layers-on-different-zoom-levels-how\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}