A D3.js bubbles map driven by a time slider.
Last active
March 8, 2024 00:53
-
-
Save PBrockmann/230f567762de650953b5 to your computer and use it in GitHub Desktop.
Bubbles map
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 | latitude | longitude | 1960 | 1961 | 1962 | 1963 | 1964 | 1965 | 1966 | 1967 | 1968 | 1969 | 1970 | 1971 | 1972 | 1973 | 1974 | 1975 | 1976 | 1977 | 1978 | 1979 | 1980 | 1981 | 1982 | 1983 | 1984 | 1985 | 1986 | 1987 | 1988 | 1989 | 1990 | 1991 | 1992 | 1993 | 1994 | 1995 | 1996 | 1997 | 1998 | 1999 | 2000 | 2001 | 2002 | 2003 | 2004 | 2005 | 2006 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| OECD North America | 41 | -103 | 4713.05 | 4959.2 | 5141.93 | 5022 | 4920.13 | 5265.85 | 5422.72 | 5559.91 | 5592.4 | 5433.83 | 5281.39 | 5058.74 | 5029.34 | 5209.22 | 5275.44 | 5229.31 | 5426.29 | 5621.71 | 5728.11 | 5571.51 | 5568.21 | 5661.1 | 5806.67 | 5908.75 | 5894.84 | 6063.42 | 6229.67 | 6278.51 | 6385.47 | 6588.73 | 6526.59 | 6586.2 | 6628.78 | 6747.92 | 6834.64 | 6733.08 | ||||||||||||
| OECD Pacific | -7.25 | 154 | 981.83 | 1039.03 | 1163.35 | 1175.22 | 1135.28 | 1192.86 | 1236.64 | 1204.49 | 1269.67 | 1268.13 | 1245.55 | 1243.05 | 1230.85 | 1310.13 | 1296.29 | 1310.03 | 1320.31 | 1431.11 | 1492.68 | 1600.89 | 1615.93 | 1663 | 1698.91 | 1790.98 | 1836.84 | 1909.94 | 1951.32 | 1864.5 | 1945.3 | 2024.99 | 2006.91 | 2060.81 | 2086.13 | 2123.57 | 2105.21 | 2110.4 | ||||||||||||
| OECD Europe | 48 | 5.5 | 3727.86 | 3828.62 | 4035.26 | 3952.3 | 3830.01 | 4081.34 | 4068.9 | 4170.06 | 4318.17 | 4206.55 | 4014.78 | 3905.99 | 3873.1 | 3905.44 | 4000.42 | 4016.21 | 4073.63 | 4035.25 | 4034.43 | 3980.61 | 4001.05 | 3895.42 | 3849.2 | 3820.07 | 3904.11 | 4029.56 | 3977.43 | 3993.51 | 3932.88 | 3979.74 | 4044.85 | 4022.08 | 4129.12 | 4144.9 | 4137.59 | 4135.25 | ||||||||||||
| Africa | 5.82 | 16.8 | 246.35 | 257.8 | 275.82 | 290.35 | 304.46 | 324.18 | 339.3 | 362.13 | 385.54 | 407.51 | 449.54 | 491.81 | 510.1 | 536.2 | 548.86 | 570.36 | 597.04 | 614.32 | 605.26 | 605.19 | 637.64 | 625.32 | 655.03 | 657.94 | 690.95 | 701.85 | 716.15 | 723.55 | 754.79 | 759.37 | 767.48 | 776.56 | 840.02 | 895.74 | 919.17 | 933.8 | ||||||||||||
| Latin America | -15 | -61 | 372.62 | 389.25 | 427.22 | 451.4 | 464.52 | 488.9 | 512.51 | 535.49 | 558.49 | 577.48 | 562.14 | 560.77 | 563.03 | 560.71 | 555.99 | 590.21 | 606.98 | 621.64 | 629.36 | 631.4 | 642.91 | 670.97 | 670.68 | 720.04 | 741.89 | 793.24 | 827.01 | 862.14 | 868.69 | 879.09 | 877.23 | 874.83 | 869.22 | 921.23 | 941.91 | 976.25 | ||||||||||||
| Middle East | 29.3 | 45.7 | 130.59 | 135.6 | 167.24 | 173.04 | 182.71 | 206.97 | 226.64 | 252.64 | 306.58 | 350.82 | 396.85 | 452.61 | 453.78 | 465.28 | 491.89 | 508.71 | 533.1 | 573.39 | 605.63 | 571.4 | 629.64 | 679.34 | 724.23 | 786.11 | 811.77 | 841.04 | 842.14 | 908.58 | 934.56 | 982 | 1018.6 | 1077.27 | 1110.7 | 1174.4 | 1235.13 | 1286.78 | ||||||||||||
| Non-OECD Europe | 51.68 | 39 | 247.45 | 254.94 | 273.54 | 280.43 | 296.15 | 311.13 | 329.55 | 353.94 | 368.44 | 375.14 | 371.71 | 376.9 | 390.74 | 397.54 | 402.75 | 416.2 | 426.44 | 428.77 | 421.93 | 390.69 | 319.72 | 294.48 | 285.24 | 261.51 | 281 | 286.88 | 278.96 | 267.83 | 232.88 | 239.07 | 253.26 | 255.94 | 270.46 | 268.58 | 264.99 | 278.07 | ||||||||||||
| Former USSR | 61.3 | 82 | 2368.93 | 2490.27 | 2603.1 | 2706.85 | 2842.58 | 2928.7 | 3026.68 | 3118.03 | 3209.37 | 3242.5 | 3261.66 | 3316.61 | 3331.62 | 3375.12 | 3448.32 | 3519.1 | 3635.79 | 3710.38 | 3670.24 | 3799.43 | 3709.92 | 3263.27 | 2987.39 | 2625.88 | 2478.85 | 2382.55 | 2258.35 | 2218.4 | 2238.97 | 2276.02 | 2275.24 | 2285.09 | 2375.84 | 2362.93 | 2375.33 | 2442.52 | ||||||||||||
| Asia (excluding China) | 11.2 | 122 | 439.24 | 457.34 | 483.64 | 509.1 | 539.18 | 574.59 | 612.69 | 643.79 | 695.18 | 739.15 | 773.53 | 807.48 | 857.73 | 891.81 | 946.5 | 1004.55 | 1059.74 | 1140.98 | 1216.87 | 1308.53 | 1393.16 | 1468.75 | 1554.31 | 1637.08 | 1768.83 | 1855.3 | 1977.05 | 1962.03 | 2092.27 | 2156.47 | 2240.34 | 2317.2 | 2398.31 | 2579.13 | 2700.58 | 2812.89 | ||||||||||||
| China (including Hong Kong) | 33.8 | 104.4 | 876.74 | 932.78 | 969.16 | 987.76 | 1145.02 | 1188.42 | 1343.7 | 1498.4 | 1522.53 | 1503.69 | 1484.6 | 1547.96 | 1630.19 | 1771.98 | 1818.13 | 1903 | 2026.89 | 2166.95 | 2210.43 | 2402.5 | 2354.09 | 2454.03 | 2634.81 | 2761.93 | 2992.88 | 3113.19 | 3089.37 | 3085.67 | 3096.68 | 3093.15 | 3051.36 | 3360.89 | 3943.92 | 4697.14 | 5167.02 | 5719.53 |
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> | |
| <style type="text/css"> | |
| body { | |
| font-family: Arial, Helvetica, sans-serif; | |
| } | |
| .footer { | |
| color: #888888; | |
| font-size: 13px; | |
| text-align: right; | |
| } | |
| #states path { | |
| fill: #ccc; | |
| stroke: #fff; | |
| } | |
| circle { | |
| fill: steelblue; | |
| fill-opacity: .6; | |
| stroke: #fff; | |
| } | |
| </style> | |
| <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" /> | |
| <script src="http://d3js.org/d3.v2.js"></script> | |
| </head> | |
| <body> | |
| <h2> | |
| World Carbon Dioxide Emissions by Region | |
| </h2> | |
| expressed in Million Metric Tons Carbon Dioxide | |
| <div id="graph"></div> | |
| <p> | |
| <label for="year">Year :</label> | |
| <input type="text" id="year" style="border:0; color:#f6931f; font-weight:bold; " /> | |
| </p> | |
| <div id="slider" style="width: 200px;"></div> | |
| <script type="text/javascript"> | |
| // Coded by Patrick.Brockmann@lsce.ipsl.fr | |
| $(document).ready(function() { | |
| $("#slider").slider({ | |
| value:2000, | |
| min: 1971, | |
| max: 2006, | |
| step: 1, | |
| slide: function( event, ui ) { | |
| $("#year").val(ui.value); | |
| redraw(ui.value.toString()); | |
| } | |
| }); | |
| $("#year").val($("#slider").slider("value") ); | |
| var w = 1200; | |
| var h = 500; | |
| var xy = d3.geo.equirectangular() | |
| .scale(1000); | |
| var path = d3.geo.path() | |
| .projection(xy); | |
| var svg = d3.select("#graph").insert("svg:svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| var states = svg.append("svg:g") | |
| .attr("id", "states"); | |
| var circles = svg.append("svg:g") | |
| .attr("id", "circles"); | |
| var labels = svg.append("svg:g") | |
| .attr("id", "labels"); | |
| d3.json("world-countries.json", function(collection) { | |
| states.selectAll("path") | |
| .data(collection.features) | |
| .enter().append("svg:path") | |
| .attr("d", path) | |
| .on("mouseover", function(d) { | |
| d3.select(this).style("fill","#6C0") | |
| .append("svg:title") | |
| .text(d.properties.name);}) | |
| .on("mouseout", function(d) { | |
| d3.select(this).style("fill","#ccc");}) | |
| }); | |
| //http://stackoverflow.com/questions/11386150/lat-lon-positon-on-a-d3-js-map | |
| // +convert to string to number | |
| var scalefactor=1./50. ; | |
| d3.csv("co2_regions.csv", function(csv) { | |
| circles.selectAll("circle") | |
| .data(csv) | |
| .enter() | |
| .append("svg:circle") | |
| .attr("cx", function(d, i) { return xy([+d["longitude"],+d["latitude"]])[0]; }) | |
| .attr("cy", function(d, i) { return xy([+d["longitude"],+d["latitude"]])[1]; }) | |
| .attr("r", function(d) { return (+d["1990"])*scalefactor; }) | |
| .attr("title", function(d) { return d["country"]+": "+Math.round(d["1990"]); }) | |
| .on("mouseover", function(d) { | |
| d3.select(this).style("fill","#FC0");}) | |
| .on("mouseout", function(d) { | |
| d3.select(this).style("fill","steelblue");}); | |
| labels.selectAll("labels") | |
| .data(csv) | |
| .enter() | |
| .append("svg:text") | |
| .attr("x", function(d, i) { return xy([+d["longitude"],+d["latitude"]])[0]; }) | |
| .attr("y", function(d, i) { return xy([+d["longitude"],+d["latitude"]])[1]; }) | |
| .attr("dy", "0.3em") | |
| .attr("text-anchor", "middle") | |
| .text(function(d) { return Math.round(d["1990"]); }); | |
| }); | |
| function redraw(year) { | |
| circles.selectAll("circle") | |
| .transition() | |
| .duration(1000).ease("linear") | |
| .attr("r", function(d) { return (+d[year])*scalefactor; }) | |
| .attr("title", function(d) { return d["country"]+": "+Math.round(d[year]); }); | |
| labels.selectAll("text") | |
| .text(function(d) { return Math.round(d[year]); }); | |
| } | |
| }); | |
| </script> | |
| <div class="footer"> | |
| Version: 2012/09/12<BR> | |
| Data Driven Document created<BR> | |
| by Patrick Brockmann (LSCE)<BR> | |
| © Global Carbon Atlas | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment