jk6653284/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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/f8c68bbd85e0a8060c17716ad8865108917dd854/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;})]);

        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); })
        	.attr("height", function(d) { return height - y(d.Agricolture); });

        // 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("Agriculture GDP by country");
    </script>
</body>
	<!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/f8c68bbd85e0a8060c17716ad8865108917dd854/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;})]);

	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); })
	.attr("height", function(d) { return height - y(d.Agricolture); });

	// 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("Agriculture GDP by country");
	</script>
	</body>