JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script src="https://cdn.plot.ly/plotly-latest.js"></script>
  </head>
  <body>
    
    <div class="container">
        <div id="graphDiv"></div>
    </div>

  <script>

    
    let data = [
        {
            type: 'parcoords',
            pad: [80,80,80,80],
            line: {
                color: [0, 0, 0, 0, 0, 0, 0, 0, 0],
                colorscale: [[0, 'red'], [1, 'green']]
            },
            dimensions: [
                {
                    label: 'T',
                    values: [1, 0, 0, 1, 1, 1, 2, 2, 1],
                    tickvals: [0, 1, 2],
                    ticktext: ['T1', 'T2', 'T3']
                }, {
                    label: 'P',
                    values: [1, 0, 0, 1, 1, 1, 2, 2, 2],
                    tickvals: [0, 1, 2],
                    ticktext: ['P1', 'P2', 'P3']
                }, 
                {
                    label: 'D',
                    values: [0, 0, 0, 1, 1, 1, 1, 1, 2],
                    tickvals: [0, 1, 2],
                    ticktext: ['D1', 'D2', 'D3']
                }
            ]
        }
    ]

    var layout = {
        width: 1280, height: 1000, hovermode: 'closest', 'title': "Parallel Plot Demo",
    };
    
    Plotly.newPlot('graphDiv', data, layout);
  </script>
  </body>
  </html>