US Gross Domestic Product

In this example below you will see how to do a US Gross Domestic Product with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by thekholm80, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright thekholm80 ©
  • HTML
  • CSS
  • JavaScript
    <div id='app'></div>

/*Downloaded from https://www.codeseek.co/thekholm80/us-gross-domestic-product-LyaxLp */
    $background-color: #BEC1BE;
$tip-color: #949894;

body {
  margin: 0;
  padding: 0;
  
  background-color: $background-color;
}

.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  width: 100vw;
  height: 100vh;
}

.header {
  margin: 8px;
  
  text-align: center;
  font-size: 45px;
}

svg {
  background: white;
}

.tooltip {
  width: 80px;
  height: 28px;
  
  position: absolute;
  
  text-align: center;
  font-size: 12px;

  padding: 2px;
  background: $tip-color;
  border-radius: 8px;
  
  pointer-events: none;
}


/*Downloaded from https://www.codeseek.co/thekholm80/us-gross-domestic-product-LyaxLp */
    function Header() {
  return (
    <div className='header'>
      US Gross Domestic Product By Quarter
    </div>
  )
}

class Chart extends React.Component {
  constructor(props) {
    super(props);
    
    this.getData = this.getData.bind(this);
    this.drawChart = this.drawChart.bind(this);
  }
  
  getData() {
    const url = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json';
    
    axios.get(url)
         .then( (response) => {
            this.drawChart(response.data.data);
         })
         .catch( (error) => {
            console.warn(error);
            return null;
         })
  }
  
  drawChart(dataset) {
    const w = 1500;
    const h = 600;
    const barPadding = 1;
    const barColor = '#2A3129';
    const hoverColor = '#0A0B09';
    
    const svg = d3.select('#chart')
                  .append('svg')
                  .attr('width', w)
                  .attr('height', h);
    
    const div = d3.select('#chart').append('div')	
                  .attr('class', 'tooltip')				
                  .style('opacity', 0);
    
    svg.selectAll('rect')
       .data(dataset)
       .enter()
       .append('rect')
       .attr('x', (d, i) => {
         return i * (w / dataset.length);
       })
       .attr('y', (d) => {
         return h - d[1] / 30;
       })
       .attr('width', w / dataset.length - barPadding)
       .attr('height', (d) => {
         return d[1] / 30;
       })
       .attr('fill', (d) => {
         return barColor;
       })
       .on('mouseover', (d) => {
          div.transition()
             .duration(200)
             .style('opacity', .9);
          div.html(d[0] + '<br />' + '$' + d[1] + 'B')
             .style('left', (d3.event.pageX) - 40 + 'px')
             .style('top', (d3.event.pageY - 50) + 'px');
       })
       .on("mouseout", (d) => {
          div.transition()
             .duration(500)
             .style('opacity', 0);
       });
  }
  
  componentDidMount() {
    this.getData();
  }
  
  render() {
    return (
      <div id='chart'></div>
    )
  }
}

function App() {
  return (
    <div className='app'>
      <Header />
      <Chart />
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Comments