Generate d3 contours without overlapping of previous thresholds

Question

I am generating d3 contours and later parsing it to lat/lng and showing them on map, however each next threshold overlap with previous one (last threshold contains everyting) and I want to prevent it.

This is sample code for how I generate contours:

const values = [-1, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, -1, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5,                      0.5, 0.5, 0.5, 1, 1, 0.5, 0.5, 0.5, 0, 0.5, 1, 1, 1, 1, 0.5, 0.5, 0, 0.5, 1, 1, 1, 1, 0.5, 0.5, 0, 0.5, 1, 1, 1, 1, 0.5, 0.5, 0, 0.5, 0.5, 1, 1, 1, 1, 0.5, 0, 0.5, 0.5, 0.5, 1, 1, 1, 1, 0, 0.5, 0.5, 0.5, 1, 1, 1, 0.5, 0, 0.5, 0.5, 0.5, 1, 1, 1, 1, 0, 0.5, 0.5, 0.5, 0.5, 1, 1, 0.5, 0, 0, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0.5, -1, 0, 0, 0, 0, 0, 0, 0.5, -1];

const contour = d3.contours().size([8, 15]).thresholds([0, 0.5, 1]).smooth(false);
const contoursData = contour(values);

This is how it is looking at map with 3 thresholds (as you can see each threshold contains every before it in them):

• First threshold
• Second threshold
• Last threshold

I tried using turf difference function, however it is not working very well with bigger and more complex fields.

Is there some way to generate contours from the beginning without overlapping?