Data Visualization with Bar Chart

Data Visualization with Bar Chart.markdown

Data Visualization with Bar Chart

US Gross Domestic Product data visualization using D3.js.

A Pen by V on CodePen.

License.

index.html

<div class="container-fluid nopadding"> 
  <nav class="navbar navbar-inverse navbar-fixed-top topnav" role="navigation">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toggle-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand font-effect-neon" target=_blank href="http://codepen.io/rfprod"><span class="glyphicon glyphicon-wrench"></span> RFProd</a>
    </div>
    <div class="collapse navbar-collapse" id="toggle-nav">
      <div class="container-fluid"> 
        <ul class="nav navbar-nav navbar-right font-effect-emboss">
          <li class="nav-tabs"><a href="#leaderboard"><span class="glyphicon glyphicon-stats"></span> Data Visualization with Bar Chart</a></li>
          <li class="nav-tabs"><a href="https://gist.github.com/rfprod/8e79ac94313537184d31" target=_blank><span class="glyphicon glyphicon-download-alt" ></span> GIST</a></li>
        </ul>
      </div>
    </div>

  </nav>
  <a name="leaderboard"></a>
  <div class="home sect">
    <div class="container-fluid">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        <h2 class="hidden-sm hidden-md hidden-xl"><span class="glyphicon glyphicon-stats"></span> Data Visualization with Bar Chart</h2>
        <div id="output">
          Output
        </div>
        <span class="credits">info <a href="https://d3js.org/" target=_blank>D3.js</a> | <a href="https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json" target=_blank>GDP data</a> <br/>licence <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target=_blank>GPL 3.0</a></span>
      </div>
    </div>
  </div>
</div>

script.js

$(document).on('ready',function(){
  (function (){
    var UserInstructionsAndGDPChart = React.createClass({
      render: function(){
        return (
          <span>
            <p id="user-instructions">GDP visualization using D3.js.</p>
            <div id="gdp"></div>
          </span>
        );
      }
    });
    ReactDOM.render(<UserInstructionsAndGDPChart />,document.getElementById('output'));
    
    var gdpContainerObj = d3.select('#gdp');
    
    $.getJSON('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json', function(json){
      gdpContainerObj.append('p').attr('id','user-instructions').html(json.source_name+'<br>updated: '+json.updated_at);
      gdpContainerObj.append('p').attr('id','user-instructions').html();
      console.log('source name: '+json.source_name);
      console.log('updated at: '+json.updated_at);
      console.log('description: '+json.description);
      console.log('column names: '+json.column_names);
      gdpContainerObj.append('svg').attr('class','chart');
      var jsonData = json.data;
      console.log('json data: '+jsonData);
      var dates = [], values = [];
      for (var i=0;i<jsonData.length;i++){
        dates.push(jsonData[i][0]);
        values.push(jsonData[i][1]);
      }
      var k = 0;
      var windowWidth = $(window).width();
      if (windowWidth < 1000) k = windowWidth/500;
        else k = windowWidth/1000;
      var width = $('#gdp').width()-75*k;
      var height = 300;
      var barWidth = width / values.length;
      console.log('barWidth: '+barWidth);
      var chartObj = d3.select('.chart')
        .attr("width", width)
        .attr("height", height);
      var y = d3.scale.linear().domain([0, d3.max(values, function(val) {return val;})]).range([height,0]);
      var yearsXaxis = [];
      for (var i=0;i<dates.length;i++){
        if (yearsXaxis.indexOf(dates[i].split('-')[0]) == -1) yearsXaxis.push(dates[i].split('-')[0]);
        else yearsXaxis.push('');
      }
      var x = d3.scale.ordinal().domain(yearsXaxis).rangeBands([0, width]);
      var div = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);
      var tooltip = d3.select('.tooltip');
      
      var bar = chartObj.selectAll('g').data(values).enter()
        .append('g')
          .attr("transform", function(d, i) {return "translate(" + i*barWidth + ",0)";});
      var xCursorPosition = 0, yCursorPosition = 0;
      bar.append("rect")
        .attr("class", function(d,i){return "bar "+i;})
        .attr("x",function(val){return x(val);})
        .attr("y",function(val){return y(val);})
        .attr("width", barWidth)
        .attr("height", function(val){return height - y(val);})
        .on("mouseover", function(){
          document.onmousemove = function(e){
            xCursorPosition = e.pageX;
            yCursorPosition = e.pageY;
          }
          d3.select(this).transition()
            .duration(100)
            .style("opacity", .3);
          div.transition()
            .duration(100)
            .style("opacity", .9);
        })
        .on("mousemove", function(){
          tooltip.style("left",xCursorPosition+"px");
          tooltip.style("top",yCursorPosition-30+"px");
          var index = d3.select(this).attr('class').substr(4,d3.select(this).attr('class').length-1);
          var dataObj = jsonData[index];
          tooltip.html('date: '+dataObj[0]+'<br>'+dataObj[1]+' Billions $');
        })
        .on("mouseout", function(){
          document.onmousemove = null;
          d3.select(this).transition()
            .duration(400)
            .style("opacity", 1);
          div.transition()
            .duration(400)
            .style("opacity", 0);
        });
      var margin = {top: 20, right: 30, bottom: 30, left: 40};
      chartObj
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
      chartObj.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
      var yAxis = d3.svg.axis()
        .scale(y)
        .orient("right")
        .ticks(5,'$');
      chartObj.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + width + ",0)")
        .call(yAxis);
    });
  })();
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>

style.css

$black: #000000
$white: #ffffff
$grey: #bfbfbf
$blue: #3366cc
body
  color: $black
  font-family: 'Play', sans-serif
  font-size: 2.2em
  overflow-x:hidden
  .tooltip
    position: absolute
    text-align: center
    width: auto !important
    height: auto !important
    padding: 2px
    font: 12px sans-serif
    background: lightsteelblue
    border: 0px
    border-radius: 8px
    pointer-events: none
  .nopadding
    padding: 0
  .navbar-brand
    font-size: 1em
  .home
    min-height: 100vh
    height: auto !important
  .sect
    padding-top: 8vh
    .githublogo
      height: 1em
    h2
      text-align: center
      font-weight: bold
    #output
      text-align: center
      width: 100%
      height: auto !important
      #user-instructions
        text-align: center
        font-size: 0.75em
        margin-top: 1em
      #gdp
        display: block
        background-color: $grey         
        .chart
          width: 97%
          .bar
            display: block
          rect
            fill: $blue
          text
            fill: $black
          .axis
            text
              font: 9px sans-serif
            path, line
              fill: none
              stroke: #000
              shape-rendering: crispEdges
      .hidden
        display: none
      a
        text-decoration: none
    .credits
      display: block
      text-align: center
      font-size: 0.75em
      a:hover
        text-decoration: none

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Play&effect=neon" rel="stylesheet" />