Public
Edited
May 10, 2023
Insert cell
Insert cell
viewof form = Inputs.form({
projection: Inputs.select(["equal-earth", "equirectangular", "mercator", "orthographic"], {label: "Projection"}),
lat: Inputs.range([-90, 90], {label: "Latitude", step: 1, value: 0}),
lon: Inputs.range([-180, 180], {label: "Longitude", step: 1, value: 0}),
scale: Inputs.range([0.1, 100], {label: "Scale", step: 0.1, value: 100})
})
Insert cell
viewof Year = Inputs.range([2001, 2022], {label: "Earthquake at different year", step: 1})
Insert cell
viewof magType = Inputs.select(["All", "mb", "md", "Mi", "ml", "ms", "mw", "mwb", "mwc", "mww"],{label: "specify on magnitude type"})
Insert cell
viewof showDensity = Inputs.toggle({label: "Density"})
Insert cell
Plot.plot({
projection: {
//type: "equal-earth", // this can be set static like this
type: form.projection, // or dynamic like this, referencing the form dropdown above.
rotate: [-form.lon, -form.lat], // set from form elements above
domain: d3.geoCircle().center([form.lon, form.lat]).radius(form.scale)()
},
width,
color: {
scheme: "reds"
},
//r: {range: [1,10]},
marks: [
Plot.geo(world110m, {fill: "#eee", stroke: "#bbb"}),
Plot.graticule(),
Plot.sphere( {stroke: "#ddd"} ),
showDensity ? Plot.density(earthdata, { // <-- include density mark only if showDensity is true
x: "longitude",
y: "latitude",
bandwidth: 12,
fill: "density"
}): null,
Plot.dot(filteredData, {
x: "longitude",
y: "latitude",
r: d=>radiusScale(d.magnitude),
fill:"yellow",
stroke: "black"
}),
Plot.geo(world110m,{ strokeOpacity: 0.5 }),
]
})

Insert cell
radiusScale = d3.scaleLinear().domain([1,8]).range([6.4,9.2])
Insert cell
filteredData = earthdata.filter(d => d.year == Year && (magType === 'All' || d.magType === magType));
Insert cell
earthq = FileAttachment("earthquake_data-1.csv").csv()
Insert cell
earthquake_data-1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
earthdata = earthq
Insert cell
import {basemaps} from "@emfielduva/dvlib_maps"
Insert cell
world110m = (await basemaps.world110m.geojson).json()
Insert cell

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.
Learn more