The GDP per capita data are comes from World Wealth & Income Database.
The health data expectancy are gathered from Global Health Observatory data repository.
forked from curran's block: Stylized Scatter Plot with Color Legend
license: mit |
The GDP per capita data are comes from World Wealth & Income Database.
The health data expectancy are gathered from Global Health Observatory data repository.
forked from curran's block: Stylized Scatter Plot with Color Legend
country | income | health | population | region | |
---|---|---|---|---|---|
Afghanistan | 1925 | 57.63 | 32526562 | Asia | |
Albania | 10620 | 76 | 2896679 | Europe | |
Algeria | 13434 | 76.5 | 39666519 | Africa | |
Andorra | 46577 | 84.1 | 70473 | Europe | |
Angola | 7615 | 61 | 25021974 | Africa | |
Antigua and Barbuda | 21049 | 75.2 | 91818 | Latin America | |
Argentina | 17344 | 76.2 | 43416755 | Latin America | |
Armenia | 7763 | 74.4 | 3017712 | Asia | |
Australia | 44056 | 81.8 | 23968973 | Oceania | |
Austria | 44401 | 81 | 8544586 | Europe | |
Azerbaijan | 16986 | 72.9 | 9753968 | Asia | |
Bahamas | 22818 | 72.3 | 388019 | Latin America | |
Bahrain | 44138 | 79.2 | 1377237 | Asia | |
Bangladesh | 3161 | 70.1 | 160995642 | Asia | |
Barbados | 12984 | 75.8 | 284215 | Latin America | |
Belarus | 17415 | 70.4 | 9495826 | Europe | |
Belgium | 41240 | 80.4 | 11299192 | Europe | |
Belize | 8501 | 70 | 359287 | Latin America | |
Benin | 1830 | 65.5 | 10879829 | Africa | |
Bhutan | 7983 | 70.2 | 774830 | Asia | |
Bolivia | 6295 | 72.3 | 10724705 | Latin America | |
Bosnia and Herzegovina | 9833 | 77.9 | 3810416 | Europe | |
Botswana | 17196 | 66.4 | 2262485 | Africa | |
Brazil | 15441 | 75.6 | 207847528 | Latin America | |
Brunei | 73003 | 78.7 | 423188 | Asia | |
Bulgaria | 16371 | 74.9 | 7149787 | Europe | |
Burkina Faso | 1654 | 62.8 | 18105570 | Africa | |
Burundi | 777 | 60.4 | 11178921 | Africa | |
Cambodia | 3267 | 68.4 | 15577899 | Asia | |
Cameroon | 2897 | 59.5 | 23344179 | Africa | |
Canada | 43294 | 81.7 | 35939927 | Northern America | |
Cape Verde | 6514 | 74.6 | 520502 | Africa | |
Central African Republic | 599 | 53.8 | 4900274 | Africa | |
Chad | 2191 | 57.7 | 14037472 | Africa | |
Chile | 22465 | 79.3 | 17948141 | Latin America | |
China | 13334 | 76.9 | 1376048943 | Asia | |
Colombia | 12761 | 75.8 | 48228704 | Latin America | |
Comoros | 1472 | 64.1 | 788474 | Africa | |
Congo, Dem. Rep. | 809 | 58.3 | 77266814 | Africa | |
Congo, Rep. | 6220 | 61.9 | 4620330 | Africa | |
Costa Rica | 14132 | 80 | 4807850 | Latin America | |
Cote d'Ivoire | 3491 | 60.33 | 22701556 | Africa | |
Croatia | 20260 | 78 | 4240317 | Europe | |
Cuba | 21291 | 78.5 | 11389562 | Latin America | |
Cyprus | 29797 | 82.6 | 1165300 | Europe | |
Czech Republic | 29437 | 78.6 | 10543186 | Europe | |
Denmark | 43495 | 80.1 | 5669081 | Europe | |
Djibouti | 3139 | 64.63 | 887861 | Africa | |
Dominica | 10503 | 74.6 | 72680 | Latin America | |
Dominican Republic | 12837 | 73.8 | 10528391 | Latin America | |
Ecuador | 10996 | 75.2 | 16144363 | Africa | |
Egypt | 11031 | 71.3 | 91508084 | Latin America | |
El Salvador | 7776 | 74.1 | 6126583 | Africa | |
Equatorial Guinea | 31087 | 60.63 | 845060 | Africa | |
Eritrea | 1129 | 62.9 | 5227791 | Africa | |
Estonia | 26812 | 76.8 | 1312558 | Africa | |
Ethiopia | 1520 | 63.6 | 99390750 | Africa | |
Fiji | 7925 | 66.3 | 892145 | Oceania | |
Finland | 38923 | 80.8 | 5503457 | Europe | |
France | 37599 | 81.9 | 64395345 | Europe | |
Gabon | 18627 | 60.53 | 1725292 | Africa | |
Gambia | 1644 | 65.1 | 1990924 | Africa | |
Georgia | 7474 | 73.3 | 3999812 | Europe | |
Germany | 44053 | 81.1 | 80688545 | Europe | |
Ghana | 4099 | 65.5 | 27409893 | Africa | |
Greece | 25430 | 79.8 | 10954617 | Europe | |
Grenada | 11593 | 71.7 | 106825 | Latin America | |
Guatemala | 7279 | 73.1 | 16342897 | Latin America | |
Guinea | 1225 | 60.8 | 12608590 | Africa | |
Guinea-Bissau | 1386 | 53.4 | 1844325 | Africa | |
Guyana | 6816 | 64.4 | 767085 | Latin America | |
Haiti | 1710 | 65.3 | 10711067 | Latin America | |
Honduras | 4270 | 72.4 | 8075060 | Latin America | |
Hungary | 24200 | 76.2 | 9855023 | Europe | |
Iceland | 42182 | 82.8 | 329425 | Europe | |
India | 5903 | 66.8 | 1311050527 | Asia | |
Indonesia | 10504 | 70.9 | 257563815 | Asia | |
Iran | 15573 | 78.5 | 79109272 | Asia | |
Iraq | 14646 | 72.1 | 36423395 | Asia | |
Ireland | 47758 | 80.4 | 4688465 | Europe | |
Israel | 31590 | 82.4 | 8064036 | Asia | |
Italy | 33297 | 82.1 | 59797685 | Europe | |
Jamaica | 8606 | 75.5 | 2793335 | Latin America | |
Japan | 36162 | 83.5 | 126573481 | Asia | |
Jordan | 11752 | 78.3 | 7594547 | Europe | |
Kazakhstan | 23468 | 68.2 | 17625226 | Asia | |
Kenya | 2898 | 66.63 | 46050302 | Africa | |
Kiribati | 1824 | 62.4 | 112423 | Oceania | |
Kuwait | 82633 | 80.7 | 3892115 | Asia | |
Kyrgyz Republic | 3245 | 69 | 5939962 | Asia | |
Lao | 5212 | 66.4 | 6802023 | Asia | |
Latvia | 23282 | 75.7 | 1970503 | Asia | |
Lebanon | 17050 | 78.5 | 5850743 | Asia | |
Lesotho | 2598 | 48.5 | 2135022 | Africa | |
Liberia | 958 | 63.9 | 4503438 | Africa | |
Libya | 17261 | 76.2 | 6278438 | Africa | |
Lithuania | 26665 | 75.4 | 2878405 | Europe | |
Luxembourg | 88314 | 81.1 | 567110 | Europe | |
Macedonia, FYR | 12547 | 77 | 2078453 | Europe | |
Madagascar | 1400 | 64.7 | 24235390 | Africa | |
Malawi | 799 | 60.22 | 17215232 | Africa | |
Malaysia | 24320 | 75.1 | 30331007 | Asia | |
Maldives | 14408 | 79.5 | 363657 | Asia | |
Mali | 1684 | 57.6 | 17599694 | Africa | |
Malta | 30265 | 82.1 | 418670 | Europe | |
Marshall Islands | 3661 | 65.1 | 52993 | Oceania | |
Mauritania | 3877 | 65.7 | 4067564 | Africa | |
Mauritius | 18350 | 73.9 | 1273212 | Africa | |
Mexico | 16850 | 74.5 | 127017224 | Latin America | |
Micronesia, Fed. Sts. | 3510 | 67 | 104460 | Oceania | |
Moldova | 4896 | 72.7 | 4068897 | Europe | |
Mongolia | 11819 | 65.3 | 2959134 | Asia | |
Montenegro | 14833 | 75.8 | 625781 | Europe | |
Morocco | 7319 | 74.7 | 34377511 | Africa | |
Mozambique | 1176 | 56.4 | 27977863 | Africa | |
Myanmar | 4012 | 67.9 | 53897154 | Asia | |
Namibia | 10040 | 61 | 2458830 | Africa | |
Nepal | 2352 | 71.2 | 28513700 | Asia | |
Netherlands | 45784 | 80.6 | 16924929 | Europe | |
New Zealand | 34186 | 80.6 | 4528526 | Oceania | |
Nicaragua | 4712 | 76.8 | 6082032 | Latin America | |
Niger | 943 | 62.2 | 19899120 | Africa | |
Nigeria | 5727 | 61.33 | 182201962 | Africa | |
North Korea | 1390 | 71.4 | 25155317 | Asia | |
Norway | 64304 | 81.6 | 5210967 | Europe | |
Oman | 48226 | 75.7 | 4490541 | Asia | |
Pakistan | 4743 | 66.5 | 188924874 | Asia | |
Panama | 20485 | 78.2 | 3929141 | Northern America | |
Papua New Guinea | 2529 | 60.6 | 7619321 | Oceania | |
Paraguay | 8219 | 73.9 | 6639123 | Latin America | |
Peru | 11903 | 77.5 | 31376670 | Latin America | |
Philippines | 6876 | 70.2 | 100699395 | Asia | |
Poland | 24787 | 77.3 | 38611794 | Europe | |
Portugal | 26437 | 79.8 | 10349803 | Europe | |
Qatar | 132877 | 82 | 2235355 | Asia | |
Romania | 19203 | 76.8 | 19511324 | Europe | |
Russia | 23038 | 73.13 | 143456918 | Europe | |
Rwanda | 1549 | 66.53 | 11609666 | Africa | |
Samoa | 5558 | 72.2 | 193228 | Oceania | |
Sao Tome and Principe | 3003 | 68.8 | 190344 | Africa | |
Saudi Arabia | 52469 | 78.1 | 31540372 | Asia | |
Senegal | 2251 | 66.1 | 15129273 | Africa | |
Serbia | 12908 | 78.1 | 8850975 | Europe | |
Seychelles | 25684 | 73.7 | 96471 | Africa | |
Sierra Leone | 2085 | 58.5 | 6453184 | Africa | |
Singapore | 80794 | 82.1 | 5603740 | Asia | |
Slovak Republic | 27204 | 76.4 | 5426258 | Europe | |
Slovenia | 28550 | 80.2 | 2067526 | Europe | |
Solomon Islands | 2047 | 64.1 | 583591 | Oceania | |
Somalia | 624 | 58.7 | 10787104 | Africa | |
South Africa | 12509 | 63.72 | 54490406 | Africa | |
South Korea | 34644 | 80.7 | 50293439 | Asia | |
South Sudan | 3047 | 58 | 12339812 | Africa | |
Spain | 32979 | 81.7 | 46121699 | Europe | |
Sri Lanka | 10624 | 76.5 | 20715010 | Asia | |
St. Lucia | 9997 | 74.5 | 184999 | Northern America | |
St. Vincent and the Grenadines | 10435 | 72.9 | 109462 | Northern America | |
Sudan | 3975 | 69.5 | 40234882 | Africa | |
Suriname | 17125 | 70.5 | 542975 | Latin America | |
Swaziland | 6095 | 51.5 | 1286970 | Africa | |
Sweden | 44892 | 82 | 9779426 | Europe | |
Switzerland | 56118 | 82.9 | 8298663 | Europe | |
Syria | 4637 | 70.26 | 18502413 | Asia | |
Tajikistan | 2582 | 71 | 8481855 | Asia | |
Tanzania | 2571 | 63.43 | 53470420 | Africa | |
Thailand | 14512 | 75.1 | 67959359 | Asia | |
Timor-Leste | 2086 | 72.4 | 1184765 | Asia | |
Togo | 1433 | 64.23 | 7304578 | Africa | |
Tonga | 5069 | 70.5 | 106170 | Oceania | |
Trinidad and Tobago | 30113 | 71.4 | 1360088 | Latin America | |
Tunisia | 11126 | 77.3 | 11253554 | Africa | |
Turkey | 19360 | 76.5 | 78665830 | Asia | |
Turkmenistan | 15865 | 67.9 | 5373502 | Asia | |
Uganda | 1680 | 60.8 | 39032383 | Africa | |
Ukraine | 8449 | 72.1 | 44823765 | Europe | |
United Arab Emirates | 60749 | 76.6 | 9156963 | Asia | |
United Kingdom | 38225 | 81.4 | 64715810 | Europe | |
United States | 53354 | 79.1 | 321773631 | Northern America | |
Uruguay | 20438 | 77.3 | 3431555 | Latin America | |
Uzbekistan | 5598 | 70.1 | 29893488 | Asia | |
Vanuatu | 2912 | 65 | 264652 | Oceania | |
Venezuela | 15753 | 75.8 | 31108083 | Latin America | |
Vietnam | 5623 | 76.5 | 93447601 | Asia | |
West Bank and Gaza | 4319 | 75.2 | 4668466 | Africa | |
Yemen | 3887 | 67.6 | 26832215 | Asia | |
Zambia | 4034 | 58.96 | 16211767 | Africa | |
Zimbabwe | 1801 | 60.01 | 15602751 | Africa |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script> | |
<title>Basic Scatter Plot</title> | |
<style> | |
body { | |
margin: 0px; | |
} | |
.domain { | |
display: none; | |
} | |
.tick line { | |
stroke: #C0C0BB; | |
} | |
.tick text, .legendCells text { | |
fill: #8E8883; | |
font-size: 13pt; | |
font-family: sans-serif; | |
} | |
.axis-label, .legend-label { | |
fill: #635F5D; | |
font-size: 15pt; | |
font-family: sans-serif; | |
} | |
</style> | |
</head> | |
<body> | |
<svg width="960" height="500"></svg> | |
<script> | |
const xValue = d => d.income; | |
const xLabel = 'Income Per Person, ($/year)'; | |
const yValue = d => d.health; | |
const yLabel = 'Health Expectancy, (years)'; | |
const rValue = d => d.population; | |
const rLabel = 'Size of spots stand for population'; | |
const colorValue = d => d.region; | |
const colorLabel = 'Region'; | |
const margin = { left: 120, right: 250, top: 30, bottom: 100 }; | |
const svg = d3.select('svg'); | |
const width = svg.attr('width'); | |
const height = svg.attr('height'); | |
const innerWidth = width - margin.left - margin.right; | |
const innerHeight = height - margin.top - margin.bottom; | |
const g = svg.append('g') | |
.attr('transform', `translate(${margin.left},${margin.top})`); | |
const xAxisG = g.append('g') | |
.attr('transform', `translate(0, ${innerHeight})`); | |
const yAxisG = g.append('g'); | |
const colorLegendG = g.append('g') | |
.attr('transform', `translate(${innerWidth + 60}, 150)`); | |
xAxisG.append('text') | |
.attr('class', 'axis-label') | |
.attr('x', innerWidth / 2) | |
.attr('y', 70) | |
.text(xLabel); | |
yAxisG.append('text') | |
.attr('class', 'axis-label') | |
.attr('x', -innerHeight / 2) | |
.attr('y', -60) | |
.attr('transform', `rotate(-90)`) | |
.style('text-anchor', 'middle') | |
.text(yLabel); | |
colorLegendG.append('text') | |
.attr('class', 'legend-label') | |
.attr('x', -30) | |
.attr('y', -40) | |
.text(colorLabel); | |
const xScale = d3.scaleLog(); | |
const yScale = d3.scaleLinear(); | |
const rScale = d3.scaleSqrt(); | |
const colorScale = d3.scaleOrdinal() | |
.range(d3.schemeCategory10); | |
const xAxis = d3.axisBottom() | |
.scale(xScale) | |
.ticks(11,",.1s") | |
.tickPadding(15) | |
.tickSize(-innerHeight); | |
const yAxis = d3.axisLeft() | |
.scale(yScale) | |
.ticks(5) | |
.tickPadding(15) | |
.tickSize(-innerWidth); | |
const colorLegend = d3.legendColor() | |
.scale(colorScale) | |
.shape('circle'); | |
const row = d => { | |
d.income = +d.income; | |
d.health = +d.health; | |
d.population = +d.population; | |
return d; | |
}; | |
function render(data){ | |
xScale | |
.domain(d3.extent(data, xValue)) | |
.range([0, innerWidth]) | |
.nice; | |
yScale | |
.domain(d3.extent(data, yValue)) | |
.range([innerHeight, 0]) | |
.nice(); | |
rScale | |
.domain(d3.extent(data, rValue)) | |
.range([4,18]); | |
g.selectAll('circle').data(data) | |
.enter().append('circle') | |
.attr('cx', d => xScale(xValue(d))) | |
.attr('cy', d => yScale(yValue(d))) | |
.attr('fill', d => colorScale(colorValue(d))) | |
.attr('fill-opacity', 0.6) | |
.attr('r', d => rScale(rValue(d))); | |
xAxisG.call(xAxis); | |
yAxisG.call(yAxis); | |
colorLegendG.call(colorLegend) | |
.selectAll('.cell text') | |
.attr('dy', '0.1em'); | |
}; | |
d3.csv('income_health.csv', row, render); | |
</script> | |
</body> | |
</html> |