LuisSevillano/.block

## .block
license: mit
height: 620
border: none

## README.md

      
    Raw
  

              README.md
            
          
    Horzintal barchart
a simple barChart showing CO2 (kt) emissions per country in 2009

  
## CO2-Emissions.csv

          
            country
            value

            
              United States
              5496282

            
              Russia
              1526778

            
              Japan
              1144569

            
              Germany
              788803

            
              Canada
              542998

            
              UK
              480553

            
              Italy
              417212

            
              Australia
              400342

            
              France 
              377755

            
              Poland
              313722

            
              Turkey
              299106

            
              Spain
              296942

            
              Ukraine
              277757

            
              Netherlands
              169823

            
              Czech Republic
              113388

            
              Belgium 
              108348

            
              Greece
              104336

            
              Romania
              86180

            
              Austria
              67536

            
              Belarus
              56828

            
              Portugal
              56155

            
              Finland 
              55417

            
              Hungary
              50567

            
              Denmark
              49504

            
              Sweden
              46621

            
              Bulgaria
              45802

            
              Switzeland
              43962

            
              Norway
              42843

            
              Ireand
              42414

            
              Slovakia
              35050

            
              New Zealand
              33445

            
              Croatia
              21755

            
              Slovenia 
              16019

            
              Estonia
              14096

            
              Lithuania 
              12908

            
              Luxembourg 
              10710

            
              Latvia 
              6979

            
              Iceland
              3556

            
              Malta
              2511

            
              Liechtenstein
              214

            
              Monaco
              85

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bar Chart</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <style>
    body {
        font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: rgb(128,128,128);
    }
    h1{
        font-weight: normal;
        font-size: 25px;
        color: #777;
    }
    .values {
        font-size: 11px;
        fill: rgb(0, 0, 0);
        font-weight: lighter;
    }
    .bar:hover{
        opacity: .8;
    }
    .country{
        font-weight: lighter;
        font-size: 13px;
    }
    .axis path,
    .axis line {
        fill: none;
        stroke: #777;
        shape-rendering: crispEdges;
    }
    .tick text{
        opacity: 0;
    }
    .axis text {
        font-size: 10px;
        fill: #777;
    }
    </style>
</head>
<body>
    <div id="graph">
        <h1>CO2 (kt) Emissions per country (2009)</h1>
    </div>
    <script type="text/javascript">

    var margin = {top: 30, right: 20, bottom: 40, left: 40},
    width = 960 - margin.left - margin.right,
    height = 650 - margin.top - margin.bottom;

    //formatter
    var formatValue = d3.format("0,000");

    //translating the graph
    var translate = 110;

    //create the x scale
    var xScale = d3.scale.linear();

    //create the y scale
    var yScale = d3.scale.ordinal()
    .rangeRoundBands([0, height], 0.1);

    //create x axisvar
    xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

    //create the container
    var svg = d3.select("#graph").append("svg")
    .attr("width", width + translate)
    .attr("height", height + margin.top);

    //creating x Axis
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(" + translate + "," + height + ")")
    .call(xAxis);

    //load csv
    d3.csv("CO2-Emissions.csv", function(error, data){
        if (error) throw error;

        //iterate throught data to convert strings to numbers
        data.forEach(function(d){
            d.value = +d.value;
        });

        //set xScale domain
        xScale.range([0, width- translate]).domain(d3.extent(data, function(d){return d.value;}));

        //set yScale domain
        yScale.domain(d3.range(data.length));

        //select bars
        var bar = svg.append("g").attr("class", "bars").selectAll(".bar")
        .data(data);

        //create bar elements
        bar.enter()
        .append("rect")
        .attr("width", 0)
        .attr("height", yScale.rangeBand())
        .attr("x", 0)
        .attr("y", function(d, i){
            return yScale(i);
        })
        .attr("fill", "rgb(170, 49, 93)")
        .attr("class", "bar")
        .append("title")
        .html(function(d){
            return d.country + ": "+d.value;
        });

        //update values
        bar.transition().duration(1000)
        .attr("width", function(d){
            return xScale(d.value) ;
        });
        d3.selectAll(".bars").attr("transform", "translate(" + translate + ",0)");

        //select text bar values
        var values = svg.append("g").attr("class", "values").selectAll(".value")
        .data(data);

        //create text elements
        values.enter()
        .append("text")
        .attr("class", "value")
        .attr("x", 0)
        .attr("dy", ".95em")
        .attr("dx", ".5em")
        .attr("y", function(d, i){
            return yScale(i);
        })
        .text(function(d){
            return addComas(d.value);
        });

        //update actual position
        values
        .transition()
        .duration(1000)
        .attr("x", function(d){
            return xScale(d.value) ;
        });

        d3.selectAll(".values").attr("transform", "translate(" + translate + ",0)");

        //create countries texts
        var countries = svg.append("g").attr("class", "countries").selectAll(".country")
        .data(data)
        .enter()
        .append("text")
        .attr("class", "country")
        .attr("x", 0)
        .attr("dy", ".75em")
        .attr("dx", "7em")
        .attr("y", function(d, i){
            return yScale(i);
        })
        .attr("text-anchor", "end")
        .text(function(d){
            return d.country;
        });

        //create the line between countries and bars
        var line = svg.append("line")
        .attr("x1", 0)
        .attr("x2", 0)
        .attr("y1", 4)
        .attr("y2", yScale(data.length-1) + yScale.rangeBand())
        .attr("stroke", "#777")
        .attr("stroke-width", 1)
        .attr("transform", "translate(" + translate + ",0)");

        //create x axis animation from zero
        d3.selectAll(".x.axis").transition().duration(1000).call(xAxis);

        //set visibility of x axis text labels
        d3.selectAll(".tick text").transition().duration(1000).delay(500).style("opacity", 1);
    });

    //function to add a coma to values
    function addComas(n) {
        return formatValue(n).replace('.', ',').replace('.', ',');
    }

    </script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	country	value
	United States	5496282
	Russia	1526778
	Japan	1144569
	Germany	788803
	Canada	542998
	UK	480553
	Italy	417212
	Australia	400342
	France	377755
	Poland	313722
	Turkey	299106
	Spain	296942
	Ukraine	277757
	Netherlands	169823
	Czech Republic	113388
	Belgium	108348
	Greece	104336
	Romania	86180
	Austria	67536
	Belarus	56828
	Portugal	56155
	Finland	55417
	Hungary	50567
	Denmark	49504
	Sweden	46621
	Bulgaria	45802
	Switzeland	43962
	Norway	42843
	Ireand	42414
	Slovakia	35050
	New Zealand	33445
	Croatia	21755
	Slovenia	16019
	Estonia	14096
	Lithuania	12908
	Luxembourg	10710
	Latvia	6979
	Iceland	3556
	Malta	2511
	Liechtenstein	214
	Monaco	85
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Bar Chart</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" type="text/css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<style>
	body {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: rgb(128,128,128);
	}
	h1{
	font-weight: normal;
	font-size: 25px;
	color: #777;
	}
	.values {
	font-size: 11px;
	fill: rgb(0, 0, 0);
	font-weight: lighter;
	}
	.bar:hover{
	opacity: .8;
	}
	.country{
	font-weight: lighter;
	font-size: 13px;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: #777;
	shape-rendering: crispEdges;
	}
	.tick text{
	opacity: 0;
	}
	.axis text {
	font-size: 10px;
	fill: #777;
	}
	</style>
	</head>
	<body>
	<div id="graph">
	<h1>CO2 (kt) Emissions per country (2009)</h1>
	</div>
	<script type="text/javascript">

	var margin = {top: 30, right: 20, bottom: 40, left: 40},
	width = 960 - margin.left - margin.right,
	height = 650 - margin.top - margin.bottom;

	//formatter
	var formatValue = d3.format("0,000");

	//translating the graph
	var translate = 110;

	//create the x scale
	var xScale = d3.scale.linear();

	//create the y scale
	var yScale = d3.scale.ordinal()
	.rangeRoundBands([0, height], 0.1);

	//create x axisvar
	xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom");

	//create the container
	var svg = d3.select("#graph").append("svg")
	.attr("width", width + translate)
	.attr("height", height + margin.top);

	//creating x Axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + translate + "," + height + ")")
	.call(xAxis);

	//load csv
	d3.csv("CO2-Emissions.csv", function(error, data){
	if (error) throw error;

	//iterate throught data to convert strings to numbers
	data.forEach(function(d){
	d.value = +d.value;
	});

	//set xScale domain
	xScale.range([0, width- translate]).domain(d3.extent(data, function(d){return d.value;}));

	//set yScale domain
	yScale.domain(d3.range(data.length));

	//select bars
	var bar = svg.append("g").attr("class", "bars").selectAll(".bar")
	.data(data);

	//create bar elements
	bar.enter()
	.append("rect")
	.attr("width", 0)
	.attr("height", yScale.rangeBand())
	.attr("x", 0)
	.attr("y", function(d, i){
	return yScale(i);
	})
	.attr("fill", "rgb(170, 49, 93)")
	.attr("class", "bar")
	.append("title")
	.html(function(d){
	return d.country + ": "+d.value;
	});

	//update values
	bar.transition().duration(1000)
	.attr("width", function(d){
	return xScale(d.value) ;
	});
	d3.selectAll(".bars").attr("transform", "translate(" + translate + ",0)");

	//select text bar values
	var values = svg.append("g").attr("class", "values").selectAll(".value")
	.data(data);

	//create text elements
	values.enter()
	.append("text")
	.attr("class", "value")
	.attr("x", 0)
	.attr("dy", ".95em")
	.attr("dx", ".5em")
	.attr("y", function(d, i){
	return yScale(i);
	})
	.text(function(d){
	return addComas(d.value);
	});

	//update actual position
	values
	.transition()
	.duration(1000)
	.attr("x", function(d){
	return xScale(d.value) ;
	});

	d3.selectAll(".values").attr("transform", "translate(" + translate + ",0)");

	//create countries texts
	var countries = svg.append("g").attr("class", "countries").selectAll(".country")
	.data(data)
	.enter()
	.append("text")
	.attr("class", "country")
	.attr("x", 0)
	.attr("dy", ".75em")
	.attr("dx", "7em")
	.attr("y", function(d, i){
	return yScale(i);
	})
	.attr("text-anchor", "end")
	.text(function(d){
	return d.country;
	});

	//create the line between countries and bars
	var line = svg.append("line")
	.attr("x1", 0)
	.attr("x2", 0)
	.attr("y1", 4)
	.attr("y2", yScale(data.length-1) + yScale.rangeBand())
	.attr("stroke", "#777")
	.attr("stroke-width", 1)
	.attr("transform", "translate(" + translate + ",0)");

	//create x axis animation from zero
	d3.selectAll(".x.axis").transition().duration(1000).call(xAxis);

	//set visibility of x axis text labels
	d3.selectAll(".tick text").transition().duration(1000).delay(500).style("opacity", 1);
	});

	//function to add a coma to values
	function addComas(n) {
	return formatValue(n).replace('.', ',').replace('.', ',');
	}

	</script>
	</body>
	</html>