<head>
  <!-- Plotly.js -->
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="brushes">
    <input type="radio" id="r1" name="rate" value="0"> Erase
    <input type="radio" id="r2" name="rate" value="1"> Red
    <input type="radio" id="r3" name="rate" value="2" checked="checked"> Blue
  </div>
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>
var gd = document.getElementById('myDiv');
var categoricalDimensionLabels = [
  'body-style',
  'drive-wheels',
  'fuel-type'
];

Plotly.d3.csv(
  'https://raw.githubusercontent.com/plotly/datasets/master/imports-85.csv',
  function(carsData) {
    // Preprocess Data
    var mpg = carsData.map(function(row) { return row['highway-mpg'] });
    var horsepower = carsData.map(function(row) { return row['horsepower'] });

    var categoricalDimensions = categoricalDimensionLabels.map(
      function(dimLabel) {
        // Extract column
        var values = carsData.map(function(row) {
          return row[dimLabel]
        });

        return {
          values: values,
          label: dimLabel
        };
      }
    );

    // Colors
    var color = new Int8Array(carsData.length);
    var colorscale = [[0, 'gray'], [0.33, 'gray'],
                      [0.33, 'firebrick'], [0.66, 'firebrick'],
                      [0.66, 'blue'], [1.0, 'blue']];

    // Layout
    var layout = {
      width: 600,
      height: 800,
      xaxis: {title: 'Horsepower'},
      yaxis: {domain: [0.6, 1], title: 'MPG'},
      dragmode: 'lasso',
      hovermode: 'closest'
    };

    // Build Traces
    var traces = [
      {type: 'scatter',
       x: horsepower,
       y: mpg,
       marker: {color: color,
                colorscale: colorscale,
                cmin: -0.5,
                cmax: 2.5,
                showscale: true,
                colorbar: {tickvals: [0, 1, 2],
                           ticktext: ['None', 'Red', 'Blue']}},
       mode: 'markers',
      },
      {type: 'parcats',
       domain: {y: [0, 0.4]},
       dimensions:categoricalDimensions,
       line: {
         colorscale: colorscale,
         cmin: -0.5,
         cmax: 2.5,
         color: color,
         shape: 'hspline'},
       labelfont: {size: 14}
      }
    ];

    // Make plot
    Plotly.newPlot(gd, traces, layout, {showSendToCloud: true});

    // Update color on selection and click
    var update_color = function(points_data) {
      var new_color = color;
      var color_value = document.querySelector('input[name="rate"]:checked').value;
      console.log(color_value);
      var selection = []
      for(var i = 0; i < points_data.points.length; i++) {
        new_color[points_data.points[i].pointNumber] = color_value;
        selection.push(points_data.points[i].pointNumber);
      }

      // Update selected points in scatter plot
      Plotly.restyle(gd, {'marker.color': [new_color]}, 0)

      // Update color of selected paths in parallel categories diagram
      Plotly.restyle(gd,
                     {'line.color': [new_color]}, 1)
    };

    gd.on('plotly_selected', update_color);
    gd.on('plotly_click', update_color);
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.