Interaction Design at Sheridan College
catData.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof selectedNeighbourhood = Inputs.select(
new Set( catdata.map(row => row.Neighbourhood).concat("All Neighbourhoods") ),
{
label: "Select a Neighbourhood",
value: "All Neighbourhoods"
}
)
localCats = catdata.filter(cat => cat.Neighbourhood == selectedNeighbourhood || selectedNeighbourhood == "All Neighbourhoods")
localFSAs = localCats.map(row => row['FSA']) /* makes an array of all the FSAs that we need to map */
localGeoJSON = canadaGeoJSON.features.filter(
/* check if the array includes the FSA for this feature */
feature => localFSAs.includes(feature.properties.CFSAUID)
)
localGeoJSON.map(feature =>{
/* for each FSA, find a matching row of data and copy over useful properties. */
let data = localCats.find(row => row['FSA'] == feature.properties.CFSAUID)
feature.properties.FSA = data.FSA
feature.properties.Neighbourhood = data.Neighbourhood
feature.properties.Count = data.Count
return feature
})
/* build a leaflet map to show how many cats are registered in Toronto */
map = {
const container = yield htl.html`<div style="height: 700px;">`;
const map = L.map(container);
const layer = L.geoJSON(localGeoJSON, {
/* for each FSA make a simple Popup
see also: https://leafletjs.com/examples/geojson/ */
onEachFeature: (feature, layer) => {
layer.bindPopup( `
<h2>${feature.properties.CFSAUID} ${feature.properties.Neighbourhood}</h2>
<p>${feature.properties.Count} Licensed Cats in 2021</p>
`);
},
/* Leaflet allow us to set the STYLE of each vector shape dynamically.
style options are documented here: https://leafletjs.com/reference.html#path */
style: (feature) =>{
return{
/* Let's change the opacity based on the number of cats. */
stroke: 0,
fillColor: '#ff6600',
fillOpacity: feature.properties.Count / 550
}
}
}).addTo(map);
map.fitBounds(layer.getBounds(), {maxZoom: 10});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
