Passionate about viz & systems thinking. Stanford CS 2017
viewof map = {
const container = html`<div style="height:600px;">`;
yield container; // Give the container dimensions.
const map = (container.value = new mapboxgl.Map({
container,
center: pointsData.features[0].geometry.coordinates,
zoom: 10,
style: "mapbox://styles/jguerrag/cjuerw13z2vja1fndc9wzk7eo",
scrollZoom: true
}));
// Setup our svg layer that we can manipulate with d3
const bb = container.getBoundingClientRect();
var svg = d3
.select(container)
.append("svg")
.style("position", "absolute")
.style("top", 0)
.style("left", 0)
.attr("width", bb.width)
.attr("height", bb.height)
.style("pointer-events", "none"); // the svg shouldn't capture mouse events, so we can have pan and zoom from mapbox
//Project any point to map's current state
function projectPoint(lon, lat) {
var point = map.project(new mapboxgl.LngLat(lon, lat));
this.stream.point(point.x, point.y);
}
//Projection function
var transform = d3.geoTransform({ point: projectPoint });
var path = d3.geoPath().projection(transform);
const dots = svg
.selectAll(".puesto")
.data(pointsData.features)
.join("path")
.attr("class", "puesto")
.style("fill", "salmon")
.on("mouseover", d => (mutable hovered = d))
.style("pointer-events", "all");
const update = () => {
dots.attr("d", path);
};
// Every time the map changes, update the dots
map.on("viewreset", update);
map.on("move", update);
map.on("moveend", update);
invalidation.then(() => {
map.off("viewreset", update);
map.off("move", update);
map.off("moveend", update);
map.remove();
});
update();
}
latLonObjects = [{Latitude: -74.16713612199999, Longitude: 4.605662527848803}]
pointsData = createMapboxPointDataFromLatLons(latLonObjects)
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.
