FCC: D3 Bar Chart

codeswing.json

{
  "scripts": [
    "react",
    "react-dom"
  ],
  "styles": [],
  "layout": "splitBottom"
}

fcc-d3-bar-chart.markdown

FCC: D3 Bar Chart

A Pen by Kamalabot on CodePen.

License.

functionSnippets.js

var years = data.data.map((d) => {
    var quarter;
    var temp = d[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';
    }

index.html

<div class="main">
  <div class="container">
    <div id="title">United States GDP</div>
    <div class="visHolder">
    </div>
  </div>
</div>

script.babel

/* global d3 */
/* eslint-disable max-len */

// eslint-disable-next-line no-unused-vars
const projectName = 'bar-GDP';

// coded by @Christian-Paul

var width = 800,
  height = 400,
  barWidth = width / 275;

var tooltip = d3
  .select('.visHolder')
  .append('div')
  .attr('id', 'tooltip')
  .style('opacity', 0);

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

var svgContainer = d3
  .select('div.container')
  .append('svg')
  .attr('width', width + 100)
  .attr('height', height + 60);

d3.json(
  'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json'
)
  .then((data) => {
    //creating the title
    svgContainer
      .append('text')
      .attr('transform', 'rotate(-90)')
      .attr('x', -200)
      .attr('y', 80)
      .text('Gross Domestic Product');
    //creating the reference
    svgContainer
      .append('text')
      .attr('x', width / 2 + 120)
      .attr('y', height + 50)
      .text('More Information: http://www.bea.gov/national/pdf/nipaguid.pdf')
      .attr('class', 'info');
    console.log(data.data.slice(1,5))
    //creating the additional data and re-formatting
    var years = data.data.map((d) => {
      var quarter;
      var t = d[0].substring(5, 7);

      if (t === '01') {
        quarter = 'Q1';
      } else if (t === '04') {
        quarter = 'Q2';
      } else if (t === '07') {
        quarter = 'Q3';
      } else if (t === '10') {
        quarter = 'Q4';
      }

      return d[0].substring(0, 4) + ' ' + quarter;
    });
    console.log(years.slice(1,5))
    var yearsDate = data.data.map((d) =>{
      return new Date(d[0]);
    });
    console.log(yearsDate[1])
    var xMax = new Date(d3.max(yearsDate));
    console.log(xMax)
    xMax.setMonth(xMax.getMonth() + 3);
    console.log(xMax)
    var xScale = d3
      .scaleTime()
      .domain([d3.min(yearsDate), xMax])
      .range([0, width]);

    var xAxis = d3.axisBottom().scale(xScale);

    svgContainer
      .append('g')
      .call(xAxis)
      .attr('id', 'x-axis')
      .attr('transform', 'translate(60, 400)');

    var GDP = data.data.map((d) =>{
      return d[1];
    });

    var scaledGDP = [];

    var gdpMax = d3.max(GDP);

    var linearScale = d3.scaleLinear().domain([0, gdpMax]).range([0, height]);

    scaledGDP = GDP.map(d => {
      return linearScale(d);
    });

    var yAxisScale = d3.scaleLinear().domain([0, gdpMax]).range([height, 0]);

    var yAxis = d3.axisLeft(yAxisScale);
    //creating the y-axis
    svgContainer
      .append('g')
      .call(yAxis)
      .attr('id', 'y-axis')
      .attr('transform', 'translate(60, 0)');
    //bar chart is starting
    d3.select('svg')
      .selectAll('rect')
      .data(scaledGDP)
      .enter()
      .append('rect')
      //Adding attributes as per the test requestst
      .attr('data-date', (d, i) => {
        return data.data[i][0];
      })
      .attr('data-gdp', (d, i) => {
        return data.data[i][1];
      })
      //creating the bars
      .attr('class', 'bar')
      .attr('x', (d, i) => {
        return xScale(yearsDate[i]);
      })
      .attr('y', (d) => {
        return height - d;
      })
      .attr('width', barWidth)
      .attr('height', (d) => {
        return d;
      })
      .attr('index', (d, i) => i)
      .style('fill', '#3fa9ff')
      .attr('transform', 'translate(60, 0)')
      .on('mouseover', function (event, d) {
        // d or datum is the height of the
        // current rect
        var i = this.getAttribute('index');

        overlay
          .transition()
          .duration(0)
          .style('height', `${d}px`)
          .style('width', `${barWidth}px`)
          .style('opacity', 0.9)
          .style('left', `${i * barWidth + 0}px`)
          .style('top', `${height - d - 30}px`)
          .style('transform', 'translateX(60px)');
        tooltip.transition().duration(200).style('opacity', 0.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 () {
        tooltip.transition().duration(20).style('opacity', 0);
        overlay.transition().duration(20).style('opacity', 0);
      });
  })
  .catch((e) => console.log(e));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.4/d3.min.js"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

style.css

* {
  margin: 0;
  padding: 0;
}

.main {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto';
  background-color: #708090;
  background-size: 64px 128px;
}
.main .container {
  height: 560px;
  width: 900px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 20px 20px;
  align-self: center;
  position: relative;
}
@media (min-width: 1000px) {
  .main .container {
    box-shadow: 2px 2px 20px;
  }
}
.main .container #title {
  text-align: center;
  font-size: 2.5em;
}
.main .container .visHolder {
  position: absolute;
  top: 6em;
}

#tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 150px;
  height: 50px;
  padding: 2px;
  font: 12px;
  background: lightgreen;
  box-shadow: 1px 1px 10px;
  border-radius: 2px;
  pointer-events: none;
}

.overlay {
  position: absolute;
  background: #f0f;
  pointer-events: none;
}

#y-axis path {
  stroke: black;
  stroke-width: 1;
  fill: none;
}

#x-axis path {
  stroke: black;
  stroke-width: 1;
  fill: none;
}

.info {
  font-size: 0.8em;
}