Horzintal barchart a simple barChart showing CO2 (kt) emissions per country in 2009
| 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment