JSFiddle - React, Tailwind, and code Playground

by Santosh Giridhara

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="chartBytesIn"></div>
<div id="chartBytesOut"></div>

CSS

div.bar {
                display: inline-block;
                width: 20px;
                height: 75px;    /* Gets overriden by D3-assigned height below */
                margin-right: 2px;
                background-color: teal;
            }

JavaScript

//Width and height
            var w = 500;
            var h = 250;
            var barPadding = 1;
            
            var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                            11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
            
            //Create SVG element
            var svgbi = d3.select("#chartBytesIn")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            svgbi.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x", function(d, i) {
                       return i * (w / dataset.length);
               })
               .attr("y", function(d) {
                       return  h - (d * 4);
               })
               .attr("width", w / dataset.length - barPadding)
               .attr("height", function(d) {
                       return d * 4;
               })
               .attr("fill", function(d) {
                    return "rgb(0, 0, " + (d * 10) + ")";
               });

 var svgbo = d3.select("#chartBytesIn")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            svgbo .selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x", function(d, i) {
                       return i * (w / dataset.length);
               })
               .attr("y", 0)
               .attr("width", w / dataset.length - barPadding)
               .attr("height", function(d) {
                       return d * 4;
               })
               .attr("fill", function(d) {
                    return "rgb(0, 0, " + (d * 10) + ")";
               });

            svgbi.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) {
                      ...