Skip to content

Instantly share code, notes, and snippets.

@ZijunXu

ZijunXu/.block

Last active October 9, 2017 19:12
Show Gist options
  • Save ZijunXu/ab0816e2a90bab0ef446eabe8f750c2c to your computer and use it in GitHub Desktop.
Save ZijunXu/ab0816e2a90bab0ef446eabe8f750c2c to your computer and use it in GitHub Desktop.
Download ZIP
Relation Between Income And Health Expectancy In Different Countries with Responding to Resize
Raw
.block
license: mit
Raw
README.md
Raw
income_health.csv
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
Raw
index.html
<!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: 0;
}
.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;
}
#chart {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
function redraw() {
const chartDiv = document.getElementById("chart");
let svg = d3.select(chartDiv).selectAll('svg').data([null]);
// .append("svg");
const width = chartDiv.clientWidth;
const height = chartDiv.clientHeight;
svg = svg.enter().append("svg")
.attr("width", width)
.attr("height", height)
.merge(svg);
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 innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
let g = svg.selectAll('.container').data([null]);
const gEnter = g.enter().append('g').attr('class', 'container');
g = gEnter
.merge(g)
.attr('transform', `translate(${margin.left},${margin.top})`);
const xAxisGEnter = gEnter.append('g').attr('class', 'x-axis');
const xAxisG = xAxisGEnter
.merge(g.select('.x-axis'))
.attr('transform', `translate(0, ${innerHeight})`);
const yAxisGEnter = gEnter.append('g').attr('class', 'y-axis');
const yAxisG = yAxisGEnter.merge(g.select('.y-axis'));
const colorLegendGEnter = gEnter.append('g').attr('class', 'legend');
const colorLegendG = colorLegendGEnter
.merge(g.select('.legend'))
.attr('transform', `translate(${innerWidth + 60}, 150)`);
xAxisGEnter
.append('text')
.attr('class', 'axis-label')
.attr('y', 70)
.merge(xAxisG.select('.axis-label'))
.attr('x', innerWidth / 2)
.text(xLabel);
yAxisGEnter
.append('text')
.attr('class', 'axis-label')
.attr('y', -60)
.style('text-anchor', 'middle')
.merge(yAxisG.select('.axis-label'))
.attr('x', -innerHeight / 2)
.attr('transform', `rotate(-90)`)
.text(yLabel);
colorLegendGEnter
.append('text')
.attr('class', 'legend-label')
.attr('x', -30)
.attr('y', -40)
.merge(colorLegendG.select('legend-label'))
.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]);
const circles = g.selectAll('.mark').data(data);
circles
.enter().append('circle')
.attr('class', 'mark')
.merge(circles)
.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);
}
redraw();
window.addEventListener("resize", redraw);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment