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
forked from ZijunXu‘s block: Relation Between Income And Health Expectancy In Different Countries
Modified so that area corresponds to population values.
<!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([0, d3.max(data, rValue)])
.range([0,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>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