How to use Plotly.js in React to Visualize and Interact with Your Data

Fang Ran — Sat, 10 Apr 2021 07:25:26 +0000

I've written a tutorial on how to visualize interactive 3D networks (or data) with Python Plotly a few months ago and thought maybe it'll be a good idea to write another one for Plotly.js.
One of the reasons why someone might prefer Plotly.js over Python Plotly could be because of loading speeds - I've once written a React + Flask application (where the datasets and Plotly figures are on Flask) and when I compared it to my React + Plotly.js application, interactivity and loading speeds are much better with Plotly.js.
So here's a quick tutorial on how to use Plotly.js with React! ʕ•́ᴥ•̀ʔっ♡

The final codes for this tutorial can be found in this GitHub repository: https://github.com/Reine0017/mini-tutorials/tree/master/React-Tutorials/visualize-data-plotly.
Let's start off with a basic React application. In your desired project directory, run npx create-react-app .. Then run npm start to bring up the webpage.

Next, we'll want to install the Plotly.js library. You can refer to this link for installation instructions. But basically you'll want to just run (from their npm package page linked above) npm install react-plotly.js plotly.js.

Okay now that installation is done, let's begin writing some codes!

There are TONS of different plots, maps and charts that you can play with with Plotly. In this tutorial, we'll look at how to create a simple helix-shaped interactive 3D scatter plot with Plotly.js.
Let's start off by creating the Plotly component and then importing the react-plotly library. After that, just type in the component like so:

Once we import this component into our App.js, it'll bring up an empty graph with no data (since we did not input any):

Now, let's populate the graph with some data. You can check out their official site to see what kinds of visualizations you can create with Plotly too.
Since we want to create a Helix 3D graph in this tutorial, we'll first get the x, y, and z data coordinates for this 3D graph:

// In your PlotlyComponent.jsx
const linspaceFn = (startValue, stopValue, cardinality) => {
  var arr = [];
  var step = (stopValue - startValue) / (cardinality - 1);
  for (var i = 0; i < cardinality; i++) {
    arr.push(parseFloat((startValue + (step * i)).toFixed(3)));
  }
  return arr;
}
  const t = linspaceFn(0, 20, 100)
  const x = t.map(i => (Math.cos(i)))
  const y = t.map(i => Math.sin(i))
  const z = t

Next, let's populate our component with this data:

data={[
        {
          x: x,
          y: y,
          z: z,
          mode: 'markers', 
          type:'scatter3d',
          marker: {
            size:12,
            color:z,     
            colorscale:'Viridis', 
            opacity:0.8
          }
        }
      ]}

Now we'll have the interactive 3D scatter plot diagram:

This 3D scatter plot is fully interactive and you can configure certain actions too when a user clicks on it. For demo purposes, I'll just make it console log its coordinates onClick.
To register a user's clicks (on the coordinate points in the diagram), we can just write something like this inside the component:

onClick={(data) => {
  console.log(data.points[0])
}}

Here's the final result:

That’s it for today’s tutorial! Hope it was helpful and please feel free to comment or message me if you have any questions at all. Thank you guys for reading this and happy

Plotly-ing! ʕ•́ᴥ•̀ʔっ♡

DEV Community: Fang Ran

How to use Plotly.js in React to Visualize and Interact with Your Data