Public
Edited
Mar 12, 2023
fredRegions = {
const layer = new deck.GeoJsonLayer({
// This is an Observable hack - changing the id will force the layer to refresh when the cell reevaluates
id: 'fred-regions',
pickable: true,
data: fredtest,
filled: true,
getFillColor: [160, 160, 180, 200],
//extruded: true,
//getFillColor: f => colorScale(f.properties.gen_hght * 1),
//getElevation: f => f.properties.gen_hght < 2000 ? f.properties.gen_hght * 1 : 0,
});
//deckgl.setProps({layers: [layer]});
return layer;
}
deckgl = {
// This is an Observable hack: clear previously generated content
mapContainer.innerHTML = '';
return new deck.DeckGL({
container: mapContainer,
map: mapboxgl,
mapboxApiAccessToken: 'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pudzRtaWloMDAzcTN2bzN1aXdxZHB5bSJ9.2bkj3IiRC8wj3jLThvDGdA',
mapStyle: 'mapbox://styles/mapbox/dark-v9',
initialViewState: {
longitude: -122.4,
latitude: 37.78,
zoom: 11,
pitch: 30,
bearing: 0
},
controller: true,
layers: [fredRegions]
});
}
dataTest = {
async function getData () {
const cors = 'https://cors-anywhere.herokuapp.com/'
const response = await fetch(`${cors}https://api.stlouisfed.org/fred/category?category_id=125&api_key=${fred}=json`)
const data = await response.json()
return data
}
return getData()
}
//data = d3.json(`https://api.stlouisfed.org/geofred/shapes/file?shape=bea&api_key=${fred}`)
`https://api.stlouisfed.org/geofred/shapes/file?shape=bea&api_key=${fred}`
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.
