import { getMeasurementData, luts } from "@maris-iaea/api"
params = ({
sampleTypeId: 1,
nuclideId: 33,
samplingDateFrom: "2009-01-01",
samplingDateTo: "2024-01-01"
})
luts.nuclides
luts.sampleTypes
dataRaw = getMeasurementData(params)
Object.keys(dataRaw[0])
dataSelected = dataRaw.map(d => ({lat: d.latitude,
lon: d.longitude,
time: new Date(d.begPeriod),
depth: d.sampleDepth,
isDetected: d.detection,
activity: d.activity,
unit: d.unit
}))
dataSelected.map(d=> ({...d,
activity: d.unit === 'Bq/m3' ? d.activity: d.activity/(1.025*1000),
unit: 'Bq/m3'}))
data = dataSelected.filter(d=> d.isDetected === '=')
data
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
x: {
round: true,
ticks: 10,
transform: (d) => Math.pow(10, d),
type: "log",
tickFormat: "~s",
label: `Activity in Bq/m3 (log scale) →`
},
y: {
label: "Count ↑"
},
marks: [
Plot.rectY(
data,
Plot.binX(
{ y: "count" },
{
x: (d) => Math.log10(d.activity || NaN),
inset: 0
}
)
)
],
height: 200
})
Plot.plot({
marks: [
Plot.rectY(
data,
Plot.binX({ y: "count" }, { x: "time", tip: true })
),
Plot.ruleY([0])
],
height: 200
})
hexTimeChart = Plot.plot({
color: { scheme: "OrRd" },
y: {
type: "log",
tickFormat: "~s",
inset: 6
},
marks: [
Plot.dot(
data,
Plot.hexbin(
{ fill: "count" },
{
x: "time",
y: "activity",
symbol: "hexagon",
fillOpacity: 0.9,
stroke: "black",
strokeWidth: 0.5,
strokeOpacity: 0.5,
binWidth: 7,
tip: true
}
)
)
]
})
Plot.plot({
width: 450,
// height: 450,
projection: {
type: "equal-earth",
},
marks: [
Plot.dot(data, {
x: "lon",
y: "lat",
// uncomment the line below to see how radius can reflect activity levels
// r: d=> Math.log(d.activity),
fill: "black",
fillOpacity: 0.5,
stroke: 'white'
})
]
})
world = (
await fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/land-50m.json")
).json()
land = topojson.feature(world, world.objects.land)
Plot.plot({
projection: {
type: "equal-earth",
},
marks: [
Plot.geo(land, {
fill: "#ffffff",
stroke: "black",
strokeWidth: 0.5
}),
Plot.graticule(),
Plot.dot(data, {
x: "lon",
y: "lat",
// uncomment the line below to see how radius can reflect activity levels
// r: d=> Math.log(d.activity),
fill: "black",
fillOpacity: 0.5,
stroke: 'white'
}),
Plot.sphere({ strokeWidth: 0.5 })
],
// width: 1100
})
// feel free to adjust it
activityBins = [1, 20, 1000, 10000]
activityWorld = Plot.plot({
color: {
type: "threshold",
scheme: "YlGnBu",
domain: activityBins
},
projection: {
type: "equal-earth"
},
marks: [
Plot.geo(land, {
fill: "#ffffff",
stroke: "black",
strokeWidth: 0.5
}),
Plot.graticule(),
Plot.dot(
data,
Plot.hexbin(
{
// replace max by mean, median, ...
fill: (g) => d3.max(g, (d) => d.activity),
},
{
x: "lon",
y: "lat",
fillOpacity: 0.9,
symbol: "hexagon",
stroke: "black",
strokeWidth: 0.2,
binWidth: 8,
}
)
),
Plot.sphere({ strokeWidth: 0.5 })
]
})
viewof depth = Inputs.range([-1, 100], {
value: 0,
step: 1,
label: "Max depth (m) of interest: "
})
activityWorldDepth = Plot.plot({
color: {
type: "threshold",
scheme: "YlGnBu",
domain: activityBins
},
projection: {
type: "equal-earth",
// To change center ...
rotate: [-125, 0],
},
marks: [
Plot.geo(land, {
fill: "#ffffff",
stroke: "black",
strokeWidth: 0.5
}),
Plot.graticule(),
Plot.dot(
data,
Plot.hexbin(
{
fill: (g) => d3["max"](g, (d) => d.activity),
},
{
x: "lon",
y: "lat",
fillOpacity: 0.9,
symbol: "hexagon",
stroke: "black",
strokeWidth: 0.2,
binWidth: 8,
filter: (d => d.depth <= depth),
}
)
),
Plot.sphere({ strokeWidth: 0.5 })
]
})
center = [141.042132, 37.423152] // lon, lat of FDNPP
viewof kms = Inputs.range([0, 3000], {
value: 300,
step: 10,
label: "Radius around selected center point(in km): "
})
circle = d3
.geoCircle()
.center(center)
.radius((kms / (6371 * Math.PI * 2)) * 360)
.precision(10)()
dataWithinRadius = data.filter(
(d) => d3.geoDistance([d.lon, d.lat], center) < kms / 6371
)
activityFDNPP = Plot.plot({
color: {
type: "threshold",
scheme: "YlGnBu",
domain: activityBins
},
projection: {
type: "azimuthal-equidistant",
rotate: center.map((d) => -d),
domain: circle,
inset: 20
},
marks: [
Plot.geo(land, {
fill: "#ffffff",
stroke: "black",
strokeWidth: 0.5
}),
Plot.graticule(),
Plot.dot(
dataWithinRadius,
Plot.hexbin(
{
fill: (g) => d3["max"](g, (d) => d.activity),
},
{
x: "lon",
y: "lat",
fillOpacity: 0.9,
symbol: "hexagon",
stroke: "black",
strokeWidth: 0.2,
binWidth: 8,
}
)
),
Plot.geo(circle, {
stroke: "#bbb",
strokeWidth: 1,
strokeDasharray: "5,3"
}),
Plot.sphere({ strokeWidth: 0.5 })
],
width: 500
})
Let's define our time period of interest:
timePeriod = [2006, 2011, 2012, 2015, 2017, 2020, 2023]
activityFDNPPTime = Plot.plot({
color: {
type: "threshold",
scheme: "YlGnBu",
domain: activityBins
},
projection: {
type: "azimuthal-equidistant",
rotate: center.map((d) => -d),
domain: circle,
},
fx: {
transform: (d) => timeScale(d.getFullYear()),
label: "Date →",
reverse: false,
},
facet: {
data: dataWithinRadius,
x: "time",
},
marks: [
Plot.geo(land, {
fill: "#ffffff",
stroke: "black",
strokeWidth: 0.5
}),
Plot.graticule(),
Plot.dot(
dataWithinRadius,
Plot.hexbin(
{
fill: (g) => d3["max"](g, (d) => d.activity),
},
{
x: "lon",
y: "lat",
fillOpacity: 0.9,
symbol: "hexagon",
stroke: "black",
strokeWidth: 0.2,
binWidth: 5,
// facet: "include"
}
)
),
Plot.geo(circle, {
stroke: "#bbb",
strokeWidth: 1,
strokeDasharray: "5,3"
}),
Plot.sphere({ strokeWidth: 0.5 })
],
width
})
timeScale = function(array) {
const timeDomain = array.slice(1, -1)
const timeRange = d3.pairs(array).map((d) => `${d[0]} - ${d[1]}`)
return d3.scaleThreshold().domain(timeDomain).range(timeRange)
}(timePeriod)
import {toc} from "@mbostock/toc"
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.
