md`# Notebook 2 IAT 355 Parks`
md`## Press Fullscreen to View the Visualization`
import {data} from "@enderpicture/park-data-wrangling"
d3 = require('d3@5')
VegaLite = require('vega-embed@5')
data
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 <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> | Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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);
});
});
}
}
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"},
}
}
]
});
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);
}
{
const button = html`<button>Fullscreen`;
button.onclick = () => button.parentElement.nextElementSibling.requestFullscreen();
return button;
}
mutable yearsRange = null
mutable typeOfpark = null
mutable parkSelections = null
Graphs.addSignalListener("time", function(name, value) {
if (value == null)
mutable yearsRange = null
else
mutable yearsRange = value
})
Graphs.addSignalListener("typeOfPark", function(name, value) {
if (value == null)
mutable typeOfpark = null
else
mutable typeOfpark = value
})
Graphs.addSignalListener("selectCircles", function(name, value) {
console.log(value);
if (value == null)
mutable parkSelections = null
else
mutable parkSelections = value
})
L = require('leaflet@1.2.0')
V = require("@observablehq/vega-lite@0.2")
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
data.unionByYear
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.