Skip to content

Instantly share code, notes, and snippets.

@mattbrehmer

mattbrehmer/index.html

Last active July 24, 2017 16:39
Show Gist options
  • Save mattbrehmer/2c4f5d43d79ec9e78b8d9843c878e6b8 to your computer and use it in GitHub Desktop.
Save mattbrehmer/2c4f5d43d79ec9e78b8d9843c878e6b8 to your computer and use it in GitHub Desktop.
Download ZIP
Resizing, Rescaling, and Updating Scatterplot
Raw
index.html
<!doctype html>
<html xmnls="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" charset="UTF-8">
</head>
<body>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
<script type="text/javascript" src="scatterplot.js" charset="UTF-8"></script>
</html>
Raw
scatterplot.js
var gapminder = [{"Country":"Albania","LifeExpectancy":74.2,"FertilityRate":2.47,"Population":3121965,"Region":"Europe & Central Asia"},{"Country":"Antigua and Barbuda","LifeExpectancy":73.9,"FertilityRate":2.32,"Population":77648,"Region":"America"},{"Country":"Argentina","LifeExpectancy":74.3,"FertilityRate":2.54,"Population":37057453,"Region":"America"},{"Country":"Armenia","LifeExpectancy":71.4,"FertilityRate":1.4,"Population":3076098,"Region":"Europe & Central Asia"},{"Country":"Aruba","LifeExpectancy":74.919,"FertilityRate":1.91,"Population":90858,"Region":"America"},{"Country":"Austria","LifeExpectancy":78.2,"FertilityRate":1.34,"Population":8050884,"Region":"Europe & Central Asia"},{"Country":"Azerbaijan","LifeExpectancy":68,"FertilityRate":2.11,"Population":8117742,"Region":"Europe & Central Asia"},{"Country":"Bahamas","LifeExpectancy":70.3,"FertilityRate":2.17,"Population":297891,"Region":"America"},{"Country":"Barbados","LifeExpectancy":74.3,"FertilityRate":1.76,"Population":269838,"Region":"America"},{"Country":"Belarus","LifeExpectancy":68.2,"FertilityRate":1.25,"Population":9952055,"Region":"Europe & Central Asia"},{"Country":"Belgium","LifeExpectancy":77.8,"FertilityRate":1.62,"Population":10268380,"Region":"Europe & Central Asia"},{"Country":"Belize","LifeExpectancy":69,"FertilityRate":3.7,"Population":247312,"Region":"America"},{"Country":"Bolivia","LifeExpectancy":67.6,"FertilityRate":4.22,"Population":8339512,"Region":"America"},{"Country":"Bosnia and Herzegovina","LifeExpectancy":75.2,"FertilityRate":1.43,"Population":3792878,"Region":"Europe & Central Asia"},{"Country":"Brazil","LifeExpectancy":71.9,"FertilityRate":2.4,"Population":175786441,"Region":"America"},{"Country":"Bulgaria","LifeExpectancy":71.7,"FertilityRate":1.18,"Population":8000510,"Region":"Europe & Central Asia"},{"Country":"Canada","LifeExpectancy":79.3,"FertilityRate":1.54,"Population":30701903,"Region":"America"},{"Country":"Channel Islands","LifeExpectancy":79.745,"FertilityRate":1.4,"Population":148725,"Region":"Europe & Central Asia"},{"Country":"Chile","LifeExpectancy":77.2,"FertilityRate":2.14,"Population":15170387,"Region":"America"},{"Country":"Colombia","LifeExpectancy":72.5,"FertilityRate":2.68,"Population":40403959,"Region":"America"},{"Country":"Costa Rica","LifeExpectancy":77.7,"FertilityRate":2.48,"Population":3925450,"Region":"America"},{"Country":"Croatia","LifeExpectancy":74.7,"FertilityRate":1.47,"Population":4428069,"Region":"Europe & Central Asia"},{"Country":"Cuba","LifeExpectancy":75.9,"FertilityRate":1.62,"Population":11116787,"Region":"America"},{"Country":"Cyprus","LifeExpectancy":79.1,"FertilityRate":1.78,"Population":943287,"Region":"Europe & Central Asia"},{"Country":"Denmark","LifeExpectancy":76.9,"FertilityRate":1.74,"Population":5338283,"Region":"Europe & Central Asia"},{"Country":"Ecuador","LifeExpectancy":73.2,"FertilityRate":3.11,"Population":12628596,"Region":"America"},{"Country":"El Salvador","LifeExpectancy":72.9,"FertilityRate":3.07,"Population":5811836,"Region":"America"},{"Country":"Estonia","LifeExpectancy":70.1,"FertilityRate":1.31,"Population":1399145,"Region":"Europe & Central Asia"},{"Country":"Finland","LifeExpectancy":77.8,"FertilityRate":1.73,"Population":5176482,"Region":"Europe & Central Asia"},{"Country":"France","LifeExpectancy":79.1,"FertilityRate":1.8,"Population":59387183,"Region":"Europe & Central Asia"},{"Country":"French Guiana","LifeExpectancy":76.21,"FertilityRate":3.88,"Population":163162,"Region":"America"},{"Country":"Georgia","LifeExpectancy":72.3,"FertilityRate":1.64,"Population":4743591,"Region":"Europe & Central Asia"},{"Country":"Germany","LifeExpectancy":78.1,"FertilityRate":1.35,"Population":81895925,"Region":"Europe & Central Asia"},{"Country":"Greece","LifeExpectancy":78,"FertilityRate":1.27,"Population":10954032,"Region":"Europe & Central Asia"},{"Country":"Greenland","LifeExpectancy":70.525,"FertilityRate":2.42,"Population":56174,"Region":"Europe & Central Asia"},{"Country":"Grenada","LifeExpectancy":70.5,"FertilityRate":2.67,"Population":101620,"Region":"America"},{"Country":"Guadeloupe","LifeExpectancy":79.848,"FertilityRate":2.08,"Population":431157,"Region":"America"},{"Country":"Guatemala","LifeExpectancy":68.5,"FertilityRate":4.88,"Population":11688660,"Region":"America"},{"Country":"Guyana","LifeExpectancy":64.4,"FertilityRate":2.56,"Population":742218,"Region":"America"},{"Country":"Haiti","LifeExpectancy":58.6,"FertilityRate":4.43,"Population":8549202,"Region":"America"},{"Country":"Honduras","LifeExpectancy":68.8,"FertilityRate":4.12,"Population":6243080,"Region":"America"},{"Country":"Hungary","LifeExpectancy":71.8,"FertilityRate":1.33,"Population":10224113,"Region":"Europe & Central Asia"},{"Country":"Iceland","LifeExpectancy":79.9,"FertilityRate":2.02,"Population":281214,"Region":"Europe & Central Asia"},{"Country":"Ireland","LifeExpectancy":76.7,"FertilityRate":1.94,"Population":3841574,"Region":"Europe & Central Asia"},{"Country":"Italy","LifeExpectancy":79.6,"FertilityRate":1.21,"Population":57147081,"Region":"Europe & Central Asia"},{"Country":"Jamaica","LifeExpectancy":72.7,"FertilityRate":2.63,"Population":2600095,"Region":"America"},{"Country":"Kazakhstan","LifeExpectancy":63.6,"FertilityRate":1.94,"Population":14956769,"Region":"Europe & Central Asia"},{"Country":"Latvia","LifeExpectancy":70.1,"FertilityRate":1.17,"Population":2371481,"Region":"Europe & Central Asia"},{"Country":"Lithuania","LifeExpectancy":72,"FertilityRate":1.38,"Population":3486373,"Region":"Europe & Central Asia"},{"Country":"Luxembourg","LifeExpectancy":78.2,"FertilityRate":1.71,"Population":436107,"Region":"Europe & Central Asia"},{"Country":"Macedonia, FYR","LifeExpectancy":73.9,"FertilityRate":1.73,"Population":2012051,"Region":"Europe & Central Asia"},{"Country":"Malta","LifeExpectancy":79.7,"FertilityRate":1.67,"Population":387180,"Region":"Europe & Central Asia"},{"Country":"Martinique","LifeExpectancy":80.475,"FertilityRate":1.92,"Population":387018,"Region":"America"},{"Country":"Mexico","LifeExpectancy":75.1,"FertilityRate":2.71,"Population":102808590,"Region":"America"},{"Country":"Moldova","LifeExpectancy":69.3,"FertilityRate":1.61,"Population":4201088,"Region":"Europe & Central Asia"},{"Country":"Montenegro","LifeExpectancy":72,"FertilityRate":1.82,"Population":613557,"Region":"Europe & Central Asia"},{"Country":"Netherlands","LifeExpectancy":78.1,"FertilityRate":1.65,"Population":15894016,"Region":"Europe & Central Asia"},{"Country":"Netherlands Antilles","LifeExpectancy":76.363,"FertilityRate":2.11,"Population":180106,"Region":"America"},{"Country":"Nicaragua","LifeExpectancy":73.9,"FertilityRate":3.38,"Population":5026792,"Region":"America"},{"Country":"Norway","LifeExpectancy":78.7,"FertilityRate":1.85,"Population":4491572,"Region":"Europe & Central Asia"},{"Country":"Panama","LifeExpectancy":76.9,"FertilityRate":2.84,"Population":3028751,"Region":"America"},{"Country":"Paraguay","LifeExpectancy":74.1,"FertilityRate":3.76,"Population":5302703,"Region":"America"},{"Country":"Peru","LifeExpectancy":74.3,"FertilityRate":2.99,"Population":25914875,"Region":"America"},{"Country":"Poland","LifeExpectancy":73.8,"FertilityRate":1.39,"Population":38486305,"Region":"Europe & Central Asia"},{"Country":"Portugal","LifeExpectancy":76.7,"FertilityRate":1.47,"Population":10278542,"Region":"Europe & Central Asia"},{"Country":"Puerto Rico","LifeExpectancy":78.148,"FertilityRate":1.93,"Population":3796981,"Region":"America"},{"Country":"Romania","LifeExpectancy":70.8,"FertilityRate":1.28,"Population":22128139,"Region":"Europe & Central Asia"},{"Country":"Russia","LifeExpectancy":65.4,"FertilityRate":1.16,"Population":146400951,"Region":"Europe & Central Asia"},{"Country":"Serbia","LifeExpectancy":74.7,"FertilityRate":1.68,"Population":9463306,"Region":"Europe & Central Asia"},{"Country":"Slovak Republic","LifeExpectancy":73.3,"FertilityRate":1.32,"Population":5386065,"Region":"Europe & Central Asia"},{"Country":"Slovenia","LifeExpectancy":75.8,"FertilityRate":1.22,"Population":1988652,"Region":"Europe & Central Asia"},{"Country":"Spain","LifeExpectancy":79.3,"FertilityRate":1.21,"Population":40749800,"Region":"Europe & Central Asia"},{"Country":"Suriname","LifeExpectancy":68.8,"FertilityRate":2.76,"Population":480751,"Region":"America"},{"Country":"Sweden","LifeExpectancy":79.7,"FertilityRate":1.51,"Population":8872284,"Region":"Europe & Central Asia"},{"Country":"Switzerland","LifeExpectancy":80,"FertilityRate":1.45,"Population":7165581,"Region":"Europe & Central Asia"},{"Country":"Tajikistan","LifeExpectancy":66.3,"FertilityRate":4.08,"Population":6186152,"Region":"Europe & Central Asia"},{"Country":"Trinidad and Tobago","LifeExpectancy":69.4,"FertilityRate":1.77,"Population":1267980,"Region":"America"},{"Country":"Turkey","LifeExpectancy":71.5,"FertilityRate":2.51,"Population":63240157,"Region":"Europe & Central Asia"},{"Country":"Turkmenistan","LifeExpectancy":63.1,"FertilityRate":2.91,"Population":4501419,"Region":"Europe & Central Asia"},{"Country":"Ukraine","LifeExpectancy":67.5,"FertilityRate":1.16,"Population":48746269,"Region":"Europe & Central Asia"},{"Country":"United Kingdom","LifeExpectancy":77.8,"FertilityRate":1.69,"Population":58867004,"Region":"Europe & Central Asia"},{"Country":"United States","LifeExpectancy":77.1,"FertilityRate":2.01,"Population":282895741,"Region":"America"},{"Country":"Uruguay","LifeExpectancy":74.6,"FertilityRate":2.27,"Population":3321242,"Region":"America"},{"Country":"Uzbekistan","LifeExpectancy":67.4,"FertilityRate":2.86,"Population":24518222,"Region":"Europe & Central Asia"},{"Country":"Venezuela","LifeExpectancy":74.3,"FertilityRate":2.87,"Population":24481477,"Region":"America"},{"Country":"Virgin Islands (U.S.)","LifeExpectancy":79.247,"FertilityRate":2.13,"Population":108511,"Region":"America"}];
var gapminder_africa = [{"Country":"Angola","LifeExpectancy":52.6,"FertilityRate":6.88,"Population":15058638,"Region":"Sub-Saharan Africa"},{"Country":"Benin","LifeExpectancy":59.2,"FertilityRate":6.05,"Population":6949366,"Region":"Sub-Saharan Africa"},{"Country":"Botswana","LifeExpectancy":51.6,"FertilityRate":3.52,"Population":1736579,"Region":"Sub-Saharan Africa"},{"Country":"Burkina Faso","LifeExpectancy":53.3,"FertilityRate":6.65,"Population":11607944,"Region":"Sub-Saharan Africa"},{"Country":"Burundi","LifeExpectancy":47.5,"FertilityRate":7.11,"Population":6767073,"Region":"Sub-Saharan Africa"},{"Country":"Cameroon","LifeExpectancy":55,"FertilityRate":5.68,"Population":15927713,"Region":"Sub-Saharan Africa"},{"Country":"Cape Verde","LifeExpectancy":70.1,"FertilityRate":3.88,"Population":438737,"Region":"Sub-Saharan Africa"},{"Country":"Chad","LifeExpectancy":52.4,"FertilityRate":7.38,"Population":8343321,"Region":"Sub-Saharan Africa"},{"Country":"Comoros","LifeExpectancy":60.2,"FertilityRate":5.31,"Population":547696,"Region":"Sub-Saharan Africa"},{"Country":"Congo, Dem. Rep.","LifeExpectancy":52.5,"FertilityRate":7.14,"Population":48048664,"Region":"Sub-Saharan Africa"},{"Country":"Congo, Rep.","LifeExpectancy":52.6,"FertilityRate":5.14,"Population":3109269,"Region":"Sub-Saharan Africa"},{"Country":"Cote d'Ivoire","LifeExpectancy":52.8,"FertilityRate":5.46,"Population":16517948,"Region":"Sub-Saharan Africa"},{"Country":"Equatorial Guinea","LifeExpectancy":52.4,"FertilityRate":5.81,"Population":530896,"Region":"Sub-Saharan Africa"},{"Country":"Eritrea","LifeExpectancy":49.3,"FertilityRate":6.02,"Population":3535156,"Region":"Sub-Saharan Africa"},{"Country":"Ethiopia","LifeExpectancy":52.5,"FertilityRate":6.66,"Population":66443603,"Region":"Sub-Saharan Africa"},{"Country":"Gabon","LifeExpectancy":58,"FertilityRate":4.66,"Population":1231548,"Region":"Sub-Saharan Africa"},{"Country":"Gambia","LifeExpectancy":60,"FertilityRate":5.94,"Population":1228863,"Region":"Sub-Saharan Africa"},{"Country":"Ghana","LifeExpectancy":60.2,"FertilityRate":4.73,"Population":18824994,"Region":"Sub-Saharan Africa"},{"Country":"Guinea","LifeExpectancy":55.6,"FertilityRate":6.01,"Population":8799165,"Region":"Sub-Saharan Africa"},{"Country":"Guinea-Bissau","LifeExpectancy":51.7,"FertilityRate":5.93,"Population":1315455,"Region":"Sub-Saharan Africa"},{"Country":"Kenya","LifeExpectancy":57.4,"FertilityRate":5.03,"Population":31065820,"Region":"Sub-Saharan Africa"},{"Country":"Lesotho","LifeExpectancy":49.8,"FertilityRate":4.2,"Population":1856225,"Region":"Sub-Saharan Africa"},{"Country":"Liberia","LifeExpectancy":55.9,"FertilityRate":5.95,"Population":2891968,"Region":"Sub-Saharan Africa"},{"Country":"Madagascar","LifeExpectancy":60.5,"FertilityRate":5.65,"Population":15744811,"Region":"Sub-Saharan Africa"},{"Country":"Malawi","LifeExpectancy":46.3,"FertilityRate":6.32,"Population":11193230,"Region":"Sub-Saharan Africa"},{"Country":"Mali","LifeExpectancy":51.1,"FertilityRate":6.85,"Population":11046926,"Region":"Sub-Saharan Africa"},{"Country":"Mauritania","LifeExpectancy":61.8,"FertilityRate":5.44,"Population":2711421,"Region":"Sub-Saharan Africa"},{"Country":"Mauritius","LifeExpectancy":71,"FertilityRate":2.02,"Population":1185143,"Region":"Sub-Saharan Africa"},{"Country":"Mayotte","LifeExpectancy":78.291,"FertilityRate":4.64,"Population":150329,"Region":"Sub-Saharan Africa"},{"Country":"Mozambique","LifeExpectancy":53.6,"FertilityRate":5.81,"Population":18264536,"Region":"Sub-Saharan Africa"},{"Country":"Namibia","LifeExpectancy":55,"FertilityRate":4.13,"Population":1897953,"Region":"Sub-Saharan Africa"},{"Country":"Niger","LifeExpectancy":53,"FertilityRate":7.74,"Population":11224523,"Region":"Sub-Saharan Africa"},{"Country":"Nigeria","LifeExpectancy":55.8,"FertilityRate":6.13,"Population":122876723,"Region":"Sub-Saharan Africa"},{"Country":"Reunion","LifeExpectancy":78.615,"FertilityRate":2.36,"Population":736711,"Region":"Sub-Saharan Africa"},{"Country":"Rwanda","LifeExpectancy":50,"FertilityRate":6,"Population":8021875,"Region":"Sub-Saharan Africa"},{"Country":"Sao Tome and Principe","LifeExpectancy":65.3,"FertilityRate":4.73,"Population":137164,"Region":"Sub-Saharan Africa"},{"Country":"Senegal","LifeExpectancy":60,"FertilityRate":5.65,"Population":9860578,"Region":"Sub-Saharan Africa"},{"Country":"Seychelles","LifeExpectancy":70.9,"FertilityRate":2.16,"Population":81154,"Region":"Sub-Saharan Africa"},{"Country":"Sierra Leone","LifeExpectancy":52.2,"FertilityRate":5.99,"Population":4060709,"Region":"Sub-Saharan Africa"},{"Country":"Somalia","LifeExpectancy":54.3,"FertilityRate":7.65,"Population":7385416,"Region":"Sub-Saharan Africa"},{"Country":"South Africa","LifeExpectancy":57.1,"FertilityRate":2.9,"Population":44896856,"Region":"Sub-Saharan Africa"},{"Country":"Sudan","LifeExpectancy":64.4,"FertilityRate":5.52,"Population":28079664,"Region":"Sub-Saharan Africa"},{"Country":"Swaziland","LifeExpectancy":48.7,"FertilityRate":4.31,"Population":1063715,"Region":"Sub-Saharan Africa"},{"Country":"Tanzania","LifeExpectancy":54.8,"FertilityRate":5.71,"Population":33991590,"Region":"Sub-Saharan Africa"},{"Country":"Togo","LifeExpectancy":59,"FertilityRate":5.36,"Population":4874735,"Region":"Sub-Saharan Africa"},{"Country":"Uganda","LifeExpectancy":50,"FertilityRate":6.9,"Population":23757636,"Region":"Sub-Saharan Africa"},{"Country":"Zambia","LifeExpectancy":45.7,"FertilityRate":6.1,"Population":10585220,"Region":"Sub-Saharan Africa"},{"Country":"Zimbabwe","LifeExpectancy":50.8,"FertilityRate":4.11,"Population":12499981,"Region":"Sub-Saharan Africa"}];
// size and state variables
var margin = {top: 10, right: 20, bottom: 20, left: 10},
padding = {top: 10, right: 20, bottom: 30, left: 40},
width = window.innerWidth - margin.left - margin.right,
height = window.innerHeight - margin.top - margin.bottom,
inner_width = width - padding.left - padding.right,
inner_height = height - padding.top - padding.bottom,
rescale_to_fit = false;
//add the svg container that will contain the scatterplot
var plot_svg = d3.select('body')
.append('svg')
.attr('id','plot_svg')
.style('width', width + 'px')
.style('height', height + 'px');
//add the x scale for LifeExpectancy
var xScale = d3.scaleLinear()
.range([0,inner_width]);
//add the y scale for FertilityRate
var yScale = d3.scaleLinear()
.range([inner_height,0]);
//add the r scale for Population
var rScale = d3.scaleLinear()
.range([2,10]);
//add the color scale for region
var colorScale = d3.scaleOrdinal()
.range(["#0066FF", "#CC0066", "#33CC33"]);
//add the x and y axes
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);
//add scatterplot group element
var scatterplot = plot_svg.append('g')
.attr('id','scatterplot')
.attr('transform','translate(' + padding.left + ',' + padding.top + ')');
//add the x axis container
var x_axis_g = plot_svg.append('g')
.attr('id','x_axis_g')
.attr('transform','translate(' + padding.left + ',' + inner_height + ')');
//add the x axis container
var y_axis_g = plot_svg.append('g')
.attr('id','y_axis_g')
.attr('transform','translate(' + padding.left + ',0)');
//add x axis label
x_axis_g.append("text")
.style("text-anchor", "middle")
.attr("x", inner_width / 2)
.attr("y", 30)
.attr("class", "axis_label")
.text("Fertility Rate");
//add y axis label
y_axis_g.append("text")
.style("text-anchor", "middle")
.attr("transform", "translate(-" + 30 + "," + (inner_height / 2) + ") rotate(-90)")
.attr("class", "axis_label")
.text("Life Expectancy");
function render() {
if (!rescale_to_fit) {
xScale.domain([0, d3.max(gapminder, function(d) { return d.FertilityRate; })]);
yScale.domain([0, d3.max(gapminder, function(d) { return d.LifeExpectancy; })]);
}
else {
xScale.domain(d3.extent(gapminder, function(d) { return d.FertilityRate; }));
yScale.domain(d3.extent(gapminder, function(d) { return d.LifeExpectancy; }));
}
rScale.domain(d3.extent(gapminder, function(d) { return Math.sqrt(d.Population); }));
x_axis_g.call(xAxis);
y_axis_g.call(yAxis);
var data_point = scatterplot.selectAll('.data_point')
.data(gapminder, function(d) {
return d.Country;
});
var data_point_enter = data_point.enter()
.append('g')
.attr('class','data_point')
.attr('id',function(d){
return 'g_' + d.Country;
});
data_point_enter.append('circle')
.attr('cx', function(d) {
return xScale (d.FertilityRate);
})
.attr('cy', function(d) {
return yScale (d.LifeExpectancy);
})
.attr('r', function(d) {
return rScale (Math.sqrt (d.Population));
})
.style('fill', function(d) {
return colorScale (d.Region);
});
var data_point_update = data_point.transition()
.duration(1000);
data_point_update.selectAll('circle')
.attr('cx', function(d) {
return xScale (d.FertilityRate);
})
.attr('cy', function(d) {
return yScale (d.LifeExpectancy);
});
data_point_enter.append('text')
.attr('x', function(d) {
return xScale (d.FertilityRate);
})
.attr('y', function(d) {
return yScale (d.LifeExpectancy);
})
.attr('dy', function(d) {
return -1 * rScale (Math.sqrt (d.Population));
})
.attr('dx', function(d) {
return -1 * rScale (Math.sqrt (d.Population));
})
.text(function(d){
return (d.Country).substr(0,3);
});
data_point_update.selectAll('text')
.attr('x', function(d) {
return xScale (d.FertilityRate);
})
.attr('y', function(d) {
return yScale (d.LifeExpectancy);
});
data_point.exit()
.transition()
.duration(1000)
.style("opacity", 0)
.remove();
};
render();
//update the chart if the window size changes
window.onresize = function(e) {
width = window.innerWidth - margin.left - margin.right;
height = window.innerHeight - margin.top - margin.bottom;
inner_width = width - padding.left - padding.right;
inner_height = height - padding.top - padding.bottom;
plot_svg.style('width', width + 'px')
.style('height', height + 'px');
xScale.range([0,inner_width]);
yScale.range([inner_height,0]);
x_axis_g.attr('transform','translate(' + padding.left + ',' + inner_height + ')');
y_axis_g.attr('transform','translate(' + padding.left + ',0)');
x_axis_g.select('.axis_label')
.attr("x", inner_width / 2)
.attr("y", 30);
y_axis_g.select('.axis_label')
.attr("transform", "translate(-" + 30 + "," + (inner_height / 2) + ") rotate(-90)");
render();
}
//if the user clicks on the svg element, rescale the scatterplot
plot_svg.on('click', function() {
rescale();
console.log("rescale_to_fit: "+ rescale_to_fit);
});
//rescale the scatterplot to fit the data
function rescale () {
if (rescale_to_fit) {
rescale_to_fit = false;
}
else {
rescale_to_fit = true;
}
render();
};
//if the user presses 'u', update the data
d3.select('body').on('keydown', function() {
if (d3.event.keyCode == 85){
updateData();
console.log("updating data!");
}
});
//update the data, swap out europe, swap in africa
function updateData () {
var temp = [];
gapminder.forEach(function (d,i) {
if (d.Region == "America") {
temp.push(d);
}
});
gapminder = temp.concat(gapminder_africa);
render();
};
Raw
style.css
body {
font-family: sans-serif;
font-size: 0.6em;
}
#plot_svg {
margin-left: 10px;
margin-top: 10px;
}
.axis_label {
fill: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment