Visualize Data with a Bar Chart [freeCodeCamp [Data Visualization]] (Challenge)

index.html

<div class="container">
    <div class="chart"></div>
</div>

script.js

(function() {
  'use strict'
fetch('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json')
.then(function(response) { return response.json() })
.then(function(data) { 

var marginTop = 10;
var marginBottom = 25;
var marginLeft = 60;
var marginRight = 15;
var width = 700 - marginLeft;
var height = 400 - marginBottom;
var maxDate = new Date(data.to_date);
var minDate = new Date(data.from_date);

var scaleY = d3.scale.linear()
    .domain([0, d3.max(data.data.map(function(d) { return d[1]; }))])
    .range([0, height - marginTop]);

var scaleX = d3.scale.ordinal()
    .domain(d3.range(0, data.data.length))
    .rangeBands([0, width - marginRight]);
  
var axisY = d3.svg.axis()
  .scale(d3.scale.linear()
    .domain([d3.max(data.data.map(function(d) { return d[1]; })), 0])
    .range([0, height - marginTop]))
  .orient("left")
  .ticks(11);

var axisX = d3.svg.axis()
  .scale(d3.time.scale()
      .domain([minDate, maxDate])
      .range([0, width -marginRight ]))
  .orient('bottom')
  .ticks(d3.time.years, 5);

var bar = d3.select('.chart')
  .append('svg')
  .attr('width', width + marginLeft)
  .attr('height', height + marginBottom)
  .style({'background': '#fff', 'position' : 'relative'})

var toolTip = d3.select('.chart')
  .append('div')
  .attr('class', 'tooltip')
  .attr('style','visibility: hidden;')

bar.append('g')
  .append('text')
  .attr('x', marginLeft * 2)
  .attr('y', marginBottom)
  .attr("style","font-family:sans;font-size: 29px;font-weight:100; stroke:#444;")
  .text(data.source_name)
  

bar.append('g')
  .attr('transform', 'translate('+(marginLeft - 1)+', '+marginTop+')')
  .call(axisY)
  .selectAll('line')
  .style({ 'stroke': '#000', 'stroke-width': '0.1'})
  .selectAll('text')
  .attr("style","font-size: 12px;")

bar.append('g')
  .attr('transform', 'translate('+(marginLeft - 1)+', '+(height + 1)+')')
  .call(axisX)
  .selectAll('line')
  .style({ 'stroke': '#000', 'stroke-width': '0.1'})
  .selectAll('text')
  .style('transform','rotate(-90deg)')
  .attr("style","font-size: 12px;")
  
bar.append('g')
  .attr('transform', 'translate(' + marginLeft + ',0)')
  .selectAll('rect')
  .data(data.data)
  .enter()
  .append('rect')
  .style({'fill' : 'steelblue'})
  .attr('width', scaleX.rangeBand())
  .attr('height', function(d) { return scaleY(d[1]) })
  .attr('x', function(d, i) { return i * scaleX.rangeBand()})
  .attr('y', function(d) { return height - scaleY(d[1]) })
  .on('mouseover', function(d) {
    var posX = d3.event.pageX;
    var posY = d3.event.pageY;
    toolTip
      .attr('style','left:'+ posX +'px;top:'+ posY +'px; visibility: visible;')
      .html(d[0] + '<br /><strong>'+d[1]+'</strong>')
  
    d3.select(this).style('fill', '#ff33ff');
  })
  .on('mouseout', function(d) {
    d3.select(this).style('fill', 'steelblue');
    toolTip.attr('style', 'visibility: hidden;');
  })
  

});
})();

/*


var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 200]);
var y = d3.scale.ordinal()
    .domain(d3.range(0, data.length))
    .rangeBands([0, 500])

var bar = d3.select('.chart')
  .append('svg')
  .attr('width', 500)
  .attr('height', 200)
  .style('background', 'steelblue')
  .selectAll('rect')
  .data(data).enter()
  .append('rect')
  .style({'fill': '#cc00cc'})
  .attr('width', y.rangeBand() - 1)
  .attr('height', function(d) { return x(d); })
  .attr('x', function(d, i) {
    return i * y.rangeBand();
  })
  .attr('y', function(d) {
    return 200 - x(d); 
  })
  .on('mouseover', function(d) {
    d3.select(this).style({'fill' : '#000'})
  })
  .on('mouseout', function(d) {
    d3.select(this).style({'fill' : '#cc00cc'})
  })

var verticalGuideScale = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([200, 0])
 
var vAxis = d3.svg.axis()
    .scale(verticalGuideScale)
    .orient('left')
    .ticks(10)

var verticalGuide = d3.select('svg').append('g')
vAxis(verticalGuide).style({'stroke' : '#000'})
*/

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fetch/0.11.0/fetch.min.js"></script>

style.css

html,body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}
.container {
 display: flex;
 height: 100%;
}

.chart {
  display: flex;
  margin: auto;
  padding: 10px;
  box-shadow: 0px 0px 2px #000;
}


path.domain {
  width: 0px;
  fill: none;
  stroke: #000;
  stroke-width: 0.5;
}

div.tooltip {   
  position: absolute;           
  text-align: center;           
  padding: 10px;
  width: 80px;
  height: 30px;
  margin-top: -52px;
  margin-left: -102px;
  color: #444;
  font: 14px sans-serif;        
  background: #ffccff;
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}

Visualize Data with a Bar Chart [freeCodeCamp [Data Visualization]] (Challenge).markdown

Visualize Data with a Bar Chart [freeCodeCamp [Data Visualization]] (Challenge)

A Pen by Svetlana Linuxenko on CodePen.

License.