Skip to content

Instantly share code, notes, and snippets.

@uptheirons78
Last active February 19, 2018 13:23
Show Gist options
  • Save uptheirons78/4bfdfc46722b6cd8440ca246ef186a0a to your computer and use it in GitHub Desktop.
Save uptheirons78/4bfdfc46722b6cd8440ca246ef186a0a to your computer and use it in GitHub Desktop.
First ScatterPlot
license: mit
var birthData2011 = [
{
region: "Afghanistan",
births: 1408000,
population: 32358260,
area: 652860,
lifeExpectancy: 49
},
{
region: "Albania",
births: 41000,
population: 3215988,
area: 27400,
lifeExpectancy: 77
},
{
region: "Algeria",
births: 712000,
population: 35980193,
area: 2381741,
lifeExpectancy: 73
},
{
region: "Angola",
births: 803000,
population: 19618432,
area: 1246700,
lifeExpectancy: 51
},
{
region: "Argentina",
births: 693000,
population: 40764561,
area: 2736690,
lifeExpectancy: 76
},
{
region: "Armenia",
births: 47000,
population: 3100236,
area: 28470,
lifeExpectancy: 74
},
{
region: "Australia",
births: 307000,
population: 22605732,
area: 7682300,
lifeExpectancy: 82
},
{
region: "Austria",
births: 74000,
population: 8413429,
area: 82523,
lifeExpectancy: 81
},
{
region: "Azerbaijan",
births: 184000,
population: 9306023,
area: 82663,
lifeExpectancy: 71
},
{
region: "Bahamas",
births: 5000,
population: 347176,
area: 10010,
lifeExpectancy: 76
},
{
region: "Bahrain",
births: 23000,
population: 1323535,
area: 771,
lifeExpectancy: 75
},
{
region: "Bangladesh",
births: 3016000,
population: 150493658,
area: 130170,
lifeExpectancy: 69
},
{
region: "Barbados",
births: 3000,
population: 273925,
area: 430,
lifeExpectancy: 77
},
{
region: "Belarus",
births: 107000,
population: 9559441,
area: 202910,
lifeExpectancy: 70
},
{
region: "Belgium",
births: 123000,
population: 10754056,
area: 30280,
lifeExpectancy: 80
},
{
region: "Belize",
births: 8000,
population: 317928,
area: 22810,
lifeExpectancy: 76
},
{
region: "Benin",
births: 356000,
population: 9099922,
area: 112760,
lifeExpectancy: 56
},
{
region: "Bhutan",
births: 15000,
population: 738267,
area: 38117,
lifeExpectancy: 67
},
{
region: "Bolivia (Plurinational State of)",
births: 264000,
population: 10088108,
area: 1083300,
lifeExpectancy: 67
},
{
region: "Bosnia and Herzegovina",
births: 32000,
population: 3752228,
area: 51200,
lifeExpectancy: 76
},
{
region: "Botswana",
births: 47000,
population: 2030738,
area: 566730,
lifeExpectancy: 53
},
{
region: "Brazil",
births: 2996000,
population: 196655014,
area: 8358140,
lifeExpectancy: 73
},
{
region: "Brunei Darussalam",
births: 8000,
population: 405938,
area: 5270,
lifeExpectancy: 78
},
{
region: "Bulgaria",
births: 75000,
population: 7446135,
area: 108560,
lifeExpectancy: 73
},
{
region: "Burkina Faso",
births: 730000,
population: 16967845,
area: 273600,
lifeExpectancy: 55
},
{
region: "Burundi",
births: 288000,
population: 8575172,
area: 25680,
lifeExpectancy: 50
},
{
region: "Cambodia",
births: 317000,
population: 14305183,
area: 176520,
lifeExpectancy: 63
},
{
region: "Cameroon",
births: 716000,
population: 20030362,
area: 472710,
lifeExpectancy: 52
},
{
region: "Canada",
births: 388000,
population: 34349561,
area: 9093510,
lifeExpectancy: 81
},
{
region: "Cape Verde",
births: 10000,
population: 500585,
area: 4030,
lifeExpectancy: 74
},
{
region: "Central African Republic",
births: 156000,
population: 4486837,
area: 622980,
lifeExpectancy: 48
},
{
region: "Chad",
births: 511000,
population: 11525496,
area: 1259200,
lifeExpectancy: 50
},
{
region: "Chile",
births: 245000,
population: 17269525,
area: 743532,
lifeExpectancy: 79
},
{
region: "China",
births: 16364000,
population: 1347565324,
area: 9388211,
lifeExpectancy: 73
},
{
region: "Colombia",
births: 910000,
population: 46927125,
area: 1109500,
lifeExpectancy: 74
},
{
region: "Comoros",
births: 28000,
population: 753943,
area: 1861,
lifeExpectancy: 61
},
{
region: "Congo",
births: 145000,
population: 4139748,
area: 341500,
lifeExpectancy: 57
},
{
region: "Costa Rica",
births: 73000,
population: 4726575,
area: 51060,
lifeExpectancy: 79
},
{
region: "Côte d'Ivoire",
births: 679000,
population: 20152894,
area: 318000,
lifeExpectancy: 55
},
{
region: "Croatia",
births: 43000,
population: 4395560,
area: 55960,
lifeExpectancy: 77
},
{
region: "Cuba",
births: 110000,
population: 11253665,
area: 104020,
lifeExpectancy: 79
},
{
region: "Cyprus",
births: 13000,
population: 1116564,
area: 9240,
lifeExpectancy: 80
},
{
region: "Czech Republic",
births: 116000,
population: 10534293,
area: 77210,
lifeExpectancy: 78
},
{
region: "Democratic People's Republic of Korea",
births: 348000,
population: 24451285,
area: 120410,
lifeExpectancy: 69
},
{
region: "Democratic Republic of the Congo",
births: 2912000,
population: 67757577,
area: 2267050,
lifeExpectancy: 48
},
{
region: "Denmark",
births: 64000,
population: 5572594,
area: 42262,
lifeExpectancy: 79
},
{
region: "Djibouti",
births: 26000,
population: 905564,
area: 23180,
lifeExpectancy: 58
},
{
region: "Dominican Republic",
births: 216000,
population: 10056181,
area: 48310,
lifeExpectancy: 73
},
{
region: "Ecuador",
births: 298000,
population: 14666055,
area: 248360,
lifeExpectancy: 76
},
{
region: "Egypt",
births: 1886000,
population: 82536770,
area: 995450,
lifeExpectancy: 73
},
{
region: "El Salvador",
births: 126000,
population: 6227491,
area: 20720,
lifeExpectancy: 72
},
{
region: "Equatorial Guinea",
births: 26000,
population: 720213,
area: 28050,
lifeExpectancy: 51
},
{
region: "Eritrea",
births: 193000,
population: 5415280,
area: 101000,
lifeExpectancy: 62
},
{
region: "Estonia",
births: 16000,
population: 1340537,
area: 42390,
lifeExpectancy: 75
},
{
region: "Ethiopia",
births: 2613000,
population: 84734262,
area: 1000000,
lifeExpectancy: 59
},
{
region: "Fiji",
births: 18000,
population: 868406,
area: 18270,
lifeExpectancy: 69
},
{
region: "Finland",
births: 61000,
population: 5384770,
area: 303890,
lifeExpectancy: 80
},
{
region: "France",
births: 792000,
population: 63125894,
area: 547557,
lifeExpectancy: 82
},
{
region: "Gabon",
births: 42000,
population: 1534262,
area: 257670,
lifeExpectancy: 63
},
{
region: "Gambia",
births: 67000,
population: 1776103,
area: 10120,
lifeExpectancy: 58
},
{
region: "Georgia",
births: 51000,
population: 4329026,
area: 69490,
lifeExpectancy: 74
},
{
region: "Germany",
births: 699000,
population: 82162512,
area: 348900,
lifeExpectancy: 80
},
{
region: "Ghana",
births: 776000,
population: 24965816,
area: 227540,
lifeExpectancy: 64
},
{
region: "Greece",
births: 117000,
population: 11390031,
area: 128900,
lifeExpectancy: 80
},
{
region: "Grenada",
births: 2000,
population: 104890,
area: 340,
lifeExpectancy: 76
},
{
region: "Guatemala",
births: 473000,
population: 14757316,
area: 107160,
lifeExpectancy: 71
},
{
region: "Guinea",
births: 394000,
population: 10221808,
area: 245720,
lifeExpectancy: 54
},
{
region: "Guinea-Bissau",
births: 59000,
population: 1547061,
area: 28120,
lifeExpectancy: 48
},
{
region: "Guyana",
births: 13000,
population: 756040,
area: 196850,
lifeExpectancy: 70
},
{
region: "Haiti",
births: 266000,
population: 10123787,
area: 27560,
lifeExpectancy: 62
},
{
region: "Honduras",
births: 205000,
population: 7754687,
area: 111890,
lifeExpectancy: 73
},
{
region: "Hungary",
births: 100000,
population: 9966116,
area: 90530,
lifeExpectancy: 74
},
{
region: "Iceland",
births: 5000,
population: 324366,
area: 100250,
lifeExpectancy: 82
},
{
region: "India",
births: 27098000,
population: 1241491960,
area: 2973190,
lifeExpectancy: 65
},
{
region: "Indonesia",
births: 4331000,
population: 242325638,
area: 1811570,
lifeExpectancy: 69
},
{
region: "Iran (Islamic Republic of)",
births: 1255000,
population: 74798599,
area: 1628760,
lifeExpectancy: 73
},
{
region: "Iraq",
births: 1144000,
population: 32664942,
area: 434320,
lifeExpectancy: 69
},
{
region: "Ireland",
births: 72000,
population: 4525802,
area: 68890,
lifeExpectancy: 81
},
{
region: "Israel",
births: 156000,
population: 7562194,
area: 21640,
lifeExpectancy: 82
},
{
region: "Italy",
births: 557000,
population: 60788694,
area: 294140,
lifeExpectancy: 82
},
{
region: "Jamaica",
births: 50000,
population: 2751273,
area: 10830,
lifeExpectancy: 73
},
{
region: "Japan",
births: 1073000,
population: 126497241,
area: 364560,
lifeExpectancy: 83
},
{
region: "Jordan",
births: 154000,
population: 6330169,
area: 88780,
lifeExpectancy: 73
},
{
region: "Kazakhstan",
births: 345000,
population: 16206750,
area: 2699700,
lifeExpectancy: 67
},
{
region: "Kenya",
births: 1560000,
population: 41609728,
area: 569140,
lifeExpectancy: 57
},
{
region: "Kuwait",
births: 50000,
population: 2818042,
area: 17820,
lifeExpectancy: 75
},
{
region: "Kyrgyzstan",
births: 131000,
population: 5392580,
area: 191800,
lifeExpectancy: 68
},
{
region: "Lao People's Democratic Republic",
births: 140000,
population: 6288037,
area: 230800,
lifeExpectancy: 67
},
{
region: "Latvia",
births: 24000,
population: 2243142,
area: 62180,
lifeExpectancy: 73
},
{
region: "Lebanon",
births: 65000,
population: 4259405,
area: 10230,
lifeExpectancy: 73
},
{
region: "Lesotho",
births: 60000,
population: 2193843,
area: 30360,
lifeExpectancy: 48
},
{
region: "Liberia",
births: 157000,
population: 4128572,
area: 96320,
lifeExpectancy: 57
},
{
region: "Libya",
births: 144000,
population: 6422772,
area: 1759540,
lifeExpectancy: 75
},
{
region: "Lithuania",
births: 35000,
population: 3307481,
area: 62650,
lifeExpectancy: 72
},
{
region: "Luxembourg",
births: 6000,
population: 515941,
area: 2590,
lifeExpectancy: 80
},
{
region: "Madagascar",
births: 747000,
population: 21315135,
area: 581800,
lifeExpectancy: 67
},
{
region: "Malawi",
births: 686000,
population: 15380888,
area: 94280,
lifeExpectancy: 54
},
{
region: "Malaysia",
births: 579000,
population: 28859154,
area: 328550,
lifeExpectancy: 74
},
{
region: "Maldives",
births: 5000,
population: 320081,
area: 300,
lifeExpectancy: 77
},
{
region: "Mali",
births: 728000,
population: 15839538,
area: 1220190,
lifeExpectancy: 51
},
{
region: "Malta",
births: 4000,
population: 417855,
area: 320,
lifeExpectancy: 80
},
{
region: "Mauritania",
births: 118000,
population: 3541540,
area: 1030700,
lifeExpectancy: 59
},
{
region: "Mauritius",
births: 16000,
population: 1306593,
area: 2030,
lifeExpectancy: 73
},
{
region: "Mexico",
births: 2195000,
population: 114793341,
area: 1943950,
lifeExpectancy: 77
},
{
region: "Micronesia (Federated States of)",
births: 3000,
population: 111542,
area: 700,
lifeExpectancy: 69
},
{
region: "Mongolia",
births: 65000,
population: 2800114,
area: 1553560,
lifeExpectancy: 68
},
{
region: "Montenegro",
births: 8000,
population: 632261,
area: 13450,
lifeExpectancy: 75
},
{
region: "Morocco",
births: 620000,
population: 32272974,
area: 446300,
lifeExpectancy: 72
},
{
region: "Mozambique",
births: 889000,
population: 23929708,
area: 786380,
lifeExpectancy: 50
},
{
region: "Myanmar",
births: 824000,
population: 48336763,
area: 653080,
lifeExpectancy: 65
},
{
region: "Namibia",
births: 60000,
population: 2324004,
area: 823290,
lifeExpectancy: 62
},
{
region: "Nepal",
births: 722000,
population: 30485798,
area: 143350,
lifeExpectancy: 69
},
{
region: "Netherlands",
births: 181000,
population: 16664746,
area: 33690,
lifeExpectancy: 81
},
{
region: "New Zealand",
births: 64000,
population: 4414509,
area: 263310,
lifeExpectancy: 81
},
{
region: "Nicaragua",
births: 138000,
population: 5869859,
area: 120340,
lifeExpectancy: 74
},
{
region: "Niger",
births: 777000,
population: 16068994,
area: 1266700,
lifeExpectancy: 55
},
{
region: "Nigeria",
births: 6458000,
population: 162470737,
area: 910770,
lifeExpectancy: 52
},
{
region: "Norway",
births: 61000,
population: 4924848,
area: 365245,
lifeExpectancy: 81
},
{
region: "Oman",
births: 50000,
population: 2846145,
area: 309500,
lifeExpectancy: 73
},
{
region: "Pakistan",
births: 4764000,
population: 176745364,
area: 770880,
lifeExpectancy: 65
},
{
region: "Panama",
births: 70000,
population: 3571185,
area: 74340,
lifeExpectancy: 76
},
{
region: "Papua New Guinea",
births: 208000,
population: 7013829,
area: 452860,
lifeExpectancy: 63
},
{
region: "Paraguay",
births: 158000,
population: 6568290,
area: 397300,
lifeExpectancy: 72
},
{
region: "Peru",
births: 591000,
population: 29399817,
area: 1280000,
lifeExpectancy: 74
},
{
region: "Philippines",
births: 2358000,
population: 94852030,
area: 298170,
lifeExpectancy: 69
},
{
region: "Poland",
births: 410000,
population: 38298949,
area: 306190,
lifeExpectancy: 76
},
{
region: "Portugal",
births: 97000,
population: 10689663,
area: 91605,
lifeExpectancy: 79
},
{
region: "Qatar",
births: 21000,
population: 1870041,
area: 11610,
lifeExpectancy: 78
},
{
region: "Republic of Korea",
births: 479000,
population: 48391343,
area: 97480,
lifeExpectancy: 81
},
{
region: "Republic of Moldova",
births: 44000,
population: 3544864,
area: 32870,
lifeExpectancy: 69
},
{
region: "Romania",
births: 221000,
population: 21436495,
area: 230080,
lifeExpectancy: 74
},
{
region: "Russian Federation",
births: 1689000,
population: 142835555,
area: 16376870,
lifeExpectancy: 69
},
{
region: "Rwanda",
births: 449000,
population: 10942950,
area: 24670,
lifeExpectancy: 55
},
{
region: "Saint Lucia",
births: 3000,
population: 176044,
area: 610,
lifeExpectancy: 75
},
{
region: "Saint Vincent and the Grenadines",
births: 2000,
population: 109365,
area: 390,
lifeExpectancy: 72
},
{
region: "Samoa",
births: 4000,
population: 183874,
area: 2830,
lifeExpectancy: 72
},
{
region: "Sao Tome and Principe",
births: 5000,
population: 168526,
area: 960,
lifeExpectancy: 65
},
{
region: "Saudi Arabia",
births: 605000,
population: 28082541,
area: 2149690,
lifeExpectancy: 74
},
{
region: "Senegal",
births: 471000,
population: 12767556,
area: 192530,
lifeExpectancy: 59
},
{
region: "Serbia",
births: 110000,
population: 9853969,
area: 87460,
lifeExpectancy: 75
},
{
region: "Sierra Leone",
births: 227000,
population: 5997486,
area: 72180,
lifeExpectancy: 48
},
{
region: "Singapore",
births: 47000,
population: 5187933,
area: 709,
lifeExpectancy: 81
},
{
region: "Slovakia",
births: 58000,
population: 5471502,
area: 48086,
lifeExpectancy: 75
},
{
region: "Slovenia",
births: 20000,
population: 2035012,
area: 20140,
lifeExpectancy: 79
},
{
region: "Solomon Islands",
births: 17000,
population: 552267,
area: 27990,
lifeExpectancy: 68
},
{
region: "Somalia",
births: 416000,
population: 9556873,
area: 627340,
lifeExpectancy: 51
},
{
region: "Spain",
births: 499000,
population: 46454895,
area: 500210,
lifeExpectancy: 81
},
{
region: "Sri Lanka",
births: 373000,
population: 21045394,
area: 62710,
lifeExpectancy: 75
},
{
region: "State of Palestine",
births: 137000,
population: 4152369,
area: 6020,
lifeExpectancy: 73
},
{
region: "Sudan (pre-cession)",
births: 1447000,
population: 44632410,
area: 2376000,
lifeExpectancy: 61
},
{
region: "Suriname",
births: 10000,
population: 529419,
area: 156000,
lifeExpectancy: 71
},
{
region: "Swaziland",
births: 35000,
population: 1203330,
area: 17200,
lifeExpectancy: 49
},
{
region: "Sweden",
births: 113000,
population: 9440747,
area: 407310,
lifeExpectancy: 81
},
{
region: "Switzerland",
births: 77000,
population: 7701690,
area: 39516,
lifeExpectancy: 82
},
{
region: "Syrian Arab Republic",
births: 466000,
population: 20766037,
area: 183630,
lifeExpectancy: 76
},
{
region: "Tajikistan",
births: 194000,
population: 6976958,
area: 138786,
lifeExpectancy: 68
},
{
region: "Thailand",
births: 824000,
population: 69518555,
area: 510890,
lifeExpectancy: 74
},
{
region: "The former Yugoslav Republic of Macedonia",
births: 22000,
population: 2063893,
area: 25220,
lifeExpectancy: 75
},
{
region: "Timor-Leste",
births: 44000,
population: 1153834,
area: 14870,
lifeExpectancy: 62
},
{
region: "Togo",
births: 195000,
population: 6154813,
area: 54390,
lifeExpectancy: 57
},
{
region: "Tonga",
births: 3000,
population: 104509,
area: 720,
lifeExpectancy: 72
},
{
region: "Trinidad and Tobago",
births: 20000,
population: 1346350,
area: 5130,
lifeExpectancy: 70
},
{
region: "Tunisia",
births: 179000,
population: 10594057,
area: 155360,
lifeExpectancy: 75
},
{
region: "Turkey",
births: 1289000,
population: 73639596,
area: 769630,
lifeExpectancy: 74
},
{
region: "Turkmenistan",
births: 109000,
population: 5105301,
area: 469930,
lifeExpectancy: 65
},
{
region: "Uganda",
births: 1545000,
population: 34509205,
area: 200520,
lifeExpectancy: 54
},
{
region: "Ukraine",
births: 494000,
population: 45190180,
area: 579290,
lifeExpectancy: 68
},
{
region: "United Arab Emirates",
births: 94000,
population: 7890924,
area: 83600,
lifeExpectancy: 77
},
{
region: "United Kingdom",
births: 761000,
population: 62417431,
area: 241930,
lifeExpectancy: 80
},
{
region: "United Republic of Tanzania",
births: 1913000,
population: 46218486,
area: 885800,
lifeExpectancy: 58
},
{
region: "United States",
births: 4322000,
population: 313085380,
area: 9147420,
lifeExpectancy: 79
},
{
region: "Uruguay",
births: 49000,
population: 3380008,
area: 175020,
lifeExpectancy: 77
},
{
region: "Uzbekistan",
births: 589000,
population: 27760267,
area: 425400,
lifeExpectancy: 68
},
{
region: "Vanuatu",
births: 7000,
population: 245619,
area: 12190,
lifeExpectancy: 71
},
{
region: "Venezuela (Bolivarian Republic of)",
births: 598000,
population: 29436891,
area: 882050,
lifeExpectancy: 74
},
{
region: "Viet Nam",
births: 1458000,
population: 88791996,
area: 310070,
lifeExpectancy: 75
},
{
region: "Yemen",
births: 940000,
population: 24799880,
area: 527970,
lifeExpectancy: 65
},
{
region: "Zambia",
births: 622000,
population: 13474959,
area: 743390,
lifeExpectancy: 49
},
{
region: "Zimbabwe",
births: 377000,
population: 12754378,
area: 386850,
lifeExpectancy: 51
},
];
<!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; }
svg {margin-left: 100px; margin-top: 50px;}
.tick line {stroke: #ccc; stroke-dasharray: 5, 5;}
</style>
</head>
<body>
<svg></svg>
<script src="birthData2011.js"></script>
<script>
const width = 500;
const height = 500;
const padding = 30;
//d3.extent(values) return an array of min and max values
const yScale = d3.scaleLinear()
.domain(d3.extent(birthData2011, d => d.lifeExpectancy))
.range([height - padding, padding]);
const xScale = d3.scaleLinear()
.domain(d3.extent(birthData2011, d => d.births / d.population))
.range([padding, width - padding]);
const colorScale = d3.scaleLinear()
.domain(d3.extent(birthData2011, d => d.population / d.area))
.range(['lightgreen', 'black']);
const radiusScale = d3.scaleLinear()
.domain(d3.extent(birthData2011, d => d.births))
.range([2, 40]);
//create Axes and Grids
const xAxis = d3.axisBottom(xScale)
.tickSize(-height + 2 * padding)
.tickSizeOuter(0);
const yAxis = d3.axisLeft(yScale)
.tickSize(-width + 2 * padding)
.tickSizeOuter(0);
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height);
//draw Axes
svg
.append('g')
.attr("transform", `translate(0, ${height - padding})`)
.call(xAxis);
svg
.append('g')
.attr("transform", `translate(${padding}, 0)`)
.call(yAxis);
svg.selectAll('circle').data(birthData2011).enter()
.append("circle")
.attr("cx", d => xScale(d.births / d.population))
.attr("cy", d => yScale(d.lifeExpectancy))
.attr("r", d => radiusScale(d.births))
.attr("fill", d => colorScale(d.population / d.area))
.attr("fill-opacity", 0.8);
svg
.append('text')
.attr('x', width / 2)
.attr('y', height - padding)
.attr('dy', '1.5em')
.style('text-anchor', 'middle')
.text('Births per Capita');
svg
.append('text')
.attr('x', width / 2)
.attr('y', padding)
.style('text-anchor', 'middle')
.style('font-size', '1.5em')
.style('font-weight', 'bold')
.text('Data on Births by Country in 2011');
svg
.append('text')
.attr('transform', 'rotate(-90)')
.attr('x', - height / 2)
.attr('y', padding)
.attr('dy', '-1.1em')
.style('text-anchor', 'middle')
.style('font-weight', 'bold')
.text('Life Expectancy');
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment