Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
Public
Edited
Dec 24
3 forks
12 stars
myGlobe = Globe()
.height(width / 2)
// .globeImageUrl('//unpkg.com/three-globe/example/img/earth-water.png')
.globeImageUrl("//unpkg.com/three-globe/example/img/earth-day.jpg")
//.bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
.backgroundImageUrl("//unpkg.com/three-globe/example/img/night-sky.png")
.pointLat((d) => d.geometry.coordinates[1])
.pointLng((d) => d.geometry.coordinates[0])
.pointRadius(0.7)
.pointAltitude((d) => heightScale(d.properties.mag))
.pointColor((d) => {
if (d.properties.tsunami) {
return "#00e9ff";
//return "blue";
} else {
// return d3.interpolateReds(colorScale(d.properties.sig));
if (d.properties.sig > 500) {
return "#ff4949";
} else {
return "white";
}
}
})
.pointLabel(
(d) => `
<div style="padding: 3px; color:black; font-weight:bold; background-color:white;">${d.properties.title}</div>
`
)
.pointsData(earthquakes.features)
magDomain = d3.extent(
earthquakes.features.map(e => {
return e.properties.mag;
})
)
sigDomain = d3.extent(earthquakes.features.map(f => f.properties.sig))
colorScale = d3.scaleLinear().domain(sigDomain)
heightScale = d3
.scaleLog()
.domain(magDomain)
.range([0.00000001, 0.25])
.clamp(true)
earthquakes = await d3.json(
"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson"
)
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.
