D3 Examples - Data Visualisation Dojo: Part 6

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script>
  <style>
   .visualisation-container {
     width: 100%;
     height: 470px;
     background-color: whitesmoke;
     border: 1px solid black;
     position: relative;
     margin-top: 10px;
   }
    
    .film-element {
      position: absolute;
      left: 0px;
      top: 0px;
      border-radius: 6px;
      height:40px;
      width: 0.4px;
      z-index: 0;
      cursor: hand;
    }
    
    .breakdown-div {
      width: 270px;
      height: 65px;
      background-color: white;
      border-radius: 3px;
      box-shadow: 0px 2px 9px #656464;
      z-index: 10;
      position: relative;
      padding: 10px;
      font-weight: bolder;
      text-transform: uppercase;
        font-size:8px;
      text-align:center
    }
    
    .breakdown-div .title {
        font-size:10px;
    }
    
    .breakdown-div table {
      display: inline-block
    }
    .breakdown-div tr td:nth-of-type(0) {
      text-align: right
    }
    .breakdown-div .percent-bar {
      height: 8px;
      display: inline-block;
      margin: 0px 5px;
      border-radius: 2px;
      float: left
    }
    
    .breakdown-div .percent-bar.male{
      background-color: #2161FA
    }
    
    .breakdown-div .percent-bar.female{
      background-color: #F33
    }
    
  </style>
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
​
</head>
​
<body>
  <br><br>
  <div class="container">
    <h5> <u>Data Visualisation With D3 </u></h5>
​
    <h3> Part 6: Interacting with the Visualisation </h3>
    <p>     
        When the mouse is over a film, generate a new div
    </p>
    <button class="btn btn-primary" id="trigger-animation"> Trigger Animation </button>
    <div id="my-container" class="visualisation-container"></div>
    <br/>
  </div>
  <script>
    
        var filmElements;
    var breakdownDiv;
    $(document).ready(() => {
      //This is where we append 
         d3.csv("https://raw.githubusercontent.com/matthewfdaniels/scripts/graphs/meta_data7.csv", (films) => {
           var femalePercentOrder = {};
​
           films.forEach((film) => {
​
             //Explaination of parsing raw data: 
             //https://github.com/matthewfdaniels/scripts
             var lineData = []
             var lineInfo = film.lines_data.match(/.{1,2}/g);
             var female_words = 0;
             var total_words = 0
​
             for (line in lineInfo){
               var minuteTotal = +lineInfo[line].slice(0,1) +
                                             +lineInfo[line].slice(1,2);
               var row = [minuteTotal,14-minuteTotal];
               female_words += 14-minuteTotal;
               total_words += d3.sum(row)
               lineData.push(row);
             }
             film.lineData = lineData
​
             film.female_percent = Math.round(100*female_words/total_words)/100
             film.female_words = female_words;
             film.total_words = total_words;
​
             var femalePercentBucket = film.female_percent;
             if(femalePercentBucket in femalePercentOrder){
               femalePercentOrder[femalePercentBucket] = 
                femalePercentOrder[femalePercentBucket] + 1
             }
             else{
               femalePercentOrder[femalePercentBucket] = 0;
             }
             film.yOrder = femalePercentOrder[femalePercentBucket];
           });
         
           films.sort((a, b) => { return a.female_percent - b.female_percent})
               
           var width = 800
           var cx = d3.scale.linear().domain([0,1]).range([0,width-2]);
             var colorScaleContinuous =     d3.scale.linear().domain([0,0.25,0.5,1]).range(["#2161FA","#249EFB","#ddd", "#F33"]);
         
         breakdownDiv = d3.select("#my-container")
                    .append("div")
                    .attr("class", "breakdown-div")
                    .style("display", "none");
         
         filmElements = d3.select("#my-container")
           .selectAll("div")
           .data(films)
           .enter()
             .append("div")
             .attr("class", "film-element")
             .style("top", 0 + "px")
             .style("left", (d, i) => { return i * 0.4 + "px"})
             .style("background-color",function(d){
               // return "rgb(255,255,255)"
               var color = d3.rgb(colorScaleContinuous(d.female_percent));
               return color;
             })
             .on("mouseover",function(d,i){
           
                    d3.select(this)
                  .style("background-color", "black")
                    .style("border", "1px solid black")
                    .style("z-index", "1");
                
                    var femalePercent = Math.floor(d.female_percent * 100);
                    var malePercent = Math.floor((1 - d.female_percent) * 100);
                    
                breakdownDiv
                  .style('display', 'block')
                  .style('top', (d3.event.clientY - 180) + "px")
                  .style('left', (d3.event.clientX - 210) + "px")
                  .html("<div class='title'>" + d.title + "</div>"
                         +"<table>"
                            + "<tr>"
                           + "<td>Female words</td>"
                                +"<td>"
                                        +"<div class='percent-bar female' style='width:" + femalePercent + "px'></div>" + femalePercent +"%"
                                +"</td>"
                            +"</tr>"
                          + "<tr>"
                           + "<td>Male words</td>"
                                +"<td>"
                                        +"<div class='percent-bar male' style='width:" + malePercent + "px'></div>" + malePercent + "%"
                                +"</td>"
                            +"</tr>");
              })
                    .on("mouseout", function(d,i){
                    var color = d3.rgb(colorScaleContinuous(d.female_percent));
                    d3.select(this)
                    .style("background-color", color)
                        .style("border", "none")
                        .style("z-index", "0");
                    });
         
            
            var horizontal = false
          $("#trigger-animation").click(() => {
            
              horizontal = !horizontal
              
              filmElements
                .style("left",function(d,i){
                    return horizontal? cx(d.female_percent) + "px": (i * 0.4) +"px";
                })
               .transition()
               .duration(500)
               .delay(function(d,i){ return i * 0.2 })
               .style("top",function(d,i){
                 return horizontal? d.yOrder*7 +"px": "0px";
               })
               .style("width",function(d){
                 return horizontal? "6px": "0.4px";
               })
               .style("height",function(d){
                 return horizontal? "6px": "40px";
               });
          });
         
       });
​
    });
   
  </script>
</body>
    