# Color Mapping Discrete Contours

**URL:** https://discourse.vtk.org/t/color-mapping-discrete-contours/4913
**Category:** Web
**Created:** [December 28, 2020, 6:59pm UTC](https://discourse.vtk.org/t/color-mapping-discrete-contours/4913 "2020-12-28T18:59:18Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![rich](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/r/35a633/32.png) [@rich](https://discourse.vtk.org/u/rich)
#### Post date: [December 28, 2020, 6:59pm UTC](https://discourse.vtk.org/t/color-mapping-discrete-contours/4913/1 "2020-12-28T18:59:19Z")

</div>

Hi,  
I am trying to recreate a similar example using vtk.js to that shown in pyvista (see target example below) where the color scale can be set to discrete values for scalars within a particular range. I am having trouble finding a reference example to help me with this problem. See below where I have got to so far… struggling to understand if `lookupTable.addRGBSegment` will be able to help me achieve this. Any help much appreciated!

[Link to Pyvista example I’m trying to replicate](https://docs.pyvista.org/examples/02-plot/cmap.html#sphx-glr-examples-02-plot-cmap-py)

```javascript
            // Assume scalar values are between 0 and 1 for now.
            lookupTable = vtk.Rendering.Core.vtkColorTransferFunction.newInstance();

            // Attempt to set all scalar values between 0to0.5 = black and all values 0.5to1.0 = white
            lookupTable.addRGBSegment(0, 1, 1, 1, 0.5, 1, 1, 1)
            lookupTable.addRGBSegment(0.5, 0, 0, 0, 1.0, 0, 0, 0)

            lookupTable.setVectorModeToMagnitude();
            lookupTable.setMappingRange(0,1);
            lookupTable.updateRange();
            lookupTable.setDiscretize(true)

            mapper.setLookupTable(lookupTable);
            mapper.setColorModeToMapScalars();
            mapper.setInterpolateScalarsBeforeMapping();
            mapper.setScalarModeToUsePointData();
            mapper.setScalarVisibility(true);
            // Assume scalar range is between 0 and 1 for now. This will be set dynamically with more complex example.
            mapper.setScalarRange(0,1);

            const actor = vtk.Rendering.Core.vtkActor.newInstance();
            actor.setMapper(mapper);

```

---

<div class="post-metadata">

### Author: ![rich](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/r/35a633/32.png) [@rich](https://discourse.vtk.org/u/rich)
#### Post date: [December 29, 2020, 6:47pm UTC](https://discourse.vtk.org/t/color-mapping-discrete-contours/4913/2 "2020-12-29T18:47:24Z")

</div>

Solved using the following js.code also the bug fix kindly provided in the latest release of vtk.js which was occurring with the discrete color function.

> <https://github.com/Kitware/vtk-js/commit/011f86f55197d6acb90dffa4862bcdd70896f484>

```auto
// Get the polydata
            _polydata = writerReader.getOutputData()
            arrayName = _polydata.getPointData().getArrayName(0);
            activeArray = _polydata.getPointData().getArrays()[0];
            dataRange = activeArray.getRange()
            console.log(dataRange)

            var preset = vtk.Rendering.Core.vtkColorTransferFunction.vtkColorMaps.getPresetByName('jet');
            lookupTable = vtk.Rendering.Core.vtkColorTransferFunction.newInstance();
            lookupTable.setNumberOfValues(no_colors) // no_colors an integer representing the number of discrete colors
            lookupTable.setDiscretize(true)

            lookupTable.applyColorMap(preset);
            lookupTable.setVectorModeToMagnitude();
            lookupTable.setMappingRange(dataRange[0], dataRange[1]);
            lookupTable.updateRange();

            console.log(`Range of lookup table: ${lookupTable.getRange()}`)
            for (i = 0; i < 10; i++) {
                var myVal = Math.round(i*0.1*10)/10
              console.log(`${myVal}=${lookupTable.mapValue(myVal)}`)
            }

            mapper.setLookupTable(lookupTable);
            mapper.setColorModeToMapScalars();
            mapper.setInterpolateScalarsBeforeMapping(true);
            mapper.setScalarModeToUsePointData();
            mapper.setScalarVisibility(true);
            // Assume scalar range is between 0 and 1 for now. This will be set dynamically with more complex example.
            mapper.setScalarRange(dataRange[0], dataRange[1]);

            const actor = vtk.Rendering.Core.vtkActor.newInstance();
            actor.setMapper(mapper);

```