JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.5.min.js"></script>

JavaScript

var svg = dimple.newSvg("body", 800, 600);
        var data = [
            { "a":300, "b":2000, "c":"a" },
            { "a":400, "b":3000, "c":"b" },
            { "a":340, "b":2200, "c":"c" },
            { "a":300, "b":5000, "c":"d" }
        ];
        var chart = new dimple.chart(svg, data);
        var x = chart.addMeasureAxis("x", "a");
        var y = chart.addMeasureAxis("y", "b");
        chart.addSeries("c", dimple.plot.bubble);
        chart.draw();

var fromX = x._scale(210),
    toX = x._scale(320),
    fromY = y._scale(2200),
    toY = y._scale(3100)

svg.append("rect")
    .attr("x", fromX)
    .attr("y", toY)
    .attr("width", toX - fromX)
    .attr("height", fromY - toY)
    .style("fill", "grey")
    .style("opacity", 0.2);