gambl/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## 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(() => {

      	const grid_top = (arr, i) => {
						top_position = Math.floor((i / 10)) * 25 + "px"
	          console.log(top_position)
    		    return top_position}

        const grid_left = (arr, i) => {
						left_position = (i % 10) * 40 + "px"
	          console.log(left_position)
    		    return left_position}


			   var arr = Array.from(Array(100), (_, i) => i);
      			     //Your code goes here!
      d3.csv("https://raw.githubusercontent.com/matthewfdaniels/scripts/graphs/meta_data7.csv", (films) => {

        const gammut = d3.scale.linear()
    .domain([0, .5, 1])
    .range(["blue","white", "red"]);
        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
      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})


     		 d3.select("#my-container").selectAll()
      .data(films).enter()
        .append("div")
        .text((data, i) => {
        return ""
      })
        .style("background-color",(data, i) => {
           console.log(data.female_percent)
           return gammut(data.female_percent)
         })
        .style("position","absolute")
        .style("height", "40px")
        .style("width", "0.4px")
      	.style("padding", "0px")
        .style("top","1px")
        .style("left",(data, i) => {
           return i*0.4 + "px"
         })

         d3.select("#trigger-animation").on("click", () => 						{

         })

      })
 });


  </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(() => {

	const grid_top = (arr, i) => {
	top_position = Math.floor((i / 10)) * 25 + "px"
	console.log(top_position)
	return top_position}

	const grid_left = (arr, i) => {
	left_position = (i % 10) * 40 + "px"
	console.log(left_position)
	return left_position}



	var arr = Array.from(Array(100), (_, i) => i);
	//Your code goes here!
	d3.csv("https://raw.githubusercontent.com/matthewfdaniels/scripts/graphs/meta_data7.csv", (films) => {

	const gammut = d3.scale.linear()
	.domain([0, .5, 1])
	.range(["blue","white", "red"]);
	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
	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})


	d3.select("#my-container").selectAll()
	.data(films).enter()
	.append("div")
	.text((data, i) => {
	return ""
	})
	.style("background-color",(data, i) => {
	console.log(data.female_percent)
	return gammut(data.female_percent)
	})
	.style("position","absolute")
	.style("height", "40px")
	.style("width", "0.4px")
	.style("padding", "0px")
	.style("top","1px")
	.style("left",(data, i) => {
	return i*0.4 + "px"
	})

	d3.select("#trigger-animation").on("click", () => {

	})

	})
	});





	</script>
	</body>