JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<html>
<head>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!--<script src="lib/VSS.SDK.min.js"></script>!-->
</head>
<body>
        <div id="chart_container"></div>
            <script type="text/javascript">

                $(document).ready(function(){

                    var dataObj = []

                    for (let i = 0; i < 5; i++) {
                        dataObj[i] = {
                            potenial: 5 + i,
                            actual: 12 + (2 * i),
                            latest: 9 + (i)
                        }
                    }

                    console.log(dataObj)

                    // Create variable for the SVG
                    var svg = d3.select("#chart_container").append("svg")
                           .attr("height",500)
                            .attr("width",800);

                    // Select, append to SVG, and add attributes to rectangles for bar chart
                    svg.selectAll(".bar")
                        .data(dataObj)
                        .enter().append("rect")
                            .attr("class", "bar")
                            .attr("height", function(d, i) {return (d.actual * 10)})
                            .attr("width","40")
                            .attr("x", function(d, i) {return (i * 60) + 25})
                            .attr("y", function(d, i) {return 400 - (d.actual * 10)});

                })

            </script>
</body>
</html>