| 65 | | Urban Pop. [million] |
66 | Urban Land [sq. km] |
67 | Urban Pop. Density [people/sq. km] |
68 |
|---|---|---|---|
| 2000 | 71 |0 | 72 |0 | 73 |0 | 74 |
| 2010 (rank) | 77 |0 | 78 |0 | 79 |0 | 80 |
| Growth % | 83 |0% | 84 |0% | 85 |0% | 86 |
These plots show the rapid growth in land and population within the cities. Growth may lead to numerous economic opportunities. However, it also forces urban policy makers and planners to rethink the design of their cities. The arrangement of future infrastructure can already be a crucial decision. Each city has its own challenges and opportunities and each county its own way of growing
' + 111 | 'Click on the buttons below to see the differences of the urban population, urban land or urban population density per city or hover over the plots to get more detailed information
'); 112 | 113 | }) 114 | .transition().duration(1000) 115 | .style("opacity",1); 116 | 117 | //Show bar chart again 118 | setTimeout(initiateBarChart, 600); 119 | 120 | //Call slopegraph 121 | setTimeout(dotHistogram, 1100); 122 | 123 | } 124 | 125 | function dotHistogram() { 126 | 127 | modus = "Dot"; 128 | 129 | ////////////////////////////////////////////////////// 130 | ////////////////////// Initialize //////////////////// 131 | ////////////////////////////////////////////////////// 132 | 133 | //Create domains of the scale 134 | dotScaleY 135 | .range([dotLocation,(dotLocation-500)]) 136 | .domain([1,100]); 137 | 138 | ////////////////////////////////////////////////////// 139 | ////////////////////// Build axes //////////////////// 140 | ////////////////////////////////////////////////////// 141 | 142 | //Remove any previous axis & legend 143 | dotWrapper.selectAll("g").remove(); 144 | dotWrapper.selectAll("text").remove(); 145 | 146 | //Set the format of the y axis 147 | xDotAxis.tickFormat(numFormatPercent); 148 | 149 | //Put in the right location 150 | dotWrapper.append("g") 151 | .attr("class", "x axis") 152 | .attr("transform", "translate(" + 0 + "," + (dotLocation+10) + ")") 153 | .style("opacity", 0); 154 | 155 | //Set up X axis label 156 | dotWrapper.append("text") 157 | .attr("class", "x label titleTop") 158 | .attr("text-anchor", "middle") 159 | .attr("x", (75 + (575-75)/2)) 160 | .attr("y", dotLocation + 60) 161 | .style("font-size", "18px") 162 | .style("opacity", 0); 163 | 164 | ////////////////// y axis //////////////////// 165 | var yDotAxis = d3.svg.axis() 166 | .orient("left") 167 | .ticks(8) //Set rough # of ticks 168 | .scale(dotScaleY); 169 | 170 | //Put in the right location 171 | dotWrapper.append("g") 172 | .attr("class", "y axis") 173 | .attr("transform", "translate(" + 65 + "," + 0 + ")") 174 | .style("opacity", 0) 175 | .transition().duration(1000).delay(2000) 176 | .style("opacity", 1) 177 | .call(yDotAxis); 178 | dotWrapper.selectAll(".y.axis text") 179 | .style("font-size", "10px"); 180 | 181 | //Set up Y axis label 182 | dotWrapper.append("text") 183 | .attr("class", "y label titleTop") 184 | .attr("text-anchor", "middle") 185 | //.attr("transform", "rotate(-90)") 186 | //.attr("x", -180) 187 | //.attr("y", 85) 188 | .attr("x", 65) 189 | .attr("y", 35) 190 | .style("font-size", "12px") 191 | .style("opacity", 0) 192 | .text("Number of cities") 193 | .transition().duration(1000).delay(2000) 194 | .style("opacity", 1); 195 | 196 | ////////////////////////////////////////////////////// 197 | //////////////////// Set color /////////////////////// 198 | ////////////////////////////////////////////////////// 199 | 200 | //Create color scale 201 | //var hexColors = ['#631b17','#7f2d28','#9d403a','#bb534e','#da6761']; 202 | //var hexColors = ['rgb(252,187,161)','rgb(252,146,114)','rgb(251,106,74)','rgb(222,45,38)','rgb(165,15,21)']; 203 | //var popData = []; 204 | //data.forEach(function(d, i) { 205 | // popData[i] = d.pop_2010; 206 | //}) 207 | //var color = d3.scale.linear() 208 | // .domain([d3.quantile(popData, 0),d3.quantile(popData, 0.25),d3.quantile(popData, 0.5),d3.quantile(popData, 0.75),d3.quantile(popData, 1)]) 209 | // .range(hexColors.reverse()); 210 | //var hexColors = ["#fcbba1","#67000d"]; 211 | //var color = d3.scale.log() 212 | // .domain(d3.extent(data, function(d) {return d.pop_2010;})) 213 | // .range(hexColors); 214 | //var color = d3.scale.quantile() 215 | // .domain(popData) 216 | // .range(hexColors.reverse()); 217 | 218 | //var hexColors = ["#63A69F","#F2E1AC","#F2836B","#cb181d"]; 219 | var hexColors = ["#fcbba1","#fb6a4a","#cb181d","#67000d"]; 220 | color.range(hexColors); 221 | 222 | ////////////////////////////////////////////////////// 223 | ///////////////// Initiate legend //////////////////// 224 | ////////////////////////////////////////////////////// 225 | 226 | //Adding legend 227 | legendWrapper = dotWrapper.append("g") 228 | .attr("transform","translate(460, 200)") 229 | .style("opacity", 0); 230 | 231 | legend = legendWrapper 232 | .selectAll("g.legend") 233 | .data(color.range()) 234 | .enter().append("g") 235 | .attr("class", "legend"); 236 | 237 | //Create title of Legend 238 | legendWrapper.append("g") 239 | .attr("class", "legendTitleWrapper") 240 | .append('text') 241 | .attr('x', 0) 242 | .attr('y', 15) 243 | .style("text-anchor", "start") 244 | .attr('class', 'legendTitle titleTop') 245 | .style("font-size", "14px"); 246 | 247 | var ls_w = 15, 248 | ls_h = 15; 249 | 250 | legend.append("rect") 251 | .attr("x", 0) 252 | .attr("y", function(d, i){ return 100 - (i*ls_h) - 2*ls_h;}) 253 | .attr("width", ls_w) 254 | .attr("height", ls_h) 255 | .style("fill", function(d, i) { return d; }) 256 | .style("opacity", 0.8); 257 | 258 | legendText = legend.append("text") 259 | .attr("x", 30) 260 | .attr("y", function(d, i){ return 100 - (i*ls_h) - ls_h - 4;}); 261 | 262 | legendWrapper 263 | .transition().duration(1000).delay(2000) 264 | .style("opacity", 1); 265 | 266 | ////////////////////////////////////////////////////// 267 | ////////////////// Call Dot plot ///////////////////// 268 | ////////////////////////////////////////////////////// 269 | 270 | //Create the dot histogram based on the dimension selected 271 | if (rVar == "pop") totalPopulationDotHisto(); 272 | if (rVar == "land") totalLandDotHisto(); 273 | if (rVar == "density") totalDensityDotHisto(); 274 | 275 | }//dotHistogram 276 | 277 | 278 | //Create the dot histogram based on the dimension selected 279 | function totalPopulationDotHisto() { 280 | stepSize = 0.05; 281 | color.domain([5e5, 1e6, 5e6]); 282 | legendTitle = "Urban population - 2010"; 283 | dotTitle = "Growth in urban population between 2000 and 2010"; 284 | //Set the y-axis scale 285 | dotScaleX.domain(d3.extent(data, function(d) {return d.pop_growth;})); 286 | createDotHisto(); 287 | }//totalPopulationDotHisto 288 | 289 | function totalLandDotHisto() { 290 | stepSize = 0.03; 291 | color.domain([200, 500, 1000]); 292 | legendTitle = "Urban land - 2010"; 293 | dotTitle = "Growth in urban land between 2000 and 2010"; 294 | //Set the y-axis scale 295 | dotScaleX 296 | .domain([d3.min(data, function(d) {return d.land_growth;}), maxNum]) 297 | .clamp(true); 298 | createDotHisto(); 299 | }//totalUrbanLandSlopeGraph 300 | 301 | function totalDensityDotHisto() { 302 | stepSize = 0.02; 303 | color.domain([5000, 10000, 15000]); 304 | legendTitle = "Population density - 2010"; 305 | dotTitle = "Growth in avg. urban population density between 2000 and 2010"; 306 | //Set the y-axis scale 307 | dotScaleX.domain(d3.extent(data, function(d) {return d.density_growth;})); 308 | createDotHisto(); 309 | }//totalDensityDotHisto 310 | 311 | 312 | function createDotHisto() { 313 | 314 | //Create a delay when it is the first instance of the dot histo 315 | var extraDelay = 0; 316 | 317 | stepper = 1/stepSize; 318 | 319 | //Run this only when it is the first time the dot histogram is called 320 | if (firstDot == true) { 321 | 322 | extraDelay = 2000; 323 | 324 | ///////////////////////////////////////////////////////////////////// 325 | ///// Calculate cx positions for each of the 3 dimensions /////////// 326 | ///////////////////////////////////////////////////////////////////// 327 | 328 | ranking_pop = rankLocation(0.05, "pop", 329 | minDomain = d3.min(data, function(d) {return d.pop_growth;}), 330 | maxDomain = d3.max(data, function(d) {return d.pop_growth;})) 331 | 332 | ranking_land = rankLocation(0.03, "land", 333 | minDomain = d3.min(data, function(d) {return d.land_growth;}), 334 | maxDomain = maxNum) 335 | 336 | ranking_density = rankLocation(0.02, "density", 337 | minDomain = d3.min(data, function(d) {return d.density_growth;}), 338 | maxDomain = d3.max(data, function(d) {return d.density_growth;})) 339 | 340 | ////////////////////////////////////////////////////// 341 | ////////////////// Move to one line ////////////////// 342 | ////////////////////////////////////////////////////// 343 | 344 | //Move 2000 cities towards 2010 version 345 | //Then make them disappear 346 | cities2000.selectAll(".city_2000") 347 | .transition().duration(2000) 348 | .attr("cy", dotLocation) 349 | .attr("cx", function(d,i) {return dotScaleX(Math.round(roundHalf(eval("d." + rVar + "_growth"),stepper)*100)/100);}) 350 | .style("fill-opacity", 0.8) 351 | .attr("r", 0); 352 | //Move 2010 cities towards 2000 version 353 | cities2010.selectAll(".city_2010") 354 | .transition().duration(2000) 355 | .attr("cy", dotLocation) 356 | .attr("cx", function(d,i) {return dotScaleX(Math.round(roundHalf(eval("d." + rVar + "_growth"),stepper)*100)/100);}) 357 | .style("fill-opacity", 0.8) 358 | .attr("r", 3); 359 | firstDot = false; 360 | }//if 361 | 362 | //Update the x axis 363 | xDotAxis.scale(dotScaleX); 364 | dotWrapper.selectAll(".x.axis") 365 | .transition().duration(1000).delay(extraDelay) 366 | .style("opacity", 1) 367 | .call(xDotAxis); 368 | dotWrapper.selectAll(".x.axis text") 369 | .style("font-size", "10px"); 370 | 371 | //Change X axis label 372 | dotWrapper.select(".x.label") 373 | .text(dotTitle) 374 | .transition().duration(1000).delay(extraDelay) 375 | .style("opacity", 1); 376 | 377 | //update legend 378 | var legend_labels = ["< " + numFormatSI(color.domain()[0]), 379 | numFormatSI(color.domain()[0]) + " - " + numFormatSI(color.domain()[1]), 380 | numFormatSI(color.domain()[1]) + " - " + numFormatSI(color.domain()[2]), 381 | "> " + numFormatSI(color.domain()[2])]; 382 | legendText 383 | .text(function(d, i){return legend_labels[i];}); 384 | 385 | d3.selectAll(".legendTitle") 386 | .text(legendTitle); 387 | 388 | ////////////////////////////////////////////////////// 389 | /////////////////// Build histogram ////////////////// 390 | ////////////////////////////////////////////////////// 391 | 392 | cities2010.selectAll(".city_2010") 393 | .transition().duration(2000).delay(function(d,i) {return (extraDelay + eval("d.rank_" + rVar)*0.5);}) //Grow from largest cities first 394 | .attr("r", 2) 395 | .style("fill-opacity", 0.9) 396 | .style("fill", function(d) { return color(eval("d." + rVar + "_2010")); }) 397 | .attr("cx", function(d,i) {return dotScaleX(Math.round(roundHalf(eval("d." + rVar + "_growth"), stepper)*100)/100);}) 398 | //.attr("cy", function(d,i) {return locateY(d);}) 399 | .attr("cy", function(d,i) {return eval("ranking_" + rVar + "[i].cy");}) 400 | .call(endall, function() { 401 | cities2010.selectAll(".city_2010") 402 | .on("mouseover", showOneDot) 403 | .on("mouseout", showAllDot); 404 | }); 405 | 406 | }//createDotHisto 407 | 408 | ////////////////////////////////////////////////////// 409 | /////////////////// Extra Functions ////////////////// 410 | ////////////////////////////////////////////////////// 411 | 412 | ////////////////////////////////////////////////////// 413 | /////////////// Dot plot hover options /////////////// 414 | ////////////////////////////////////////////////////// 415 | function showAllDot() { 416 | 417 | cities2010.selectAll(".city_2010") 418 | .transition() 419 | .style("fill-opacity", 1); 420 | 421 | d3.select("#callOut").style("visibility","hidden"); 422 | 423 | }//showAllDot 424 | 425 | //Show only the circles and line for the hovered over city 426 | function showOneDot(d) { 427 | 428 | //Compare everything with the hovered over city 429 | var chosen = d; 430 | 431 | hoverType = "city"; 432 | 433 | circleHover(chosen); 434 | 435 | cities2010.selectAll(".city_2010") 436 | .transition() 437 | .style("fill-opacity", function(d) { 438 | if (eval("d.rank_" + rVar) != eval("chosen.rank_" + rVar)) return 0.2; 439 | else return 1; 440 | }); 441 | }//showOneDot 442 | 443 | ////////////////////////////////////////////////////// 444 | ////////////////// Y axis locations ////////////////// 445 | ////////////////////////////////////////////////////// 446 | 447 | //Find the locations of the cx for each histogram 448 | function rankLocation(stepSizeVar, Var, minDomain, maxDomain) { 449 | 450 | var rankingArray = []; 451 | 452 | //Stepsize 453 | var stepping = 1/stepSizeVar; 454 | //Keeps track of the height of each year 455 | var perc = d3.range(Math.floor(Math.floor(minDomain*100)/100*stepping)/stepping, 456 | Math.ceil(Math.ceil(maxDomain*100)/100*stepping)/stepping+stepSizeVar, 457 | stepSizeVar).map(function(d,i) { 458 | return { 459 | perc: numFormatTwo(d), 460 | number: 1 461 | }; 462 | }); 463 | 464 | //Save required info in a separate array where the cx position will be filled in later 465 | data.forEach(function(d, i) { 466 | rankingArray.push({ 467 | order: i, 468 | rank: eval("d.rank_" + Var), 469 | growth: eval("d." + Var + "_growth"), 470 | cy: 0 471 | }); 472 | }); 473 | 474 | //Sort by the rank of pop/land/density 475 | rankingArray = rankingArray.sort(compareRank); 476 | //Now in the order of rank, run the locateX function so the smallest ranks (largest) are run first 477 | //and are therefore closer the the axis 478 | for (var i = 0; i < rankingArray.length; i++) { 479 | rankingArray[i].cy = locateY(rankingArray[i].growth, stepping, perc) 480 | }; 481 | //Put the array back in the original order 482 | rankingArray = rankingArray.sort(compareOrder); 483 | 484 | return rankingArray; 485 | }//rankLocation 486 | 487 | function locateY(d, step, perc) { 488 | 489 | //console.log(roundHalf(d, step)); 490 | var percLoc = getByValue(roundHalf(d, step), perc); 491 | 492 | var topping = perc[percLoc].number; 493 | perc[percLoc].number += 1; 494 | 495 | return dotScaleY(topping); 496 | }// function locateX 497 | 498 | //Round to stepSize 499 | function roundHalf(num, step) { 500 | num = numFormatTwo(Math.min(Math.floor(num*step)/step,maxNum)); 501 | return num; 502 | }//roundHalf 503 | 504 | //Get location where perc stays 505 | function getByValue(value, perc) { 506 | for (var i=0, iLen = perc.length; i < iLen; i++) { 507 | if (perc[i].perc == value) return i; 508 | }//for 509 | }//getByValue 510 | 511 | //Order by rank value 512 | function compareRank(a,b) { 513 | if (a.rank < b.rank) 514 | return -1; 515 | if (a.rank > b.rank) 516 | return 1; 517 | return 0; 518 | }//compareRank 519 | 520 | //Order by the order value 521 | function compareOrder(a,b, varname) { 522 | if (a.order < b.order) 523 | return -1; 524 | if (a.order > b.order) 525 | return 1; 526 | return 0; 527 | }//compareOrder 528 | 529 | /* 530 | //Locate the X location based on what has come before 531 | function locateXstraight(d) { 532 | 533 | //console.log(roundHalf(eval("d." + rVar + "_growth"))); 534 | var percLoc = getByValue(roundHalf(eval("d." + rVar + "_growth"))); 535 | 536 | var topping = perc[percLoc].number; 537 | perc[percLoc].number += 1; 538 | 539 | return dotScaleY(topping); 540 | }// function locateX 541 | */ 542 | -------------------------------------------------------------------------------- /js/finalText.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////// 2 | /////////////////////// Text at the introduction ////////////////////////// 3 | /////////////////////////////////////////////////////////////////////////// 4 | 5 | function finalText() { 6 | 7 | modus = "final"; 8 | 9 | //De-activate the continue button 10 | d3.select("#clickerFront").classed("activeButton",false); 11 | d3.select("#clickerFront").classed("inactiveButton",true); 12 | d3.select("#clickerFront").html("Finish"); 13 | 14 | setTimeout(function() {counter = 10;}, 1000); 15 | 16 | ////////////////////////////////////////////////////// 17 | ////////////////// Hide & Remove ///////////////////// 18 | ////////////////////////////////////////////////////// 19 | 20 | //Remove all elements of startBarChart (if present) 21 | startBarChart.selectAll("g").remove(); 22 | 23 | //Set the progress circles 24 | setCircleProgress(9); 25 | 26 | //Reset the progress bar 27 | resetProgressBar(); 28 | 29 | d3.select("#section") 30 | .style("opacity",0) 31 | .style("visibility","hidden"); 32 | 33 | //Remove the bar chart to the right - if present 34 | barChart.selectAll("g") 35 | .transition().duration(1000) 36 | .style("opacity",0) 37 | .call(endall, function() { 38 | barChart.selectAll("g") 39 | .remove(); 40 | }); 41 | barWrappingOther.selectAll("g") 42 | .transition().duration(1000) 43 | .style("opacity",0) 44 | .call(endall, function() { 45 | barWrappingOther.selectAll("g") 46 | .remove(); 47 | }); 48 | 49 | //Hide call-out 50 | d3.select("#callOut").style("visibility","hidden"); 51 | d3.select("#callOutCountryWrapper").style("visibility","hidden"); 52 | 53 | //Hide the buttons - if present 54 | d3.select(".btn-group") 55 | .style("visibility", "hidden"); 56 | 57 | ////////////////////////////////////////////////////// 58 | ///////////////////////// Map //////////////////////// 59 | ////////////////////////////////////////////////////// 60 | 61 | //Increase opacity of the map 62 | map.selectAll(".geo-path") 63 | .attr("visibility", "visible") 64 | .transition().duration(2000) 65 | .style("stroke-opacity", 1) 66 | .style("fill-opacity", 0.5); 67 | 68 | //Start explanation about the World Bank 69 | d3.select("#explanation") 70 | .style("visibility","visible") 71 | .style("top", 175 + "px") 72 | .style("left", 50 + "px") 73 | .style("width", 550 + "px") 74 | .html("Urbanization is a key process in ending extreme poverty and boosting shared prosperity. In the coming decades, urban areas will be where millions of East Asians will have the chance to leave extreme poverty behind and thrive
" + 75 | "However, urban expansion, if not well planned, can also exacerbate inequality in access to services, employment, and housing. " + 76 | "It is for this reason we face a rising need to invest in research to define the success factors for well planned urbanisation
" + 77 | "The choices that are made now may influence the lives of millions in the future: help build the 'new urban society'!
") 78 | .transition().duration(2000).delay(1000) 79 | .style("opacity",1); 80 | 81 | //Show the intro explanation 82 | d3.select("#explanationIntro") 83 | .style("opacity",0) 84 | .style("visibility","visible") 85 | .style("top", 525 + "px") 86 | .style("left", 50 + "px") 87 | .style("width", 550 + "px") 88 | .html("Press the circles that correspond toLooking at the urban population growth we find that many cities have seen an enormous growth in their population between 2000 and 2010
"); 103 | }) 104 | .transition().duration(1000) 105 | .style("opacity",1); 106 | 107 | 108 | /* 109 | var cityType = d3.scale.ordinal() 110 | .range(["#63A69F","#F2836B","#cb181d"]) 111 | .domain(["Contained","Spillover","Fragmented"]); 112 | cities2010.selectAll(".city_2010") 113 | .style("fill", function(d) {return cityType(d.boundary);}) 114 | .style("fill-opacity", 1); 115 | 116 | var countryType = d3.scale.ordinal() 117 | .range(["#fcbba1","#fb6a4a","#cb181d","#67000d"]) 118 | .domain(["low-income","lower-middle-income","upper-middle-income","high-income"]); 119 | cities2010.selectAll(".city_2010") 120 | .style("fill", function(d) {return countryType(d.type_country);}) 121 | .style("fill-opacity", 1); 122 | */ 123 | 124 | ////////////////////////////////////////////////////// 125 | /////////////////// Density decline ////////////////// 126 | ////////////////////////////////////////////////////// 127 | 128 | explanationText(varText = "The urban population density has seen both large increase and decline
" + 129 | "However, 94% of the cities that saw a density decline are in China. This could be caused by the phenomenon of 'Ghost cities' and rising incomes
", 130 | delay = delay, delayStep = 1.75); 131 | setTimeout(function () {rVar = "density"; totalDensityDotHisto();}, delay*1.75); 132 | //Deactivate the mouse over events 133 | setTimeout(function() {setMouseDot("remove");}, (delay*2)); 134 | setTimeout(function () { 135 | cities2010.selectAll(".city_2010") 136 | .on("mouseover", null) 137 | .on("mouseout", null) 138 | .transition().duration(1000) 139 | .style("fill-opacity", function(d) { 140 | if (d.country == "China" & d.density_growth < 0) return 1; 141 | else return 0.2; 142 | }); 143 | }, delay*2.5) 144 | d3.select("#popButton").classed("active",false); 145 | d3.select("#landButton").classed("active",false); 146 | d3.select("#densButton").classed("active",true); 147 | 148 | ////////////////////////////////////////////////////// 149 | ////////////////// Density low income //////////////// 150 | ////////////////////////////////////////////////////// 151 | 152 | explanationText(varText = "Practically the entire area of highest density growth comes from low & low-middle income countries (World Bank 2014) with populations that usually migrate freely", 153 | delay = delay, delayStep = 4); 154 | setTimeout(function () { 155 | cities2010.selectAll(".city_2010") 156 | .transition().duration(1000) 157 | .style("fill-opacity", function(d) { 158 | if (d.type_country == "low-income" | d.type_country == "lower-middle-income") return 1; 159 | else return 0.2; 160 | }); 161 | }, delay*4) 162 | 163 | ////////////////////////////////////////////////////// 164 | ////////////////// Density challenge ///////////////// 165 | ////////////////////////////////////////////////////// 166 | 167 | explanationText(varText = "Creating the right kind of density and distribution of housing, work locations, transport and parks is a major challenge for these cities
", 168 | delay = delay, delayStep = 5.5); 169 | 170 | ////////////////////////////////////////////////////// 171 | ///////////////////// Finish it ////////////////////// 172 | ////////////////////////////////////////////////////// 173 | 174 | //Make text disappear 175 | d3.select("#explanation") 176 | .transition().duration(1000).delay(delay*7) 177 | .style("opacity",0) 178 | .call(endall, function() { 179 | d3.select("#explanation") 180 | .style("visibility","hidden"); 181 | }); 182 | 183 | setTimeout(function() { 184 | //Set cities back to full opacity 185 | //Resert mouseover event 186 | cities2010.selectAll(".city_2010") 187 | .on("mouseover", showOneDot) 188 | .on("mouseout", showAllDot) 189 | .transition().duration(2000) 190 | .style("fill-opacity", 1); 191 | 192 | //Show the text & button on the right 193 | d3.select("#section") 194 | .transition() 195 | .style("opacity",0) 196 | .call(endall, function() { 197 | d3.select("#section") 198 | .style("visibility","visible"); 199 | 200 | //Change title in top right corner 201 | d3.select("#sectionTitle") 202 | .html("Rapid growth within one decade"); 203 | //Change text in top right corner 204 | d3.select("#sectionText") 205 | .html('These plots show the rapid growth in land and population within the cities. Growth may lead to numerous economic opportunities. However, it also forces urban policy makers and planners to rethink the design of their cities. The arrangement of future infrastructure can already be a crucial decision. Each city has its own challenges and opportunities and each county its own way of growing
' + 206 | 'Click on the buttons below to see the differences of the urban population, urban land or urban population density per city or hover over the plots to get more detailed information
'); 207 | 208 | }) 209 | .transition().duration(1000) 210 | .style("opacity",1); 211 | 212 | counter = 7; 213 | //Set the progress circles 214 | setCircleProgress(6); 215 | 216 | //Show bar chart again 217 | initiateBarChart(); 218 | }, delay*7); 219 | 220 | 221 | }//function introDotHistogram 222 | 223 | 224 | //Activate or deactivate the mouse events 225 | function setMouseDot(setting) { 226 | 227 | var overSlope = (setting == "remove" ? null : showOneDot); 228 | var outSlope = (setting == "remove" ? null : showAllDot); 229 | 230 | cities2010.selectAll(".city_2010") 231 | .on("mouseover", overSlope) 232 | .on("mouseout", outSlope); 233 | }//setMouseDot -------------------------------------------------------------------------------- /js/introSlope.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////// 2 | //////////////////////////// Slopegraph Intro ///////////////////////////// 3 | /////////////////////////////////////////////////////////////////////////// 4 | 5 | 6 | function introSlope() { 7 | 8 | setTimeout(function() {counter = 4;}, 1000); 9 | 10 | ////////////////////////////////////////////////////// 11 | ////////////////// Hide & Remove ///////////////////// 12 | ////////////////////////////////////////////////////// 13 | 14 | //Reset the progress bar 15 | resetProgressBar(); 16 | 17 | //Set the progress circles 18 | setCircleProgress(3); 19 | 20 | //Remove the text & button on the right 21 | d3.select("#section") 22 | .transition().duration(500) 23 | .style("opacity",0) 24 | .call(endall, function() { 25 | d3.select("#section") 26 | .style("visibility","hidden"); 27 | }); 28 | 29 | //Remove the bar chart to the right - if present 30 | barChart.selectAll("g") 31 | .transition().duration(500) 32 | .style("opacity",0) 33 | .call(endall, function() { 34 | barChart.selectAll("g") 35 | .remove(); 36 | }); 37 | barWrappingOther.selectAll("g") 38 | .transition().duration(500) 39 | .style("opacity",0) 40 | .call(endall, function() { 41 | barWrappingOther.selectAll("g") 42 | .remove(); 43 | }); 44 | 45 | //Remove previous slope elements 46 | slopes.selectAll(".slopes").remove(); 47 | text2000.selectAll("text").remove(); 48 | text2010.selectAll("text").remove(); 49 | slopeTitles.selectAll("text").remove(); 50 | 51 | //Remove color setting from dot-plot 52 | cities2010.selectAll(".city_2010") 53 | .style("fill", null) 54 | .style("fill-opacity", 0.8); 55 | 56 | //Remove dot histogram axis 57 | dotWrapper.selectAll("g").remove(); 58 | dotWrapper.selectAll("text").remove(); 59 | 60 | ////////////////////////////////////////////////////// 61 | ////////////////////// Initialize //////////////////// 62 | ////////////////////////////////////////////////////// 63 | 64 | var delay = 5000; 65 | 66 | //Start the progress bar 67 | runProgressBar(delay*4.75); 68 | 69 | ////////////////////////////////////////////////////// 70 | //////////////////// Introduction //////////////////// 71 | ////////////////////////////////////////////////////// 72 | 73 | //Create the slopegraph 74 | setTimeout(function () {rVar = "pop"; initiateSlopeGraph();}, delay*0.1); 75 | rVar = "pop"; 76 | d3.select("#popButton").classed("active",true); 77 | d3.select("#landButton").classed("active",false); 78 | d3.select("#densButton").classed("active",false); 79 | 80 | d3.select("#explanation") 81 | .style("visibility","visible") 82 | .transition().duration(1000) 83 | .style("opacity",0) 84 | .call(endall, function() { 85 | d3.select("#explanation") 86 | .style("top", 300 + "px") 87 | .style("left", 600 + "px") 88 | .style("width", 350 + "px") 89 | .html("We can take a closer look at the absolute changes of these cities
Here we see the urban population in 2000 on the left and in 2010 on the right
"); 90 | }) 91 | .transition().duration(1000) 92 | .style("opacity",1); 93 | 94 | //Deactivate the mouse over events 95 | setTimeout(function() {setMouseSlope("remove");}, (delay*0.25)); 96 | 97 | ////////////////////////////////////////////////////// 98 | ///////////////// Pearl River Delta ////////////////// 99 | ////////////////////////////////////////////////////// 100 | explanationText(varText = "Again it becomes apparent how fast the Pearl River Delta has grown during this decade", delay = delay, delayStep = 1.5); 101 | 102 | //Show only one slope 103 | //setTimeout(function() {oneSlope(1, delay);}, (delay*2)); 104 | 105 | ////////////////////////////////////////////////////// 106 | ///////////////// Population Density ///////////////// 107 | ////////////////////////////////////////////////////// 108 | 109 | explanationText(varText = "Or we can look at population density", delay = delay, delayStep =2.3); 110 | 111 | //Change to a density slopegraph 112 | setTimeout(totalDensitySlopeGraph, delay*2.4); 113 | //Deactivate the mouse over events 114 | setTimeout(function() { 115 | setMouseSlope("remove"); 116 | 117 | totalDensityBarGraph(); 118 | d3.select("#popButton").classed("active",false); 119 | d3.select("#densButton").classed("active",true); 120 | 121 | }, (delay*2.4)); 122 | 123 | ////////////////////////////////////////////////////// 124 | ////////////////////// Indonesia ///////////////////// 125 | ////////////////////////////////////////////////////// 126 | 127 | //explanationText(varText = "Practically all cities in Indonesia saw an increase in their average urban population density", delay = delay, delayStep = 3.5); 128 | setTimeout(function() {oneCountrySlope("Indonesia", delay)},(delay*3.25)) 129 | explanationText(varText = "Urban population density in Indonesia jumped from 7400 people per sq. km in 2000 to 9400 in 2010, an increase of almost 30%!
" + 130 | "This is most likely due to constraints in investment in urban infrastructure and housing
", 131 | delay = delay, delayStep = 2.75); 132 | 133 | ////////////////////////////////////////////////////// 134 | /////////////// How many down and up ///////////////// 135 | ////////////////////////////////////////////////////// 136 | 137 | ////////////////////////////////////////////////////// 138 | ///////////////////// Finish it ////////////////////// 139 | ////////////////////////////////////////////////////// 140 | 141 | //Make text disappear 142 | d3.select("#explanation") 143 | .transition().duration(1000).delay(delay*4.75) 144 | .style("opacity",0) 145 | .call(endall, function() { 146 | d3.select("#explanation") 147 | .style("visibility","hidden"); 148 | }); 149 | 150 | 151 | //Show the text & button on the right 152 | /* 153 | d3.select("#section") 154 | .transition().delay(delay*4.75) 155 | .style("opacity",0) 156 | .call(endall, function() { 157 | d3.select("#section") 158 | .style("visibility","visible"); 159 | }) 160 | .transition().duration(1500) 161 | .style("opacity",1); 162 | */ 163 | 164 | //Show the text & button on the right 165 | d3.select("#section") 166 | .transition().delay(delay*4.75) 167 | .style("opacity",0) 168 | .call(endall, function() { 169 | d3.select("#section") 170 | .style("visibility","visible"); 171 | //Change title in top right corner 172 | d3.select("#sectionTitle") 173 | .style("opacity",1) 174 | .html("Creating the right kind of density in a city"); 175 | //Change text in top right corner 176 | d3.select("#sectionText") 177 | .html('Urban population density, which was already high in the year 2000 for East Asia has only grown larger for practically all cities outside of China. Continuous growth can be expected in the coming years. Therefore, the focus for urban planners should be on the design of this density, the appropriate coordination and location of different city aspects
' + 178 | 'Click on the buttons below to see the differences of the urban population, urban land or urban population density per city or hover over the plots to get more detailed information
'); 179 | }) 180 | .transition().duration(1000) 181 | .style("opacity",1); 182 | 183 | setTimeout(function() { 184 | counter = 5; 185 | //Set the progress circles 186 | setCircleProgress(4); 187 | //Set mouse over again 188 | setMouseSlope("initiate"); 189 | //Draw full slopegraph again 190 | totalDensitySlopeGraph(); 191 | //Show bar chart again 192 | initiateBarChart(); 193 | }, delay*4.8); 194 | 195 | 196 | }//introSlope 197 | 198 | //Activate or deactivate the mouse events 199 | function setMouseSlope(setting) { 200 | 201 | var overSlope = (setting == "remove" ? null : showOne); 202 | var outSlope = (setting == "remove" ? null : showAll); 203 | 204 | cities2000.selectAll(".city_2000") 205 | .on("mouseover", overSlope) 206 | .on("mouseout", outSlope); 207 | 208 | cities2010.selectAll(".city_2010") 209 | .on("mouseover", overSlope) 210 | .on("mouseout", outSlope); 211 | 212 | slopes.selectAll(".slopes") 213 | .on("mouseover", overSlope) 214 | .on("mouseout", outSlope); 215 | 216 | text2000.selectAll("text") 217 | .on("mouseover", overSlope) 218 | .on("mouseout", outSlope); 219 | 220 | text2010.selectAll("text") 221 | .on("mouseover", overSlope) 222 | .on("mouseout", outSlope); 223 | }//setMouseSlope 224 | 225 | function oneSlope(rank, delay) { 226 | //Show only one slope 227 | cities2000.selectAll(".city_2000") 228 | .transition().duration(1000) 229 | .style("fill-opacity", function(d) { 230 | if (d.rank_pop != rank) return 0;}); 231 | 232 | cities2010.selectAll(".city_2010") 233 | .transition().duration(1000) 234 | .style("fill-opacity", function(d) { 235 | if (d.rank_pop != rank) return 0;}); 236 | 237 | slopes.selectAll(".slopes") 238 | .transition().duration(1000) 239 | .style("opacity", function(d) { 240 | if (d.rank_pop != rank) return 0; 241 | else return 0.4}); 242 | 243 | text2000.selectAll("text") 244 | .transition().duration(1000) 245 | .style("opacity", function(d) { 246 | if (d.rank_pop != rank) return 0; 247 | else return 0.7;}); 248 | 249 | text2010.selectAll("text") 250 | .transition().duration(1000) 251 | .style("opacity", function(d) { 252 | if (d.rank_pop != rank) return 0; 253 | else return 0.7;}); 254 | 255 | //Show all slopes again 256 | cities2000.selectAll(".city_2000") 257 | .transition().duration(1000).delay(delay*1.25) 258 | .style("fill-opacity", 0.8); 259 | 260 | cities2010.selectAll(".city_2010") 261 | .transition().duration(1000).delay(delay*1.25) 262 | .style("fill-opacity", 0.8); 263 | 264 | slopes.selectAll(".slopes") 265 | .transition().duration(1000).delay(delay*1.25) 266 | .style("opacity", 0.4); 267 | 268 | text2000.selectAll("text") 269 | .transition().duration(1000).delay(delay*1.25) 270 | .style("opacity", function(d) { 271 | if (d.rank_pop <= 10) return 0.7; 272 | else return 0;}); 273 | 274 | text2010.selectAll("text") 275 | .transition().duration(1000).delay(delay*1.25) 276 | .style("opacity", function(d) { 277 | if (d.rank_pop <= 10) return 0.7; 278 | else return 0;}); 279 | 280 | }//oneSlope 281 | 282 | function oneCountrySlope(country, delay) { 283 | //Show one specific country 284 | cities2000.selectAll(".city_2000") 285 | .transition().duration(1000) 286 | .style("fill-opacity", function(d) { 287 | if (d.country != country) return 0;}); 288 | 289 | cities2010.selectAll(".city_2010") 290 | .transition().duration(1000) 291 | .style("fill-opacity", function(d) { 292 | if (d.country != country) return 0;}); 293 | 294 | slopes.selectAll(".slopes") 295 | .transition().duration(1000) 296 | .style("opacity", function(d) { 297 | if (d.country != country) return 0; 298 | else return 0.4;}); 299 | 300 | text2000.selectAll("text") 301 | .transition().duration(1000) 302 | .style("opacity", function(d) { 303 | if (d.country != country) return 0; 304 | else return 0.7;}); 305 | 306 | text2010.selectAll("text") 307 | .transition().duration(1000) 308 | .style("opacity", function(d) { 309 | if (d.country != country) return 0; 310 | else return 0.7;}); 311 | 312 | }//oneCountrySlope -------------------------------------------------------------------------------- /js/introText.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////// 2 | /////////////////////// Text at the introduction ////////////////////////// 3 | /////////////////////////////////////////////////////////////////////////// 4 | 5 | function introText() { 6 | 7 | modus = "intro"; 8 | 9 | //De-activate the back button 10 | d3.select("#clickerBack").classed("inactiveButton",true); 11 | d3.select("#clickerBack").classed("activeButton",false); 12 | //Change text of front button 13 | d3.select("#clickerFront").html("Start"); 14 | 15 | setTimeout(function() {counter = 1;}, 1000); 16 | 17 | ////////////////////////////////////////////////////// 18 | ////////////////// Hide & Remove ///////////////////// 19 | ////////////////////////////////////////////////////// 20 | 21 | //Remove all elements of startBarChart (if present) 22 | startBarChart.selectAll("g").remove(); 23 | 24 | //Set the progress circles 25 | setCircleProgress(0); 26 | 27 | //Reset the progress bar 28 | resetProgressBar(); 29 | 30 | d3.select("#section") 31 | .style("opacity",0) 32 | .style("visibility","hidden"); 33 | 34 | //Remove the bar chart to the right - if present 35 | barChart.selectAll("g").remove(); 36 | barWrappingOther.selectAll("g").remove(); 37 | 38 | //Hide call-out 39 | d3.select("#callOut").style("visibility","hidden"); 40 | 41 | //Hide the cities - if present 42 | cities2010.selectAll(".city_2010") 43 | .on("mouseover", null) 44 | .on("mouseout", null) 45 | .transition().duration(1000) 46 | .attr("r", 0) 47 | .attr("cx", function(d) {return projection([d.longitude, d.latitude])[0];}) 48 | .attr("cy", function(d) {return projection([d.longitude, d.latitude])[1];}); 49 | cities2000.selectAll(".city_2000") 50 | .on("mouseover", null) 51 | .on("mouseout", null) 52 | .transition().duration(1000) 53 | .attr("r", 0) 54 | .attr("cx", function(d) {return projection([d.longitude, d.latitude])[0];}) 55 | .attr("cy", function(d) {return projection([d.longitude, d.latitude])[1];}); 56 | 57 | //Hide the buttons - if present 58 | d3.select(".btn-group") 59 | .style("visibility", "hidden"); 60 | 61 | ////////////////////////////////////////////////////// 62 | ///////////////////////// Map //////////////////////// 63 | ////////////////////////////////////////////////////// 64 | 65 | //Increase opacity of the map 66 | map.selectAll(".geo-path") 67 | .attr("visibility", "visible") 68 | .transition().duration(2000) 69 | .style("stroke-opacity", 1) 70 | .style("fill-opacity", 0.5); 71 | 72 | //Start explanation about the World Bank 73 | d3.select("#explanation") 74 | .style("visibility","visible") 75 | .style("top", 200 + "px") 76 | .style("left", 50 + "px") 77 | .style("width", 550 + "px") 78 | .html("Societies are shifting from having a rural nature to a more and more urban nature. We face the opportunity to set the course of urbanization on a more sustainable and equitable path
" + 79 | "This visualization is based on data on urbanization in East Asia between 2000 and 2010 collected by the World Bank using Satellite images and population models. It aims to provide you with a clear view on the magnitude of changes that can happen in only one decade and challenges you to think about the impact on the following years
")
80 | .transition().duration(1000)
81 | .style("opacity",1);
82 |
83 | //Show the intro explanation
84 | d3.select("#explanationIntro")
85 | d3.select("#explanationIntro")
86 | .style("visibility","visible")
87 | .style("top", 475 + "px")
88 | .style("left", 50 + "px")
89 | .style("width", 550 + "px")
90 | .html("Press Start to be taken through the complete story, or press the circles that correspond to
map | slope | histogram | scatter
to jump straight to the intermediary views")
91 | .style("opacity",1);
92 |
93 | }//introText
--------------------------------------------------------------------------------
/js/introUrbanScatter.js:
--------------------------------------------------------------------------------
1 | ///////////////////////////////////////////////////////////////////////////
2 | /////////////////////////// Bar Chart to Scatter //////////////////////////
3 | ///////////////////////////////////////////////////////////////////////////
4 |
5 | function introUrbanScatter() {
6 |
7 | //Change visual modus
8 | modus = "urbanPopDot";
9 |
10 | setTimeout(function() {counter = 8;}, 1000);
11 |
12 | //Set the progress circles
13 | setCircleProgress(7);
14 |
15 | //////////////////////////////////////////////////////
16 | ////////////////// Hide & Remove /////////////////////
17 | //////////////////////////////////////////////////////
18 |
19 | //Reset the progress bar
20 | resetProgressBar();
21 |
22 | //Remove the two bars - if present
23 | startBarChart.selectAll("g").remove();
24 |
25 | //Hide call-out
26 | d3.select("#callOut").style("visibility","hidden");
27 |
28 | //Remove previous slope elements
29 | slopes.selectAll(".slopes").remove();
30 | text2000.selectAll("text").remove();
31 | text2010.selectAll("text").remove();
32 | slopeTitles.selectAll("text").remove();
33 |
34 | //Hide the buttons
35 | d3.select(".btn-group")
36 | .style("visibility", "hidden");
37 |
38 | //Remove the intro explanation
39 | d3.select("#explanationIntro")
40 | .transition().duration(1000)
41 | .style("opacity",0)
42 | .call(endall, function() {
43 | d3.select("#explanationIntro")
44 | .style("visibility","hidden");
45 | });
46 |
47 | //Make text & call-out disappear - if present
48 | d3.select("#explanation")
49 | .transition().duration(1000)
50 | .style("opacity",0)
51 | .call(endall, function() {
52 | d3.select("#explanation")
53 | .style("visibility","hidden");
54 | });
55 |
56 | //Remove map - if present
57 | map.selectAll(".geo-path")
58 | .transition().duration(2000)
59 | .style("stroke-opacity", 0)
60 | .style("fill-opacity", 0)
61 | .call(endall, function() {
62 | map.selectAll(".geo-path")
63 | .attr("visibility", "hidden");
64 | });
65 |
66 | //Remove the text & button on the right
67 | d3.select("#section")
68 | .transition().duration(500)
69 | .style("opacity",0)
70 | .call(endall, function() {
71 | d3.select("#section")
72 | .style("visibility","hidden");
73 | });
74 |
75 | //Remove dot histogram axis & text
76 | dotWrapper.selectAll("g")
77 | .transition().duration(1000)
78 | .style("opacity", 0)
79 | .remove();
80 | dotWrapper.selectAll("text")
81 | .transition().duration(1000)
82 | .style("opacity", 0)
83 | .remove();
84 |
85 | //Remove 2000 cities
86 | cities2000.selectAll(".city_2000")
87 | .transition().duration(1000)
88 | .attr("r", 0)
89 | .style("fill-opacity", 0);
90 |
91 | //Remove 2010 cities
92 | cities2010.selectAll(".city_2010")
93 | .style("fill", null)
94 | .transition().duration(1000)
95 | .attr("r", 0)
96 | .style("fill-opacity", 0);
97 |
98 | //Show bar chart again
99 | initiateBarChart();
100 | //////////////////////////////////////////////////////
101 | ////////////////////// Initialize ////////////////////
102 | //////////////////////////////////////////////////////
103 |
104 | var delay = 5000;
105 |
106 | //Start the progress bar
107 | runProgressBar(delay*7);
108 |
109 | //New height of each country section
110 | newBarHeight = (barDimHeight/countries.length);
111 |
112 | //Set the new x axis range
113 | barScale
114 | .range([0, barDimWidth]);
115 | xAxis.scale(barScale);
116 | //Set the new y axis range
117 | yBarScale
118 | .range([barDimHeight,100])
119 | .domain([0, 70000]);
120 | yAxis
121 | .tickFormat(numFormatCurrency)
122 | .scale(yBarScale);
123 |
124 | //////////////////////////////////////////////////////
125 | ////////// Move to left and make bigger //////////////
126 | //////////////////////////////////////////////////////
127 |
128 | d3.select("#explanation")
129 | .style("visibility","visible")
130 | .transition().duration(1000)
131 | .style("opacity",0)
132 | .call(endall, function() {
133 | d3.select("#explanation")
134 | .style("top", 260 + "px")
135 | .style("left", 590 + "px")
136 | .style("width", 380 + "px")
137 | .html("Finally, let's zoom into the countries and look at what the future might hold");
138 | })
139 | .transition().duration(1000).delay(2000)
140 | .style("opacity",1);
141 |
142 | //Move bar chart to the new location
143 | barChart
144 | .style("visibility","visible")
145 | .transition().duration(2000)
146 | .style("opacity",1)
147 | .attr("width", barDimWidth)
148 | .attr("height", barDimHeight)
149 | .attr("transform","translate(" + barX + "," + barY + ")");
150 | //Move the axes wrapper
151 | barWrappingOther
152 | .style("visibility","visible")
153 | .transition().duration(2000)
154 | .style("opacity",1)
155 | .attr("width", barDimWidth)
156 | .attr("height", 20)
157 | .attr("transform","translate(" + barX + ", " + (barY + barDimHeight) +")");
158 |
159 | //Move and update the bar title
160 | barChart.selectAll(".barTitle")
161 | .style("font-size", "18px")
162 | .style("opacity",0)
163 | .transition().duration(1000)
164 | .attr("transform", "translate(" + ((barX+75) + (barDimWidth-(barX+75))/2) + "," + -15 + ")");
165 |
166 | //Create more room between the bars
167 | barChart.selectAll(".barWrapper")
168 | .on("mouseover", null)
169 | .on("mouseout", null)
170 | .transition().duration(2000).delay(2000)
171 | .attr("transform", function(d, i) { return "translate(75," + (5 + (eval("d.rank_" + rVar + "-1")) * newBarHeight) + ")"; });
172 |
173 | //Update the 2010 bar widths
174 | barChart.selectAll(".city_2010")
175 | .transition().duration(2000).delay(2000)
176 | .attr("width", function(d) {return barScale(eval("d." + rVar + "_2010"));});
177 |
178 | //Update the 2000 bar widths
179 | barChart.selectAll(".city_2000")
180 | .transition().duration(2000).delay(2000)
181 | .attr("width", function(d) {return barScale(eval("d." + rVar + "_2000"));});
182 |
183 | //Update the x axis
184 | barWrappingOther.select(".x.axis")
185 | .transition().duration(2000).delay(2000)
186 | .call(xAxis);
187 |
188 | //////////////////////////////////////////////////////
189 | /////////// Change to urban population % /////////////
190 | //////////////////////////////////////////////////////
191 |
192 | setTimeout(function() {
193 |
194 | explanationText(varText = "Here we see the % of the total population that lives in urban areas with more than 100,000 people",
195 | delay = delay, delayStep = 0);
196 |
197 | //Set the new x-axis domain
198 | barScale.domain([0,0.7]);
199 | //Set new x-axis
200 | xAxis
201 | .ticks(8)
202 | .scale(barScale)
203 | .tickFormat(numFormatPercent);
204 | //Update the x axis
205 | barWrappingOther.selectAll(".x.axis")
206 | .transition().duration(1000)
207 | .call(xAxis);
208 | barWrappingOther.selectAll(".x.axis text")
209 | .style("font-size", "10px");
210 | //Set up X axis label
211 | barWrappingOther.append("g")
212 | .append("text")
213 | .attr("class", "x label titleTop")
214 | .attr("text-anchor", "middle")
215 | .attr("transform", "translate(" + (75 + barDimWidth/2) + "," + 60 + ")")
216 | .style("font-size", "15px")
217 | .style("opacity", 0)
218 | .text("% of population living in urban areas of 100,000 people or more")
219 | .transition().duration(1000)
220 | .style("opacity", 1);
221 |
222 | //Remove background
223 | barChart.selectAll(".background").remove();
224 |
225 | barChart.selectAll(".barWrapper")
226 | .filter(function(d) {return d.country == "Singapore";})
227 | .transition().duration(1000)
228 | .style("opacity", 0)
229 | .remove();
230 |
231 | //Make dots of the 2000 bars
232 | barChart.selectAll(".city_2000")
233 | .transition().duration(1000)
234 | .style("fill-opacity", 1)
235 | .attr("rx",dotSize)
236 | .attr("ry",dotSize)
237 | .attr("width",dotSize)
238 | .attr("height",dotSize)
239 | .attr("transform", function (d) {
240 | return "translate(" + (barScale(d.pop_perc_2000) - dotSize/2) + "," + (barHeight/2 - dotSize/2) + ")";
241 | });
242 |
243 | //Make dots of the 2010 bars
244 | barChart.selectAll(".city_2010")
245 | .transition().duration(1000)
246 | .style("fill-opacity", 1)
247 | .attr("rx",dotSize)
248 | .attr("ry",dotSize)
249 | .attr("width",dotSize)
250 | .attr("height",dotSize)
251 | .attr("transform", function (d) {
252 | return "translate(" + (barScale(d.pop_perc_2010) - dotSize/2) + "," + (barHeight/2 - dotSize/2) + ")";
253 | });
254 |
255 | //Create the lines between the 2000 and 2010 dots
256 | barChart.selectAll("line")
257 | .attr("x1", function(d) {return barScale(d.pop_perc_2000);})
258 | .attr("x2", function(d) {return barScale(d.pop_perc_2010);})
259 | .attr("y1", (barHeight/2))
260 | .attr("y2", (barHeight/2))
261 | .transition().duration(1000).delay(1000)
262 | .style("opacity", 1);
263 |
264 | //Create 50% line
265 | barWrappingOther.append("g")
266 | .append("line")
267 | .attr("class", "halfway-line")
268 | .attr("x1", (75+barScale(0.5)))
269 | .attr("x2", (75+barScale(0.5)))
270 | .attr("y1", 0)
271 | .attr("y2", (-barDimHeight + 20))
272 | .style("stroke-width", 1)
273 | .style("stroke","#AAAAAA")
274 | .style("stroke-dasharray", ("7, 4"))
275 | .style("opacity", 0);
276 |
277 | //Reshuffle in order of population %
278 | barChart.selectAll(".barWrapper")
279 | .style("visibility","visible")
280 | .transition().duration(1000).delay(2000)
281 | .attr("transform", function(d, i) { return "translate(75," + (5 + (d.rank_pop_perc - 1) * newBarHeight) + ")"; })
282 |
283 | //More urban growth expected
284 | explanationText(varText = "
Even with the enormous shift of 200 million people moving towards cities within one decade, most countries still have far less than 50% of their total population living in a city
" + 285 | "Therefore, it is likely to assume that the next decades will see continuous urban growth
", 286 | delay = delay, delayStep = 1); 287 | 288 | //Show 50% line 289 | barWrappingOther.select(".halfway-line") 290 | .transition().duration(1000).delay(delay) 291 | .style("opacity", 1); 292 | 293 | }, delay*1); 294 | 295 | 296 | ////////////////////////////////////////////////////// 297 | /////////////////// Change to GDP //////////////////// 298 | ////////////////////////////////////////////////////// 299 | setTimeout(function() { 300 | 301 | explanationText(varText = "If combined with the change in income per capita, the relationship between urban and economic growth becomes visible
", 302 | delay = delay, delayStep = 0); 303 | 304 | explanationText(varText = "While most countries have seen a more free migration towards cities, their GDP has grown between 2000 and 2010.
" + 305 | "One can only speculate about the possible economic growth if sustainable urbanization is understood and carefully planned
", 306 | delay = delay, delayStep = 1); 307 | 308 | //Remove the y-axis labels 309 | barChart.selectAll(".barLabels") 310 | .transition().duration(1000) 311 | .style("opacity", 0) 312 | .remove(); 313 | 314 | //Remove 50% line 315 | barWrappingOther.select(".halfway-line") 316 | .transition().duration(1000) 317 | .style("opacity", 0) 318 | .remove(); 319 | 320 | //Remove all countries with unknown GDP 321 | barChart.selectAll(".barWrapper") 322 | .filter(function(d) {return d.gdp_2000 == 0;}) 323 | .transition().duration(1000) 324 | .style("opacity", 0) 325 | .remove(); 326 | 327 | //Remove the y-component of the barWrapper transform 328 | barChart.selectAll(".barWrapper") 329 | .transition().duration(1000).delay(1000) 330 | .attr("transform", "translate(75,0)"); 331 | 332 | counter = 9; 333 | //Set the progress circles 334 | setCircleProgress(8); 335 | 336 | setTimeout(createScatter, 1000); 337 | 338 | ////////////////////////////////////////////////////// 339 | ///////////////////// Finish it ////////////////////// 340 | ////////////////////////////////////////////////////// 341 | 342 | //Make text disappear 343 | d3.select("#explanation") 344 | .transition().duration(1000).delay(delay*3) 345 | .style("opacity",0) 346 | .call(endall, function() { 347 | d3.select("#explanation") 348 | .style("visibility","hidden"); 349 | }); 350 | 351 | //Show the text & button on the right 352 | d3.select("#section") 353 | .transition().delay(delay*3) 354 | .style("opacity",0) 355 | .call(endall, function() { 356 | d3.select("#section") 357 | .style("visibility","visible"); 358 | 359 | //Change title in top right corner 360 | d3.select("#sectionTitle") 361 | .html("Urbanization and economic prosperity"); 362 | //Change text in top right corner 363 | d3.select("#sectionText") 364 | .html('Even though it would almost appear as if all inhabitants of East Asia live in cities, the large majority of the citizens currently still live in rural areas. Continuous urban growth is therefore expected to occur in the coming decades
' + 365 | 'The current view reveals a correlation between a rise in the urban population as a percentage to the whole population and an increase in the GDP (for the countries where GDP information is available) showing a glance of the possible economic prosperity that continuous urban growth might bring to an urban area and people that might move here in the coming future
' + 366 | 'For now, one can only speculate about the impact the continuous move towards cities will have on the social and economic circumstances of these families and areas. However, with more investment into research on the factors that influence the positive side of urbanization a future might be created in which more urban areas can be a place of constant development and continuous economic and social opportunities
' + 367 | 'To see which country belongs to each circle-line element hover over the plot on the left
'); 368 | }) 369 | .transition().duration(1000) 370 | .style("opacity",1); 371 | 372 | }, delay*4); 373 | 374 | 375 | 376 | }//introUrbanScatter -------------------------------------------------------------------------------- /js/introduceCities.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////// 2 | //////////////////////////// Introduce cities ///////////////////////////// 3 | /////////////////////////////////////////////////////////////////////////// 4 | 5 | function introduceCities() { 6 | 7 | modus = "introduceCities"; 8 | hoverType = "city"; 9 | rVar == "pop"; 10 | 11 | //setTimeout(function() {counter = 3;}, 1000); 12 | 13 | ////////////////////////////////////////////////////// 14 | ////////////////// Hide & Remove ///////////////////// 15 | ////////////////////////////////////////////////////// 16 | 17 | //Reset the progress bar 18 | //resetProgressBar(); 19 | 20 | //Set the progress circles 21 | //setCircleProgress(2); 22 | 23 | //d3.select("#section") 24 | // .style("opacity",0) 25 | // .style("visibility","hidden"); 26 | 27 | //Remove the two bars - if present 28 | startBarChart.selectAll("g") 29 | .transition().duration(1000) 30 | .style("opacity",0) 31 | .call(endall, function() { 32 | startBarChart.selectAll("g") 33 | .remove(); 34 | }); 35 | 36 | //Remove the bar chart to the right - if present 37 | //barChart.selectAll("g").remove(); 38 | //barWrappingOther.selectAll("g").remove(); 39 | 40 | //Hide the cities - if present 41 | cities2010.selectAll(".city_2010") 42 | .on("mouseover", null) 43 | .on("mouseout", null) 44 | .transition().duration(1000) 45 | .attr("r", 0) 46 | .attr("cx", function(d) {return projection([d.longitude, d.latitude])[0];}) 47 | .attr("cy", function(d) {return projection([d.longitude, d.latitude])[1];}); 48 | cities2000.selectAll(".city_2000") 49 | .on("mouseover", null) 50 | .on("mouseout", null) 51 | .transition().duration(1000) 52 | .attr("r", 1.5) 53 | .attr("cx", function(d) {return projection([d.longitude, d.latitude])[0];}) 54 | .attr("cy", function(d) {return projection([d.longitude, d.latitude])[1];}); 55 | 56 | //Remove dot histogram axis 57 | //dotWrapper.selectAll("g").remove(); 58 | //dotWrapper.selectAll("text").remove(); 59 | 60 | ////////////////////////////////////////////////////// 61 | ////////////////////// Initialize //////////////////// 62 | ////////////////////////////////////////////////////// 63 | 64 | var delay = 5000; 65 | 66 | //Start the progress bar 67 | //runProgressBar(delay*5.25); 68 | 69 | rScale 70 | .domain([d3.min(data, function(d) {return d.pop_2000;}),d3.max(data, function(d) {return d.pop_2010;})]) 71 | .range([1,20]); 72 | 73 | //Increase opacity of the map 74 | map.selectAll(".geo-path") 75 | .attr("visibility", "visible") 76 | .transition().duration(1000).delay(500) 77 | .style("stroke-opacity", 1) 78 | .style("fill-opacity", 1); 79 | 80 | ////////////////////////////////////////////////////// 81 | /////////////////// Smallest cities ////////////////// 82 | ////////////////////////////////////////////////////// 83 | //Smallest cities 84 | d3.select("#explanation") 85 | .style("visibility","visible") 86 | .transition().duration(1000) 87 | .style("opacity",0) 88 | .call(endall, function() { 89 | d3.select("#explanation") 90 | .style("top", 350 + "px") 91 | .style("left", 400 + "px") 92 | .style("width", 400 + "px") 93 | .html("There are 738 cities with a population between 100,000 to 1 million people"); 94 | }) 95 | .transition().duration(1000) 96 | .style("opacity",1); 97 | 98 | //Highlight the small cities - 2000 99 | cities2010.selectAll(".city_2010") 100 | .filter(function(d) { return d.pop_2010 < 1e6;}) 101 | .transition().duration(2000).delay(1000) 102 | .attr("r", function(d) {return rScale(d.pop_2010);}) 103 | .style("fill-opacity", 1) 104 | .transition().duration(1500) 105 | .style("fill-opacity", 0.5); 106 | 107 | //Highlight the small cities - 2010 108 | cities2000.selectAll(".city_2000") 109 | .filter(function(d) { return d.pop_2010 < 1e6;}) 110 | .transition().duration(2000).delay(1000) 111 | .attr("r", function(d) {return rScale(d.pop_2000);}) 112 | .style("fill-opacity", 1) 113 | .transition().duration(1500) 114 | .style("fill-opacity", 0.7); 115 | 116 | ////////////////////////////////////////////////////// 117 | //////////////////// Medium cities /////////////////// 118 | ////////////////////////////////////////////////////// 119 | //Medium cities 120 | explanationText(varText = "123 cities with a population between 1 and 10 million people", delay = delay, delayStep = 1); 121 | 122 | //Plot the sizes of the cities in 2010 in reddish 123 | cities2010.selectAll(".city_2010") 124 | .filter(function(d) { return d.pop_2010 >= 1e6 & d.pop_2010 < 10e6;}) 125 | .transition().duration(2000).delay(1*delay) 126 | .attr("r", function(d) {return rScale(d.pop_2010);}) 127 | .style("fill-opacity", 1) 128 | .transition().duration(1500) 129 | .style("fill-opacity", 0.5); 130 | 131 | //On the same location plot the sizes of the cities in 2000 in greyish 132 | cities2000.selectAll(".city_2000") 133 | .filter(function(d) { return d.pop_2010 >= 1e6 & d.pop_2010 < 10e6;}) 134 | .transition().duration(2000).delay(1*delay) 135 | .attr("r", function(d) {return rScale(d.pop_2000);}) 136 | .style("fill-opacity", 1) 137 | .transition().duration(1500) 138 | .style("fill-opacity", 0.7); 139 | 140 | ////////////////////////////////////////////////////// 141 | //////////////////// Large cities //////////////////// 142 | ////////////////////////////////////////////////////// 143 | //Large cities 144 | explanationText(varText = "And 8 megacities with more than 10 million people", delay = delay, delayStep = 2); 145 | 146 | //Plot the sizes of the cities in 2010 in reddish 147 | cities2010.selectAll(".city_2010") 148 | .filter(function(d) { return d.pop_2010 >= 10e6;}) 149 | .transition().duration(2000).delay(2*delay) 150 | .attr("r", function(d) {return rScale(d.pop_2010);}) 151 | .style("fill-opacity", 1) 152 | .transition().duration(1500) 153 | .style("fill-opacity", 0.5); 154 | 155 | //On the same location plot the sizes of the cities in 2000 in greyish 156 | cities2000.selectAll(".city_2000") 157 | .filter(function(d) { return d.pop_2010 >= 10e6;}) 158 | .transition().duration(2000).delay(2*delay) 159 | .attr("r", function(d) {return rScale(d.pop_2000);}) 160 | .style("fill-opacity", 1) 161 | .transition().duration(1500) 162 | .style("fill-opacity", 0.7); 163 | 164 | ////////////////////////////////////////////////////// 165 | ///////////////// Pearl River Delta ////////////////// 166 | ////////////////////////////////////////////////////// 167 | //Pearl River Delta 168 | explanationText(varText = "For example, the Pearl River Delta in China has overtaken Tokyo as the world’s largest urban area in both size and population", delay = delay, delayStep = 3); 169 | 170 | cities2000.selectAll(".city_2000") 171 | .transition().duration(2000).delay(3*delay) 172 | .style("fill-opacity", function(d) { 173 | if(d.rank_pop == 1) {return 0.9;} 174 | else {return 0.05;} 175 | }); 176 | cities2010.selectAll(".city_2010") 177 | .transition().duration(2000).delay(3*delay) 178 | .style("fill-opacity", function(d) { 179 | if(d.rank_pop == 1) {return 0.9;} 180 | else {return 0.05;} 181 | }); 182 | setTimeout(function() {circleHover($.grep(data, function(d) {return d.rank_pop == 1;})[0])}, 3.25*delay); 183 | 184 | explanationText(varText = "Its population grew with more than 50% to almost 42 million people", delay = delay, delayStep = 4.25); 185 | 186 | /* 187 | cities2000.selectAll(".city_2000") 188 | .transition().duration(2000).delay(5.75*delay) 189 | .style("fill-opacity", 0.05); 190 | cities2010.selectAll(".city_2010") 191 | .transition().duration(2000).delay(5.75*delay) 192 | .style("fill-opacity", 0.05); 193 | */ 194 | ////////////////////////////////////////////////////// 195 | ///////////////////// Zhumadian ////////////////////// 196 | ////////////////////////////////////////////////////// 197 | /*//Zhumadian 198 | explanationText(varText = "The Zhumadian urban area, though relatively small, has seen a population growth of almost 150%", delay = delay, delayStep = 6); 199 | 200 | cities2000.selectAll(".city_2000") 201 | .transition().duration(2000).delay(6*delay) 202 | .style("fill-opacity", function(d) { 203 | if(d.rank_pop == 320) {return 1;} 204 | else {return 0.025;} 205 | }); 206 | cities2010.selectAll(".city_2010") 207 | .transition().duration(2000).delay(6*delay) 208 | .style("fill-opacity", function(d) { 209 | if(d.rank_pop == 320) {return 1;} 210 | else {return 0.025;} 211 | }); 212 | setTimeout(function() {circleHover($.grep(data, function(d) {return d.rank_pop == 320;})[0])}, 6.25*delay); 213 | 214 | explanationText(varText = "However, the population density increased steeply, with 85% because the urban land increased much slower", delay = delay, delayStep = 7.75); 215 | */ 216 | ////////////////////////////////////////////////////// 217 | ///////////////////// Finish it ////////////////////// 218 | ////////////////////////////////////////////////////// 219 | //Make text disappear 220 | d3.select("#explanation") 221 | .transition().duration(1000).delay(delay*5.25) 222 | .style("opacity",0) 223 | .call(endall, function() { 224 | d3.select("#explanation") 225 | .style("visibility","hidden"); 226 | 227 | d3.select("#callOut").style("visibility","hidden"); 228 | }); 229 | 230 | 231 | setTimeout(totalAreaMap, delay*5.25); 232 | 233 | }//introduceCities -------------------------------------------------------------------------------- /js/setStepper.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////// 2 | ///////////////// Text surrounding the stepping circles /////////////////// 3 | /////////////////////////////////////////////////////////////////////////// 4 | 5 | function setStepper() { 6 | 7 | ////////////////////////////////////////////////////// 8 | //////////////////////// Lines /////////////////////// 9 | ////////////////////////////////////////////////////// 10 | 11 | var stepLines = svg.append("g").attr("class","lineWrapper"); 12 | var boxWidth = 20, 13 | boxHeight = 38; 14 | var offsets_2 = document.getElementById('circle_2').getBoundingClientRect(); 15 | var offsets_4 = document.getElementById('circle_4').getBoundingClientRect(); 16 | var offsets_6 = document.getElementById('circle_6').getBoundingClientRect(); 17 | var offsets_8 = document.getElementById('circle_8').getBoundingClientRect(); 18 | 19 | //Map View 20 | /*stepLines.append("rect") 21 | .attr("class", "stepRect mapView") 22 | .attr("x", (offsets_2.left-4)) 23 | .attr("y", (offsets_2.top-44)) 24 | .attr("width", boxWidth) 25 | .attr("height", boxHeight);*/ 26 | 27 | stepLines.append("line") 28 | .attr("class", "stepLine mapView") 29 | .attr("x1", (offsets_2.left + 5)) 30 | .attr("x2", (offsets_2.left + 5)) 31 | .attr("y1", (offsets_2.top - 23)) 32 | .attr("y2", (offsets_2.top - 31)); 33 | 34 | stepLines.append("text") 35 | .attr("class", "stepText mapView") 36 | .style("text-anchor", "middle") 37 | .attr("x", (offsets_2.left + 5)) 38 | .attr("y", (offsets_2.top - 14)) 39 | .text("map"); 40 | 41 | //Slope View 42 | /*stepLines.append("rect") 43 | .attr("class", "stepRect slopeView") 44 | .attr("x", (offsets_4.left-4)) 45 | .attr("y", (offsets_4.top-70)) 46 | .attr("width", boxWidth) 47 | .attr("height", boxHeight);*/ 48 | 49 | stepLines.append("line") 50 | .attr("class", "stepLine slopeView") 51 | .attr("x1", (offsets_4.left + 5)) 52 | .attr("x2", (offsets_4.left + 5)) 53 | .attr("y1", (offsets_4.top - 57)) 54 | .attr("y2", (offsets_4.top - 49)); 55 | 56 | stepLines.append("text") 57 | .attr("class", "stepText slopeView") 58 | .style("text-anchor", "middle") 59 | .attr("x", (offsets_4.left + 5)) 60 | .attr("y", (offsets_4.top - 62)) 61 | .text("slope"); 62 | 63 | //Histogram View 64 | /*stepLines.append("rect") 65 | .attr("class", "stepRect histoView") 66 | .attr("x", (offsets_6.left-4)) 67 | .attr("y", (offsets_6.top-44)) 68 | .attr("width", boxWidth) 69 | .attr("height", boxHeight);*/ 70 | 71 | stepLines.append("line") 72 | .attr("class", "stepLine histoView") 73 | .attr("x1", (offsets_6.left + 5)) 74 | .attr("x2", (offsets_6.left + 5)) 75 | .attr("y1", (offsets_6.top - 23)) 76 | .attr("y2", (offsets_6.top - 31)); 77 | 78 | stepLines.append("text") 79 | .attr("class", "stepText histoView") 80 | .style("text-anchor", "middle") 81 | .attr("x", (offsets_6.left + 5)) 82 | .attr("y", (offsets_6.top - 14)) 83 | .text("histogram"); 84 | 85 | //Scatter View 86 | /*stepLines.append("rect") 87 | .attr("class", "stepRect scatterView") 88 | .attr("x", (offsets_8.left-4)) 89 | .attr("y", (offsets_8.top-70)) 90 | .attr("width", boxWidth) 91 | .attr("height", boxHeight);*/ 92 | 93 | stepLines.append("line") 94 | .attr("class", "stepLine scatterView") 95 | .attr("x1", (offsets_8.left + 5)) 96 | .attr("x2", (offsets_8.left + 5)) 97 | .attr("y1", (offsets_8.top - 57)) 98 | .attr("y2", (offsets_8.top - 49)); 99 | 100 | stepLines.append("text") 101 | .attr("class", "stepText scatterView") 102 | .style("text-anchor", "middle") 103 | .attr("x", (offsets_8.left + 5)) 104 | .attr("y", (offsets_8.top - 62)) 105 | .text("scatter"); 106 | 107 | }//setStepper -------------------------------------------------------------------------------- /js/slopeGraph.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////// 2 | /////////////////////////////// Slopegraph //////////////////////////////// 3 | /////////////////////////////////////////////////////////////////////////// 4 | 5 | //Default initial 6 | var slopeTitle, 7 | firstSlope; 8 | 9 | //Initiate the scale for the vertical invisible lines of the slopegraph 10 | var slopeScale = d3.scale.linear().range([620,120]); 11 | 12 | //Location of the 2000 and 2010 vertical "lines" 13 | var xAxisLoc2000 = 200, 14 | xAxisLoc2010 = xAxisLoc2000 + 200; 15 | 16 | function callSlopeGraph() { 17 | 18 | //Change visual modus to slope 19 | modus = "Slope"; 20 | 21 | setTimeout(function() {counter = 5;}, 1000); 22 | 23 | //Set the progress circles 24 | setCircleProgress(4); 25 | 26 | ////////////////////////////////////////////////////// 27 | ////////////////// Hide & Remove ///////////////////// 28 | ////////////////////////////////////////////////////// 29 | 30 | //Activate the back button 31 | d3.select("#clickerBack").classed("activeButton",true); 32 | d3.select("#clickerBack").classed("inactiveButton",false); 33 | //Activate the front button 34 | d3.select("#clickerFront").classed("activeButton",true); 35 | d3.select("#clickerFront").classed("inactiveButton",false); 36 | //Change text of front button 37 | d3.select("#clickerFront").html("Continue"); 38 | 39 | //Reset the progress bar 40 | resetProgressBar(); 41 | 42 | //Remove the two bars - if present 43 | startBarChart.selectAll("g").remove(); 44 | 45 | //Show the buttons 46 | d3.select(".btn-group") 47 | .style("visibility", "visible"); 48 | 49 | //Remove the intro explanation 50 | d3.select("#explanationIntro") 51 | .transition().duration(1000) 52 | .style("opacity",0) 53 | .call(endall, function() { 54 | d3.select("#explanationIntro") 55 | .style("visibility","hidden"); 56 | }); 57 | 58 | //Make text & call-out disappear - if present 59 | d3.select("#explanation") 60 | .transition().duration(1000) 61 | .style("opacity",0) 62 | .call(endall, function() { 63 | d3.select("#explanation") 64 | .style("visibility","hidden"); 65 | }); 66 | 67 | //Remove map 68 | map.selectAll(".geo-path") 69 | .transition().duration(2000) 70 | .style("stroke-opacity", 0) 71 | .style("fill-opacity", 0) 72 | .call(endall, function() { 73 | map.selectAll(".geo-path") 74 | .attr("visibility", "hidden"); 75 | }); 76 | 77 | //Show the text & button on the right 78 | d3.select("#section") 79 | .transition().delay(100) 80 | .style("opacity",0) 81 | .call(endall, function() { 82 | d3.select("#section") 83 | .style("visibility","visible"); 84 | //Change title in top right corner 85 | d3.select("#sectionTitle") 86 | .style("opacity",1) 87 | .html("Creating the right kind of density in a city"); 88 | //Change text in top right corner 89 | d3.select("#sectionText") 90 | .html('Urban population density, which was already high in the year 2000 for East Asia has only grown larger for practically all cities outside of China. Continuous growth can be expected in the coming years. Therefore, the focus for urban planners should be on the design of this density, the appropriate coordination and location of different city aspects
' + 91 | 'Click on the buttons below to see the differences of the urban population, urban land or urban population density per city or hover over the plots to get more detailed information
'); 92 | }) 93 | .transition().duration(1000) 94 | .style("opacity",1); 95 | 96 | //Show bar chart again 97 | initiateBarChart(); 98 | 99 | //Call slopegraph 100 | setTimeout(initiateSlopeGraph, 1100); 101 | 102 | //Remove color setting from dot-plot 103 | cities2010.selectAll(".city_2010") 104 | .style("fill","#DA6761") 105 | .style("fill-opacity", 0.8); 106 | 107 | //Remove dot histogram axis 108 | dotWrapper.selectAll("g").remove(); 109 | dotWrapper.selectAll("text").remove(); 110 | 111 | //Hide call-out 112 | d3.select("#callOut").style("visibility","hidden"); 113 | 114 | }//callSlopeGraph 115 | 116 | //Function to show the slopegraph 117 | function initiateSlopeGraph() { 118 | 119 | //Remove map 120 | map.selectAll(".geo-path") 121 | .transition().duration(2000) 122 | .style("stroke-opacity", 0) 123 | .style("fill-opacity", 0) 124 | .call(endall, function() { 125 | map.selectAll(".geo-path") 126 | .attr("visibility", "hidden"); 127 | }); 128 | 129 | //Change visual modus to slope 130 | modus = "Slope"; 131 | //Adds a small delay of the slope lines when drawn from the map modus 132 | firstSlope = true; 133 | 134 | //Make all elements visible again 135 | d3.selectAll(".slopeGraph") 136 | .attr("visibility", "visible") 137 | .transition().duration(1000) 138 | .style("opacity", 1); 139 | 140 | //Remove previous slope elements 141 | slopes.selectAll(".slopes").remove(); 142 | text2000.selectAll("text").remove(); 143 | text2010.selectAll("text").remove(); 144 | slopeTitles.selectAll("text").remove(); 145 | 146 | ////////////////////////////////////////////////////// 147 | ////////////////////// Initialize //////////////////// 148 | ////////////////////////////////////////////////////// 149 | 150 | //Initiate the lines for the slopegraph 151 | slopes.selectAll(".slopes") 152 | .data(data) 153 | .enter().append("line") 154 | .attr("class", "slopes") 155 | .style("stroke-width", 1) 156 | .attr("stroke", "#858483") 157 | .on("mouseover", showOne) 158 | .on("mouseout", showAll) 159 | .style("opacity", 0); 160 | 161 | //Initiate the text for 2000 datapoints 162 | text2000.selectAll("text") 163 | .data(data) 164 | .enter().append("text") 165 | .attr("class", "text2000") 166 | .style("text-anchor","end") 167 | .attr("font-size", 10) 168 | .attr("dy", ".4em") 169 | .style("cursor","default") 170 | .on("mouseover", showOne) 171 | .on("mouseout", showAll) 172 | .style("opacity", 0); 173 | 174 | //Initiate the text for 2010 datapoints 175 | text2010.selectAll("text") 176 | .data(data) 177 | .enter().append("text") 178 | .attr("class", "text2010") 179 | .style("text-anchor","start") 180 | .attr("font-size", 10) 181 | .attr("dy", ".3em") 182 | .style("cursor","default") 183 | .on("mouseover", showOne) 184 | .on("mouseout", showAll) 185 | .style("opacity", 0); 186 | 187 | ////////////////////////////////////////////////////// 188 | //////////////////// Titles on top /////////////////// 189 | ////////////////////////////////////////////////////// 190 | 191 | //2000 above left axis 192 | slopeTitles.append("text") 193 | .attr("class","title titleTop city_2010") 194 | .attr("x", xAxisLoc2000) 195 | .attr("y", slopeScale.range()[1] - 40) 196 | .style("text-anchor", "middle") 197 | .text("2000") 198 | .style("opacity", 0) 199 | .attr("visibility", "visible") 200 | .transition().duration(1000) 201 | .style("opacity", 1); 202 | //2010 above right axis 203 | slopeTitles.append("text") 204 | .attr("class","title titleTop") 205 | .attr("x", xAxisLoc2010) 206 | .attr("y", slopeScale.range()[1] - 40) 207 | .style("text-anchor", "middle") 208 | .style("fill", "#DA6761") 209 | .text("2010") 210 | .style("opacity", 0) 211 | .attr("visibility", "visible") 212 | .transition().duration(1000) 213 | .style("opacity", 1); 214 | //The title on top 215 | slopeTitles.append("text") 216 | .attr("class","titleTop top") 217 | .attr("x", (xAxisLoc2010 - xAxisLoc2000)/2 + xAxisLoc2000) 218 | .attr("y", slopeScale.range()[1] - 80) 219 | .style("text-anchor", "middle") 220 | .text(slopeTitle) 221 | .style("opacity", 0) 222 | .attr("visibility", "visible") 223 | .transition().duration(1000) 224 | .style("opacity", 1); 225 | 226 | //Create the slopegraph based on the dimension selected 227 | if (rVar == "pop") {totalPopulationSlopeGraph();}; 228 | if (rVar == "land") {totalUrbanLandSlopeGraph();}; 229 | if (rVar == "density") {totalDensitySlopeGraph();}; 230 | 231 | }//initiateSlopeGraph 232 | 233 | //Move circles to show Population between 2000 and 2010 234 | function totalPopulationSlopeGraph() { 235 | rVar = "pop"; 236 | slopeTitle = "Urban population [in millions]"; 237 | changeSlope(); 238 | }//totalPopulationSlopeGraph 239 | 240 | //Move circles to show Land between 2000 and 2010 241 | function totalUrbanLandSlopeGraph() { 242 | rVar = "land"; 243 | slopeTitle = "Urban land [in sq. km.]"; 244 | changeSlope(); 245 | }//totalUrbanLandSlopeGraph 246 | 247 | //Move circles to show Density between 2000 and 2010 248 | function totalDensitySlopeGraph() { 249 | rVar = "density"; 250 | slopeTitle = "Urban population density [in 1000 persons/sq. km]"; 251 | changeSlope(); 252 | }//totalDensitySlopeGraph 253 | 254 | //Actual function that sets the positions, lines and text of the slopgraph elements 255 | function changeSlope() { 256 | 257 | var dur = (firstSlope == true ? 2000 : 2000); 258 | var delaySlope = (firstSlope == true ? 500 : 0); 259 | 260 | //Create domains of the scale 261 | slopeScale.domain([d3.min(data, function(d) {return eval("d." + rVar + "_2000");}),d3.max(data, function(d) {return eval("d." + rVar + "_2010");})]); 262 | 263 | //Move city circles of 2000 to left axis 264 | cities2000.selectAll(".city_2000") 265 | .transition().duration(dur) 266 | .style("fill-opacity", 0.8) 267 | .attr("r", 3) 268 | .attr("cx", xAxisLoc2000) 269 | .attr("cy", function(d){return slopeScale(eval("d." + rVar + "_2000"));}); 270 | 271 | //Move city circles of 2010 to right axis 272 | cities2010.selectAll(".city_2010") 273 | .transition().duration(dur) 274 | .style("fill","#DA6761") 275 | .style("fill-opacity", 0.8) 276 | .attr("r", 3) 277 | .attr("cx", xAxisLoc2010) 278 | .attr("cy", function(d){return slopeScale(eval("d." + rVar + "_2010"));}); 279 | 280 | //Draw the lines between the points 281 | slopes.selectAll(".slopes") 282 | .transition().duration(dur/2).delay(delaySlope) 283 | .style("opacity", 0) 284 | .call(endall, function () { 285 | slopes.selectAll(".slopes") 286 | .attr("x1", xAxisLoc2000) 287 | .attr("x2", xAxisLoc2010) 288 | .attr("y1",function(d){return slopeScale(eval("d." + rVar + "_2000"));}) 289 | .attr("y2",function(d){return slopeScale(eval("d." + rVar + "_2010"));}) 290 | .transition().duration(dur) 291 | .style("opacity", 0.4) 292 | }); 293 | 294 | text2000.selectAll("text") 295 | .transition().duration(dur/2) 296 | .style("opacity", 0) 297 | .call(endall, function() { 298 | text2000.selectAll("text") 299 | .attr("x", xAxisLoc2000 - 10) 300 | .attr("y", function(d){return slopeScale(eval("d." + rVar + "_2000"));}) 301 | .text(function(d) { 302 | if (rVar == "pop") { 303 | if (d.pop_2000 > 1e6) {return d.city + ", " + d.country + " | " + numFormatOne(d.pop_2000/1e6);} 304 | else {return d.city + ", " + d.country + " | " + numFormatTwo(d.pop_2000/1e6);} 305 | } else if (rVar == "land") { 306 | return d.city + ", " + d.country + " | " + d.land_2000; 307 | } else if (rVar == "density") { 308 | return d.city + ", " + d.country + " | " + numFormatTwo(d.density_2000/1e3); 309 | }//else if 310 | }) 311 | .filter(function(d) { return eval("d.rank_" + rVar + " < 10");}) 312 | .transition().duration(dur/2) 313 | .style("opacity", 0.7) 314 | }); 315 | 316 | text2010.selectAll("text") 317 | .transition().duration(dur/2) 318 | .style("opacity", 0) 319 | .call(endall, function() { 320 | text2010.selectAll("text") 321 | .attr("x", xAxisLoc2010 + 10) 322 | .attr("y", function(d){return slopeScale(eval("d." + rVar + "_2010"));}) 323 | .text(function(d) { 324 | if (rVar == "pop") { 325 | if (d.pop_2000 > 1e6) {return numFormatOne(d.pop_2010/1e6) + " | " + d.city + ", " + d.country;} 326 | else {return numFormatTwo(d.pop_2010/1e6) + " | " + d.city + ", " + d.country; } 327 | } else if (rVar == "land") { 328 | return d.land_2010 + " | " + d.city + ", " + d.country; 329 | } else if (rVar == "density") { 330 | return numFormatTwo(d.density_2010/1e3) + " | " + d.city + ", " + d.country; 331 | }//else if 332 | }) 333 | .filter(function(d) { return eval("d.rank_" + rVar + " < 10");}) 334 | .transition().duration(dur/2) 335 | .style("opacity", 0.7) 336 | }); 337 | 338 | slopeGraph.selectAll(".top") 339 | .text(slopeTitle); 340 | 341 | firstSlope = false; 342 | }//changeSlope -------------------------------------------------------------------------------- /js/startBar.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////// 2 | ///////////////////////////// First Bar Chart ///////////////////////////// 3 | /////////////////////////////////////////////////////////////////////////// 4 | 5 | function startBar() { 6 | 7 | modus = "startBar"; 8 | rVar == "pop"; 9 | setTimeout(function() {counter = 2;}, 1000); 10 | 11 | //Activate the back button 12 | d3.select("#clickerBack").classed("activeButton",true); 13 | d3.select("#clickerBack").classed("inactiveButton",false); 14 | //Change text of front button 15 | d3.select("#clickerFront").html("Continue"); 16 | 17 | ////////////////////////////////////////////////////// 18 | ////////////////// Hide & Remove ///////////////////// 19 | ////////////////////////////////////////////////////// 20 | 21 | //Reset the progress bar 22 | resetProgressBar(); 23 | 24 | //Set the progress circles 25 | setCircleProgress(1); 26 | 27 | //Remove the intro explanation 28 | d3.select("#explanationIntro") 29 | .transition().duration(1000) 30 | .style("opacity",0) 31 | .call(endall, function() { 32 | d3.select("#explanationIntro") 33 | .style("visibility","hidden"); 34 | }); 35 | 36 | //Remove all elements of startBarChart (if present) 37 | startBarChart.selectAll("g").remove(); 38 | 39 | //Hide call-out 40 | d3.select("#callOut").style("visibility","hidden"); 41 | 42 | d3.select("#section") 43 | .style("opacity",0) 44 | .style("visibility","hidden"); 45 | 46 | //Remove the bar chart to the right - if present 47 | barChart.selectAll("g").remove(); 48 | barWrappingOther.selectAll("g").remove(); 49 | 50 | //Hide the cities - if present 51 | cities2010.selectAll(".city_2010") 52 | .on("mouseover", null) 53 | .on("mouseout", null) 54 | .transition().duration(1000) 55 | .attr("r", 0) 56 | .attr("cx", function(d) {return projection([d.longitude, d.latitude])[0];}) 57 | .attr("cy", function(d) {return projection([d.longitude, d.latitude])[1];}); 58 | cities2000.selectAll(".city_2000") 59 | .on("mouseover", null) 60 | .on("mouseout", null) 61 | .transition().duration(1000) 62 | .attr("r", 0) 63 | .attr("cx", function(d) {return projection([d.longitude, d.latitude])[0];}) 64 | .attr("cy", function(d) {return projection([d.longitude, d.latitude])[1];}); 65 | 66 | //Hide the buttons - if present 67 | d3.select(".btn-group") 68 | .style("visibility", "hidden"); 69 | 70 | //Remove dot histogram axis 71 | dotWrapper.selectAll("g").remove(); 72 | dotWrapper.selectAll("text").remove(); 73 | 74 | ////////////////////////////////////////////////////// 75 | ////////////////////// Initialize //////////////////// 76 | ////////////////////////////////////////////////////// 77 | 78 | var delay = 5000; 79 | 80 | //Start the progress bar 81 | runProgressBar(delay*8.6); 82 | 83 | //Set the bar chart dimension and location 84 | var barTotalHeight = 500, 85 | barWidth = 35, 86 | loc2000bar = 25, 87 | loc2010bar = 100; 88 | 89 | startBarChart.attr("width", 600) 90 | .attr("height", barTotalHeight) 91 | .attr("transform","translate(100,75)"); 92 | 93 | var total2000 = d3.sum(countries, function(d) {return d.pop_2000;}); 94 | var total2010 = d3.sum(countries, function(d) {return d.pop_2010;}); 95 | 96 | var yScale = d3.scale.linear() 97 | .range([0, barTotalHeight]) 98 | .domain([0,d3.sum(countries, function(d) {return d.pop_2010;})]) 99 | 100 | var startBar2000 = startBarChart.append("g").attr("class","bar2000"); 101 | var startBar2010 = startBarChart.append("g").attr("class","bar2010"); 102 | 103 | ////////////////////////////////////////////////////// 104 | ///////////////////////// Map //////////////////////// 105 | ////////////////////////////////////////////////////// 106 | 107 | //Increase opacity of the map 108 | map.selectAll(".geo-path") 109 | .attr("visibility", "visible") 110 | .transition().duration(2000) 111 | .style("stroke-opacity", 1) 112 | .style("fill-opacity", 0.6); 113 | 114 | //The number of cities 115 | d3.select("#explanation") 116 | .transition().duration(1000) 117 | .style("opacity",0) 118 | .call(endall, function() { 119 | d3.select("#explanation") 120 | .style("visibility","visible") 121 | .style("top", 350 + "px") 122 | .style("left", 400 + "px") 123 | .style("width", 450 + "px") 124 | .html("Data is available on the 869 urban areas in the region with populations over 100,000 in 2010"); 125 | }) 126 | .transition().duration(1000) 127 | .style("opacity",1); 128 | //Show the 869 cities small in the background 129 | cities2000.selectAll(".city_2000") 130 | .transition().duration(2000) 131 | .style("fill-opacity", 0.3) 132 | .attr("r", 1.5); 133 | 134 | ////////////////////////////////////////////////////// 135 | /////////////////////// Bar 2000 ///////////////////// 136 | ////////////////////////////////////////////////////// 137 | //The number of people in 2000 138 | explanationText(varText = "The 580 million people that were already living in these cities in 2000 grew to 780 million in 2010", delay = delay, delayStep = 1); 139 | 140 | //Create the 2000 grey bar 141 | startBar2000.append("rect") 142 | .attr("x", loc2000bar) 143 | .attr("y", barTotalHeight) 144 | .attr("class","city_2000") 145 | .attr("width", barWidth) 146 | .attr("height", 0) 147 | .transition().duration(2000).delay(delay*1) 148 | .attr("height", yScale(total2000)) 149 | .attr("y", (barTotalHeight - yScale(total2000))); 150 | //Append the year 2000 at the bottom 151 | startBar2000.append("text") 152 | .attr("class", "city_2000") 153 | .attr("x", (loc2000bar + barWidth/2)) 154 | .attr("y", (barTotalHeight + 20)) 155 | .attr("text-anchor", "middle") 156 | .style("font-size", 14) 157 | .text(2000) 158 | .style("opacity", 0) 159 | .transition().duration(1000).delay(delay*1) 160 | .style("opacity", 1); 161 | //Text inside the 2000 bar 162 | startBar2000.append("text") 163 | .attr("class", "city_2000 startbar-inside") 164 | .attr("x", (loc2000bar + barWidth/2)) 165 | .attr("y", (barTotalHeight - yScale(total2000) + 15)) 166 | .style("text-anchor", "middle") 167 | .style("fill", "white") 168 | .text(numFormatSI(total2000)) 169 | .style("opacity", 0) 170 | .transition().duration(1000).delay(delay*1+2000) 171 | .style("opacity", 1); 172 | 173 | ////////////////////////////////////////////////////// 174 | /////////////////////// Bar 2010 ///////////////////// 175 | ////////////////////////////////////////////////////// 176 | 177 | //The number of people in 2010 178 | explanationText(varText = "", delay = delay, delayStep = 2); 179 | 180 | //Create the 2010 reddish bar 181 | startBar2010.append("rect") 182 | .attr("x", loc2010bar) 183 | .attr("y", barTotalHeight) 184 | .attr("class","city_2010") 185 | .attr("width", barWidth) 186 | .attr("height", 0) 187 | .transition().duration(2000).delay(delay*1)//First grow to 2000 number 188 | .attr("height", yScale(total2000)) 189 | .attr("y", (barTotalHeight - yScale(total2000))) 190 | .transition().duration(1500).delay(delay*1+2500)//Then grow to 2010 number 191 | .attr("height", yScale(total2010)) 192 | .attr("y", (barTotalHeight - yScale(total2010))); 193 | 194 | //Append the year 2010 at the bottom 195 | startBar2010.append("text") 196 | .attr("class", "city_2010") 197 | .attr("x", (loc2010bar + barWidth/2)) 198 | .attr("y", (barTotalHeight + 20)) 199 | .attr("text-anchor", "middle") 200 | .style("font-size", 14) 201 | .text(2010) 202 | .style("opacity", 0) 203 | .transition().duration(1000).delay(delay*1) 204 | .style("opacity", 1); 205 | //Text inside the 2010 bar 206 | startBar2010.append("text") 207 | .attr("class", "city_2010 startbar-inside") 208 | .attr("x", (loc2010bar + barWidth/2)) 209 | .attr("y", (barTotalHeight - yScale(total2010) + 15)) 210 | .style("text-anchor", "middle") 211 | .style("fill", "white") 212 | .text(numFormatSI(total2010)) 213 | .style("opacity", 0) 214 | .transition().duration(1000).delay(delay*1+3000) 215 | .style("opacity", 1); 216 | 217 | 218 | ////////////////////////////////////////////////////// 219 | ///////////////////// Difference ///////////////////// 220 | ////////////////////////////////////////////////////// 221 | //Growth 222 | explanationText(varText = "That is an increase of 34% in just 10 years, a difference of 200 million people
This would be the world’s sixth-largest population for any single country
", delay = delay, delayStep = 2); 223 | 224 | //Dashed vertical line 225 | startBar2000.append("line") 226 | .attr("x1", (loc2000bar + barWidth/2)) 227 | .attr("x2", (loc2000bar + barWidth/2)) 228 | .attr("y1", yScale(total2010-total2000)) 229 | .attr("y2", yScale(total2010-total2000)) 230 | .style("stroke","#AAAAAA") 231 | .style("stroke-dasharray", ("7, 4")) 232 | .style("stroke-width", 1.5) 233 | .transition().duration(2000).delay(delay*2) 234 | .attr("y2", 2); 235 | //Horizontal line 236 | startBar2000.append("line") 237 | .attr("x1", loc2000bar) 238 | .attr("x2", (loc2000bar + barWidth)) 239 | .attr("y1", 2) 240 | .attr("y2", 2) 241 | .style("stroke","#AAAAAA") 242 | .style("stroke-width", 1.5) 243 | .style("opacity", 0) 244 | .transition().duration(500).delay(delay*2+1500) 245 | .style("opacity", 1); 246 | 247 | //Make text disappear 248 | d3.select("#explanation") 249 | .transition().duration(1000).delay(delay*3.4) 250 | .style("opacity",0) 251 | .call(endall, function() { 252 | d3.select("#explanation") 253 | .style("visibility","hidden"); 254 | }); 255 | 256 | //Remove lines above 2000 257 | startBar2000.selectAll("line") 258 | .transition().duration(1000).delay(delay*3.4) 259 | .style("opacity", 0) 260 | .call(endall, function() { 261 | startBar2000.selectAll("line") 262 | .remove(); 263 | }); 264 | 265 | setTimeout(introduceCities, delay*3.4); 266 | 267 | }//startBar -------------------------------------------------------------------------------- /js/totalAreaMap.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////// 2 | /////////////////////////////// Map View ////////////////////////////////// 3 | /////////////////////////////////////////////////////////////////////////// 4 | 5 | var rScale = d3.scale.sqrt(); 6 | var rVar = "pop"; 7 | 8 | //This function shows the map and moves the circles to their geo locations 9 | function totalAreaMap() { 10 | 11 | setTimeout(function() {counter = 3;}, 1000); 12 | 13 | modus = "Map"; 14 | 15 | //Set the progress circles 16 | setCircleProgress(2); 17 | 18 | ////////////////////////////////////////////////////// 19 | ////////////////// Hide & Remove ///////////////////// 20 | ////////////////////////////////////////////////////// 21 | 22 | //Activate the back button 23 | d3.select("#clickerBack").classed("activeButton",true); 24 | d3.select("#clickerBack").classed("inactiveButton",false); 25 | //Activate the front button 26 | d3.select("#clickerFront").classed("activeButton",true); 27 | d3.select("#clickerFront").classed("inactiveButton",false); 28 | //Change text of front button 29 | d3.select("#clickerFront").html("Continue"); 30 | 31 | //Remove the intro explanation 32 | d3.select("#explanationIntro") 33 | .transition().duration(1000) 34 | .style("opacity",0) 35 | .call(endall, function() { 36 | d3.select("#explanationIntro") 37 | .style("visibility","hidden"); 38 | }); 39 | 40 | //Show the buttons 41 | d3.select(".btn-group") 42 | .style("visibility", "visible"); 43 | 44 | //Remove the two bars - if present 45 | startBarChart.selectAll("g").remove(); 46 | 47 | //Reset the progress bar 48 | resetProgressBar(); 49 | 50 | //Remove slopegraph elements - if present 51 | slopes.selectAll(".slopes").remove(); 52 | text2000.selectAll("text").remove(); 53 | text2010.selectAll("text").remove(); 54 | slopeTitles.selectAll("text").remove(); 55 | 56 | //Remove color setting from dot-plot 57 | cities2010.selectAll(".city_2010") 58 | .style("fill","#DA6761"); 59 | 60 | //Remove dot histogram axis & text - if present 61 | dotWrapper.selectAll("g").remove(); 62 | dotWrapper.selectAll("text").remove(); 63 | 64 | //Make text & call-out disappear - if present 65 | d3.select("#explanation") 66 | .transition().duration(1000) 67 | .style("opacity",0) 68 | .call(endall, function() { 69 | d3.select("#explanation") 70 | .style("visibility","hidden"); 71 | 72 | d3.select("#callOut").style("visibility","hidden"); 73 | }); 74 | 75 | ////////////////////////////////////////////////////// 76 | ////////////////////// Initialize //////////////////// 77 | ////////////////////////////////////////////////////// 78 | 79 | //Show the text in the top right corner 80 | d3.select("#section") 81 | .style("visibility","visible") 82 | .transition().duration(1000) 83 | .style("opacity",1); 84 | 85 | //Show the text & button on the right 86 | d3.select("#section") 87 | .transition().delay(100) 88 | .style("opacity",0) 89 | .call(endall, function() { 90 | d3.select("#section") 91 | .style("visibility","visible"); 92 | //Change title in top right corner 93 | d3.select("#sectionTitle") 94 | .style("opacity",1) 95 | .html("Cities with over 100,000 inhabitants"); 96 | //Change text in top right corner 97 | d3.select("#sectionText") 98 | .html('The urban areas in this research have 100,000 or more inhabitants in 2010. In 2000 there were already 580 million people living in these 869 cities and just one decade on this number grew to 780 million. That’s 200 million people more!
With this amount of people of the move, it becomes imperative for cities to plan for their arrival in terms of housing and infrastructure
Click on the buttons below to see the differences of the urban population, urban land or urban population density per city or hover over the plots to get more detailed information
'); 100 | }) 101 | .transition().duration(1000) 102 | .style("opacity",1); 103 | 104 | //Increase opacity of the map 105 | map.selectAll(".geo-path") 106 | .attr("visibility", "visible") 107 | .style("stroke-opacity", 1) 108 | .style("fill-opacity", 1); 109 | 110 | setTimeout(initiateBarChart(), 1000); 111 | 112 | //Plot the sizes of the cities in 2010 in reddish 113 | //On the same location plot the sizes of the cities in 2000 in greyish 114 | if (rVar == "pop") {totalPopulationMap();}; 115 | if (rVar == "land") {totalUrbanLandMap();}; 116 | if (rVar == "density") {totalDensityMap();}; 117 | 118 | }//totalAreaMap 119 | 120 | function totalPopulationMap() { 121 | rScale.domain([d3.min(data, function(d) {return d.pop_2000;}),d3.max(data, function(d) {return d.pop_2010;})]) 122 | .range([1,20]); 123 | rVar = "pop" 124 | changeMap(); 125 | }//totalPopulationMap 126 | 127 | function totalUrbanLandMap() { 128 | rScale.domain([d3.min(data, function(d) {return d.land_2000;}),d3.max(data, function(d) {return d.land_2010;})]) 129 | .range([1,20]); 130 | rVar = "land" 131 | changeMap(); 132 | }//totalUrbanLandMap 133 | 134 | function totalDensityMap() { 135 | rScale.domain([d3.min(data, function(d) {return d.density_2000;}),d3.max(data, function(d) {return d.density_2010;})]) 136 | .range([1,8]); 137 | rVar = "density" 138 | changeMap(); 139 | }//totalDensityMap 140 | 141 | //Change the dots on the map 142 | function changeMap() { 143 | //Plot the sizes of the cities in 2010 in reddish 144 | cities2010.selectAll(".city_2010") 145 | .on("mouseover", showOne) 146 | .on("mouseout", showAll) 147 | .transition().duration(1500) 148 | .attr("r", function(d) {return eval("rScale(d." + rVar + "_2010)");}) 149 | .style("fill-opacity", 0.5) 150 | .attr("cx", function(d) {return projection([d.longitude, d.latitude])[0];}) 151 | .attr("cy", function(d) {return projection([d.longitude, d.latitude])[1];}); 152 | 153 | //On the same location plot the sizes of the cities in 2000 in greyish 154 | cities2000.selectAll(".city_2000") 155 | .on("mouseover", showOne) 156 | .on("mouseout", showAll) 157 | .transition().duration(1500) 158 | .attr("r", function(d) {return eval("rScale(d." + rVar + "_2000)");}) 159 | .style("fill-opacity", 0.7) 160 | .attr("cx", function(d) {return projection([d.longitude, d.latitude])[0];}) 161 | .attr("cy", function(d) {return projection([d.longitude, d.latitude])[1];}); 162 | }//changeMap -------------------------------------------------------------------------------- /js/urbanPopDot.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////// 2 | ///////////////////////////// Scatter plot GDP //////////////////////////// 3 | /////////////////////////////////////////////////////////////////////////// 4 | 5 | var yBarScale = d3.scale.linear(); 6 | var barDimWidth = 400, 7 | barDimHeight = 500, 8 | barX = 50, 9 | barY = 40, 10 | dotSize = 6; 11 | 12 | function callScatter() { 13 | 14 | setTimeout(function() {counter = 9;}, 1000); 15 | 16 | //Set the progress circles 17 | setCircleProgress(8); 18 | 19 | ////////////////////////////////////////////////////// 20 | ////////////////// Hide & Remove ///////////////////// 21 | ////////////////////////////////////////////////////// 22 | 23 | //Activate the back button 24 | d3.select("#clickerBack").classed("activeButton",true); 25 | d3.select("#clickerBack").classed("inactiveButton",false); 26 | //Activate the front button 27 | d3.select("#clickerFront").classed("activeButton",true); 28 | d3.select("#clickerFront").classed("inactiveButton",false); 29 | d3.select("#clickerFront").html("Finish"); 30 | 31 | //Reset the progress bar 32 | resetProgressBar(); 33 | 34 | //Remove the two bars - if present 35 | startBarChart.selectAll("g").remove(); 36 | 37 | //Hide call-out 38 | d3.select("#callOut").style("visibility","hidden"); 39 | 40 | //Remove previous slope elements 41 | slopes.selectAll(".slopes").remove(); 42 | text2000.selectAll("text").remove(); 43 | text2010.selectAll("text").remove(); 44 | slopeTitles.selectAll("text").remove(); 45 | 46 | //Show the text & button on the right 47 | d3.select("#section") 48 | .transition().delay(100) 49 | .style("opacity",0) 50 | .call(endall, function() { 51 | d3.select("#section") 52 | .style("visibility","visible"); 53 | 54 | //Change title in top right corner 55 | d3.select("#sectionTitle") 56 | .html("Urbanization and economic prosperity"); 57 | //Change text in top right corner 58 | d3.select("#sectionText") 59 | .html('Even though it would almost appear as if all inhabitants of East Asia live in cities, the large majority of the citizens currently still live in rural areas. Continuous urban growth is therefore expected to occur in the coming decades
' + 60 | 'The current view reveals a correlation between a rise in the urban population as a percentage to the whole population and an increase in the GDP (for the countries where GDP information is available) showing a glance of the possible economic prosperity that continuous urban growth might bring to an urban area and people that might move here in the coming future
' + 61 | 'For now, one can only speculate about the impact the continuous move towards cities will have on the social and economic circumstances of these families and areas. However, with more investment into research on the factors that influence the positive side of urbanization a future might be created in which more urban areas can be a place of constant development and continuous economic and social opportunities
' + 62 | 'To see which country belongs to each circle-line element hover over the plot on the left
'); 63 | }) 64 | .transition().duration(1000) 65 | .style("opacity",1); 66 | 67 | //Hide the buttons 68 | d3.select(".btn-group") 69 | .style("visibility", "hidden"); 70 | 71 | //Remove the intro explanation 72 | d3.select("#explanationIntro") 73 | .transition().duration(1000) 74 | .style("opacity",0) 75 | .call(endall, function() { 76 | d3.select("#explanationIntro") 77 | .style("visibility","hidden"); 78 | }); 79 | 80 | //Make text & call-out disappear - if present 81 | d3.select("#explanation") 82 | .transition().duration(1000) 83 | .style("opacity",0) 84 | .call(endall, function() { 85 | d3.select("#explanation") 86 | .style("visibility","hidden"); 87 | }); 88 | 89 | //Remove map - if present 90 | map.selectAll(".geo-path") 91 | .transition().duration(2000) 92 | .style("stroke-opacity", 0) 93 | .style("fill-opacity", 0) 94 | .call(endall, function() { 95 | map.selectAll(".geo-path") 96 | .attr("visibility", "hidden"); 97 | }); 98 | 99 | //Remove dot histogram axis & text 100 | dotWrapper.selectAll("g") 101 | .transition().duration(1000) 102 | .style("opacity", 0) 103 | .remove(); 104 | dotWrapper.selectAll("text") 105 | .transition().duration(1000) 106 | .style("opacity", 0) 107 | .remove(); 108 | 109 | //Remove 2000 cities 110 | cities2000.selectAll(".city_2000") 111 | .transition().duration(1000) 112 | .attr("r", 0) 113 | .style("fill-opacity", 0); 114 | 115 | //Remove 2010 cities 116 | cities2010.selectAll(".city_2010") 117 | .style("fill", null) 118 | .transition().duration(1000) 119 | .attr("r", 0) 120 | .style("fill-opacity", 0); 121 | 122 | //Remove all previous elements of the bar chart 123 | barChart.selectAll("g").remove(); 124 | barWrappingOther.selectAll("g").remove(); 125 | 126 | ////////////////////////////////////////////////////// 127 | ////////////////////// Initialize //////////////////// 128 | ////////////////////////////////////////////////////// 129 | 130 | 131 | //Set the new x axis range 132 | barScale 133 | .range([0, barDimWidth]) 134 | .domain([0,0.7]); 135 | //Set new x-axis 136 | xAxis 137 | .ticks(8) 138 | .scale(barScale) 139 | .tickFormat(numFormatPercent); 140 | 141 | //Set the new y axis range 142 | yBarScale 143 | .range([barDimHeight,100]) 144 | .domain([0, 70000]); 145 | yAxis 146 | .tickFormat(numFormatCurrency) 147 | .scale(yBarScale); 148 | 149 | //Move bar chart to the new location 150 | barChart 151 | .style("visibility","visible") 152 | .attr("width", barDimWidth) 153 | .attr("height", barDimHeight) 154 | .attr("transform","translate(" + barX + "," + barY + ")") 155 | .style("opacity",0) 156 | .transition().duration(1000) 157 | .style("opacity",1); 158 | //Move the axes wrapper 159 | barWrappingOther 160 | .style("visibility","visible") 161 | .attr("width", barDimWidth) 162 | .attr("height", 20) 163 | .attr("transform","translate(" + barX + ", " + (barY + barDimHeight) +")") 164 | .style("opacity",0) 165 | .transition().duration(1000) 166 | .style("opacity",1); 167 | 168 | //Create a group for each bar 169 | var bar = barChart.selectAll("g") 170 | .data(countries) 171 | .enter().append("g") 172 | .filter(function(d) {return d.country != "Singapore" & d.gdp_2000 != 0;}) 173 | .attr("class", "barWrapper") 174 | .style("visibility","visible") 175 | .attr("transform", function(d, i) { return "translate(75,0)"; }); 176 | 177 | //Already append a few lines for later 178 | bar.append("line") 179 | .attr("class", "line-connect") 180 | .style("stroke-width", 1) 181 | .attr("stroke", "#858483") 182 | .style("opacity", 0); 183 | 184 | //Create the 2010 circles 185 | bar.append("rect") 186 | .attr("class","city_2010") 187 | .style("fill-opacity", 0) 188 | .attr("rx",dotSize) 189 | .attr("ry",dotSize) 190 | .attr("width",dotSize) 191 | .attr("height",dotSize) 192 | .attr("transform", function (d) { 193 | return "translate(" + (barScale(d.pop_perc_2010) - dotSize/2) + "," + (yBarScale(d.gdp_2010) - dotSize/2) + ")"; 194 | }); 195 | 196 | //Create the 2010 circles 197 | bar.append("rect") 198 | .attr("class","city_2000") 199 | .style("fill-opacity", 0) 200 | .attr("rx",dotSize) 201 | .attr("ry",dotSize) 202 | .attr("width",dotSize) 203 | .attr("height",dotSize) 204 | .attr("transform", function (d) { 205 | return "translate(" + (barScale(d.pop_perc_2000) - dotSize/2) + "," + (yBarScale(d.gdp_2000) - dotSize/2) + ")"; 206 | }); 207 | 208 | //Append the x-axis 209 | barWrappingOther.append("g") 210 | .attr("class", "x axis") 211 | .attr("transform", "translate(75," + 10 + ")"); 212 | 213 | //Append the y-axis 214 | barWrappingOther.append("g") 215 | .attr("class", "y axis"); 216 | 217 | //Create the x axis 218 | barWrappingOther.selectAll(".x.axis") 219 | .style("opacity", 0) 220 | .call(xAxis) 221 | .transition().duration(1000).delay(1000) 222 | .style("opacity", 1); 223 | barWrappingOther.selectAll(".x.axis text") 224 | .style("font-size", "10px"); 225 | //Set up X axis label 226 | barWrappingOther.append("g") 227 | .append("text") 228 | .attr("class", "x label titleTop") 229 | .attr("text-anchor", "middle") 230 | .attr("transform", "translate(" + (75 + barDimWidth/2) + "," + 60 + ")") 231 | .style("font-size", "15px") 232 | .style("opacity", 0) 233 | .text("% of population living in urban areas of 100,000 people or more") 234 | .transition().duration(1000).delay(1000) 235 | .style("opacity", 1); 236 | 237 | setTimeout(createScatter, 1000); 238 | 239 | }//callScatter 240 | 241 | function createScatter() { 242 | 243 | d3.select("#clickerFront").html("Finish"); 244 | 245 | //Create the y axis 246 | barWrappingOther.select(".y.axis") 247 | .attr("transform", "translate(65," + -barDimHeight + ")") 248 | .style("opacity", 0) 249 | .transition().duration(1000) 250 | .style("opacity", 1) 251 | .call(yAxis); 252 | barWrappingOther.selectAll(".y.axis text") 253 | .style("font-size", "10px"); 254 | 255 | //Set up y axis label 256 | barWrappingOther.append("g") 257 | .append("text") 258 | .attr("class", "y label titleTop") 259 | .attr("text-anchor", "middle") 260 | .attr("transform", "translate(65, " + -(55+barDimHeight-100) + ")") 261 | .style("font-size", "15px") 262 | .style("opacity", 0) 263 | .text("GDP per capita") 264 | .transition().duration(1000) 265 | .style("opacity", 1); 266 | barWrappingOther.append("g") 267 | .append("text") 268 | .attr("class", "y label subTitle") 269 | .attr("transform", "translate(65, " + -(35+barDimHeight-100) + ")") 270 | .style("opacity", 0) 271 | .text("purchasing power parity") 272 | .transition().duration(1000) 273 | .style("opacity", 1); 274 | barWrappingOther.append("g") 275 | .append("text") 276 | .attr("class", "y label subTitle") 277 | .attr("transform", "translate(65, " + -(19+barDimHeight-100) + ")") 278 | .style("opacity", 0) 279 | .text("current international $") 280 | .transition().duration(1000) 281 | .style("opacity", 1); 282 | 283 | //Move the 2000 dots to the correct height 284 | barChart.selectAll(".city_2000") 285 | .on("mouseover", countryHover) 286 | .on("mouseout", countryOut) 287 | .transition().duration(1000) 288 | .style("fill-opacity", 1) 289 | .attr("transform", function (d) { 290 | return "translate(" + (barScale(d.pop_perc_2000) - dotSize/2) + "," + (yBarScale(d.gdp_2000) - dotSize/2) + ")"; 291 | }); 292 | //Move the 2010 dots to the correct height 293 | barChart.selectAll(".city_2010") 294 | .on("mouseover", countryHover) 295 | .on("mouseout", countryOut) 296 | .transition().duration(1000) 297 | .style("fill-opacity", 1) 298 | .attr("transform", function (d) { 299 | return "translate(" + (barScale(d.pop_perc_2010) - dotSize/2) + "," + (yBarScale(d.gdp_2010) - dotSize/2) + ")"; 300 | }); 301 | 302 | //Move the lines between the dots to the correct height 303 | barChart.selectAll("line") 304 | .on("mouseover", countryHover) 305 | .on("mouseout", countryOut) 306 | .transition().duration(1000) 307 | .style("opacity", 1) 308 | .attr("x1", function(d) {return barScale(d.pop_perc_2000);}) 309 | .attr("x2", function(d) {return barScale(d.pop_perc_2010);}) 310 | .attr("y1", function(d) {return yBarScale(d.gdp_2000);}) 311 | .attr("y2", function(d) {return yBarScale(d.gdp_2010);}); 312 | 313 | 314 | }//createScatter 315 | 316 | //Show country name in the last GDP scatterplot 317 | function countryHover(d) { 318 | //Change the numbers to reflect the hovered over city 319 | d3.select("#callOutCountry").html(d.country); 320 | //Make the callOut visible again 321 | d3.select("#callOutCountryWrapper") 322 | .style("visibility","visible") 323 | //.transition().duration(500) 324 | .style("opacity", 1); 325 | }//countryHover 326 | 327 | //Hide callout again 328 | function countryOut() { 329 | //Make the callOut hidden 330 | d3.select("#callOutCountryWrapper") 331 | .transition().duration(500) 332 | .style("opacity", 0) 333 | .call(endall, function() { 334 | d3.select("#callOutCountryWrapper") 335 | .style("visibility","hidden"); 336 | }); 337 | }//countryOut 338 | --------------------------------------------------------------------------------