Data Visualisation Dojo: Part 6

<!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;

});
   
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js