Data Visualisation Dojo: Part 5

<!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;
        cursor: pointer;
      }
  </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 5: Trigger an animation </h3>
    <p>  	
    	<ol>
        <li> Trigger event with button</li>
        <li> Move Divs based on percent grouping <small>(hint: group data based on centiles of <b>d.female_percent</b>)</small> </li>
        <li> Toggle animation to allow divs to move back to original position </li>
      </ol>
    </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;
   	$(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