Skip to content

Instantly share code, notes, and snippets.

@ElaineYu

ElaineYu/.block

Last active June 9, 2017 18:32
Show Gist options
  • Save ElaineYu/d390e8df758fd6a1123e4cec17ca48e4 to your computer and use it in GitHub Desktop.
Save ElaineYu/d390e8df758fd6a1123e4cec17ca48e4 to your computer and use it in GitHub Desktop.
Download ZIP
wealth & health of nations
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; }
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 56px;
padding: 2px;
font: 12px sans-serif;
background: cyan;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
// HOMEWORK:
// https://github.com/thisismetis/sf17_dataviz3/tree/master/class02
//
// SOURCES:
//
// Blocks builder axis: http://blockbuilder.org/sxywu/8045c7e4f4aebce27722e23eec960a6b
// FEM: Exercise 1 Starter code: http://blockbuilder.org/sxywu/909992222842cdbda009006e456a23b0
// Margin convention: https://bl.ocks.org/mbostock/3019563
// Axis labels and SVG: https://bl.ocks.org/d3noob/23e42c8f67210ac6c678db2cd07a747e
// Scatterplot with v4: https://bl.ocks.org/d3noob/6f082f0e3b820b6bf68b78f2f7786084
// D3 scales: https://github.com/d3/d3/blob/master/API.md#scales-d3-scale
d3.json("world_data.json", function(error, data) {
if (error) { throw error};
console.log('World Data json', data);
// Define the margin object with properties for the four sides
var margin = {top: 20, right: 20, bottom: 50, left: 70};
// define width and height as the INNER dimensions of the chart area
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
console.log('margin', margin);
console.log('width', width);
console.log('height', height);
// X-axis setup
var xExtent = d3.extent(data, d => d.income);
console.log('xExtent', xExtent);
var xScale = d3.scaleLog()
.domain([300, xExtent[1]]) // income per capita data
.range([0 , width]) // screen space display
console.log('xScale', xScale)
// Y-axis
// extent provides min, max
var yExtent = d3.extent(data, d => d.lifeExpectancy);
console.log('yExtent', yExtent);
// maximum value for y
var yMax = d3.max(data, d => d.lifeExpectancy);
console.log('yMax', yMax);
var yScale = d3.scaleLinear()
.domain([0, yExtent[1]]) // life expectancy data
.range([height, 0]) // screen space display
console.log('yScale', yScale);
// X and Y Axis
var xAxis = d3.axisBottom()
.scale(xScale)
var yAxis = d3.axisLeft()
.scale(yScale);
// Append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g") // define svg as a G element that translates the origin to the top-left corner of the chart area.
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")") //(translate (20, 20)
// Append X-axis
svg.append('g')
.attr("transform", "translate(0," + height + ")") // Move x-axis down translate(tx, ty) / (0, 500 - margin.top - margin.bottom)
.call(xAxis)
// Append Y-axis
svg
.append('g')
.call(yAxis)
//
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Create scatter plot
// Bind circles to income (x coord), and lifeExpectancy (y)
svg.selectAll('dot')
.data(data)
.enter().append("circle")
.attr("r", 3)
// .attr("r", d => d.lifeExpectancy*0.1)
.attr("cx", function(d) { return xScale(d.income); })
.attr("cy", function(d) { return yScale(d.lifeExpectancy); })
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html("Hello" + "<br/>" + d.name)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Life Expectancy");
// text label for the x axis
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," +
(height + margin.top + 20) + ")")
.style("text-anchor", "middle")
.text("Income per capita");
});
</script>
</body>
Raw
world_data.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