Created
September 21, 2015 10:36
-
-
Save ruimgbarros/99924204accb98d9950e to your computer and use it in GitHub Desktop.
Yvonne Chua Problem
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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Mobile Phones</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
| <style type="text/css"> | |
| body { | |
| background-color: floralwhite; | |
| font-family: Helvetica, Arial, monospace; | |
| } | |
| h1 { | |
| font-size: 24px; | |
| margin: 0; | |
| } | |
| p { | |
| font-size: 14px; | |
| margin: 10px 0 0 0; | |
| } | |
| svg { | |
| background-color: floralwhite; | |
| } | |
| circle: hover { | |
| fill: cornflowerblue; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: monospace; | |
| font-size: 11px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Growth of Phones in the Philippines</h1> | |
| <p>Subscriptions of mobile phones vs fixed telephones, per 100 people, by year. Source: <a href="http://data.worldbank.org/country/philippines">World Bank</a></p> | |
| <script type="text/javascript"> | |
| //<script type="text/javascript">// | |
| //this wasn't suposed to be here// | |
| var w = 700; | |
| var h = 600; | |
| var padding = [ 20, 10, 50, 50 ]; //Top, right, bottom, left | |
| var xScale = d3.scale.linear() | |
| .range([ padding[3], w - padding[1] - padding[3] ]); | |
| var yScale = d3.scale.linear() | |
| .range([ padding[0], h - padding[2] ]); | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom") | |
| .ticks(22); | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| .ticks(4); | |
| //});// | |
| //this wasn't suposed to be here// | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| d3.csv("philippinesphones.csv", function(data) { | |
| xScale.domain([ | |
| d3.min(data, function(d) { | |
| return +d.Mobilecellularsubscriptionsper100people; | |
| }), | |
| d3.max(data, function(d) { | |
| return +d.Mobilecellularsubscriptionsper100people; | |
| }) | |
| ]); | |
| yScale.domain([ | |
| d3.max(data, function(d) { | |
| return +d.Fixedtelephonesubscriptionsper100people; | |
| }), | |
| d3.min(data, function(d) { | |
| return +d.Fixedtelephonesubscriptionsper100people; | |
| }) | |
| ]); | |
| var circles = svg.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle"); | |
| circles.attr("cx", function(d) { | |
| return xScale(d.Mobilecellularsubscriptionsper100people); | |
| }) | |
| .attr("cy", function(d) { | |
| return yScale(d.Fixedtelephonesubscriptionsper100people); | |
| }) | |
| .attr("r", 0.1) | |
| .attr("fill", "coral") | |
| .append("title") | |
| .text(function(d) { | |
| return "The mobile phone subscriptions per 100 people in " + d.YEAR + " is " + d.Mobilecellularsubscriptionsper100people + " and the fixed phone subscriptions per 100 people that year is " + d.Fixedtelephonesubscriptionsper100people; | |
| }); | |
| circles.sort(function(a, b) { | |
| return d3.ascending(+a.Mobilecellularsubscriptionsper100people, +b.Mobilecellularsubscriptionsper100people); | |
| }) | |
| .transition() | |
| .delay(function(d, i) { | |
| return i * 50; | |
| }) | |
| .duration(2000) | |
| .attr("r", 4); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + (h - padding[2] + 10) + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + (padding[3] - 10) + ",0)") | |
| .call(yAxis); | |
| }); | |
| </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
| YEAR | Mobilecellularsubscriptions | Mobilecellularsubscriptionsper100people | Fixedtelephonesubscriptions | Fixedtelephonesubscriptionsper100people | ||
|---|---|---|---|---|---|---|
| 1991 | 34600 | 0.054508405 | 647939 | 1.020754957 | ||
| 1992 | 56044 | 0.086226172 | 660587 | 1.016342309 | ||
| 1993 | 102400 | 0.153945411 | 859762 | 1.292543111 | ||
| 1994 | 171903 | 0.252609789 | 1109652 | 1.630622837 | ||
| 1995 | 493862 | 0.70950518 | 1409639 | 2.025153125 | ||
| 1996 | 959024 | 1.347232983 | 1787000 | 2.510370274 | ||
| 1997 | 1343620 | 1.84611551 | 2078000 | 2.855143589 | ||
| 1998 | 1733652 | 2.330392072 | 2491605 | 3.349239951 | ||
| 1999 | 2849980 | 3.749085447 | 2892435 | 3.804934057 | ||
| 2000 | 6454359 | 8.311919376 | 3061387 | 3.942452213 | ||
| 2001 | 12159163 | 15.33355244 | 3315091 | 4.180560923 | ||
| 2002 | 15383001 | 19.00223229 | 3310933 | 4.089911842 | ||
| 2003 | 22509560 | 27.24973903 | 3340000 | 4.043354395 | ||
| 2004 | 32935875 | 39.1016922 | 3437491 | 4.081012422 | ||
| 2005 | 34778995 | 40.52493944 | 3367252 | 3.923566031 | ||
| 2006 | 42868911 | 49.06786375 | 3633188 | 4.158556156 | ||
| 2007 | 57344815 | 64.52260075 | 3940082 | 4.433257615 | ||
| 2008 | 68117167 | 75.37478912 | 4076140 | 4.510437037 | ||
| 2009 | 75586646 | 82.26097224 | 4100000 | 4.462031378 | ||
| 2010 | 83150138 | 88.98361743 | 3335398 | 3.569396116 | ||
| 2011 | 94189795 | 99.09141423 | 3555951 | 3.741002022 | ||
| 2012 | 101978345 | 105.4510985 | 3493164 | 3.612119624 | ||
| 2013 | 102823569 | 104.5023215 | 3148835 | 3.200244561 | ||
| 2014 | 111326045 | 111.2187234 | 3093236 | 3.090254028 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment