D3 Examples - Key Words For Sports Starts Comparison- Jiaxin Pyramid

xxxxxxxxxx
 
<!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>
<!--    <input id="num" value=10 size=2></input>
 -->
    <div class="data_word"></div>
    <div class="data_text"></div>
    <div class="data_person"></div>
​
    <div id = "bar_Chart"></div>
​
    <script type="text/javascript">
        var data_word = [
                    {word: "离婚", read: 38040511},
                    {word: "骗婚", read: 26943188},
                    {word: "明星", read: 23932519},
                    {word: "田径", read: 22685822},
                    {word: "裤裆", read: 17854565},
                    {word: "性格不合", read: 16310915},
                    {word: "假孕", read: 15867595},
                    {word: "前妻", read: 15292058},
                    {word: "内幕", read: 14131400},
                    {word: "飞人", read: 14010723}
                ];
​
        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();
​
            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-xScale(+d.read)), yScale(i)] +")"
                });
​
//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>
​
    