Top 5 countries, sorted by population. Example 6 from the screencast Splitting Charts.
MIT License
Last active
November 17, 2015 19:56
-
-
Save curran/6cd1e224d76811b68df4 to your computer and use it in GitHub Desktop.
Largest 5 Countries
This file contains 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>D3 Example</title> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> | |
| <style> | |
| .axis text { | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 21pt; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .x.axis text { | |
| font-size: 22pt; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var outerWidth = 960; | |
| var outerHeight = 500; | |
| var margin = { left: 90, top: 25, right: 26, bottom: 49 }; | |
| var barPadding = 0.2; | |
| var xColumn = "country"; | |
| var yColumn = "population"; | |
| var innerWidth = outerWidth - margin.left - margin.right; | |
| var innerHeight = outerHeight - margin.top - margin.bottom; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", outerWidth) | |
| .attr("height", outerHeight); | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var xAxisG = g.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + innerHeight + ")"); | |
| var yAxisG = g.append("g") | |
| .attr("class", "y axis"); | |
| var xScale = d3.scale.ordinal().rangeBands([0, innerWidth], barPadding); | |
| var yScale = d3.scale.linear().range([innerHeight, 0]); | |
| // Use a modified SI formatter that uses "B" for Billion. | |
| var siFormat = d3.format("s"); | |
| var customTickFormat = function (d){ | |
| return siFormat(d).replace("G", "B"); | |
| }; | |
| var xAxis = d3.svg.axis().scale(xScale).orient("bottom") | |
| .outerTickSize(0); | |
| var yAxis = d3.svg.axis().scale(yScale).orient("left") | |
| .ticks(5) | |
| .tickFormat(customTickFormat) | |
| .outerTickSize(0); | |
| function render(data){ | |
| xScale.domain( data.map( function (d){ return d[xColumn]; })); | |
| yScale.domain([0, d3.max(data, function (d){ return d[yColumn]; })]); | |
| xAxisG.call(xAxis); | |
| yAxisG.call(yAxis); | |
| var bars = g.selectAll("rect").data(data); | |
| bars.enter().append("rect") | |
| .attr("width", xScale.rangeBand()); | |
| bars | |
| .attr("x", function (d){ return xScale(d[xColumn]); }) | |
| .attr("y", function (d){ return yScale(d[yColumn]); }) | |
| .attr("height", function (d){ return innerHeight - yScale(d[yColumn]); }); | |
| bars.exit().remove(); | |
| } | |
| function type(d){ | |
| d.population = +d.population; | |
| return d; | |
| } | |
| d3.csv("populationByCountry2015.csv", type, render); | |
| </script> | |
| </body> | |
| </html> |
This file contains 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 | population | |
|---|---|---|
| China | 1376048943 | |
| India | 1311050527 | |
| USA | 321773631 | |
| Indonesia | 257563815 | |
| Brazil | 207847528 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment