Use 2D Colormaps Javascript Plugin in React

Question

I'm new to JavaScript and for an assignment I need to use 2D Colormaps Javascript Plugin (https://dominikjaeckle.com/projects/color2d/) for visualization. I know this should be easy, but somehow I encountered the error ERROR in src\ColorMap.js Line 48:29: 'Color2D' is not defined no-undef. I suppose it had something to do with the way I integrated the color2D.js file, so I looked up online and followed the instructions on this post Adding script tag to React/JSX. However, the error still existed and I had no idea why. The framework I use is React and my folder structure is like:

├── node_modules
├── public
├── src
│   ├── data  # colormaps pngs (downloaded from the above website)
│   ├── App.css
│   ├── App.js    # main app
│   ├── ColorMap.js  # colormap component
│   ├── color2d.js  # colormap code (downloaded from the above website)
# other files

In ColorMap.js, part of my code is as below.

import React, { useRef, useEffect } from "react";
import * as d3 from "d3"

function ColorMap() {
    
    const svgRef = useRef();
    const wrapperRef = useRef();
    
    useEffect(() => {
        // code for points and scale are omitted 
        const scriptTag = document.createElement('script');
        scriptTag.src = "color2D.js";
        scriptTag.async = false;
        document.head.appendChild(scriptTag);

        const svg = d3.select(svgRef.current);
        result_mapped = svg... // some operations

        function colorPoints() {
            result_mapped.style("fill", function(d) {
                const rgb = Color2D.getColor(d[0], d[1]);
                return "rgb(" + rgb + ")";
            })
        };

        Color2D.setColormap(Color2D.colormaps.BREMM, () => colorPoints());

        return () => document.head.removeChild(scriptTag);
    });

    return (
        <div ref={wrapperRef}>
            <svg ref={svgRef}></svg>
        </div>
    );
}

export default ColorMap;

The implementation basically follows the source code of the 2D Colormaps Javascript Plugin website. Can anyone help me with it? Thanks.

score 1 · Answer 1 · answered Apr 27 '22 at 13:43

On this line:

Color2D.setColormap(Color2D.colormaps.BREMM, () => colorPoints());

You're using a variable/class instance named Color2D without defining it first. ESLint is telling you:

ERROR in src\ColorMap.js

This is the file the error is in.

Line 48:29:

Line:column where the error is found in that file.

'Color2D' is not defined

Error Message.

no-undef

Rule in eslint (probably defined inside a .eslintrc file or in your package.json) that is causing this to be an error.

On another note, Color2D isn't really usable via import in its current state, so you would need to build it into its own file and export it from there or include it inline.

EDIT

This is untested but, I think if you add export default Color2D to the bottom of color2D.js, you should then be able to import Color2D from './color2d' at the top of your file.

score 0 · Answer 2 · answered Apr 21 '22 at 08:11

You are wrong that using of "color2d" is easy. It's quite weird package that is not published to npm as every other javascript library.

Due to lack of information in the question I don't know how you running your code. I suppose you are doing that without bundling via webpack, esbuild or any other frontend bundlers that is used in every javascript application. If that is true, I recommend you to start building your app via create-react-app – it's good starting point for learning.

"color2d" is very old library, that cannot be added via import, so it is not recommended to use it as is at all. But if you very need to use it, it's better to put library code into your the start of your ColorMap.js file (yes, it is weird, but that is the best way to include it without modifying library source code).

Error ERROR in src\ColorMap.js Line 48:29: 'Color2D' is not defined no-undef is not actually an error, that is more like a warning from eslint.

Use 2D Colormaps Javascript Plugin in React

2 Answers2