Skip to content

Instantly share code, notes, and snippets.

@naoyak

naoyak/.block

Last active June 14, 2017 22:27
Show Gist options
  • Save naoyak/510d47116d782079710532cbd45d89e8 to your computer and use it in GitHub Desktop.
Save naoyak/510d47116d782079710532cbd45d89e8 to your computer and use it in GitHub Desktop.
Download ZIP
scatter chart
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
circle {fill: blue; opacity: 0.5}
.axis {font-size: 12px;}
.axis-title {font-size: 15px; fill: gray;}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
const width = 960;
const height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
const margins = {
top: 50,
bottom: 50,
left: 50,
right: 50
};
d3.json("nations.json", function(err, data) {
const circleRadius = 8;
const xExtent = d3.extent(data, (d) => d.income);
const yExtent = d3.extent(data, (d) => d.lifeExpectancy);
const xScale = d3.scaleLinear()
.domain(xExtent)
.range([margins.left, width - margins.right]);
const yScale = d3.scaleLinear()
.domain(yExtent)
.range([height - margins.bottom, margins.top]);
var circles = svg.append("g")
.attr("class", "circles")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (d) => xScale(d.income))
.attr("cy", (d) => yScale(d.lifeExpectancy))
.attr("r", circleRadius);
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
const axisX = svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height - margins.bottom) + ")")
.call(xAxis);
const axisY = svg.append("g")
.call(yAxis)
.attr("class", "axis")
.attr("transform", "translate(" + margins.left + ",0)");
const titleX = axisX.append("text")
.text("Per capita income")
.attr("transform", "translate(" + [width - margins.right, 0 - margins.bottom / 4] + ")")
.attr("text-anchor", "end")
.attr("class", "axis-title");
const titleY = axisY.append("text")
.text("Life expectancy")
.attr("transform", "translate(" + [margins.left / 2, margins.top] + ")" + " rotate(-90)")
.attr("text-anchor", "end")
.attr("class", "axis-title");
})
</script>
</body>
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