h
macrostratColumns.features.filter(d=>d.properties.col_id ===nHood)[0].properties.col_name
init_marker = d3.geoCentroid(macrostratColumns.features.filter(d=>d.properties.col_id ===nHood)[0])
//lithWithPatterns.success.data.find(({ lith_id }) => lith_id === 68).pattern //Change lith_id to a different number to see representations of other rock types. Reference - https://davenquinn.com/projects/geologic-patterns/
//L = require('leaflet@1.2.0')
//h2 = html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
//We are writing the event listener function for each feature in our geojson layer
function onEachFeature(feature, layer) {
layer.on({
click:whenClicked //callback function
});
}
//We update our data in the function using mutable. This overrides observables defaults so we can push data from within //function scope globally
whenClicked = (event) => {
mutable nHood = event.target.feature.properties.col_id
// mutable h = nHood
}
//We define an variable to be replaced by our callback function
mutable nHood = h
mapSelection = {
if(nHood == null ){
//return Array.from(new Set(macrostratMap(d => d.NEIGHBOURHOOD))) //Set is a new datastructure in ES6 -> only unique values
mutable nHood = h
} else {
return [nHood]
}
}
macrostratColumns = {
let response = await fetch('https://macrostrat.org/api/v2/columns?all&format=geojson_bare');
let json = await response.json();
return json
}
/*viewof macrostratMap = {
// You'll often see Leaflet examples initializing a map like L.map('map'),
// which tells the library to look for a div with the id 'map' on the page.
// In Observable, we instead create a div from scratch in this cell, so it's
// completely self-contained.
let container = DOM.element('div', { style: `width:${width/1.7}px;height:${width*0.8}px` });
// Note that I'm yielding the container pretty early here: this allows the
// div to be placed on the page. This is important, because Leaflet uses
// the div's .offsetWidth and .offsetHeight to size the map. If I were
// to only return the container at the end of this method, Leaflet might
// get the wrong idea about the map's size.
yield container;
// Now we create a map object and add a layer to it.
let map = L.map(container);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
let macrostratColumnLayer = L.geoJson(macrostratColumns, {
weight: 1,
color: '#432',
onEachFeature: onEachFeature
}).bindPopup(function (Layer) { //binds a popup when clicking on each polygon to access underlying data
return Layer.feature.properties.col_id;
}).addTo(map); //Adds the layer to the map.
map.on('click', () =>
mutable nHood = null
);
map.fitBounds(macrostratColumnLayer.getBounds());
}*/
mapboxgl = {
const gl = require("mapbox-gl@2");
if (!gl.accessToken) {
// token allowed only this Observable
gl.accessToken =
"pk.eyJ1IjoidG9mZmkiLCJhIjoiY2lvMDBxMzR3MDB1eHZza2x4NGI2YjI5OSJ9.IEaNA05pWbT92nOu-lEOYw";
const href = await require.resolve("mapbox-gl@2/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
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.
