Free Code Camp Bar Chart 4

In this example below you will see how to do a Free Code Camp Bar Chart 4 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mtphil, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mtphil ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Free Code Camp Bar Chart 4</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head>
  <link href="https://fonts.googleapis.com/css?family=Cinzel|EB+Garamond" rel="stylesheet">
</head>
<body>
  <h1  class="text-center">United States</h1>
  <h2 id = "title" class="text-center">Gross Domestic Product</h2>
  <div class="text-center" id = "chart"></div>
</body>
  <script src='https://d3js.org/d3.v4.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mtphil/free-code-camp-bar-chart-4-jyvPwW */
body {
  background-color:#04BF84;
}
h1 {
  color:#3F4747;
  font-family: 'Cinzel', serif;
}
h2 {
  font-family: 'EB Garamond', serif;
}
svg {
  background-color:#283739;
}

/*Downloaded from https://www.codeseek.co/mtphil/free-code-camp-bar-chart-4-jyvPwW */
var jsonUrl = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json";

var data = [];
var dataD = [];
var dataV = [];
var date = "";
var value = "";
var count = 15;

var margin = {
  top: 30,
  right: 30,
  bottom: 40,
  left: 50
};

var height = 600 - margin.top - margin.bottom;
var width = 900 - margin.right - margin.left;

fetch(jsonUrl)
  .then(
    function(response) {
      response.json().then(function(d) {
        data = d.data;
        data.forEach(function(result) {
          var stats = {
            date: result[0],
            value: result[1]
          };
          date = stats.date;
          value = stats.value;
          dataD.push(date);
          dataV.push(value);
          height = 600 - margin.top - margin.bottom;
          width = 900 - margin.right - margin.left;

        });
        var yScale = d3.scaleLinear()
          .domain([0, d3.max(dataV)]).range([0, height]);

        var xScale = d3.scaleBand()
          .domain(d3.range(0, dataV.length)).range([0, width]);

        var colorRange = d3.scaleLinear().domain([0, dataV.length]).range(['#FF8F00', '#FF0077']);
        var hoverTool = d3.select('body').append('div')
          .style('position', 'absolute')
          .style('background', '#4646DE')
          .style('padding', '5 15px')
          .style('border', '1px #4646DE solid')
          .style('border-radius', '5px')
          .style('opacity', 0);
        var anDuration = 400;
        var anDelay = 20;
        var ease = d3.easeElasticOut;
        var chart = d3.select('#chart').append('svg')
          .attr('width', width + margin.left + margin.right)
          .attr('height', height + margin.top + margin.bottom)
          .append('g')
          .attr('transform', 'translate (' + margin.left + ',' + margin.top + ')')
          .selectAll('rect')
          .data(dataV)
          .enter().append('rect')
          .style('fill', function(d, i) {
            return colorRange(i);
          })
          .attr('width', xScale.step())
          .attr('height', 0).attr('x', function(d, i) {
            return xScale(i);
          })
          .attr('y', height)
          .on('mouseover', function(d) {
              let convertDate = moment(dataD, 'Y/M/D').format('MMMM  YYYY');
              conDate = convertDate;
              console.log(conDate)
              hoverTool.html(conDate + " " + "$" + " " + d + " " + "Billion");
            });
            hoverTool.transition()
              .style('opacity', 1);

            hoverTool.style('left', (d3.event.pageX) + 'px').style('top', (d3.event.pageY + 'px'));
            d3.select(this).style('opacity', 0.5);
          }).on('mouseout', function(d) {
            hoverTool.transition()
              .style('opacity', 0);
            d3.select(this).style('opacity', 1);
          });

        chart.transition().attr('height', function(d) {
          return yScale(d);
        }).attr('y', function(d) {
          return height - yScale(d);
        }).duration(anDuration).delay(function(d, i) {
          return i * anDelay;
        }).ease(ease);

        var vScale = d3.scaleLinear()
          .domain([0, d3.max(dataV)])
          .range([height, 0]);

        var hScale = d3.scaleBand()
          .domain(d3.range(0, data.length)).range([0, width]);

        var vAxis = d3.axisLeft(vScale)
          .ticks(11)
          .tickPadding(5);

        var hAxis = d3.axisBottom(hScale);

        var vGuide = d3.select('svg')
          .append('g');
        vAxis(vGuide);
        vGuide.attr('transform', 'translate (' + margin.left + ', ' + margin.top + ')');
        vGuide.selectAll('path')
          .style('fill', 'none')
          .style('stroke', 'white');
        vGuide.selectAll('line')
          .style('stroke', 'white');

        var hGuide = d3.select('svg')
          .append('g');
        hAxis(hGuide);
        hGuide.attr('transform', 'translate (' + margin.left + ', ' + (height + margin.top) + ')');
        hGuide.selectAll('path')
          .style('fill', 'none')
          .style('stroke', 'white');
        hGuide.selectAll('line')
          .style('stroke', 'white');
      });
    });

Comments