GDP_by_country

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  // we add google font api, and set it as default font type within the style tag
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400, 600" rel="stylesheet">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .axis .domain {
      display: none;
    }
    text {font-family: 'Open Sans', sans-serif; fill: #000 }
  </style>
  // we set the width and height of svg 
  <svg width = "960" height = "500"></svg>
</head>

<body>
    <script>
      // create svg object
      var svg = d3.select("svg"),
          margin = {top: 50, right: 50, bottom: 50, left: 50},
          width = +svg.attr("width") - margin.left - margin.right,
          height = +svg.attr("height") - margin.top - margin.bottom,
          g = svg.append("g").attr("transform", "translate(" + margin.left + "," +margin.top + ")");
      
      // set the x variable for country names
      var x = d3.scaleBand()
      .rangeRound([0,width])
      .paddingInner(0.05)
      .align(0.1);
      
      // set the y variable for the GDP value
      var y = d3.scaleLinear()
      .rangeRound([height, 0]);
      
      // set the z variable, which will be used to stack different GDP components
      var z = d3.scaleOrdinal()
      .range(["#69e344", "#448ee3", "#e34469"]);
      
      
      // get data by directly linking to the github raw file
      d3.csv("https://gist.githubusercontent.com/jk6653284/4c950c3ad690ba403bd0b6f6e21c68b4/raw/9bfa09be5eaf24e5c3f602091b1024828e0252b0/gdp_data.csv",
               function(d,i,columns) {
          for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
          d.total = t;
          return d;
        },
             // throw error if error exists
             function(error, data) {
        	if (error) throw error;
        
        //console.log(data)
        
        // format data so that the numerical variables are in fact numerical
        data.forEach(function(d) {
          d.Agricolture = +d.Agricolture;
          d.Industry = +d.Industry;
          d.Services = +d.Services;
        });
          
          // set the keys of stacked bar element, which in this case is every country except the 1st (country column)
        	var keys = data.columns.slice(1);
          
         // set domain of x,y,z variables
        	data.sort(function(a,b) { return b.total - a.total;});
          x.domain(data.map(function(d) { return d.Country; }));
          y.domain([0,d3.max(data, function(d) {return d.total;})]).nice();
          z.domain(keys);
          
          // create stacked bar
          g.append("g")
          .selectAll("g")
          .data(d3.stack().keys(keys)(data))
          .enter().append("g")
          .attr("fill", function(d) {return z(d.key);})
          .selectAll("rect")
          .data(function(d) { return d; })
          .enter().append("rect")
          .attr("x", function(d) { return x(d.data.Country);})
          .attr("y", function(d) { return y(d[1]);})
          .attr("height", function(d) {return y(d[0]) - y(d[1]); })
          .attr("width", x.bandwidth());
          
         // configure x axis labels
        	g.append("g")
          .attr("class", "axis")
          .attr("transform", "translate(0,"+height+")")
          .call(d3.axisBottom(x))
          .selectAll("text")
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", ".15em")
          .attr("transform", "rotate(-45)");;
          
        
        // configure y axis labels
          g.append("g")
          .attr("class", "axis")
          .call(d3.axisLeft(y).ticks(null, "s"))
          .append("text")
          .attr("x",2)
          .attr("y", y(y.ticks().pop()) + 0.5)
          .attr("dy", "0.32em")
          .attr("fill", "#000")
          .attr("font-weight", "bold")
          .attr("text-anchor", "start")
          .text("GDP");
          
        // create legend for the graph
          var legend = g.append("g")
          .attr("font-family", "sans-serif")
          .attr("font-size", 10)
          .attr("text-anchor", "end")
          .selectAll("g")
          .data(keys.slice().reverse())
          .enter().append("g")
          .attr("transform", function(d, i) { return "translate(0,"+i * 20 + ")"; });
          legend.append("rect")
          .attr("x", width - 19)
          .attr("width", 19)
          .attr("height", 19)
          .attr("fill", z);
          
          legend.append("text")
          .attr("x", width - 24)
          .attr("y", 9.5)
          .attr("dy", "0.32em")
          .text(function(d) { return d; });
          
          
                // add title
          g.append("text")
          .attr("x", (width / 2))             
          .attr("y", 0 - (margin.top / 2))
          .attr("text-anchor", "middle")  
          .style("font-size", "18px") 
          .text("Total GDP by country");
        });
     
      
    </script>
</body>

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