JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.js"></script>
<div id="scatter"></div>

CSS

html,body,#scatter{
  width:100%;
  height:100%;
}
body {
  margin:0;
}
.color-red {
    stroke: red;
    fill: red;
}

JavaScript

var plot = new tauCharts.Plot({

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

            x.euroEco = (x.co2 < 140) ? 'eco' : 'non-eco';
            x.power = (x.hp < 150) ? 'low' : ((x.hp < 200) ? 'normal' : 'high');
            return x;

        }),

    spec: {
        dimensions: {
            car: {type: 'category'},
            euroEco: {type: 'category'},
            power: {
                type: 'order',
                order: ['low', 'normal', 'high']
            },
            co2: {type: 'measure'},
            hp: {type: 'measure'}
        },

        unit: {
            type: 'COORDS.RECT',
            guide: {
                split: false,
                padding: {l: 42, b: 24, r: 8, t: 8},
            },
            x: 'euroEco',
            y: 'power',
            unit: [
                {
                    type: 'COORDS.RECT',
                    guide: {
                        showGridLines: 'xy',
                        padding: {l: 52, b: 42, r: 8, t: 8},
                        x: {label: 'CO2 emission, g/km'},
                        y: {label: 'Horse power'}
                    },
                    x: 'co2',
                    y: 'hp',
                    unit: [
                        {type: 'ELEMENT.POINT'}
                    ]
                }
            ]
        }
    }
});
plot.renderTo('#scatter');