Skip to content

Instantly share code, notes, and snippets.

@gambl

gambl/.block

Last active February 9, 2018 16:23
Show Gist options
  • Save gambl/e68f968ada5d69b2b0da4db19c5236df to your computer and use it in GitHub Desktop.
Save gambl/e68f968ada5d69b2b0da4db19c5236df to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment