33:T43a,md `### Interaction Our 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 where we are able to have a general sense of the effects on ridership occurs based on different aspects of weather. We also provide three brushing selection options for the four brushable views: three scatter plots, and one bar chart. Selecting either of them changes what data is shown based on what you brushed in the views. - If "Only one selection" is chosen, the data that is shown is based on only one brushable view, so you can only brush one view. - If "Any selection" is chosen, the data that is shown is based on only the brushed views, so it can you must brush at least one and up to all four of the brushable views. - If "All selection criteria" is chosen, the data that is shown is based on all four of the brushable views. [See the code behind the brushing interaction →](#brushing)`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\n\n--- `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1513,"value":"md `\n## Overview\nCiti Bike is the operator for New York City's bike sharing service. They operate over 12,000 bikes across 750 stations. \n\nThis 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. \n\nHere are some of the questions we propose the visulization will address:\n- How does weather affect where Citi Bike users travel in New York City?\n- Under what weather conditions do Citi Bike users ride?\n- Which stations see the most traffic? \n- Which days are there more ridership? Why?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"md `---\n### Contents\n- Report\n - [Introduction: Data and Interaction](#aIntro)\n - [Visualization](#aVis)\n - [Further Work](#aFurther)\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":1559,"value":"aIntro = 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 dimension, 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 their, we used nominal location data (**name**, **latitude** and **longitude**) to add it to the map. The top 10 active stations based on departures and arrivals are added to a table. The 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":2175,"value":"aIdiom = md `## Idiom/Encoding`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1557,"value":"$33","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":2119,"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":"aFurther = 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.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1703,"value":"aConclusion = md `---\n## Conclusion\nThere is correlation between weather and travel patters for Citi Bike users. Temperature and precipitation have the greatest affect on travel patterns. However, given certain weather conditions, 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 & 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":2120,"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":2169,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2168,"value":"getTopNUniqueStations(\"departures\", 10)","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 \\`filtered activity\\` 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 \\`filtered activity\\` dataset is updated, we reset the heatmap, then readd 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"}