Gooey effect - Data visualization showcase

Built with blockbuilder.org Forked from https://bl.ocks.org/nbremer/8df57868090f11e59175804e2062b2aa

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		
		<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
	
		<style>
			body {
				font-family: 'Open Sans', sans-serif;
				text-align: center;
				font-weight: 300;
			}
			
		  	.title {
		    	font-size: 30px;
		    	color: #4F4F4F;
		  	}

.subtitle {
		    	font-size: 14px;
		    	color: #AAAAAA;
				padding-bottom: 15px;
		  	}

.geo-path {
				stroke: white;
				stroke-width: 0.5px;
				stroke-opacity: 1;
				fill: #C0AA91;
				fill-opacity: 1;
			}

.cities,  .cityCover{
				fill: #1A818C;
			}

.label {
				font-size: 18px;
				text-anchor: middle;
				fill: #707070;
				font-family: 'Poiret One', cursive;
				font-weight: 400;
			}
		</style>
	
		
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

</head>	
	<body>

<div class="title">The 150 largest Cities in the World</div>
		<div class="subtitle">sized to population</div>		
		<div id="chart"></div>
		
		<script src="countriesMap.js"></script>
		<script src="populations.js"></script>

///////////////////////////////////////////////////////////////////////////
			//////////////////// Set up and initiate svg containers ///////////////////
			///////////////////////////////////////////////////////////////////////////

var margin  = {
				top: 100,
				right: 0,
				bottom: 0,
				left: 0
			};
			var width = 960 - margin.left - margin.right,
				height = 600 - margin.top - margin.bottom;
						
			//SVG container
			var svg = d3.select('#chart')
				.append("svg")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom)
				.append("g")
				.attr("transform", "translate(" + (margin.left) + "," + (margin.top) + ")");

///////////////////////////////////////////////////////////////////////////
			///////////////////////////// Create filter ///////////////////////////////
			///////////////////////////////////////////////////////////////////////////

//SVG filter for the gooey effect
			//Code taken from https://tympanus.net/codrops/2015/03/10/creative-gooey-effects/
			var defs = svg.append("defs");
			var filter = defs.append("filter").attr("id","gooeyCodeFilter");
			filter.append("feGaussianBlur")
				.attr("in","SourceGraphic")
				.attr("stdDeviation","10")
				//to fix safari: https://stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image
				.attr("color-interpolation-filters","sRGB") 
				.attr("result","blur");
			filter.append("feColorMatrix")
				.attr("class", "blurValues")
				.attr("in","blur")
				.attr("mode","matrix")
				.attr("values","1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -5")
				.attr("result","gooey");
			filter.append("feBlend")
				.attr("in","SourceGraphic")
				.attr("in2","gooey")
				.attr("operator","atop");

///////////////////////////////////////////////////////////////////////////
			//////////////////////////// Set-up Map /////////////////////////////////
			///////////////////////////////////////////////////////////////////////////

//Variables for the map
			var projection = d3.geo.mercator()
					.scale(170)
					.translate([480,230]);
	  
			var path = d3.geo.path()
					.projection(projection);
	
			var map = svg.append("g")
						.attr("class", "map");

//Initiate the world map
			map.selectAll(".geo-path")
				.data(countriesMap[0].features)
				.enter().append("path")
					.attr("class", function(d) { return "geo-path" + " " + d.id; })
					.attr("id", function(d) { return d.properties.name; })
					.attr("d", path)
					.style("stroke-opacity", 1)
					.style("fill-opacity", 0.5);

///////////////////////////////////////////////////////////////////////////
			//////////////////////////////// Cities ///////////////////////////////////
			///////////////////////////////////////////////////////////////////////////

//Radius scale
			var rScale = d3.scale.sqrt()
				.range([0,14])
				.domain([0, d3.max(populations, function(d) { return d.population; })]);

//Put the city locations into the data itself
			populations.forEach(function(d,i) {
					d.radius = rScale(d.population);
					d.x = projection([d.longitude, d.latitude])[0];
					d.y = projection([d.longitude, d.latitude])[1];
			});

//Wrapper for the cities
			var cityWrapper = svg.append("g")
				.attr("class", "cityWrapper")
				.style("filter", "url(#gooeyCodeFilter)");
				
			//Place the city circles
			var cities = cityWrapper.selectAll(".cities")
				.data(populations)
				.enter().append("circle")
				.attr("class", "cities")
				.attr("r", function(d) { return d.radius ;})
				.attr("cx", projection([0,0])[0])
				.attr("cy", projection([0,0])[1])
				.style("opacity", 1);

var coverCirleRadius = 40;
			//Circle over all others
			cityWrapper.append("circle")
				.attr("class", "cityCover")
				.attr("r", coverCirleRadius)
				.attr("cx", projection([0,0])[0])
				.attr("cy", projection([0,0])[1]);

///////////////////////////////////////////////////////////////////////////
			/////////////////////////// Country Labels ////////////////////////////////
			///////////////////////////////////////////////////////////////////////////

//Calculate the centers for each country
			var centers = getCenters("country", [width, height/0.8]);
			centers.forEach(function(d) {
					d.y = d.y - 100;
					d.x = d.x + 0;
			});//centers forEach

//Wrapper for the country labels
			var labelWrapper = svg.append("g")
				.attr("class", "labelWrapper");
				
			//Append the country labels
		    labelWrapper.selectAll(".label")
		      	.data(centers)
		      	.enter().append("text")
		      	.attr("class", "label")
		      	.style("opacity", 0)
		      	.attr("transform", function (d) { return "translate(" + (d.x) + ", " + (d.y - 60) + ")"; })
		      	.text(function (d) { return d.name });
																			
			///////////////////////////////////////////////////////////////////////////
			/////////////////////////// Set-up the force //////////////////////////////
			///////////////////////////////////////////////////////////////////////////

var force = d3.layout.force()
				.gravity(.02)
		    	.charge(0)
		    	.on("tick", tick(centers, "country"));	
		
			var padding = 0;
			var maxRadius = d3.max(populations, function(d) { return d.radius; });

///////////////////////////////////////////////////////////////////////////
			///////////////////////////// Do the loop /////////////////////////////////
			///////////////////////////////////////////////////////////////////////////	
					
			loop();	
			setInterval(loop, 15000);
			
			function loop() {
				placeCities();
				setTimeout(clusterCountry, 7000);
				setTimeout(backToCenter, 12000);
			}//loop
						
			///////////////////////////////////////////////////////////////////////////
			/////////////////////////// Animation steps ///////////////////////////////
			///////////////////////////////////////////////////////////////////////////	
					
			//Move the cities from the center to their actual locations
			function placeCities () {

//Stop the force layout (in case you move backward)
				force.stop();

//Make the cover circle shrink
				d3.selectAll(".cityCover")
						.transition().duration(5000)
						.attr("r", 0);

//Put the cities in their geo location
				d3.selectAll(".cities")
					.transition("move").duration(2000)
					.delay(function(d,i) { return i*20; })
					.attr("r", function(d) {
						return d.radius = rScale(d.population);
					})
					.attr("cx", function(d) {
						return d.x = projection([d.longitude, d.latitude])[0];
					})
					.attr("cy", function(d) {
						return d.y = projection([d.longitude, d.latitude])[1];
					});
						
				//Around the end of the transition above make the circles see-through a bit
				d3.selectAll(".cities")
					.transition("dim").duration(2000).delay(4000)
					.style("opacity", 0.8);

//"Remove" gooey filter from cities during the transition
				//So at the end they do not appear to melt together anymore
				d3.selectAll(".blurValues")
					.transition().duration(4000)
					.attrTween("values", function() { 
						return d3.interpolateString("1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -5", 
													"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 6 -5"); 
					});

}//placeCities

//Cluster all the cities based on the country
			function clusterCountry() {

///Start force again
				force.start();

//Dim the map
				d3.selectAll(".geo-path")
					.transition().duration(1000)
					.style("fill-opacity", 0);
					
				//Show the labels
				d3.selectAll(".label")
					.transition().duration(500)
					.style("opacity", 1);

d3.selectAll(".cities")
					.transition().duration(1000)
					.style("opacity", 1);

//Reset gooey filter values back to a visible "gooey" effect
			   	d3.selectAll(".blurValues")
					.transition().duration(2000)
					.attrTween("values", function() { 
						return d3.interpolateString("1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 6 -5", 
													"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -6"); 
					});

}//clusterCountry

//Move the circles back to the center location again
			function backToCenter () {

//Stop the force layout
				force.stop();

//Hide labels
				d3.selectAll(".label")
					.transition().duration(500)
					.style("opacity", 0);

//Show map
				d3.selectAll(".geo-path")
					.transition().duration(1000)
					.style("fill-opacity", 0.5);
				
			   	//Make the cover cirlce to its true size again
			    d3.selectAll(".cityCover")
					.transition().duration(3000).delay(500)
					.attr("r", coverCirleRadius);

//Move the cities to the 0,0 coordinate
				d3.selectAll(".cities")
					.transition()
					.duration(2000).delay(function(d,i) { return i*10; })
					.attr("cx", projection([0, 0])[0])
					.attr("cy", projection([0, 0])[1])
					.style("opacity", 1);
					
				d3.selectAll(".blurValues")
					.transition().duration(1000).delay(1000)
					.attrTween("values", function() {
						return d3.interpolateString("1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -6",
													"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -5");
					});

}//backToCenter
	
		 	///////////////////////////////////////////////////////////////////////////
			/////////////////////////// Helper functions //////////////////////////////
			///////////////////////////////////////////////////////////////////////////

//Radial layout
			function getCenters (vname, size) {
			  	var centers = [], 
					mapping,
					flags = [];
				for( var i = 0; i < populations.length; i++) {
				    if( flags[populations[i][vname]]) continue;
				    flags[populations[i][vname]] = true;
				    centers.push({name: populations[i][vname], value: 1});
				}//for i
			  	centers.sort(function(a, b){ return d3.ascending(a.name, b.name); });

mapping = d3.layout.pack()
			  		.sort(function(d) { return d[vname]; })
			  		.size(size);
			  	mapping.nodes({children: centers});

return centers;
			}//getCenters
	
			//Radial lay-out
			function tick (centers, varname) {
				var foci = {};
				for (var i = 0; i < centers.length; i++) {
					foci[centers[i].name] = centers[i];
				}
	  
				return function (e) {
					for (var i = 0; i < populations.length; i++) {
					  var o = populations[i];
					  var f = foci[o[varname]];
					  o.y += (f.y - o.y) * e.alpha;
					  o.x += (f.x - o.x) * e.alpha;
					}//for

d3.selectAll(".cities")
						.each(collide(.5))
						.attr("cx", function (d) { return d.x; })
						.attr("cy", function (d) { return d.y; });

}//function
			}//tick

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js