31:Tfc1,viewof ParksLocation = { let container = DOM.element('div', { style: `width:${width / 2}px;height:${width / 3}px` }); yield container; let unionCentroidFiltered = data.unionCentroid.features.filter(d => { let yearGood = true; let typeGood = true; if (yearsRange != null && yearsRange.year != undefined) { yearGood = d.properties.yearMax > yearsRange.year[0] && d.properties.yearMin < yearsRange.year[1]; } if (typeOfpark != null && typeOfpark.parkType != undefined) { typeGood = d.properties.type == typeOfpark.parkType[0]; } return yearGood && typeGood; }); if (unionCentroidFiltered.length > 0) { let map = L.map(container).setView([153.2527, -123.1207], 5).fitBounds(L.geoJson(unionCentroidFiltered).getBounds()); let osmLayer = L.tileLayer('https://maps.heigit.org/openmapsurfer/tiles/roads/webmercator/{z}/{x}/{y}.png', { maxZoom: 19, attribution: 'Imagery from GIScience Research Group @ University of Heidelberg | Map data © OpenStreetMap contributors' }).addTo(map); L.geoJSON(unionCentroidFiltered, { pointToLayer(geoJsonPoint, latlng) { let type = geoJsonPoint.properties.type; let iconURL = "https://www.sfu.ca/~ridgez/IAT355FinalData/"; return L.marker(latlng, { icon: L.icon({ iconUrl: iconURL + type + ".png", iconSize: [14, 20], iconAnchor: [7, 20], }) }); } }).addTo(map).on("click", event => { let popup = new L.Popup(); popup.setLatLng(event.latlng) let filteredData = data.unionByYear.filter(entry => entry.parkName == event.layer.feature.properties.name); let graphData = { width: 200, height: 200, data: { values: filteredData, }, title: { text: event.layer.feature.properties.name, fontSize: 10 }, mark: "line", transform: [ { filter: { field: "year", lte: yearsRange !== null && yearsRange.year !== undefined ? yearsRange.year[1] : Number.MAX_VALUE, } }, { filter: { field: "year", gte: yearsRange !== null && yearsRange.year !== undefined ? yearsRange.year[0] : Number.MIN_VALUE, } }, ], encoding: { x: { field: "year", type: "quantitative", }, y: { field: "parkVisits", type: "quantitative", aggregate: "sum" }, } } if (yearsRange !== null && yearsRange.year !== undefined) { graphData.encoding.x.scale = { domain: [yearsRange.year[0], yearsRange.year[1]] } } else { graphData.encoding.x.scale = { domain: [d3.min(data.unionByYear, d => d.year), d3.max(data.unionByYear, d => d.year)] } } VegaLite(graphData).then(chart => { popup.setContent(chart); map.openPopup(popup); }); }); } }32:T15ca,viewof Graphs = VegaLite({ data: { values: data.unionByYear }, columns: 2, hconcat: [ //////////////1 { title: "Relationship of Park Visits to Gas Prices", width: 300, height: 280, transform: [ { filter: { selection: "time" } }, { filter: { selection: "selectCircles" } }, { filter: { selection: "typeOfPark" } }, ], selection: { selectCircles: { type: "interval" } }, mark: { type: "circle", clip: true }, encoding: { x: { field: "gasPrice", type: "quantitative", scale: { domain: [1, d3.max(data.unionByYear, function (d) { return d.gasPrice; })] } }, y: { field: "parkVisits", type: "quantitative", aggregate: "sum", axis: { title: "park visits" }, }, color: { field: "parkType", type: "nominal"} } }, //////////////2 { title: "Relationship of Park Visits to US Population", width: 300, height: 280, transform: [ { filter: { selection: "time" } }, { filter: { selection: "selectCircles" } }, { filter: { selection: "typeOfPark" } }, ], selection: { selectCircles: { type: "interval" } }, mark: { type: "circle", clip: true }, encoding: { x: { field: "population", type: "quantitative", scale: { domain: [80000000, d3.max(data.unionByYear, d => d.population)] } }, y: { field: "parkVisits", type: "quantitative", aggregate: "sum", axis: { title: "park visits" }, }, color: { field: "parkType", type: "nominal" } } }, //////////////3 { title: "Relationship of Park Visits to Number of Parks", width: 300, height: 280, transform: [ { filter: { selection: "time" } }, { filter: { selection: "selectCircles" } }, { filter: { selection: "typeOfPark" } }, ], selection: { selectCircles: { type: "interval" } }, mark: { type: "circle", clip: true }, encoding: { x: { field: "numberOfParks", type: "quantitative", scale: { domain: [1, d3.max(data.unionByYear, d => d.numberOfParks)] } }, y: { field: "parkVisits", type: "quantitative", aggregate: "sum", axis: { title: "park visits" }, }, color: { field: "parkType", type: "nominal" } } }, //////////////4 { title: "Percentage of Visitors for Each Park Type", width: 300, height: 280, transform: [ { filter: { selection: "time" } }, { filter: { selection: "typeOfPark" } }, ], selection: { typeOfPark: { fields: ["parkType"], on: "click", type: "single" } }, mark: { type: "area", clip: true }, encoding: { x: { field: "year", type: "quantitative", }, y: { field: "percentPerTypePerYear", type: "quantitative", aggregate: "mean", scale: { domain: [0, 100] }, axis: { title: "percentage" } }, color: { field: "parkType", type: "nominal" } } }, //////////////5 { title: "Relationship of Park Visits to the Year", width: 300, height: 280, transform: [ { filter: { selection: "typeOfPark" } }, ], selection: { time: { type: "interval" } }, mark: { type: "line" }, encoding: { x: { field: "year", type: "quantitative" }, y: { field: "parkVisits", type: "quantitative", aggregate: "sum", axis: { title: "park visits" }, }, color: { field: "parkType", type: "nominal" } } }, //////////////6 { title: "Relationship of Mean Park Visits to Year", width: 300, height: 280, transform: [ { filter: { selection: "time" } }, { filter: { selection: "typeOfPark" } }, ], mark: { type: "line" }, encoding: { x: { field: "year", type: "quantitative" }, y: { field: "perTypePerYearRatioWithVisitor", type: "quantitative", aggregate: "mean", axis: { title: "mean park visits" }, }, color: {field: "parkType", type: "nominal"}, } } ] }); 33:T141e,viewof Graphs2 = { let graphObject = { data: { values: data.unionByYear }, columns: 3, hconcat: [ //////////////1 { title: "Relationship of Inbound Tourism", width: 300, height: 280, transform: [ { filter: { field: "year", lte: yearsRange !== null && yearsRange.year !== undefined ? yearsRange.year[1] : Number.MAX_VALUE, } }, { filter: { field: "year", gte: yearsRange !== null && yearsRange.year !== undefined ? yearsRange.year[0] : Number.MIN_VALUE, } }, {filter: "datum.tourist != 0"} ], selection: { area: { type: "interval" } }, mark: { type: "circle", clip: true }, encoding: { x: { field: "year", type: "quantitative", scale: { domain: [2007, 2017] } }, y: { field: "tourist", type: "quantitative", aggregate: "sum", axis: { title: "Inbound Tourism" }, scale: { domain: [8000000000, 100000000000] } }, size: { condition: { selection: "area", value: 20, }, value: 5 }, color: { field: "parkType", type: "nominal" } } }, //////////////2 { title: "Relationship of Park Visits to US Population", width: 300, height: 280, transform: [ { filter: { field: "year", lte: yearsRange !== null && yearsRange.year !== undefined ? yearsRange.year[1] : Number.MAX_VALUE, } }, { filter: { field: "year", gte: yearsRange !== null && yearsRange.year !== undefined ? yearsRange.year[0] : Number.MIN_VALUE, } }, {filter: "datum.income != 0"} ], selection: { area: { type: "interval" } }, mark: { type: "circle", clip: true }, encoding: { x: { field: "year", type: "quantitative", scale: { domain: [1984, 2018] } }, y: { field: "income", type: "quantitative", aggregate: "sum", axis: { title: "Inbound Tourism" }, }, size: { condition: { selection: "area", value: 20, }, value: 5 }, color: { field: "parkType", type: "nominal" } } } ] } if (yearsRange !== null && yearsRange.year !== undefined) { graphObject.hconcat[0].encoding.x.scale = { domain: [yearsRange.year[0], yearsRange.year[1]] } graphObject.hconcat[1].encoding.x.scale = { domain: [yearsRange.year[0], yearsRange.year[1]] } } else { graphObject.hconcat[0].encoding.x.scale = { domain: [d3.min(data.unionByYear, d => d.year), d3.max(data.unionByYear, d => d.year)] } graphObject.hconcat[1].encoding.x.scale = { domain: [d3.min(data.unionByYear, d => d.year), d3.max(data.unionByYear, d => d.year)] } } if (typeOfpark != null && typeOfpark.parkType != undefined) { graphObject.hconcat[0].transform.push({ filter: { field: "parkType", equal: typeOfpark.parkType[0] } }); graphObject.hconcat[1].transform.push({ filter: { field: "parkType", equal: typeOfpark.parkType[0] } }); } return VegaLite(graphObject); }34:T482,html`

${viewof Graphs}

${viewof ParksLocation}

${viewof Graphs2}

`35:[] 2f:{"title":"Notebook 2 IAT 355 Parks","cells":[{"id":0,"value":"md`# Notebook 2 IAT 355 Parks`","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {data} from \"@enderpicture/park-data-wrangling\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"VegaLite = require('vega-embed@5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":915,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":918,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":645,"value":"{\n const button = html`