Soil Contamination Visualizer

The problem

Contamination figures get regenerated constantly as new sampling rounds come in. Building them by hand each time is slow, and small inconsistencies creep in between versions.

What I built

A single-file visualizer that reads the sample data as GeoJSON and renders maps and figures that update live as you change the filters — sampling round, “sampled only,” and a mercury threshold slider — with statistics recomputed on the fly.

How I solved a piece of it

A single filter function is the heart of it: it reads the active dataset checkboxes and the threshold input, then returns only the sampled features above that threshold. Everything the figure draws — points, counts, stats — derives from that one filtered set, so the whole view stays consistent as you adjust controls.

Outcome

Figures that used to be hand-assembled became a few clicks, consistent across versions, and easy to regenerate whenever the data changed.

A snippet

const getFilteredFeatures = () => {
  const dsFilter = Array.from(document.querySelectorAll('.dsFilter:checked'))
    .map((cb) => cb.value);
  return DATA.features.filter((f) =>
    dsFilter.includes(f.properties.round.toString()) &&
    f.properties.sampled === true &&
    (f.properties.Hg || 0) > parseInt(document.getElementById('fThr').value)
  );
};