JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/d3@4.13.0/build/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/taucharts@2.5.1/dist/taucharts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/taucharts@2.5.1/dist/taucharts.min.css">
<div id="scatter"></div>

CSS

html,
body,
#scatter {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
}

.color-red {
  stroke: red;
  fill: red;
}

JavaScript

function clone(row) {
      var newRow = {}
      for (var key in row) {
        newRow[key] = row[key]
      }
      return newRow;
    }
    var plot = new Taucharts.Chart({

      "type": "line",
      "x": ["car"],
      "y": ["co2,hp"],
      "color": "co2-hp-type",

      data: [{
          car: "BMV X5",
          co2: 197,
          hp: 306
        },
        {
          car: "Bentley Continental",
          co2: 246,
          hp: 507
        },
        {
          car: "Infinity FX",
          co2: 238,
          hp: 238
        },
        {
          car: "Toyota Prius+",
          co2: 96,
          hp: 99
        },
        {
          car: "Mercedes Vito",
          co2: 203,
          hp: 95
        },
        {
          car: "Peugeot 3008",
          co2: 155,
          hp: 120
        },
        {
          car: "Volvo S60",
          co2: 135,
          hp: 150
        },
        {
          car: "Subaru Forester",
          co2: 186,
          hp: 150
        },
        {
          car: "Lexus RX",
          co2: 233,
          hp: 188
        }
      ].reduce(function(memo, row) {

        var keyVal = "co2,hp";
        var keyType = "co2-hp-type";

        var r1 = clone(row);
        r1[keyType] = 'co2';
        r1[keyVal] = row['co2'];

        var r2 = clone(row);
        r1[keyType] = 'hp';
        r2[keyVal] = row['hp'];

        return memo.concat([r1, r2]);
      }, [])
    });

    plot.renderTo('#scatter');