Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- <title>Countries of the World</title>
- <script type="text/javascript" src="../../d3.v2.js"></script>
- <style type="text/css">
- svg {
- width: 960px;
- height: 500px;
- }
- #countries path, #country-centroids circle {
- fill: #ccc;
- stroke: #fff;
- stroke-width: 1.5px;
- }
- #country-centroids circle {
- fill: steelblue;
- fill-opacity: .8;
- }
- </style>
- </head>
- <body>
- <script type="text/javascript">
- // The radius scale for the centroids
- var r = d3.scale.sqrt()
- .domain([0, 1e6])
- .range([0, 10]);
- // World Map Projection
- var xy = d3.geo.mercator(),
- path = d3.geo.path().projection(xy);
- var svg = d3.select("body").append("svg");
- svg.append("g").attr("id", "countries");
- svg.append("g").attr("id", "country-centroids");
- d3.json("../data/world-countries.json", function(collection) {
- svg.select("#countries")
- .selectAll("path")
- .data(collection.features)
- .enter().append("path")
- .attr("d", d3.geo.path().projection(xy));
- });
- d3.json("../data/world-country-centroids.json", function(collection) {
- svg.select("#country-centroids")
- .selectAll("circle")
- .data(collection.features
- .sort(function(a, b) { return b.properties.population - a.properties.population; }))
- .enter().append("circle")
- .attr("transform", function(d) { return "translate(" + xy(d.geometry.coordinates) + ")"; })
- .attr("r", 0)
- .transition()
- .duration(1000)
- .delay(function(d, i) { return i * 50; })
- .attr("r", function(d) { return r(d.properties.population); });
- });
- </script>
- </body>
- </html>
- var svg = d3.select("body").append("svg")
- .attr("width", 960)
- .attr("height", 500);
Add Comment
Please, Sign In to add comment