Horzintal barchart a simple barChart showing CO2 (kt) emissions per country in 2009
Last active
May 4, 2016 10:54
-
-
Save LuisSevillano/f19b570c241e25d05f92 to your computer and use it in GitHub Desktop.
horzintal barchart
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit | |
| height: 620 | |
| border: none |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment