Skip to content

Instantly share code, notes, and snippets.

@danaoira

danaoira/.block

Last active July 17, 2017 04:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danaoira/a536fbcd6d2dc7fe6ec8d5d6bc1f8989 to your computer and use it in GitHub Desktop.
Save danaoira/a536fbcd6d2dc7fe6ec8d5d6bc1f8989 to your computer and use it in GitHub Desktop.
Download ZIP
nations-scatterplot-nested
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.title {
font-family: "Georgia";
font-size: 32px;
fill: #000;
}
.axis {
font-family: "Arial";
font-size: 11px;
fill: #808080;
}
.circle {
fill: pink;
fill-opacity: 0.5;
stroke: #c0c0c0;
}
.nation > text {
font-family: Arial, Verdana, Tahoma;
font-size: 11px;
fill: #555;
}
</style>
</head>
<body>
<script>
d3.json("nations.json", function(error, json) {
if (error) throw error;
// variables
var data = json;
console.log(data);
var width = 960;
var height = 500;
var margin = { top: 75, right: 30, bottom: 20, left: 30 };
// min-max
var xExtent = d3.extent(data, function(d) { return d.income });
var yExtent = d3.extent(data, function(d) { return d.lifeExpectancy });
// scales
var xScaleLinear = d3.scaleLinear()
.domain(xExtent)
.range([margin.left, width - margin.right]);
var xScaleLog = d3.scaleLog()
.domain(xExtent)
.range([margin.left, width - margin.right]);
var xScale = xScaleLinear;
var yScale = d3.scaleLinear()
.domain(yExtent)
.range([height - margin.bottom, margin.top]);
// axes
var xAxis = d3.axisBottom()
.scale(xScale);
var yAxis = d3.axisLeft()
.scale(yScale);
// svg
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var group = svg.selectAll("g")
.data(data, function(d) { return d.name });
// exit
group.exit().remove();
// enter and update
group = group.enter().append("g")
.classed("nation", true)
.merge(group);
group.append("circle");
group.append("text");
group.select("circle")
.attr("cx", function(d) { return xScale(d.income); })
.attr("cy", function(d) { return yScale(d.lifeExpectancy); })
.attr("r", 7)
.attr("class", "circle");
group.select("text")
.attr("x", function(d) { return (xScale(d.income) + 3); })
.attr("y", function(d) { return yScale(d.lifeExpectancy); })
.text(function(d) { return d.name; });
// axes
var axisX = svg.append("g")
.call(xAxis)
.attr("transform", "translate(" + [0, height - margin.bottom] + ")");
var axisY = svg.append("g")
.call(yAxis)
.attr("transform", "translate(" + [margin.left, 0] + ")");
// titles
var title = svg.append("text")
.text("The Health and Wealth of Nations, 2009")
.attr("class", "title")
.attr("transform", "translate(" + [margin.left + width * 0.5, margin.top * 0.65] + ")")
.attr("text-anchor", "middle")
.attr("fill", "#000");
var xTitle = axisX.append("text")
.text("income per capita (dollars)")
.attr("transform", "translate(" + [width - margin.right, 0 - margin.bottom / 2] + ")")
.attr("text-anchor", "end")
.attr("class", "axis");
var yTitle = axisY.append("text")
.text("life expectancy (years)")
.attr("transform", "translate(" + [margin.left * 0.5, margin.top] + ") rotate(" + -90 + ")")
.attr("class", "axis");
d3.select("svg")
.on("click", function() {
if (xScale == xScaleLinear) {
xScale = xScaleLog;
xAxis.scale(xScale).ticks(10, ".0f");
xTitle.text("income per capita, inflation adjusted (dollars)");
} else if (xScale == xScaleLog) {
xScale = xScaleLinear;
xAxis.scale(xScale)
xTitle.text("income per capita (dollars)");
}
group.select("circle")
.transition()
.duration(1000)
.attr("cx", function(d) { return xScale(d.income); });
group.select("text")
.transition()
.duration(1000)
.attr("x", function(d) { return (xScale(d.income) + 3); });
axisX.transition()
.duration(1000)
.call(xAxis);
});
});
</script>
</body>
</html>
Raw
nations.json
[
{
"name":"Angola",
"income":5055.59,
"lifeExpectancy":47.58
},
{
"name":"Benin",
"income":1457.57,
"lifeExpectancy":61.89
},
{
"name":"Botswana",
"income":12282.28,
"lifeExpectancy":55.12
},
{
"name":"Burkina Faso",
"income":1234.42,
"lifeExpectancy":53.38
},
{
"name":"Burundi",
"income":457.07,
"lifeExpectancy":50.95
},
{
"name":"Cameroon",
"income":1997.18,
"lifeExpectancy":51.39
},
{
"name":"Cape Verde",
"income":3456.14,
"lifeExpectancy":71.68
},
{
"name":"Chad",
"income":1557.83,
"lifeExpectancy":48.97
},
{
"name":"Comoros",
"income":1016.42,
"lifeExpectancy":65.77
},
{
"name":"Congo, Dem. Rep.",
"income":358.8,
"lifeExpectancy":47.81
},
{
"name":"Congo, Rep.",
"income":3834.67,
"lifeExpectancy":53.75
},
{
"name":"Cote d'Ivoire",
"income":1520.23,
"lifeExpectancy":57.86
},
{
"name":"Equatorial Guinea",
"income":15342.2,
"lifeExpectancy":50.64
},
{
"name":"Eritrea",
"income":548.37,
"lifeExpectancy":60.03
},
{
"name":"Ethiopia",
"income":812.16,
"lifeExpectancy":55.69
},
{
"name":"Gabon",
"income":12704.99,
"lifeExpectancy":60.89
},
{
"name":"Ghana",
"income":1382.95,
"lifeExpectancy":56.83
},
{
"name":"Guinea",
"income":908.86,
"lifeExpectancy":58.35
},
{
"name":"Guinea-Bissau",
"income":568.94,
"lifeExpectancy":48.2
},
{
"name":"Kenya",
"income":1493.53,
"lifeExpectancy":54.95
},
{
"name":"Lesotho",
"income":1521.4,
"lifeExpectancy":45.56
},
{
"name":"Liberia",
"income":474.9,
"lifeExpectancy":58.71
},
{
"name":"Madagascar",
"income":1006.9,
"lifeExpectancy":60.81
},
{
"name":"Malawi",
"income":866.35,
"lifeExpectancy":53.88
},
{
"name":"Mali",
"income":1136.17,
"lifeExpectancy":48.84
},
{
"name":"Mauritania",
"income":1775.87,
"lifeExpectancy":56.99
},
{
"name":"Mauritius",
"income":11411.53,
"lifeExpectancy":72.1
},
{
"name":"Mayotte",
"income":9617.82,
"lifeExpectancy":75.99
},
{
"name":"Mozambique",
"income":888.65,
"lifeExpectancy":48.13
},
{
"name":"Namibia",
"income":4952.26,
"lifeExpectancy":61.72
},
{
"name":"Niger",
"income":643.39,
"lifeExpectancy":51.95
},
{
"name":"Nigeria",
"income":2158.98,
"lifeExpectancy":48.17
},
{
"name":"Reunion",
"income":7670.12,
"lifeExpectancy":76.64
},
{
"name":"Rwanda",
"income":995.27,
"lifeExpectancy":50.69
},
{
"name":"Sao Tome and Principe",
"income":1703.43,
"lifeExpectancy":65.86
},
{
"name":"Senegal",
"income":1700.05,
"lifeExpectancy":55.91
},
{
"name":"Sierra Leone",
"income":893.6,
"lifeExpectancy":47.95
},
{
"name":"Somalia",
"income":943.04,
"lifeExpectancy":50.09
},
{
"name":"South Africa",
"income":9141.27,
"lifeExpectancy":51.72
},
{
"name":"Sudan",
"income":2778.61,
"lifeExpectancy":58.5
},
{
"name":"Swaziland",
"income":4728.18,
"lifeExpectancy":46.36
},
{
"name":"Tanzania",
"income":1220.25,
"lifeExpectancy":56.35
},
{
"name":"Togo",
"income":888.01,
"lifeExpectancy":62.93
},
{
"name":"Uganda",
"income":1202.53,
"lifeExpectancy":53.47
},
{
"name":"Zambia",
"income":1442.06,
"lifeExpectancy":46.4
},
{
"name":"Zimbabwe",
"income":443.74,
"lifeExpectancy":45.72
},
{
"name":"Afghanistan",
"income":1216.68,
"lifeExpectancy":44.3
},
{
"name":"Bangladesh",
"income":1492,
"lifeExpectancy":66.56
},
{
"name":"Bhutan",
"income":5053.83,
"lifeExpectancy":66.42
},
{
"name":"India",
"income":2731,
"lifeExpectancy":64.01
},
{
"name":"Maldives",
"income":5081.79,
"lifeExpectancy":71.94
},
{
"name":"Nepal",
"income":1224.73,
"lifeExpectancy":67.12
},
{
"name":"Pakistan",
"income":2603,
"lifeExpectancy":66.84
},
{
"name":"Sri Lanka",
"income":4254.13,
"lifeExpectancy":74.24
},
{
"name":"Algeria",
"income":6207.17,
"lifeExpectancy":72.67
},
{
"name":"Bahrain",
"income":24226.51,
"lifeExpectancy":75.88
},
{
"name":"Djibouti",
"income":2176.79,
"lifeExpectancy":55.78
},
{
"name":"Iraq",
"income":3518.18,
"lifeExpectancy":68.1
},
{
"name":"Israel",
"income":25463.69,
"lifeExpectancy":81
},
{
"name":"Jordan",
"income":5109.39,
"lifeExpectancy":72.88
},
{
"name":"Kuwait",
"income":42443.53,
"lifeExpectancy":77.79
},
{
"name":"Lebanon",
"income":12766.21,
"lifeExpectancy":72.26
},
{
"name":"Libya",
"income":12051.62,
"lifeExpectancy":74.28
},
{
"name":"Morocco",
"income":4162.93,
"lifeExpectancy":71.58
},
{
"name":"Oman",
"income":22804.85,
"lifeExpectancy":75.94
},
{
"name":"Qatar",
"income":74138.28,
"lifeExpectancy":75.81
},
{
"name":"Saudi Arabia",
"income":21138.18,
"lifeExpectancy":73.1
},
{
"name":"Tunisia",
"income":7499.61,
"lifeExpectancy":74.15
},
{
"name":"United Arab Emirates",
"income":33734.94,
"lifeExpectancy":77.58
},
{
"name":"West Bank and Gaza",
"income":3084.56,
"lifeExpectancy":73.74
},
{
"name":"Yemen, Rep.",
"income":2313.16,
"lifeExpectancy":63.39
},
{
"name":"Argentina",
"income":13498.04,
"lifeExpectancy":75.52
},
{
"name":"Aruba",
"income":25351.09,
"lifeExpectancy":74.92
},
{
"name":"Barbados",
"income":15846.77,
"lifeExpectancy":77.51
},
{
"name":"Belize",
"income":6998.08,
"lifeExpectancy":76.6
},
{
"name":"Bolivia",
"income":4007.16,
"lifeExpectancy":66.01
},
{
"name":"Brazil",
"income":9569.78,
"lifeExpectancy":72.68
},
{
"name":"Canada",
"income":34569.63,
"lifeExpectancy":80.89
},
{
"name":"Chile",
"income":13087.38,
"lifeExpectancy":78.67
},
{
"name":"Colombia",
"income":7090.69,
"lifeExpectancy":73.19
},
{
"name":"Costa Rica",
"income":9551.56,
"lifeExpectancy":78.98
},
{
"name":"Cuba",
"income":9277.96,
"lifeExpectancy":78.84
},
{
"name":"Ecuador",
"income":7035.45,
"lifeExpectancy":75.26
},
{
"name":"El Salvador",
"income":5646.85,
"lifeExpectancy":71.74
},
{
"name":"French Guiana",
"income":8202.74,
"lifeExpectancy":76.16
},
{
"name":"Grenada",
"income":8826.9,
"lifeExpectancy":75.62
},
{
"name":"Guadeloupe",
"income":7788.25,
"lifeExpectancy":79.28
},
{
"name":"Guatemala",
"income":5163.22,
"lifeExpectancy":70.55
},
{
"name":"Guyana",
"income":3776.95,
"lifeExpectancy":67.43
},
{
"name":"Haiti",
"income":1198.05,
"lifeExpectancy":61.48
},
{
"name":"Honduras",
"income":3473.46,
"lifeExpectancy":72.41
},
{
"name":"Jamaica",
"income":7023.74,
"lifeExpectancy":72.11
},
{
"name":"Martinique",
"income":14627.13,
"lifeExpectancy":79.77
},
{
"name":"Mexico",
"income":11250.37,
"lifeExpectancy":76.47
},
{
"name":"Netherlands Antilles",
"income":23178.37,
"lifeExpectancy":76.38
},
{
"name":"Nicaragua",
"income":2591.39,
"lifeExpectancy":73.44
},
{
"name":"Panama",
"income":10796.68,
"lifeExpectancy":75.81
},
{
"name":"Paraguay",
"income":4054.3,
"lifeExpectancy":72.07
},
{
"name":"Peru",
"income":7858.97,
"lifeExpectancy":73.47
},
{
"name":"Puerto Rico",
"income":18970.51,
"lifeExpectancy":78.95
},
{
"name":"Suriname",
"income":8199.03,
"lifeExpectancy":69.16
},
{
"name":"Trinidad and Tobago",
"income":17826.05,
"lifeExpectancy":69.7
},
{
"name":"United States",
"income":41256.08,
"lifeExpectancy":79.43
},
{
"name":"Uruguay",
"income":11461.03,
"lifeExpectancy":76.5
},
{
"name":"Albania",
"income":6546.27,
"lifeExpectancy":76.74
},
{
"name":"Armenia",
"income":4523.44,
"lifeExpectancy":74.03
},
{
"name":"Austria",
"income":35636.42,
"lifeExpectancy":80.23
},
{
"name":"Azerbaijan",
"income":9088.42,
"lifeExpectancy":70.6
},
{
"name":"Belarus",
"income":11574.43,
"lifeExpectancy":69.4
},
{
"name":"Belgium",
"income":32256.64,
"lifeExpectancy":80.05
},
{
"name":"Bosnia and Herzegovina",
"income":7341.98,
"lifeExpectancy":75.34
},
{
"name":"Bulgaria",
"income":10840.26,
"lifeExpectancy":73.53
},
{
"name":"Croatia",
"income":14110.46,
"lifeExpectancy":76.49
},
{
"name":"Cyprus",
"income":25643.45,
"lifeExpectancy":79.85
},
{
"name":"Denmark",
"income":32670.06,
"lifeExpectancy":78.57
},
{
"name":"Estonia",
"income":16349.13,
"lifeExpectancy":73.5
},
{
"name":"Finland",
"income":30602.73,
"lifeExpectancy":79.9
},
{
"name":"France",
"income":29774.85,
"lifeExpectancy":81.47
},
{
"name":"Georgia",
"income":4168.7,
"lifeExpectancy":71.86
},
{
"name":"Germany",
"income":31191.15,
"lifeExpectancy":80.08
},
{
"name":"Greece",
"income":27626.11,
"lifeExpectancy":79.5
},
{
"name":"Hungary",
"income":16982.8,
"lifeExpectancy":73.67
},
{
"name":"Iceland",
"income":34989.73,
"lifeExpectancy":81.95
},
{
"name":"Ireland",
"income":35692.95,
"lifeExpectancy":80.16
},
{
"name":"Italy",
"income":26160.59,
"lifeExpectancy":81.34
},
{
"name":"Kazakhstan",
"income":10612.29,
"lifeExpectancy":65.18
},
{
"name":"Latvia",
"income":13021.94,
"lifeExpectancy":72.77
},
{
"name":"Lithuania",
"income":14928.78,
"lifeExpectancy":71.93
},
{
"name":"Luxembourg",
"income":70857.46,
"lifeExpectancy":79.75
},
{
"name":"Macedonia, FYR",
"income":8364.79,
"lifeExpectancy":74.4
},
{
"name":"Malta",
"income":21327.85,
"lifeExpectancy":79.91
},
{
"name":"Moldova",
"income":2593.42,
"lifeExpectancy":68.72
},
{
"name":"Montenegro",
"income":12257.79,
"lifeExpectancy":74.34
},
{
"name":"Netherlands",
"income":36074.53,
"lifeExpectancy":80.19
},
{
"name":"Norway",
"income":47915,
"lifeExpectancy":80.85
},
{
"name":"Poland",
"income":16465.8,
"lifeExpectancy":75.84
},
{
"name":"Portugal",
"income":19898.43,
"lifeExpectancy":78.94
},
{
"name":"Romania",
"income":10868.12,
"lifeExpectancy":72.99
},
{
"name":"Serbia",
"income":10005.22,
"lifeExpectancy":74.23
},
{
"name":"Slovak Republic",
"income":19186.01,
"lifeExpectancy":74.94
},
{
"name":"Slovenia",
"income":24778.21,
"lifeExpectancy":78.63
},
{
"name":"Spain",
"income":26811.93,
"lifeExpectancy":81.11
},
{
"name":"Sweden",
"income":32021,
"lifeExpectancy":81.12
},
{
"name":"Switzerland",
"income":38003.92,
"lifeExpectancy":82.06
},
{
"name":"Tajikistan",
"income":1775.38,
"lifeExpectancy":67.07
},
{
"name":"Turkey",
"income":8040.78,
"lifeExpectancy":72.06
},
{
"name":"Turkmenistan",
"income":5702.66,
"lifeExpectancy":65.06
},
{
"name":"Ukraine",
"income":5730.86,
"lifeExpectancy":68.45
},
{
"name":"United Kingdom",
"income":31042.47,
"lifeExpectancy":79.64
},
{
"name":"Uzbekistan",
"income":2586.96,
"lifeExpectancy":67.97
},
{
"name":"Australia",
"income":34327.26,
"lifeExpectancy":81.71
},
{
"name":"Brunei",
"income":44738.99,
"lifeExpectancy":77.32
},
{
"name":"Cambodia",
"income":1830.97,
"lifeExpectancy":61.67
},
{
"name":"China",
"income":7226.07,
"lifeExpectancy":73.28
},
{
"name":"Fiji",
"income":4016.2,
"lifeExpectancy":69.05
},
{
"name":"French Polynesia",
"income":26733.88,
"lifeExpectancy":74.59
},
{
"name":"Hong Kong, China",
"income":39086.39,
"lifeExpectancy":82.4
},
{
"name":"Indonesia",
"income":3818.08,
"lifeExpectancy":71.17
},
{
"name":"Japan",
"income":29680.68,
"lifeExpectancy":82.98
},
{
"name":"Korea, Dem. Rep.",
"income":1635,
"lifeExpectancy":67.53
},
{
"name":"Korea, Rep.",
"income":23875,
"lifeExpectancy":79.65
},
{
"name":"Macao, China",
"income":57436.68,
"lifeExpectancy":80.95
},
{
"name":"Malaysia",
"income":12387.67,
"lifeExpectancy":74.54
},
{
"name":"Micronesia, Fed. Sts.",
"income":4994.56,
"lifeExpectancy":68.81
},
{
"name":"Mongolia",
"income":3205.17,
"lifeExpectancy":66.93
},
{
"name":"Myanmar",
"income":1269.14,
"lifeExpectancy":62.14
},
{
"name":"New Caledonia",
"income":30959.74,
"lifeExpectancy":76.36
},
{
"name":"New Zealand",
"income":24009.46,
"lifeExpectancy":80.45
},
{
"name":"Papua New Guinea",
"income":1947.16,
"lifeExpectancy":61.29
},
{
"name":"Philippines",
"income":3203.97,
"lifeExpectancy":72.1
},
{
"name":"Samoa",
"income":5003.61,
"lifeExpectancy":71.92
},
{
"name":"Singapore",
"income":43526.04,
"lifeExpectancy":80.58
},
{
"name":"Solomon Islands",
"income":1903.69,
"lifeExpectancy":66.66
},
{
"name":"Taiwan",
"income":28361,
"lifeExpectancy":78.6
},
{
"name":"Thailand",
"income":7376.17,
"lifeExpectancy":69.08
},
{
"name":"Timor-Leste",
"income":2475.68,
"lifeExpectancy":61.6
},
{
"name":"Tokelau",
"income":889.43,
"lifeExpectancy":69
},
{
"name":"Tonga",
"income":5104.06,
"lifeExpectancy":71.96
},
{
"name":"Vietnam",
"income":2679.34,
"lifeExpectancy":74.7
},
{
"name":"Vanuatu",
"income":3943.3,
"lifeExpectancy":70.5
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment