Interaction Design at Sheridan College
Public
Edited
Mar 7
1 fork
/* import the shapefile.js library (shp) */
shp = require("https://unpkg.com/shpjs@latest/dist/shp.js")
/* create a variable to store binary shapefile data */
archive = FileAttachment("forward-sortation-areas-canada.zip").arrayBuffer()
/* make a variable 'canada' to hold data interpreted by shapefile.js */
canada = shp(archive)
regions
viewof select = Inputs.select(regions, {
label: "Select one",
format: x => `${x.Region} (${x.FirstLetter})`
})
viewof selected = Inputs.select(regions, {
label: "Region",
format: x => `${x.FirstLetter} (${x.Region})`,
value: regions.find(t => t.Region === "Metropolitan Toronto")
})
/* build a leaflet map to show the FSAs in Toronto */
map = {
const container = yield htl.html`<div style="height: 700px;">`;
const map = L.map(container);
const layer = L.geoJSON(region, {
/* for each FSA make a simple Popup
see also: https://leafletjs.com/examples/geojson/ */
onEachFeature: (feature, layer) => {
layer.bindPopup('<p>'+feature.properties.CFSAUID+'</p>');
}
}).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);
}
FitBit data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
fitbitData
X
ActivityDate
Y
—
Color
TotalDistance
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
Select a data source…
Type SQL, then Shift-Enter. Ctrl-space for more options.
viewof select1 = Inputs.select(["A", "B"], {label: "Select one"})
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.
