GDP_agriculture

forked from jk6653284's block: fresh block

<!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; }
    rect{fill: #A8A8A8}
  </style>
</head>

<body>
    <script>
      // margin of SVG
      var margin = {top: 50, right: 50, bottom: 100, left:50};
      
      // width/height of div
      var width = 600 - margin.left - margin.right;
      var height = 600 - margin.top - margin.bottom;
      
      // create svg and append to bchart div
      var svg = d3.select("body").append("svg")
      	.attr("width", width + margin.left + margin.right)
      	.attr("height", height + margin.top + margin.bottom)
      	.append("g")
      	.attr("transform",
             	"translate(" + margin.left + "," + margin.top + ")");
      
      // set ranges
      var x = d3.scaleBand()
      	.range([0,width]);
      var y = d3.scaleLinear()
      	.range([height,0]);
      
      // get data
      d3.csv("https://gist.githubusercontent.com/jk6653284/4c950c3ad690ba403bd0b6f6e21c68b4/raw/4b1900526e68d7625428de6af994d9fb3459983c/gdp_data.csv",
             function(error, data) {
        if (error) throw error;
        
        //console.log(data)
        
        // format data
        data.forEach(function(d) {
          d.Agricolture = +d.Agricolture;
          d.Industry = +d.Industry;
          d.Services = +d.Services;
        });
        
        // scale range of data in the domains
        x.domain(data.map(function(d) { return d.Country;}));
        y.domain([0, d3.max(data, function(d) { return d.Agricolture + d.Industry + d.Services;})]);
        
        svg.selectAll(".bar")
        	.data(data)
        	.enter().append("rect")
        	.attr("class", "bar")
        	.attr("x", function(d) { return x(d.Country); })
        	.attr("width", x.bandwidth())
        	.attr("y", function(d) { return y(d.Agricolture + d.Industry + d.Services); })
        	.attr("height", function(d) { return height - y(d.Agricolture + d.Industry + d.Services); });
        
        // add x axis and y axis
        svg.append("g")
        	.attr("transform","translate(0,"+height+")")
        	.call(d3.axisBottom(x))
          .selectAll("text")  
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", ".15em")
          .attr("transform", "rotate(-65)" );;
        svg.append("g")
        	.call(d3.axisLeft(y));
      });
      
      	// add title
      svg.append("text")
        .attr("x", (width / 2))             
        .attr("y", 0 - (margin.top / 2))
        .attr("text-anchor", "middle")  
        .style("font-size", "18px") 
        .style("text-decoration", "underline")  
        .text("Total GDP by country");
    </script>
</body>

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