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%;  
 margin:0;
 padding: 0;
}

JavaScript

var plot = new tauCharts.Plot({

    data: [
        {car: "Toyota Prius+",       co2:  96, hp:  99, mpg: 3.8},
        {car: "Volvo S60",           co2: 135, hp: 150, mpg: 7.4},
        {car: "BMV X5",              co2: 197, hp: 306, mpg: 11.2},
        {car: "Infinity FX",         co2: 238, hp: 238, mpg: 11.2},
        {car: "Mercedes Vito",       co2: 203, hp:  95, mpg: 9.4},
        {car: "Peugeot 3008",        co2: 155, hp: 120, mpg: 9.2},
        {car: "Subaru Forester",     co2: 186, hp: 150, mpg: 10.4},
        {car: "Lexus RX",            co2: 233, hp: 188, mpg: 13.3},
        {car: "Bentley Continental", co2: 246, hp: 507, mpg: 15.4}
    ].reduce(
        function(memo, x) {
            var keyNames = ['hp', 'co2', 'mpg'];
            keyNames.forEach(function(mainParam) {
                keyNames.forEach(function(subParam) {
                    memo.push({
                        param1: mainParam,
                        param2: subParam,
                        value1: x[mainParam],
                        value2: x[subParam]
                    });
                });
            });
            return memo;
        },
        []
    ),

    spec: {

        dimensions: {
            param1: {type: 'category'},
            param2: {type: 'category'},
            value1: {type: 'measure'},
            value2: {type: 'measure'}
        },

        unit: {
            type: 'COORDS.RECT',
            guide: {
                padding: {l: 42, b: 24, r: 8, t: 8}
            },
            x: 'param1',
            y: 'param2',
            unit: [
                {
                    type: 'COORDS.RECT',
                    guide: {
                        showGridLines: 'xy'
                    },
                    x: 'value1',
                    y: 'value2',
                    unit: [
                        {type: 'ELEMENT.POINT'}
                    ]
                }
            ]
        }
    }
});
plot.renderTo('#scatter');