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="target"></div>

CSS

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

JavaScript

var plot = new Taucharts.Plot({

    settings: {
        fitModel: 'none'
    },

    sources: {
        '?': {
            dims: {},
            data: []
        },

        '$': {
            dims: {
                x: {type: 'category'},
                y: {type: 'category'}
            },
            data: [
                {x: 1, y: 1}
            ]
        },

        '/': {
            dims: {
                car: {type: 'category'},
                co2: {type: 'measure'},
                hp : {type: 'measure'}
            },
            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 }
            ]
        }
    },

    scales: {

        'xScale': {type: 'ordinal', source: '$', dim: 'x'},
        'yScale': {type: 'ordinal', source: '$', dim: 'y'},

        "x_car":{"type":"ordinal","source":"/","dim":"car","autoScale":true,"dimType":"category"},
        "y_co2":{"type":"linear","source":"/","dim":"co2","autoScale":true,"dimType":"measure"},
        "y_hp":{"type":"linear","source":"/","dim":"hp","autoScale":true,"dimType":"measure"},
        "color_undefined":{"type":"color","source":"/"},
        "color_undefined2":{"type":"color","source":"/", brewer: ['color20-2']},
        "size_undefined":{"type":"size","source":"/","min":2,"max":10,"mid":5},
        
        "text:default":{"type":"value","source":"?"},
        "split:default":{"type":"value","source":"?"}
    },

    unit: {
        type: "COORDS.RECT",
        x: 'xScale',
        y: 'yScale',
       ...