D3.JS: Discrete filter for image processing

Question

I have an arbitrary raster pattern where blue is -1.0, white is 0.0 and orange is 1.0 (left image). Need to develop an SVG filter, similar to this reference Graying out an image in D3js), but for discretizing (right image).

Eventually, values for all three colors are known.

Pretty sure that basically, I need to go through each pixel and calculate the distance to blue and orange and set the closest.

But, I don't know what filter method I should use out of these https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter (under See Also).

And, maybe, there is another solution, which isn't based on distance calculations?

Answer 1

If I do a black and white pattern with the middle color #808080

And apply the following filter:

<filter id="threshold" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 1"/>
<feFuncG type="discrete" tableValues="0 1"/>
<feFuncB type="discrete" tableValues="0 1"/>
</feComponentTransfer>
<feComponentTransfer>
<feFuncR type="table" tableValues="0.486 0.937"/>
<feFuncG type="table" tableValues="0.812 0.360"/>
<feFuncB type="table" tableValues="0.847 0.125"/>
</feComponentTransfer>
</filter>

I've got what I want at the end

So, it's a half-way solution.