Update value when clicking map plot

New To Observable
1

Hi everyone,

This is my first time using Observable Framework for my project. I am currently working on building a climate dashboard. However, I cannot figure out how to add another chart when the user click the reference region grid from the shapefile (it’s denoted as collection in the code below). Here’s the code that I worked with:

const region = Mutable("Sahara");
const updateRegion = (se) => {region.value = se ?? null;};
const getRegion = () => region.value;

Plot.plot({
    width, 
    projection: {type: projection},
    color: {label: "Temperature", legend: true},
    marks: [
        Plot.sphere(),
        Plot.raster(bins, {
                width: 360,
                height: 180,
                x: "lon",
                y: "lat",
                fill: "t",
                interpolate: "barycentric",
                clip: "sphere"
        }),
        Plot.geo(countries, {fill: "none", stroke: "white"}),
        Plot.geo(collection, {fill: "none"}),
        Plot.tip(collection, Plot.pointer(Plot.centroid({title: (d) => d.properties.Name})))
    ]
})
2

The tip option enables you to use the view function, so you could write something like

const region = view(Plot.plot(……));

See Reactivity | Observable Framework for details.

If you have further questions, please open a discussion on GitHub — we’re trying to centralize the support there to create a more effective knowledge base.

2 Likes
3

Hi, thank you for answer. I have a follow up question, but I will open it in the Github discussion.