Skip to content

Instantly share code, notes, and snippets.

@danaoira

danaoira/.block

Last active July 13, 2017 20:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danaoira/6d64aa2a33de84d69c92c5898f992657 to your computer and use it in GitHub Desktop.
Save danaoira/6d64aa2a33de84d69c92c5898f992657 to your computer and use it in GitHub Desktop.
Download ZIP
text-nesting
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin:0;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
}
.axis {
font-family: "Lato";
font-size: 10px;
fill: #808080;
opacity:1;
}
.text {
font-family: "Lato", Arial, Verdana;
font-size: 10px;
fill: #808080;
}
</style>
</head>
<body>
<script>
d3.json("nations.json", function(error, json) {
if (error) throw error;
console.log(json);
var data = json;
var width = 960;
var height = 500;
var margin = { top: 75, right: 30, bottom: 20, left: 30 };
//calculate x and y min/max
var xExtent = d3.extent(data, function(d) { return d.income });
var yExtent = d3.extent(data, function(d) { return d.lifeExpectancy });
//calculate x and y scale
var xScale = d3.scaleLinear()
.domain(xExtent)
.range([margin.left, width-margin.right]);
var yScale = d3.scaleLinear()
.domain([0, yExtent[1]])
.range([height-margin.bottom, margin.top]);
//create axis
var xAxis = d3.axisBottom()
.scale(xScale);
var yAxis = d3.axisLeft()
.scale(yScale);
//create the svg canvas, append it to the body, set dimentions
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
//select all the (to-be-made) circles
var countries = svg.selectAll('g')
.data(data, function(d) { return d.name })
.classed('countries', true);
// exit
countries.exit().remove();
countries = countries.enter();
//bind circles to the data and put them in g
var circle = countries.select('g')
.data(data, function(d) {return d.name});
circle.exit().remove();
//enter and append circles and text to group
var enter = circle.enter().append('g');
enter.append('circle');
enter.append('text');
circle = enter.merge(circle);
circle.select('circle')
.attr("cx", function(d) {return xScale(d.income)})
.attr("cy", function(d) {return yScale(d.lifeExpectancy)})
.attr("r", 10)
.style('fill', 'ec008b')
.style('stroke', 'white')
.style('fill-opacity', .60);
//append text to the circles
circle.select('text')
.text(function(d) {return d.name})
.attr('x', function(d) {return xScale(d.income)})
.attr('y', function(d) {return yScale(d.lifeExpectancy)})
.attr("text-anchor", "middle")
.attr('class', 'text');
//draw x and y axis
var axisX = svg.append("g")
.attr("transform", "translate(" + [0, height-margin.bottom] + ")")
.call(xAxis)
.attr('opacity', .5)
.attr("stroke-dasharray", "1,2");
var axisY = svg.append("g")
.attr("transform", "translate(" + [margin.left, 0] + ")")
.call(yAxis)
.attr('opacity', .5)
.attr("stroke-dasharray", "1,2");
//x and y axis labels
var xLabel = axisX.append("text")
.text("INCOME PER CAPITA (DOLLARS)")
.style("font-size", 12)
.style("font-family", "Lato")
.style("fill", "black")
.style("opacity", .6)
.attr("transform", "translate(" + [width - margin.right, 0 - margin.bottom /2] + ")")
.attr("text-anchor", "end");
//.attr("class", "axis");
var yLabel = axisY.append("text")
.text("LIFE EXPECTANCY (YEARS)")
.attr("transform", "translate(" + [margin.left * 0.5, margin.top] + ") rotate(" + -90 + ")")
.attr("class", "axis");
//title
var title = svg.append("text")
.text("THE WEALTH & HEALTH OF NATIONS, 2009")
.attr("transform", "translate("+[margin.left, margin.top * 0.65]+")")
.attr("text-anchor","left")
.style("font-size", 32)
.style("font-family", "Lato")
.style("fill", "black")
.style("opacity", .6);
});
</script>
</body>
Raw
nations.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