Redesign of a PEW Research Center chart as a slopegraph.
Last active
April 20, 2019 01:42
-
-
Save godds/9910c4a439dcf1206fa29ffb1f923467 to your computer and use it in GitHub Desktop.
Obama vs Trump slopegraph
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
| license: mit |
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> | |
| <svg width="320" height="720"></svg> | |
| <script src="https://unpkg.com/d3@4.6.0"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| .slope { stroke: #c2c2c4; stroke-width: 0.5; opacity: 0.5 } | |
| .slope.obama { stroke: #00739F; } | |
| .slope.trump { stroke: #A10011; } | |
| circle.obama { fill: #00739F; } | |
| circle.trump { fill: #A10011; } | |
| text.value, text.label { fill: #99a; font-family: Open Sans; font-weight: 300; font-size: 8px; } | |
| .scale { stroke: #c2c2c4; stroke-width: 0.5; stroke-dasharray: 2,3; } | |
| </style> | |
| <script> | |
| var svg = d3.select("svg"), | |
| margin = { top: 20, right: 100, bottom: 20, left: 100 }, | |
| width = +svg.attr("width") - margin.left - margin.right, | |
| height = +svg.attr("height") - margin.top - margin.bottom, | |
| g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.csv("pew-obama-vs-trump.csv") | |
| .get(function(data) { | |
| var y = d3.scaleLinear() | |
| .range([height,0]) | |
| .domain([5,95]); // TODO do properly | |
| // Obama scale | |
| g.append("line") | |
| .attr("class", "scale") | |
| .attr("x1", 0).attr("y1", 0) | |
| .attr("x2", 0).attr("y2", height); | |
| // Trump scale | |
| g.append("line") | |
| .attr("class", "scale") | |
| .attr("x1", width).attr("y1", 0) | |
| .attr("x2", width).attr("y2", height); | |
| // lines | |
| g.selectAll("line.slope") | |
| .data(data) | |
| .enter() | |
| .append("line") | |
| .attr("x1", 0) | |
| .attr("y1", function(d) { return y(d.Obama); }) | |
| .attr("x2", width) | |
| .attr("y2", function(d) { return y(d.Trump); }) | |
| .attr("class", function(d) { return y(d.Obama) - y(d.Trump) < 0 ? "slope obama" : "slope trump"}); | |
| // markers on Obama scale | |
| g.selectAll("circle.obama") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr("class", "obama") | |
| .attr("cx", 0) | |
| .attr("cy", function(d) { return y(d.Obama); }) | |
| .attr("r", 2); | |
| g.selectAll("text.obama.value") | |
| .data(data) | |
| .enter() | |
| .append("text") | |
| .attr("class", "value obama") | |
| .attr("text-anchor", "end") | |
| .attr("x", -5) | |
| .attr("y", function(d) { return y(d.Obama) + 3; }) | |
| .text(function(d) { return d.Obama + "%"; }); | |
| g.selectAll("text.obama.label") | |
| .data(data) | |
| .enter() | |
| .append("text") | |
| .attr("class", "label obama") | |
| .attr("text-anchor", "end") | |
| .attr("x", -25) | |
| .attr("y", function(d) { return y(d.Obama) + 3; }) | |
| .text(function(d) { return d.Country; }); | |
| // markers on Trump scale | |
| g.selectAll("circle.trump") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr("class", "trump") | |
| .attr("cx", width) | |
| .attr("cy", function(d) { return y(d.Trump); }) | |
| .attr("r", 2); | |
| g.selectAll("text.trump.value") | |
| .data(data) | |
| .enter() | |
| .append("text") | |
| .attr("class", "value trump") | |
| .attr("x", width + 5) | |
| .attr("y", function(d) { return y(d.Trump) + 3; }) | |
| .text(function(d) { return d.Trump + "%"; }); | |
| g.selectAll("text.trump.label") | |
| .data(data) | |
| .enter() | |
| .append("text") | |
| .attr("class", "label trump") | |
| .attr("x", width + 25) | |
| .attr("y", function(d) { return y(d.Trump) + 3; }) | |
| .text(function(d) { return d.Country; }); | |
| }); | |
| </script> |
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 | Obama | Trump | |
|---|---|---|---|
| Argentina | 40 | 13 | |
| Australia | 84 | 29 | |
| Brazil | 63 | 14 | |
| Canada | 83 | 22 | |
| Chile | 60 | 12 | |
| Columbia | 56 | 15 | |
| France | 84 | 14 | |
| Germany | 86 | 11 | |
| Ghana | 82 | 49 | |
| Greece | 41 | 19 | |
| Hungary | 58 | 29 | |
| India | 58 | 40 | |
| Indonesia | 64 | 23 | |
| Israel | 49 | 56 | |
| Italy | 68 | 25 | |
| Japan | 78 | 24 | |
| Jordan | 14 | 9 | |
| Kenya | 83 | 51 | |
| Lebanon | 36 | 15 | |
| Mexico | 49 | 5 | |
| Netherlands | 92 | 17 | |
| Nigeria | 63 | 58 | |
| Peru | 53 | 17 | |
| Philippines | 94 | 69 | |
| Poland | 58 | 23 | |
| Russia | 11 | 53 | |
| Senegal | 77 | 26 | |
| South Africa | 73 | 39 | |
| South Korea | 88 | 17 | |
| Spain | 75 | 7 | |
| Sweden | 93 | 10 | |
| Tanzania | 78 | 51 | |
| Tunisia | 27 | 18 | |
| Turkey | 45 | 11 | |
| UK | 79 | 22 | |
| Venezuela | 26 | 20 | |
| Vietnam | 71 | 58 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment