treemap transitions

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Treemap</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.layout.js"></script>
	<script type="text/javascript" src="https://simiantics.net/d3/lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="https://simiantics.net/d3/lib/jquery-ui/jquery-ui.min.js"></script>
	<style type="text/css"> @import url("https://simiantics.net/d3/lib/jquery-ui/jquery-ui.css"); text { font-family: sans-serif; } </style>  
    <script type="text/javascript" src="https://simiantics.net/treemap_usa.js"></script>
  </head>
  <body>
    <script type="text/javascript">
		
		// setup initial params
		var w = 1000,
			h = 450,
			min_labeled_cf = .005,
			max_color_cf = .3,
			ysa = 'def',
			change_duration = 500,
			iso3 = 'USA',
			year = '00',
			sex = 'F',
			age = '30';
		
                // some dummy code for the public version
                countries = [{'name':'United States','code':'USA'}, {'name':'China','code':'CHN'}]

// country combo box
		country_combo_div = d3.select('body')
		  .append('div')
			.style('position', 'absolute')
			.style('left', 		'700px')
			.style('top', 		'2px')
			.style('width', 	'450px');
		 country_combo = country_combo_div.append('select')
			.attr('onchange', 'change_country(value)')
			.attr('id', 'country_combo');
		for (i=0; i<countries.length; i++) {
			country_combo.append('option')
				.attr('value', countries[i].code)
				.text(countries[i].name.replace(/&nbsp;/g, '\u00a0'))
				.attr((countries[i].code.substr(0,3) == 'SR_' || countries[i].code.substr(0,2) == 'R_') ? 'disabled' : 'ignoreme', 'true')
				.attr(countries[i].code == 'USA' ? 'selected' : 'ignoreme', 'true');
		}
		
		// buttons to increment combo box
		function incrementCountries(){
			var x = document.getElementById('country_combo');
			do{
				if(x.selectedIndex == x.options.length-1)
					x.selectedIndex = 0;
				else
					x.selectedIndex = x.selectedIndex+1;
			} while(x.options[x.selectedIndex].disabled == true);
			change_country(x.options[x.selectedIndex].value);
		}
		function decrementCountries(){
			var x = document.getElementById('country_combo');
			do{
				if(x.selectedIndex == 0)
					x.selectedIndex = x.options.length-1;
				else
					x.selectedIndex = x.selectedIndex-1;
			} while(x.options[x.selectedIndex].disabled == true);
			change_country(x.options[x.selectedIndex].value);
		}
		country_combo_div.append('button').attr('type', 'button').text('<-').attr('onclick', 'decrementCountries();');
		country_combo_div.append('button').attr('type', 'button').text('->').attr('onclick', 'incrementCountries();');
		
		// age sliders
		age_title = d3.select('body')
		  .append('div')
			.style	('position',	'absolute')
			.style	('left', 		'10px')
			.style	('top', 		'5px')
			.style	('width', 		'100px')
		  .append('span')
			.text	('Age')
			.style	('font-family', 'sans-serif')
			.style	('font-weight',	'bold');

// play button for age slider 
		age_play = d3.select('body')
		  .append('div')
			.style	('position',	'absolute')
			.style	('left', 		'50px')
			.style	('top', 		'5px')
			.style	('width', 		'20px')
		  .append('img')
			.attr	('src', 		'https://simiantics.net/play.png')
			.attr	('alt', 		'Play')
			.attr	('onclick', 	'play_age()');
		
		// a div to contain the slider
		age_slider_div = d3.select('body')
		  .append('div')
			.attr	('id', 			'age_slider')
			.style	('position', 	'absolute')
			.style	('left', 		'85px')
			.style	('top', 		'7px')
			.style	('width', 		'500px');
		
		// the age slider itself
		var display_age = '30 to 34', slider_age = age, age_touched = 0;
		$('#age_slider').slider({
			min: 		-15,
			max: 		80,
			value: 		slider_age,
			width: 		'100px',
			animate: 	true,
			step: 		5,
			slide: 		function(event, ui) { refresh_age(ui.value); }
		});
		
		// text to indicate the currently selected age
		age_label = d3.select('body')
		  .append('div')
			.attr	('id', 			'age_label')
			.style	('position', 	'absolute')
			.style	('left', 		'605px')
			.style	('top', 		'5px')
			.style	('width', 		'125px')
		  .append('span')
			.text	(display_age)
			.style	('font-family', 'sans-serif')
			.style	('font-weight',	'bold');
		
		// function to update the plot when a new age is selected
		function refresh_age(a) {
			// change the slider age to reflect whatever was just picked
			slider_age = a;
			age_touched = 1;
			// update the display ages to match what the slider is set to (again accounting for weirdness in the age cutpoints)
			switch(slider_age) {
				case -15: 	age = 'E'; 			display_age = 'Early Neonatal'; 						break;
				case -10: 	age = 'L'; 			display_age = 'Late Neonatal'; 							break;
				case -5: 	age = 'P'; 			display_age = 'Post Neonatal'; 							break;
				case 0: 	age = '1'; 			display_age = '1 to 4'; 								break;
				case 80: 	age = slider_age;	display_age = '80 plus'; 								break;
				default: 	age = slider_age; 	display_age = slider_age + ' to ' + (slider_age + 4); 	break;
			}
			// update the text specifying the current age
			age_label.text	(display_age);
			// refresh the tree
			ysa = year + sex + age;
			change_ysa(ysa, change_duration);
		}
		
		// function to step through age groups if the play button is clicked
		var age_timer = undefined;
		function play_age() {
			// if the map is already playing, then stop it
			if (age_timer) stop_age();
			else {
				// if we're at the last age group, start again at the beginning
				if (slider_age == 80 || age_touched == 0) {
					slider_age = -15;
					refresh_age(slider_age)
					$('#age_slider').slider('value', 	slider_age);
				}
				// change the play button into a stop button
				age_play.transition().attr	('src', 	'https://simiantics.net/stop.png');
				// increment the age groups
				age_timer = setInterval(function() {
					// stop if we've reached the last age group
					if (slider_age >= 80) stop_age();
					else {
						// deal with awkward age groups again
						switch(age) {
							case 0: 	age = .01; 		slider_age = -10; 			break;
							case .01: 	age = .1; 		slider_age = -5; 			break;
							case .1: 	age = 1; 		slider_age = 0; 			break;
							case 1: 	age = 5; 		slider_age = 5; 			break;
							default: 	age = age+5; 	slider_age = slider_age+5; 	break;
						}
					}
					// update the slider
					$('#age_slider').slider('value', 	slider_age);
					// update the map as though the slider were moved
					refresh_age(slider_age);
				// increment every 1 second
				}, 1000);
			}
		}
		
		// function to stop looping through ages
		function stop_age() {
			// clear the timer
			clearInterval(age_timer);
			age_timer = undefined;
			// change the stop button back into a play button
			age_play.transition().attr	('src', 	'https://simiantics.net/play.png');
		}
		
		// year sliders
		year_title = d3.select('body')
		  .append('div')
			.style	('position',	'absolute')
			.style	('left', 		'10px')
			.style	('top', 		'30px')
			.style	('width', 		'100px')
		  .append('span')
			.text	('Year')
			.style	('font-family', 'sans-serif')
			.style	('font-weight',	'bold');

// play button for year slider 
		year_play = d3.select('body')
		  .append('div')
			.style	('position',	'absolute')
			.style	('left', 		'50px')
			.style	('top', 		'30px')
			.style	('width', 		'20px')
		  .append('img')
			.attr	('src', 		'https://simiantics.net/play.png')
			.attr	('alt', 		'Play')
			.attr	('onclick', 	'play_year()');
		
		// a div to contain the slider
		year_slider_div = d3.select('body')
		  .append('div')
			.attr	('id', 			'year_slider')
			.style	('position', 	'absolute')
			.style	('left', 		'85px')
			.style	('top', 		'32px')
			.style	('width', 		'500px');
		
		// the year slider itself
		var slider_year = 2000, year_touched = 0;
		$('#year_slider').slider({
			min: 		1980,
			max: 		2010,
			value: 		slider_year,
			width: 		'100px',
			animate: 	true,
			step: 		1,
			slide: 		function(event, ui) { refresh_year(ui.value); }
		});
		
		// text to indicate the currently selected year
		year_label = d3.select('body')
		  .append('div')
			.attr	('id', 			'year_label')
			.style	('position', 	'absolute')
			.style	('left', 		'605px')
			.style	('top', 		'30px')
			.style	('width', 		'125px')
		  .append('span')
			.text	(slider_year)
			.style	('font-family', 'sans-serif')
			.style	('font-weight',	'bold');
		
		// function to update the plot when a new year is selected
		function refresh_year(y) {
			// change the slider year to reflect whatever was just picked
			slider_year = y;
			year_touched = 1;
			// update the display years to match what the slider is set to (again accounting for weirdness in the year cutpoints)
			year = (slider_year+'').substr(2,2)
			// update the text specifying the current age
			year_label.text	(slider_year);
			// refresh the tree
			ysa = year + sex + age;
			change_ysa(ysa, change_duration);
		}
		
		// function to step through year groups if the play button is clicked
		var year_timer = undefined;
		function play_year() {
			// if the map is already playing, then stop it
			if (year_timer) stop_year();
			else {
				// if we're at the last year group, start again at the beginning
				if (slider_year == 2010 || year_touched == 0) {
					slider_year = 1980;
					refresh_year(slider_year)
					$('#year_slider').slider('value', 	slider_year);
				}
				// change the play button into a stop button
				year_play.transition().attr	('src', 	'https://simiantics.net/stop.png');
				// increment the year groups
				year_timer = setInterval(function() {
					// stop if we've reached the last year group
					if (slider_year >= 2010) stop_year();
					else slider_year++;
					// update the slider
					$('#year_slider').slider('value', 	slider_year);
					// update the map as though the slider were moved
					refresh_year(slider_year);
				// increment every 1 second
				}, 1000);
			}
		}
		
		// function to stop looping through years
		function stop_year() {
			// clear the timer
			clearInterval(year_timer);
			year_timer = undefined;
			// change the stop button back into a play button
			year_play.transition().attr	('src', 	'https://simiantics.net/play.png');
		}
		
		// color interpolators for red/blue/green
		reds = d3.interpolate(d3.rgb(252,174,145), d3.rgb(165,15,21));
		blues = d3.interpolate(d3.rgb(189,215,231), d3.rgb(8,81,156));
		greens = d3.interpolate(d3.rgb(186,228,179), d3.rgb(0,109,44));
		
		// scale CF for coloring
		color_scale = d3.scale.sqrt().domain([0,max_color_cf]).clamp(true);
		
		// function to color based on category
		function color(d) {
			switch(d.name.substr(0,1)) {
				case 'A':
					return reds(color_scale(d[ysa]));
					break;
				case 'B':
					return blues(color_scale(d[ysa]));
					break;
				case 'C':
					return greens(color_scale(d[ysa]));
					break;
				default:
					return 'white';
					break;
			}
		}
		
		// make the treemap layout
		var treemap = d3.layout.treemap()
			.size([w+1, h+1])
			.value(function(d) { return d[ysa]; })
			.padding(1)
			.sticky(true)
			.sort(function(a,b) { return a.depth == 1 ? (a.name == "B" ? -1 : (a.name == "C" ? -1 : 1)) : b.value - a.value; });
		
		// create the visualization area
		var vis = d3.select('body')
		  .append('div')
			.attr	('id', 			'vis')
			.style	('position', 	'absolute')
			.style	('top', 		'50px')
		  .append('svg:svg')
			.style('width', w + 'px')
			.style('height', h + 'px')
		  .append('svg:g')
			.attr('transform', 'translate(-.5, -.5)');
		
		// make cells for each cause
		var cell = vis.selectAll('g')
			.data(treemap.nodes(USA))
		  .enter().append('svg:g')
			.attr('class', 'cell')
			.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
		
		// add a rectangle to each cell
		var rect = cell.append('svg:rect')
			.attr('width', function(d) { return d.dx; })
			.attr('height', function(d) { return d.dy; })
			.attr('stroke', 'white')
			.attr('stroke-width', function(d) { return d.depth == 0 ? 0 : 1; })
			.style('fill', function(d) { return d.children ? 'white' : color(d); });
		
		// label the cells
		label_sizes = d3.interpolate(8,50);
		label_sizer = d3.scale.sqrt().domain([min_labeled_cf, max_color_cf]).clamp(true);
		labels = cell.append('svg:text')
			.attr('x', function(d) { return d.dx/2; })
			.attr('y', function(d) { return d.dy/2; })
			.attr('font-size', function(d) { return label_sizes(label_sizer(d[ysa])); })
			.attr('text-anchor', 'middle')
			.attr('alignment-baseline', 'middle')
			.text(function(d) { return d.children ? null : (d[ysa] > min_labeled_cf ? d.short : null); });
		cell.append('svg:title')
			.text(function(d) { return d.children ? null : d.desc; });
		
		// function to change the year-sex-age (ysa)
		function change_ysa(new_ysa, dur) {
			ysa = new_ysa;
			cell.data(treemap.value(function(d) { return d[ysa]; }));
			refreshTree(dur);
		}	
		ysa = '00F30';
		change_ysa(ysa, 0);
		
		// function to change the country
		var iso3 = 'USA',
			loaded = {};
		loaded['USA'] = 1;
		function change_country(new_iso3) {
			iso3 = new_iso3;
			try { 
				update_text.remove(); 
			}
			catch(err) { 
			}
			if (typeof loaded[iso3]==='undefined') {
				update_text = d3.select('svg').append('svg:text').text('Updating...').attr('x', w/2).attr('y', h/2).style('fill', 'white').attr('font-size', 50).attr('text-anchor', 'middle').attr('alignment-baseline', 'middle').style('stroke', 'black');
				$.ajax({
					url: 'https://simiantics.net/treemap_' + new_iso3 + '.js',
					dataType: 'script',
					error: function() {
						update_text.transition().text('No Data');
					},
					success: function() {
						loaded[new_iso3] = 1;
						rebuild_tree();
						update_text.remove();
					}
				});
			}
			else rebuild_tree();
		}
		function rebuild_tree() {
			vis.selectAll('g').remove();
			treemap = d3.layout.treemap()
				.size([w+1, h+1])
				.value(function(d) { return d['def']; })
				.padding(1)
				.sticky(true)
				.sort(function(a,b) { return a.depth == 1 ? (a.name == "B" ? -1 : (a.name == "C" ? -1 : 1)) : b.value - a.value; });
			cell = vis.selectAll('g')
				.data(treemap.nodes(eval(iso3)))
			  .enter().append('svg:g')
				.attr('class', 'cell')
				.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
			rect = cell.append('svg:rect')
				.attr('width', function(d) { return d.dx; })
				.attr('height', function(d) { return d.dy; })
				.attr('stroke', 'white')
				.attr('stroke-width', function(d) { return d.depth == 0 ? 0 : 1; })
				.style('fill', function(d) { return d.children ? 'white' : color(d); });
			labels = cell.append('svg:text')
				.attr('x', function(d) { return d.dx/2; })
				.attr('y', function(d) { return d.dy/2; })
				.attr('font-size', function(d) { return label_sizes(label_sizer(d[ysa])); })
				.attr('text-anchor', 'middle')
				.attr('alignment-baseline', 'middle')
				.text(function(d) { return d.children ? null : (d[ysa] > min_labeled_cf ? d.short : null); });
			cell.append('svg:title')
				.text(function(d) { return d.children ? null : d.desc; });
			change_ysa(ysa, 0);
		}
		
		// function to resize the treemap
		function refreshTree(dur) {
			cell.transition().ease('linear').duration(dur).attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
			rect.transition().ease('linear').duration(dur).attr('width', function(d) { return d.dx; }).attr('height', function(d) { return d.dy; }).style('fill', function(d) { return d.children ? 'white' : color(d); });
			labels.transition().ease('linear').duration(dur).attr('x', function(d) { return d.dx/2; }).attr('y', function(d) { return d.dy/2; }).attr('font-size', function(d) { return label_sizes(label_sizer(d[ysa])); }).text(function(d) { return d.children ? null : (d[ysa] > min_labeled_cf ? d.short : null); });;
		}

</script>
  </body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

Modified http://mbostock.github.com/d3/d3.layout.js to a secure url

Modified http://simiantics.net/d3/lib/jquery/jquery.min.js to a secure url

Modified http://simiantics.net/d3/lib/jquery-ui/jquery-ui.min.js to a secure url

Modified http://simiantics.net/treemap_USA.js to a secure url

https://mbostock.github.com/d3/d3.js

https://mbostock.github.com/d3/d3.layout.js

https://simiantics.net/d3/lib/jquery/jquery.min.js

https://simiantics.net/d3/lib/jquery-ui/jquery-ui.min.js

https://simiantics.net/treemap_USA.js