feifang · August 13, 2020 14:07
diff --git a/.block b/.block
 height: 550
diff --git a/HSI_Hierarchy.csv b/HSI_Hierarchy.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
 	
 body {
   transform: scale(0.5); 
   transform-origin: 10% 10%; 
 }

 #mychart {
 	position: relative;
 	margin-top: -100px;
 	margin-left: 200px;

 }

 #controlpanel {
 	position: absolute;
 	left: 50px;
 	top: 100px;
 	display: inline-block;
 }

 circle {
  fill: rgb(31, 119, 180);
  fill-opacity: 0;
  stroke: rgb(31, 119, 180);
  stroke-width: 0px;
 }

 .leaf circle {
  fill-opacity: 1;
 }

 .region circle {
  fill-opacity: 0.15;
  
 }

 .industries circle {
  stroke-width: 1px;
 }

 text {
  font: 10px sans-serif;
  text-anchor: middle;
 }

 .region text{
  font: 100px sans-serif;
  text-anchor: middle;
  opacity: 0.5;
 }

 .legendCells text{
  font: 24px;
 }

 /* drop down list for years*/

 .dropbtn {
    background-color: #f9f9f9;
    color: #2c3e50;
    padding: 16px;
    font-size: 32px;
    border: none;
    cursor: pointer;
    letter-spacing:2px;
 }

 .dropdown {
    position: relative;
    display: inline-block;
 }

 .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 }

 .dropdown-content a {
    color: #2c3e50;
    padding: 12px 30px;
    text-decoration: none;
    display: block;
    text-align: center;

 }

 .dropdown-content a:hover {background-color: #f1f1f1}

 .dropdown:hover .dropdown-content {
    display: block;
 }

 .dropdown:hover .dropbtn {
    background-color: #f9f9f9;
 }

 /* play button */

 .button-container {
    display: flex;

    margin: 60px auto;

    flex-wrap: wrap;
    justify-content: center;
 }

 #play {
  display: flex;
  overflow: hidden;

  margin: 10px 0;
  padding: 10px 15px;

  cursor: pointer;
  user-select: none;
  transition: all 60ms ease-in-out;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  text-transform: none;
  text-transform: capitalize;

  color: #f4f7f7;
  border: 0 none;
  border-radius: 4px;
  background: #79a8a9;

  font: 30px sans-serif;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing:2px;

  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
 
  justify-content: center;
  align-items: center;
  flex: 0 0 160px;

  &:hover {
    transition: all 60ms ease;

    opacity: .85;
  }
  
  &:active {
    transition: all 60ms ease;
    opacity: .75;
  }
  
  &:focus {
    outline: 1px dotted #959595;
    outline-offset: -4px;
  }
 }


 </style>
 <div id="mycontainer" width="1200" height="1200" style="z-index:1;">
 	<div id="controlpanel">
 		<div class="dropdown">
  			<button class="dropbtn">2006</button>
 			<div class="dropdown-content">
    			<a class="seleted-time" href="#">2006</a>
    			<a class="seleted-time" href="#">2007</a>
    			<a class="seleted-time" href="#">2008</a>
    			<a class="seleted-time" href="#">2009</a>
    			<a class="seleted-time" href="#">2010</a>
    			<a class="seleted-time" href="#">2011</a>
    			<a class="seleted-time" href="#">2012</a>
    			<a class="seleted-time" href="#">2013</a>
    			<a class="seleted-time" href="#">2014</a>
    			<a class="seleted-time" href="#">2015</a>
    			<a class="seleted-time" href="#">2016</a>
  			</div>
 		</div>
 		<div id='play'>PLAY</div>
 	</div>
 	<div id="mychart" width="1200" height="1200" style="z-index:1;">
 		<svg width="1200" height="1200"></svg>
 	</div>
 </div>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.17.0/d3-legend.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>

 // global variables for animation
 var isPlaying = false;
 var loop;
 var time = 0;
 var duration = 400;
 var loop_duration = duration + 100;

 var svg = d3.select("svg"),
    diameter = +svg.attr("width"),
    g = svg.append("g").attr("transform", "translate(2,2)"),
    format = d3.format(",d");

 // hierarchy defined by region    

 var stratify = d3.stratify()
    .id(function(d) { return d.name; })
    .parentId(function(d) { return d.parent; });

 var pack = d3.pack()
    .size([diameter - 4, diameter - 4])
    .padding(4);
    
 // set industry-color mapping 
 var color = d3.scaleOrdinal() 
    .domain(["Finance", "Utilities", "Properties", "Commerce & Industry"])
    .range(["#b3cde3","#fbb4ae","#decbe4","#ccebc5"]);

 d3.csv("HSI_Hierarchy.csv", function(error, data) {
  if (error) throw error;
  
  // without 2017-03 to 2017-05
  var date = ['2006-12','2007-01','2007-02','2007-06','2007-07','2007-08','2007-09','2007-10','2007-11','2007-12','2008-01','2008-02','2008-03','2008-04','2008-05','2008-06','2008-07','2008-08','2008-09','2008-10','2008-11','2008-12','2009-01','2009-02','2009-03','2009-04','2009-05','2009-06','2009-07','2009-08','2009-09','2009-10','2009-11','2009-12','2010-01','2010-02','2010-03','2010-04','2010-05','2010-06','2010-07','2010-08','2010-09','2010-10','2010-11','2010-12','2011-01','2011-02','2011-03','2011-04','2011-05','2011-06','2011-07','2011-08','2011-09','2011-10','2011-11','2011-12','2012-01','2012-02','2012-03','2012-04','2012-05','2012-06','2012-07','2012-08','2012-09','2012-10','2012-11','2012-12','2013-01','2013-02','2013-03','2013-04','2013-05','2013-06','2013-07','2013-08','2013-09','2013-10','2013-11','2013-12','2014-01','2014-02','2014-03','2014-04','2014-05','2014-06','2014-07','2014-08','2014-09','2014-10','2014-11','2014-12','2015-01','2015-02','2015-03','2015-04','2015-05','2015-06','2015-07','2015-08','2015-09','2015-10','2015-11','2015-12','2016-01','2016-02','2016-03','2016-04','2016-05','2016-06','2016-07','2016-08','2016-09','2016-10'];

  // yearly
  //var date = ['2006-12','2007-12','2008-12','2009-12','2010-12','2011-12','2012-12','2013-12','2014-12','2015-12','2016-10'];
  
  // convert csv to d3.hierarchy data, d.r automatically generated by marketcap
  // sum(): define the value of each node (value returned by the specified function + the combined value of all descendants)
  var root = stratify(data)
      .sum(function(d) { return d[date[0]]; })
      .sort(function(a, b) { return b.value - a.value; });
  
  // Add legend
  var svg = d3.select("svg");

  svg.append("g")
  	.attr("class", "legendOrdinal")
  	.attr("transform", "translate(30,900)");
  	
  var legendOrdinal = d3.legendColor()
  	.shape("path", d3.symbol().type(d3.symbolCircle).size(700)())
  	.shapePadding(12)
  	.scale(color);

  svg.select(".legendOrdinal")
  	.call(legendOrdinal);
  
  svg.selectAll(".label")
  	.style("font-size", function(d) {return "24px";})
  	.style("text-anchor", "right")
  	.attr("transform", function(d) { if(d=="Utilities") return "translate(75, 10)"; else return d.length > 9 ? d.length > 10? "translate(150, 10)" : "translate(90, 10)" : "translate(80, 10)";});
  
  // pack(root): invoke Pack layout
  // descendants(): Returns the array of descendant nodes, starting with this node, then followed by each child in topological order.
  var node = g.selectAll(".node")
    .data(pack(root).descendants())
    .enter().append("g")
      .attr("class", function(d) { return d.children ? "node" : "leaf node"; }) // apply class for styling
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); // locate circles

  // add title for tooltip
  var title = node.append("title")
      		  .text(function(d) { return d.data.name + "\n" + format(d.value); });

  // fill: set color by industry
  var circle = node.append("circle")
      		   .attr("r", function(d) { return d.r; })
      		   .style("fill", function(d) { return color(d.data.industry); });

  // add leaf node label: filter and only apply to leaf nodes
  var label = node.filter(function(d) { return !d.children; }).append("text")
      .attr("dy", "0.3em")
      .text(function(d) { return d.data.name.substring(0, d.r / 3); });

  // Helper function: Move region svg to front (should be defined before called)
  d3.selection.prototype.moveToFront=function(){
  	return this.each(function(){
  	this.parentNode.appendChild(this);
  	});
  };
 		
  // add region node label and move to front  
  var region = node.filter(function(d){return d.depth === 1;})
      .attr("class", function(d) { return "region";})
      .moveToFront()
  	  .append("text")
  	  .attr("dy", "0.3em")
  	  .style("font-size", function(d) { if (d.value === 0) {return "0px";} else {return d.r > 150 ?  "100px" : "50px";}; }) // do not show label if no value
 	  .text(function(d){return d.data.name; });

  var industries = node.filter(function(d){return d.depth === 2;})
  	  .attr('class', function(d) {return "industries";})
  	  .selectAll("circle")
  	  .style("stroke", function(d) { return color(d.data.industry); });
  	  

  // play animation from start
  $("#play").on("click", function() {
  		if (!isPlaying){
  			play(time);
  		}else{
  			time = date.indexOf($(".dropbtn").text());
  			pause();
  		}
  		
 	});
 	
  $(".seleted-time").on("click", function(){
  	selected = $(this).text();
  	$(".dropbtn").html(selected);
 	time = getDate(selected);
 	update(date[time]);
  });
  
  function getDate(year) {
  	for (var i =0; i<date.length; i++){
  		if(date[i].substring(0, 4)==year){
  			return i;
  		}
  	}
 }
 	
  function play(start_time){
  	$("#play").html('PAUSE');
  	isPlaying = true;
  	time = start_time;
  	loop = setInterval(function(){
  			time ++;
  			if(time<date.length){
  				update(date[time]);
  				$(".dropbtn").html(date[time]);
  			} else if(time==date.length) { // when animation is finished
  				reset();
  				clearInterval(loop);
  			}
  		}, loop_duration);
  }
  
  function pause(){
  	$("#play").html('PLAY');
  	clearInterval(loop);
  	isPlaying = false;
  }
  
  function reset(){
  	$("#play").html('PLAY');
  	isPlaying = false;
  	time = 0;
  }
 		
  function update(column){
  	// update value 
 	root
 		.sum(function(d) { return d[column]; })
      	.sort(function(a, b) { return b.value - a.value; });
    
    // update Pack layout
    node.selectAll("g")
    	.data(pack(root).descendants());
    
    // relocate circles
    node.transition()
  		.duration(duration)
  		.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    
    // update tooltip
 	title.text(function(d) { return d.data.name + "\n" + format(d.value); });
 	
 	// update region label
 	region.text(function(d){return d.data.name; })
 	 	  .style("font-size", function(d) {if (d.value === 0) {return "0px";} else {return d.r > 150 ?  "100px" : "50px";};});
 	
 	// update leaf node label
 	label.text(function(d) { return d.data.name.substring(0, d.r / 3); }); 
 	
 	// resize circles
  	circle.transition()
  		.duration(duration)
      	.attr("r", function(d) { return d.r; })
      	.style("fill", function(d) { return color(d.data.industry); });
  }
 });

 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	transform: scale(0.5);
	transform-origin: 10% 10%;
	}

	#mychart {
	position: relative;
	margin-top: -100px;
	margin-left: 200px;

	}

	#controlpanel {
	position: absolute;
	left: 50px;
	top: 100px;
	display: inline-block;
	}

	circle {
	fill: rgb(31, 119, 180);
	fill-opacity: 0;
	stroke: rgb(31, 119, 180);
	stroke-width: 0px;
	}

	.leaf circle {
	fill-opacity: 1;
	}

	.region circle {
	fill-opacity: 0.15;

	}

	.industries circle {
	stroke-width: 1px;
	}

	text {
	font: 10px sans-serif;
	text-anchor: middle;
	}

	.region text{
	font: 100px sans-serif;
	text-anchor: middle;
	opacity: 0.5;
	}

	.legendCells text{
	font: 24px;
	}

	/* drop down list for years*/

	.dropbtn {
	background-color: #f9f9f9;
	color: #2c3e50;
	padding: 16px;
	font-size: 32px;
	border: none;
	cursor: pointer;
	letter-spacing:2px;
	}

	.dropdown {
	position: relative;
	display: inline-block;
	}

	.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 120px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	}

	.dropdown-content a {
	color: #2c3e50;
	padding: 12px 30px;
	text-decoration: none;
	display: block;
	text-align: center;

	}

	.dropdown-content a:hover {background-color: #f1f1f1}

	.dropdown:hover .dropdown-content {
	display: block;
	}

	.dropdown:hover .dropbtn {
	background-color: #f9f9f9;
	}

	/* play button */

	.button-container {
	display: flex;

	margin: 60px auto;

	flex-wrap: wrap;
	justify-content: center;
	}

	#play {
	display: flex;
	overflow: hidden;

	margin: 10px 0;
	padding: 10px 15px;

	cursor: pointer;
	user-select: none;
	transition: all 60ms ease-in-out;
	text-align: center;
	white-space: nowrap;
	text-decoration: none !important;
	text-transform: none;
	text-transform: capitalize;

	color: #f4f7f7;
	border: 0 none;
	border-radius: 4px;
	background: #79a8a9;

	font: 30px sans-serif;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing:2px;

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	justify-content: center;
	align-items: center;
	flex: 0 0 160px;

	&:hover {
	transition: all 60ms ease;

	opacity: .85;
	}

	&:active {
	transition: all 60ms ease;
	opacity: .75;
	}

	&:focus {
	outline: 1px dotted #959595;
	outline-offset: -4px;
	}
	}


	</style>
	<div id="mycontainer" width="1200" height="1200" style="z-index:1;">
	<div id="controlpanel">
	<div class="dropdown">
	<button class="dropbtn">2006</button>
	<div class="dropdown-content">
	<a class="seleted-time" href="#">2006</a>
	<a class="seleted-time" href="#">2007</a>
	<a class="seleted-time" href="#">2008</a>
	<a class="seleted-time" href="#">2009</a>
	<a class="seleted-time" href="#">2010</a>
	<a class="seleted-time" href="#">2011</a>
	<a class="seleted-time" href="#">2012</a>
	<a class="seleted-time" href="#">2013</a>
	<a class="seleted-time" href="#">2014</a>
	<a class="seleted-time" href="#">2015</a>
	<a class="seleted-time" href="#">2016</a>
	</div>
	</div>
	<div id='play'>PLAY</div>
	</div>
	<div id="mychart" width="1200" height="1200" style="z-index:1;">
	<svg width="1200" height="1200"></svg>
	</div>
	</div>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.17.0/d3-legend.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script>

	// global variables for animation
	var isPlaying = false;
	var loop;
	var time = 0;
	var duration = 400;
	var loop_duration = duration + 100;

	var svg = d3.select("svg"),
	diameter = +svg.attr("width"),
	g = svg.append("g").attr("transform", "translate(2,2)"),
	format = d3.format(",d");

	// hierarchy defined by region

	var stratify = d3.stratify()
	.id(function(d) { return d.name; })
	.parentId(function(d) { return d.parent; });

	var pack = d3.pack()
	.size([diameter - 4, diameter - 4])
	.padding(4);

	// set industry-color mapping
	var color = d3.scaleOrdinal()
	.domain(["Finance", "Utilities", "Properties", "Commerce & Industry"])
	.range(["#b3cde3","#fbb4ae","#decbe4","#ccebc5"]);

	d3.csv("HSI_Hierarchy.csv", function(error, data) {
	if (error) throw error;

	// without 2017-03 to 2017-05
	var date = ['2006-12','2007-01','2007-02','2007-06','2007-07','2007-08','2007-09','2007-10','2007-11','2007-12','2008-01','2008-02','2008-03','2008-04','2008-05','2008-06','2008-07','2008-08','2008-09','2008-10','2008-11','2008-12','2009-01','2009-02','2009-03','2009-04','2009-05','2009-06','2009-07','2009-08','2009-09','2009-10','2009-11','2009-12','2010-01','2010-02','2010-03','2010-04','2010-05','2010-06','2010-07','2010-08','2010-09','2010-10','2010-11','2010-12','2011-01','2011-02','2011-03','2011-04','2011-05','2011-06','2011-07','2011-08','2011-09','2011-10','2011-11','2011-12','2012-01','2012-02','2012-03','2012-04','2012-05','2012-06','2012-07','2012-08','2012-09','2012-10','2012-11','2012-12','2013-01','2013-02','2013-03','2013-04','2013-05','2013-06','2013-07','2013-08','2013-09','2013-10','2013-11','2013-12','2014-01','2014-02','2014-03','2014-04','2014-05','2014-06','2014-07','2014-08','2014-09','2014-10','2014-11','2014-12','2015-01','2015-02','2015-03','2015-04','2015-05','2015-06','2015-07','2015-08','2015-09','2015-10','2015-11','2015-12','2016-01','2016-02','2016-03','2016-04','2016-05','2016-06','2016-07','2016-08','2016-09','2016-10'];

	// yearly
	//var date = ['2006-12','2007-12','2008-12','2009-12','2010-12','2011-12','2012-12','2013-12','2014-12','2015-12','2016-10'];

	// convert csv to d3.hierarchy data, d.r automatically generated by marketcap
	// sum(): define the value of each node (value returned by the specified function + the combined value of all descendants)
	var root = stratify(data)
	.sum(function(d) { return d[date[0]]; })
	.sort(function(a, b) { return b.value - a.value; });

	// Add legend
	var svg = d3.select("svg");

	svg.append("g")
	.attr("class", "legendOrdinal")
	.attr("transform", "translate(30,900)");

	var legendOrdinal = d3.legendColor()
	.shape("path", d3.symbol().type(d3.symbolCircle).size(700)())
	.shapePadding(12)
	.scale(color);

	svg.select(".legendOrdinal")
	.call(legendOrdinal);

	svg.selectAll(".label")
	.style("font-size", function(d) {return "24px";})
	.style("text-anchor", "right")
	.attr("transform", function(d) { if(d=="Utilities") return "translate(75, 10)"; else return d.length > 9 ? d.length > 10? "translate(150, 10)" : "translate(90, 10)" : "translate(80, 10)";});

	// pack(root): invoke Pack layout
	// descendants(): Returns the array of descendant nodes, starting with this node, then followed by each child in topological order.
	var node = g.selectAll(".node")
	.data(pack(root).descendants())
	.enter().append("g")
	.attr("class", function(d) { return d.children ? "node" : "leaf node"; }) // apply class for styling
	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); // locate circles

	// add title for tooltip
	var title = node.append("title")
	.text(function(d) { return d.data.name + "\n" + format(d.value); });

	// fill: set color by industry
	var circle = node.append("circle")
	.attr("r", function(d) { return d.r; })
	.style("fill", function(d) { return color(d.data.industry); });

	// add leaf node label: filter and only apply to leaf nodes
	var label = node.filter(function(d) { return !d.children; }).append("text")
	.attr("dy", "0.3em")
	.text(function(d) { return d.data.name.substring(0, d.r / 3); });

	// Helper function: Move region svg to front (should be defined before called)
	d3.selection.prototype.moveToFront=function(){
	return this.each(function(){
	this.parentNode.appendChild(this);
	});
	};

	// add region node label and move to front
	var region = node.filter(function(d){return d.depth === 1;})
	.attr("class", function(d) { return "region";})
	.moveToFront()
	.append("text")
	.attr("dy", "0.3em")
	.style("font-size", function(d) { if (d.value === 0) {return "0px";} else {return d.r > 150 ? "100px" : "50px";}; }) // do not show label if no value
	.text(function(d){return d.data.name; });

	var industries = node.filter(function(d){return d.depth === 2;})
	.attr('class', function(d) {return "industries";})
	.selectAll("circle")
	.style("stroke", function(d) { return color(d.data.industry); });


	// play animation from start
	$("#play").on("click", function() {
	if (!isPlaying){
	play(time);
	}else{
	time = date.indexOf($(".dropbtn").text());
	pause();
	}

	});

	$(".seleted-time").on("click", function(){
	selected = $(this).text();
	$(".dropbtn").html(selected);
	time = getDate(selected);
	update(date[time]);
	});

	function getDate(year) {
	for (var i =0; i<date.length; i++){
	if(date[i].substring(0, 4)==year){
	return i;
	}
	}
	}

	function play(start_time){
	$("#play").html('PAUSE');
	isPlaying = true;
	time = start_time;
	loop = setInterval(function(){
	time ++;
	if(time<date.length){
	update(date[time]);
	$(".dropbtn").html(date[time]);
	} else if(time==date.length) { // when animation is finished
	reset();
	clearInterval(loop);
	}
	}, loop_duration);
	}

	function pause(){
	$("#play").html('PLAY');
	clearInterval(loop);
	isPlaying = false;
	}

	function reset(){
	$("#play").html('PLAY');
	isPlaying = false;
	time = 0;
	}

	function update(column){
	// update value
	root
	.sum(function(d) { return d[column]; })
	.sort(function(a, b) { return b.value - a.value; });

	// update Pack layout
	node.selectAll("g")
	.data(pack(root).descendants());

	// relocate circles
	node.transition()
	.duration(duration)
	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

	// update tooltip
	title.text(function(d) { return d.data.name + "\n" + format(d.value); });

	// update region label
	region.text(function(d){return d.data.name; })
	.style("font-size", function(d) {if (d.value === 0) {return "0px";} else {return d.r > 150 ? "100px" : "50px";};});

	// update leaf node label
	label.text(function(d) { return d.data.name.substring(0, d.r / 3); });

	// resize circles
	circle.transition()
	.duration(duration)
	.attr("r", function(d) { return d.r; })
	.style("fill", function(d) { return color(d.data.industry); });
	}
	});

	</script>