//Entrepreuneurship maps
counties2008 = (await d3.csv('https://raw.githubusercontent.com/TianyuSu/Innovation-Immigration/Maps/Data%20For%20Maps/2017_metro_geo_update.csv?token=AqzVOKTO1KxyqA2ztdqUs2_gwMwyAAETks5cs67YwA%3D%3D'))
.map(c => {
return {
type: "Feature",
geometry: { type: "Point", coordinates: [+c.INTPTLON, +c.INTPTLAT] },
properties: { pov: +c.EntreRate, id: c.GEOID, indus: c.INDUS}
}
})
viewof circleColor = html`<input type="color" value="#ff0400">`
color0 = d3.scaleOrdinal()
.domain(counties2008.map(d => d.indus))
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), counties2008.length).reverse())
.unknown("#ccc")
map = {
let map = this;
if (!map) {
// Create the \`map\` object with the mapboxgl.Map constructor, referencing
// the container div
map = new mapboxgl.Map({
container,
center: [
-98.5795, 39.8283
],
zoom: 3,
style: 'https://s3.us-east-2.amazonaws.com/eviction-lab-prototypes/bubble-colors/assets/style.json'
});
}
let countiesLayer = {
id: "counties_poverty",
type: "circle",
source: "counties2008",
filter: [ ">", "pov", -1 ],
paint: {
"circle-color": circleColor,
"circle-opacity": circleOpacity,
"circle-stroke-color": circleStrokeColor,
"circle-stroke-width": 0.75,
"circle-radius": [
'let', 'data_prop', ['get', 'pov'],
[
'interpolate', ['linear'], ['zoom'],
0.1, [
'interpolate', ['exponential', 1], ['number', ['var', 'data_prop']],
-1, 2,
0, 1,
100, 5
],
0.5, [
'interpolate', ['exponential', 1], ['number', ['var', 'data_prop']],
-1, 2,
0, 2,
100, 30
]
]
]
}
};
// Wait until the map loads, then yield the container again.
yield new Promise(resolve => {
if (map.loaded()) resolve(map);
else map.on('load', () => resolve(map));
});
let bgLayer = map.setPaintProperty('background', 'background-color', bgColor);
if (!map.getSource('counties2008')) {
map.addSource('counties2008', { type: 'geojson', data: {
type: "FeatureCollection",
features: counties2008
}});
}
if (map.getLayer(countiesLayer.id)) {
map.removeLayer(countiesLayer.id);
}
map.addLayer(countiesLayer);
}
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.
