Old school D3 from simpler times

All examples By author By category About

leorawe

Full window Github gist

U.S. GDP (freecodecamp example)

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .bar-chart{background-color: #C7ddee;}
    #tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 150px;
  height: 50px;
  padding: 2px;
  font: 12px;
  background: #E3D4BB;
  box-shadow: 1px 1px 10px;
  border-radius: 2px;
  pointer-events: none; }

.overlay {
  position: absolute;
  background: #fff;
  pointer-events: none; }
  </style>
</head>

<body>
  <div class="main">
 <div class='container'>
    <div id="title">D3.js United States GDP</div>
    <div id='visholder' class="boom"></div>

</div>
</div>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
var margin = {top: 0, right: 0, bottom: 80, left: 60},
    width = 800 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
     
var tooltip = d3.select(".boom").append("div")
  .attr("id", "tooltip")
  .style("opacity", 0);

var overlay = d3.select('.boom').append('div')
  .attr('class', 'overlay')
  .style('opacity', 0);

var svg = d3.select('#visholder').append('svg')

.attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("class", "bar-chart");

var barPadding = 5;
//var barWidth = (width / dataset.length);

d3.json('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json', function(err, data) {

var GDP = data.data.map(function(item) {
    return item[1];
  });
  
  var scaledGDP = [];
  
  var gdpMin = d3.min(GDP);
  var gdpMax = d3.max(GDP);
  
  var linearScale = d3.scaleLinear()
    .domain([gdpMin, gdpMax])
    .range([(gdpMin/gdpMax) * height, height]);
  
  scaledGDP = GDP.map(function(item) {
    return linearScale(item);
  });
  
var barWidth = ( width / 275);
  
  var years = data.data.map(function(item) {
    var quarter;
    var temp = item[0].substring(5, 7);
    
    if(temp === '01') {
      quarter = 'Q1';
    }
    else if (temp === '04'){
      quarter = 'Q2';
    }
    else if(temp === '07') {
      quarter = 'Q3';
    }
    else if(temp ==='10') {
      quarter = 'Q4';
    }

return item[0].substring(0, 4) + ' ' + quarter
  });
  
  var yearsDigits = years.map(function(item) {
    return item.substring(0, 4);
  });
  
  var xScale = d3.scaleLinear()
    .domain([d3.min(yearsDigits), d3.max(yearsDigits)])
    .range([0, width]);
  
  var xAxis = d3.axisBottom()
    .scale(xScale)
    .tickFormat(d3.format("d"));
  
  var xAxisGroup = svg.append('g')
    .call(xAxis)
    .attr('id', 'x-axis')
    .attr('transform', 'translate(40, 420)');

var yAxisScale = d3.scaleLinear()
    .domain([gdpMin, gdpMax])
    .range([height, (gdpMin/gdpMax) * height]);
  
  var yAxis = d3.axisLeft(yAxisScale)
    
  var yAxisGroup = svg.append('g')
    .call(yAxis)
    .attr('id', 'y-axis')
    .attr('transform', 'translate(40, 0)');
  
var rects = svg.selectAll("#visholder")
    .data(scaledGDP)//this is an array or should be
    .enter().append("rect")
		.attr('data-date', function(d, i) {
      return data.data[i][0]
    })
    .attr('data-gdp', function(d, i) {
      return data.data[i][1]
    })
    .attr('class', 'bar')
    .attr('x', function(d, i) {
      return i * barWidth;
    })
    .attr('y', function(d, i) {
      return height - d;
    })
    .attr('width', barWidth)
    .attr('height', function(d) {
      return d;
    })
    .style('fill', '#99745D')
		.attr('transform', 'translate(40, 0)')
.on('mouseover', function(d, i) {
  overlay.transition()
        .duration(0)
        .style('height', d + 20 + 'px')
        .style('width', barWidth + 'px')
        .style('opacity', .9)
        .style('left', (i * barWidth) + 0 + 'px')
        .style('top', height - d  + 'px')
        .style('transform', 'translateX(60px)');
   tooltip.transition()
        .duration(200)
        .style('opacity', .9);
      tooltip.html(years[i] + '<br>' + '$' + GDP[i].toFixed(1).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') + ' Billion')
        .attr('data-date', data.data[i][0])
        .style('left', (i * barWidth) + 30 + 'px')
        .style('top', height - 100 + 'px')
        .style('transform', 'translateX(60px)');
}) 
.on('mouseout', function(d) {
  tooltip.transition()
        .duration(200)
        .style('opacity', 0);
      overlay.transition()
        .duration(200)
        .style('opacity', 0);
    });  
  
svg.append('text')
    .attr('transform', 'rotate(-90)')
    .attr('x', -200)
    .attr('y', 80)
    .text('Gross Domestic Product');  
  
svg.append('text')
    .attr('x', 100)
    .attr('y', height + 40)
    .text('More Information: https://www.bea.gov/national/pdf/nipaguid.pdf')
    .attr('class', 'info');     
        		}
);

</script>
</body>

https://d3js.org/d3.v4.min.js