JSFiddle - React, Tailwind, and code Playground

by cannelflow

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
   
    <div class="container-fluid text-center">
        <br /><br />
        <svg class="mainContainer">
        </svg>
    </div>

CSS

svg {
  
  margin-left: auto;
  margin-right: auto;
  display: block;
  background-color:antiquewhite;
}
body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.bar {
  fill: orange;
}

.bar:hover {
  fill: orangered ;
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
.notes {
  font-size: 12px;
  font-family: sans-serif;
  color: steelblue;
  padding: 20px;
  text-align: center;
  vertical-align:bottom;
}
.title {
  font-size: 2.5em;
  font-family: sans-serif;
  color: steelblue;
  text-align: center;
  padding: 15px 0px 5px 0px;
}

JavaScript

var url = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json";

//Fetch Data By .$getJSON Method
$.getJSON(url, function (d) {
    var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
    ];
    var data = d.data;
    /*test data by
    console.log(data[0][0]);
    */
    //create Margin
    var margin = { top: 40, right: 20, bottom: 30, left: 50 },
        width = 960 - margin.left - margin.right,
        height = 600 - margin.top - margin.bottom;
    /*
       Define Min & Max Data for Scale
    */
    console.log(d.description);
    var minDate = new Date(data[0][0]);
    var maxDate = new Date(data[d.data.length - 1][0]);
    /*
     test data by 
     console.log(minDate);
     console.log(maxDate);
    */
    /*
    define scale then followed by axis
    */
    // define x and y scales
    // define x and y scales
    var xScale = d3.time.scale().
        domain([minDate, maxDate]).
        range([0, width]);
    var yScale = d3.scale.linear().
        domain([0, d3.max(data, function (d) {
            return d[1];
        })]).
        range([height, 0]);
    // define x axis and y axis
    var xAxis = d3.svg.axis().
        scale(xScale).
        orient("bottom").
        ticks(d3.time.years, 5);
    var yAxis = d3.svg.axis().
        scale(yScale).
        orient("left").
        ticks(10, "");
    var thisDate = new Date(data[0][0]);
    /*
    Create Tooltip
    */
    var toolTip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function (d) {
          return ('<strong>$' + d[1].toLocaleString() + ' Billion</strong><p>' + thisDate.getFullYear() + ' - ' + monthNames[thisDate.getMonth()] + '</p>');
      });
    /*
    create svg element then append height and width and g which act as a container
    */
    var svg = d3.select(".mainContainer").
      attr({
          "width": width + margin.right +...