SimonS · February 9, 2018 16:04
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!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">
  <style>
   .visualisation-container {
     width: 100%;
     height: 470px;
     background-color: whitesmoke;
     border: 1px solid black;
     position: relative;
     margin-top: 10px;
    }
  </style>
 </head>

 <body>
  <br><br>
  <div class="container">
    <h5>
      <u>Data Visualisation With D3 </u>
    </h5>

    <div id="my-container" class="visualisation-container"></div>
    <br/>
    <button class="btn btn-primary" id="trigger-animation"> Trigger Animation </button>
  </div>
  <script>
    $(document).ready(() => {
      d3.csv("data.csv", function(films) {
 		
       	 var femalePercentOrder = {};

     films.forEach((film) => {

       //Parse Line data per film
       var lineData = []
       var lineInfo = film.lines_data.match(/.{1,2}/g);
       film.female_words = 0;
       film.total_words = 0

       for (line in lineInfo){
         var minuteTotal = +lineInfo[line].slice(0,1) +
             							 +lineInfo[line].slice(1,2);
         var row = [minuteTotal,14-minuteTotal];
         film.female_words += 14-minuteTotal;
         film.total_words += d3.sum(row)
         lineData.push(row);
       }
       film.lineData = lineData

       film.female_percent
          = Math.round(100 * film.female_words/ film.total_words)/100  
    });

    films.sort((a, b) => { return a.female_percent - b.female_percent})
      var boxSize = 0.4;
        var boxHeight = 100;
      var margin = 1.2;
       var color = d3.scale.linear()
    .domain([0, 0.5, 1])
    .range(["blue", "#ccc", "red"]);

      d3.select("#my-container")
      	.selectAll("div")
      	.data(films)
      	.enter()
        .append('div')
      	.style({border: 0,
                width: boxSize + "px",
                height: boxHeight + "px",
      					position: "absolute",
                top: 0})
      	.style("left", (v, i) => boxSize * i + "px")
      	.style("background-color", (film) => color(film.female_percent))
 // 	      .style("top", (v, i) => Math.floor(i / 10) * (margin + boxHeight) + "px")
      });
    });
  </script>
 </body>
	<!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">
	<style>
	.visualisation-container {
	width: 100%;
	height: 470px;
	background-color: whitesmoke;
	border: 1px solid black;
	position: relative;
	margin-top: 10px;
	}
	</style>
	</head>

	<body>
	<br><br>
	<div class="container">
	<h5>
	<u>Data Visualisation With D3 </u>
	</h5>

	<div id="my-container" class="visualisation-container"></div>
	<br/>
	<button class="btn btn-primary" id="trigger-animation"> Trigger Animation </button>
	</div>
	<script>
	$(document).ready(() => {
	d3.csv("data.csv", function(films) {

	var femalePercentOrder = {};

	films.forEach((film) => {

	//Parse Line data per film
	var lineData = []
	var lineInfo = film.lines_data.match(/.{1,2}/g);
	film.female_words = 0;
	film.total_words = 0

	for (line in lineInfo){
	var minuteTotal = +lineInfo[line].slice(0,1) +
	+lineInfo[line].slice(1,2);
	var row = [minuteTotal,14-minuteTotal];
	film.female_words += 14-minuteTotal;
	film.total_words += d3.sum(row)
	lineData.push(row);
	}
	film.lineData = lineData

	film.female_percent
	= Math.round(100 * film.female_words/ film.total_words)/100
	});

	films.sort((a, b) => { return a.female_percent - b.female_percent})
	var boxSize = 0.4;
	var boxHeight = 100;
	var margin = 1.2;
	var color = d3.scale.linear()
	.domain([0, 0.5, 1])
	.range(["blue", "#ccc", "red"]);

	d3.select("#my-container")
	.selectAll("div")
	.data(films)
	.enter()
	.append('div')
	.style({border: 0,
	width: boxSize + "px",
	height: boxHeight + "px",
	position: "absolute",
	top: 0})
	.style("left", (v, i) => boxSize * i + "px")
	.style("background-color", (film) => color(film.female_percent))
	// .style("top", (v, i) => Math.floor(i / 10) * (margin + boxHeight) + "px")
	});
	});
	</script>
	</body>