Built with blockbuilder.org
xxxxxxxxxx
<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 4: Draw squares from loaded data </h3>
<p> </p>
<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;
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)
var width = 800
var cx = d3.scale.linear().domain([0,1]).range([0,width-2]);
var colorScaleContinuous = d3.scale.linear().domain([0,0.25,0.5,1]).range(["#2161FA","#249EFB","#ddd", "#F33"]);
filmElements = d3.select("#my-container")
.selectAll("div")
.data(films)
.enter()
.append("div")
.attr("class", "film-element")
.style("top", 0 + "px")
.style("left", (d, i) => { return i * 0.4 + "px"})
.style("background-color",function(d){
// return "rgb(255,255,255)"
var color = d3.rgb(colorScaleContinuous(d.female_percent));
return color;
});
});
});
</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