Created
July 18, 2015 12:38
-
-
Save junkwhinger/392dd4830b1f762712c0 to your computer and use it in GitHub Desktop.
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> | |
| <meta charset="utf-8"> | |
| <header>oecd_service_hc</header> | |
| <style> | |
| header { | |
| display: none; | |
| } | |
| body { | |
| background: #fcfcfa; | |
| } | |
| .stroke { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: 3px; | |
| } | |
| .fill { | |
| fill: #fff; | |
| } | |
| .graticule { | |
| fill: none; | |
| stroke: #777; | |
| stroke-width: .5px; | |
| stroke-opacity: .5; | |
| } | |
| .land { | |
| fill: #222; | |
| } | |
| .country:hover { | |
| opacity: 0.8; | |
| } | |
| .boundary { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: .5px; | |
| } | |
| .tooltip{ background-color:rgba(68,136,187,0.5);; | |
| margin: 10px; | |
| height: 50px; | |
| width: 150px; | |
| padding-left: 10px; | |
| padding-top: 10px; | |
| -webkit-border-radius:10px; | |
| -moz-border-radius:10px; | |
| border-radius:10px; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script> | |
| <script> | |
| var width = 940, | |
| height = 580; | |
| var color_group = {"Canada": {"color": "#d95f02", "same": ["Finland", "Sweden"]}, "Turkey": {"color": "#e7298a", "same": ["Germany", "Japan", "Luxembourg", "Netherlands", "Republic of Korea", "Switzerland", "Belgium", "Greece"]}, "Italy": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Poland", "Austria", "Portugal", "Estonia", "Czech Republic", "Hungary", "Slovenia"]}, "Czech Republic": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Italy", "Poland", "Austria", "Portugal", "Estonia", "Hungary", "Slovenia"]}, "Luxembourg": {"color": "#e7298a", "same": ["Germany", "Turkey", "Japan", "Netherlands", "Republic of Korea", "Switzerland", "Belgium", "Greece"]}, "France": {"color": "#66a61e", "same": ["Ireland", "Denmark", "United Kingdom"]}, "Slovakia": {"color": "#e6ab02", "same": ["United States", "Spain", "Italy", "Poland", "Austria", "Portugal", "Estonia", "Czech Republic", "Hungary", "Slovenia"]}, "Ireland": {"color": "#66a61e", "same": ["France", "Denmark", "United Kingdom"]}, "Norway": {"color": "#7570b3", "same": ["Israel", "Chile", "Australia", "Mexico", "New Zealand"]}, "Israel": {"color": "#7570b3", "same": ["Norway", "Chile", "Australia", "Mexico", "New Zealand"]}, "Australia": {"color": "#7570b3", "same": ["Israel", "Norway", "Chile", "Mexico", "New Zealand"]}, "Iceland": {"color": "#1b9e77", "same": ["none"]}, "Slovenia": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Italy", "Poland", "Austria", "Portugal", "Estonia", "Czech Republic", "Hungary"]}, "Germany": {"color": "#e7298a", "same": ["Turkey", "Japan", "Luxembourg", "Netherlands", "Republic of Korea", "Switzerland", "Belgium", "Greece"]}, "Chile": {"color": "#7570b3", "same": ["Israel", "Norway", "Australia", "Mexico", "New Zealand"]}, "Belgium": {"color": "#e7298a", "same": ["Germany", "Turkey", "Japan", "Luxembourg", "Netherlands", "Republic of Korea", "Switzerland", "Greece"]}, "Spain": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Italy", "Poland", "Austria", "Portugal", "Estonia", "Czech Republic", "Hungary", "Slovenia"]}, "Netherlands": {"color": "#e7298a", "same": ["Germany", "Turkey", "Japan", "Luxembourg", "Republic of Korea", "Switzerland", "Belgium", "Greece"]}, "Denmark": {"color": "#66a61e", "same": ["France", "Ireland", "United Kingdom"]}, "Poland": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Italy", "Austria", "Portugal", "Estonia", "Czech Republic", "Hungary", "Slovenia"]}, "Finland": {"color": "#d95f02", "same": ["Canada", "Sweden"]}, "United States": {"color": "#e6ab02", "same": ["Slovakia", "Spain", "Italy", "Poland", "Austria", "Portugal", "Estonia", "Czech Republic", "Hungary", "Slovenia"]}, "Sweden": {"color": "#d95f02", "same": ["Canada", "Finland"]}, "Hungary": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Italy", "Poland", "Austria", "Portugal", "Estonia", "Czech Republic", "Slovenia"]}, "Switzerland": {"color": "#e7298a", "same": ["Germany", "Turkey", "Japan", "Luxembourg", "Netherlands", "Republic of Korea", "Belgium", "Greece"]}, "New Zealand": {"color": "#7570b3", "same": ["Israel", "Norway", "Chile", "Australia", "Mexico"]}, "Estonia": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Italy", "Poland", "Austria", "Portugal", "Czech Republic", "Hungary", "Slovenia"]}, "Portugal": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Italy", "Poland", "Austria", "Estonia", "Czech Republic", "Hungary", "Slovenia"]}, "Mexico": {"color": "#7570b3", "same": ["Israel", "Norway", "Chile", "Australia", "New Zealand"]}, "United Kingdom": {"color": "#66a61e", "same": ["France", "Ireland", "Denmark"]}, "Austria": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Italy", "Poland", "Portugal", "Estonia", "Czech Republic", "Hungary", "Slovenia"]}, "Republic of Korea": {"color": "#e7298a", "same": ["Germany", "Turkey", "Japan", "Luxembourg", "Netherlands", "Switzerland", "Belgium", "Greece"]}, "Greece": {"color": "#e7298a", "same": ["Germany", "Turkey", "Japan", "Luxembourg", "Netherlands", "Republic of Korea", "Switzerland", "Belgium"]}, "Japan": {"color": "#e7298a", "same": ["Germany", "Turkey", "Luxembourg", "Netherlands", "Republic of Korea", "Switzerland", "Belgium", "Greece"]}} | |
| var color = d3.scale.category10(); | |
| var projection = d3.geo.mercator() | |
| .scale(150) | |
| .translate([width / 2, height / 2]) | |
| .precision(.1); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var graticule = d3.geo.graticule(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| svg.append("defs").append("path") | |
| .datum({type: "Sphere"}) | |
| .attr("id", "sphere") | |
| .attr("d", path); | |
| svg.append("use") | |
| .attr("class", "stroke") | |
| .attr("xlink:href", "#sphere"); | |
| svg.append("use") | |
| .attr("class", "fill") | |
| .attr("xlink:href", "#sphere"); | |
| svg.append("path") | |
| .datum(graticule) | |
| .attr("class", "graticule") | |
| .attr("d", path) | |
| .attr("display", "none"); | |
| var tooltip = d3.select("body") | |
| .append("div") | |
| .style("position", "absolute") | |
| .style("z-index", "10") | |
| .style("visibility", "hidden"); | |
| svg.append("div") | |
| .attr("class", "exp_div") | |
| .attr("x", 100) | |
| .attr("y", 100) | |
| d3.json("world.json", function(error, world) { | |
| if (error) throw error; | |
| var countries = topojson.feature(world, world.objects.subunits).features; | |
| svg.selectAll(".country") | |
| .data(countries) | |
| .enter().insert("path", ".graticule") | |
| .attr("class", "country") | |
| .attr("d", path) | |
| .attr("id", function(d) { | |
| return "id_" + d.id | |
| }) | |
| .style("fill", function(d, i) { | |
| if (d.id in color_group) { | |
| return color_group[d.id]['color'] | |
| } else { | |
| return "rgba(20,20,20,.2)"} | |
| }) | |
| .on("mouseover", function(d,i){ | |
| tooltip.style("visibility", "visible"); | |
| same_group_list = color_group[d.id]["same"] | |
| same_group_text = "" | |
| for (country in color_group[d.id]["same"]) { | |
| country_name = color_group[d.id]["same"][country] | |
| if (country == same_group_list.length - 1) { | |
| same_group_text = same_group_text + country_name + " in terms of Services Trade Restrictiveness (2015)." | |
| } else { | |
| same_group_text = same_group_text+ country_name + ", " | |
| } | |
| } | |
| tooltip.html("<span><strong>"+d.id+"</strong> is in the same group as " + same_group_text +"</span>") | |
| }) | |
| .on("mouseout", function(d,i){ | |
| tooltip.html(null); | |
| }); | |
| svg.insert("path", ".graticule") | |
| .datum(topojson.mesh(world, world.objects.subunits, function(a, b) { return a !== b; })) | |
| .attr("class", "boundary") | |
| .attr("d", path); | |
| }); | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment