html` <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>`
L = require('leaflet@1.7.1')
{
// Make a container in the Observable DOM to hold the map
let parent = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });
// Make sure Observable renders the parent container so Leaflet can figure out it's size
yield parent;
// Create a map centered on Northeastern's campus
let map = L.map(parent).setView([42.3370, -71.0892], 10); // higher numbers are more zoomed in
let osmTileLayer = L.tileLayer( 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo( map );
}
{
// set up the basic map
let parent = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });
yield parent;
let map = L.map(parent).setView([42.3380, -71.0898], 17); // higher numbers are more zoomed in
let osmTileLayer = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo( map );
// add a marker for the School of Journalism
let marker = L.marker([42.3377,-71.0908], {icon: NEUicon}).addTo(map);
let marker2 = L.marker([42.3385, -71.0923], {icon: coolCat}).addTo(map);
// and label it using the Leaflet Popups
marker
.bindPopup("<b>School of Journalism</b><br>Northeastern University."); // "bind" basically means "connect"
//.openPopup(); // tell it to open by default so no click is required
marker2
.bindPopup("<b>Cool place</b><br>for cool cats")
.openPopup();
}
NEUicon = L.icon({
iconUrl: 'https://web.northeastern.edu/mihc/images/NortheasternLogo.png',
iconSize: [40, 40],
iconAnchor: [20, 20],
popupAnchor: [0, -10],
});
coolCat = L.icon({
iconUrl: 'https://img.pngio.com/download-cool-cat-png-image-library-library-coolcat-boogie-cool-cat-png-352_352.png',
iconSize: [40, 40],
iconAnchor: [20, 20],
popupAnchor: [0, -10],
});
{
// set up the basic map
let parent = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });
yield parent;
let map = L.map(parent).setView([42.3250, -71.0600], 11); // higher numbers are more zoomed in
let osmTileLayer = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo( map );
// the geoJson file has outlines of all the neighborhoods
let myStyles = {
"color": "rgb(0, 0, 0)",
"fillColor": "rgb(0,256, 0)",
"opacity": 0.5,
};
L.geoJSON(bostonNeighborhoods, {style: myStyles, filter: isByAirpot}).addTo(map);
}
nearAirport = [ "Financial District", "Charlestown", "East Boston", "North End"]
function isByAirpot(feature) {
if (nearAirport.includes(feature.properties.Name)) {
return true
}
}
censusTracts = FileAttachment("boston-census-tracts-2010@1.json").json()
housingData = FileAttachment("ACS_13_5YR_B25003_with_ann@1.csv").csv();
colorScale = d3.scaleSequentialQuantile([...housingData.map(tract => parseInt(tract['HD01_VD01']))], d3.interpolateReds)
{
// set up the basic map
let parent = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });
yield parent;
let map = L.map(parent).setView([42.3250, -71.0600], 11); // higher numbers are more zoomed in
let osmTileLayer = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo( map );
// make a lookup table indexed by GEOID10, so we can go from that ID to the total housing count
let housingByGeoId = new Map(housingData.map(row => [row['GEO.id2'], row]));
// this is a *dynamic* style generator, where the fill color is based on the total housing count
// and the color scale we built earlier
let styleGenerator = feature => {
let style = {
"color": "rgb(100, 0, 0)",
"fillColor": colorScale(housingByGeoId.get(feature.properties.GEOID10).HD01_VD03),
"opacity": 1,
"weight": 1,
"fillOpacity": 0.3,
}
return style;
};
L.geoJSON(censusTracts, {style: styleGenerator}).addTo(map);
}
d3 = require("d3@6")
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.
