setSelectedHoods = function(aname)
{
console.log("Starting values in selectedHoods:" , selectedHoods);
let filteredHoods =[];
if (! selectedHoods.includes(aname))
{
mutable selectedHoods.push(aname);
console.log("adding ", aname);
}
else
{
console.log("removing ", aname);
filteredHoods= selectedHoods.filter(e => e !== aname);
mutable selectedHoods = JSON.parse(JSON.stringify(filteredHoods));
}
console.log(mutable selectedHoods);
}
mutable selectedHoods = [];
D3VanAreasMap = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container).setView([49.2527, -123.1207], 11.5);
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
//initialize svg to add to map
L.svg().addTo(map)
//Create selection using D3
const overlay = d3.select(map.getPanes().overlayPane)
const svg = overlay.select('svg')
// create a group that is hidden during zooming
const g = svg.append('g').attr('class', 'leaflet-zoom-hide')
// Use Leaflets projection API for drawing svg path (creates a stream of projected points)
const projectPoint = function(x, y) {
const point = map.latLngToLayerPoint(new L.LatLng(y, x))
this.stream.point(point.x, point.y)
}
// Use d3's custom geo transform method to implement the above
const projection = d3.geoTransform({point: projectPoint})
// creates geopath from projected points (SVG)
const pathCreator = d3.geoPath().projection(projection)
const areaPaths = g.selectAll('path')
.data(VanAreas.features)
.enter()
.append('path')
.attr('fill-opacity', 0.3)
.attr('stroke', 'black')
.attr('stroke-width', 2.5)
// Function to place svg based on zoom
const onZoom = () => areaPaths.attr('d', pathCreator)
// initialize positioning
onZoom()
// reset whenever map is moved
map.on('zoomend', onZoom)
}
VegaLite = require('vega-embed@6')
fedUnemployment = d3.csv("https://gist.githubusercontent.com/mbarison/8ab5b4ef36ade1c6cfd05fb2a680d8f0/raw/4a54f7934ceab051a61fda996c8d58da72693fb8/canada_fed_unemp.csv")
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.
