Key Words For Sports Starts Comparison- Jiaxin Pyramid

forked from theopenwindow's block: Key Words For Sports Starts Comparison

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Key Comparison between Sports Stars</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style>

</style>
</head>
<body>
	<h1>最相关</h1><button id="data_word">词条</button><button id="data_text">汉字</button><button id="data_person">人物</button>

 	<div class="data_word"></div>
 	<div class="data_text"></div>
 	<div class="data_person"></div>

var data_word_Ning = [
 		 			{word: "自由泳", read: 20585600},
 		 			{word: "鲜肉", read: 12191118},
 		 			{word: "喀山", read: 9005397},
 		 			{word: "世锦赛", read: 7841342},
 		 			{word: "春晚", read: 7462870},
 		 			{word: "女友", read: 5981120},
 		 			{word: "游泳", read: 5063062},
 		 			{word: "夺金", read: 4431792},
 		 			{word: "体坛", read: 4332680},
 		 			{word: "中国游泳队", read: 4305554}
 		 		];

var data_person = [
 		 			{word: "葛天", read: 83985042},
 		 			{word: "吴莎", read: 21477767},
 		 			{word: "姚明", read: 13767456},
 		 			{word: "冬日娜", read: 13137822},
 		 			{word: "苏炳添", read: 12838175},
 		 			{word: "宁泽涛", read: 9769251},
 		 			{word: "范冰冰", read: 7876031},
 		 			{word: "张梓琳", read: 7756933},
 		 			{word: "赵本山", read: 6959061},
 		 			{word: "李娜", read: 6175089}
 		 		];

var data_person_Ning = [
 		 			{word: "蒋欣", read: 7661481},
 		 			{word: "孙杨", read: 7472873},
 		 			{word: "吴亦凡", read: 6085862},
 		 			{word: "陈伟霆", read: 5594263},
 		 			{word: "张继科", read: 4359268},
 		 			{word: "孙妍在", read: 4204099},
 		 			{word: "刘翔", read: 4169631},
 		 			{word: "李易峰", read: 3598134},
 		 			{word: "胡歌", read: 3019753},
 		 			{word: "叶祖新", read: 2750703}
 		 		];

var width = 500;
 		 var height = 350;

var svg = d3.select("#bar_Chart")
      .append("svg")
      .attr("width", width + 50)
 		 	.attr("height", height + 50);
      
       var bar_Chart1 = 
     svg.append("g").attr("class", "bar1");
 		 
 		 bar_Chart1.append("rect")
            	  .attr("width", "100%")
            	  .attr("height", "100%")
            	  .attr("stroke", "#999")
 		 		  .attr("fill", "none");
    
    var bar_Chart2 = 	
 		 			svg.append("g").attr("class", "bar2");
 		 
 		 bar_Chart1.append("rect")
            	  .attr("width", "100%")
            	  .attr("height", "100%")
            	  .attr("stroke", "#999")
 		 		  .attr("fill", "none");

d3.select("#data_word")
 		 	.on("click", function(d,i){
 		 		redraw(data_word);
 		 		redraw_left(data_word_Ning);
 		 	});

d3.select("#data_person")
 		 	.on("click", function(d,i){
 		 		redraw(data_person);
 		 		redraw_left(data_person_Ning);
 		 	});

redraw_left(data_word_Ning);

redraw(data_word);

function redraw(data){
 		 	var max = d3.max(data, function(d){
 		 		// console.log(d.read);
 		 		return +d.read;
 		 	});

xScale = d3.scale.linear()
 		 				.domain([0, max])
 		 				.range([0, width/3]);

yScale = d3.scale.ordinal()
 		 				.domain(d3.range(data.length))
 		 				.rangeBands([0, height], .2);

var bars = bar_Chart1.selectAll("rect.bar")
 		 						.data(data);

bars.enter()
 		 		.append("rect")
 		 		.attr("class", "bar")
 		 		.attr("fill", "red");

bars.exit()
 		 		.transition()
 		 		.duration(300)
 		 		.ease("exp")
 		 		.attr("width", 0)
 		 		.remove();

bars.transition()
 		 		.duration(300)
 		 		.ease("quad")
 		 		.attr("width", function(d) {
 		 			return xScale(+d.read);
 		 		})
 		 		.attr("height", yScale.rangeBand())
 		 		.attr("transform", function(d,i){
 		 			return "translate("+[width/2, yScale(i)] +")"
 		 		});

//set the labels:
 		 	var labels = bar_Chart1.selectAll("text")
								  .data(data);

labels.enter()
				  .append("text");

labels.exit()
				.transition()
				.duration(300)
				.attr("opacity", 0)
 		 		.remove();

labels.transition()
 		 		  .duration(300)
 		 		  .attr("transform", function(d,i){
					  	return "translate("+(xScale(+d.read)+(width/2 + 10))+ "," + (yScale(i)+20) +")";
					  })
				  .text(function(d){
					  	return d.word;
					  });

};

function redraw_left(data){
 		 	var max = d3.max(data, function(d){
 		 		// console.log(d.read);
 		 		return +d.read;
 		 	});

xScale = d3.scale.linear()
 		 				.domain([0, max])
 		 				.range([0, width/3]);

yScale = d3.scale.ordinal()
 		 				.domain(d3.range(data.length))
 		 				.rangeBands([0, height], .2);

var bars = bar_Chart2.selectAll("rect.bar")
 		 						.data(data);

bars.enter()
 		 		.append("rect")
 		 		.attr("class", "bar")
 		 		.attr("fill", "red");

bars.exit()
 		 		.transition()
 		 		.duration(300)
 		 		.ease("exp")
 		 		.attr("width", 0)
 		 		.remove();

//set the labels:
 		 	var labels = bar_Chart2.selectAll("text")
								  .data(data);

labels.enter()
				  .append("text");

labels.exit()
				.transition()
				.duration(300)
				.attr("opacity", 0)
 		 		.remove();

labels.transition()
 		 		  .duration(300)
 		 		  .attr("transform", function(d,i){
					  	return "translate("+(width/2-xScale(+d.read)-80)+ "," + (yScale(i)+20) +")";
					  })
				  .text(function(d){
					  	return d.word;
					  });

};

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

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