updates only once
HTML
<script src="https://d3js.org/d3.v3.js"></script>
<form>
<select id="selector">
<option value="Europe">Europe</option>
<option value="Africa">Africa</option>
<option value="Americas">Americas</option>
<option value="Asia">Asia</option>
<option value="Oceania">Oceania</option>
</select>
</form>
JavaScript
d3.json("https://dl.dropboxusercontent.com/s/nfi0nu2rsgojlwl/countries.json", function(data) {
var w = 700;
var h = 500;
var offset = 100;
var padding = 20;
var colors = d3.scale.category10();
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.append("g") // add a group element to the svg
.attr("class", "axis") //Assign class "axis" to group
.attr("transform", "translate(0," + (h - padding) + ")") // shift the axis to bottom
var dataGenerator = function(continent){
var dataset = [];
var dataset2 = [];
var asd = [];
for (var i=0; i<data.length; i++){ // for every country in data
// if it's continent value is Europe
if (data[i]["continent"]==continent){
years = data[i]["years"];
dss = [];
for (var i2= 0; i2<years.length; i2++){
if (years[i2]["year"]>1999){
var ds = {x: i2, y: years[i2]["population"]};
dss.push(ds);
}
}
dataset.push(dss);
dataset = dataset.slice(0, 10);
dataset2.push(data[i]["name"]);
dataset2 = dataset2.slice(0, 10);
}
}
res = [dataset,dataset2];
return res;
}
var texts = function(ds,ds2){
var stack = d3.layout.stack();
stack_data = stack(ds);
var xScale = d3.scale.ordinal()
.domain(d3.range(ds[0].length))
.rangeRoundBands([0, w-offset], 0.50);
var yScale =...