D3 Examples - Data Visualisation Dojo: Part 3

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>
 
  <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 3: Load data from remote source </h3>
    <ol>
        <li> Load film data from movie_data.csv <a href="https://github.com/matthewfdaniels/scripts" target="_blank">here</a> </li>
        <li> Order data by percent words spoken by female characters and display in a row </li>
      </ol>
    <br/>
  </div>
  <script>
    
    $(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})
    
           console.log(films)
           
         });
​
    });
   
  </script>
</body>
​
    