Skip to content

Instantly share code, notes, and snippets.

@GerardoFurtado

GerardoFurtado/.block

Created March 27, 2019 13:01
Show Gist options
  • Save GerardoFurtado/513749cda888001052c8073e799e61e8 to your computer and use it in GitHub Desktop.
Save GerardoFurtado/513749cda888001052c8073e799e61e8 to your computer and use it in GitHub Desktop.
Download ZIP
Remove before add
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>
<style>
.cells {
fill: #aaa;
}
.label {
text-anchor: start;
font: 24px sans-serif;
float: left;
}
.label_second {
text-anchor: start;
font: 24px sans-serif;
float: right;
}
.btn-group {
margin-left: 30px;
display: inline;
}
.button1 {
display: inline-block;
color: #666;
background-color: #f5f5f5;
text-transform: uppercase;
font-size: 11px;
padding: 5px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid rgba(0,0,0,0.3);
border-bottom-width: 3px;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
}
.button1:hover {
background-color: #e3e3e3;
border-color: rgba(0,0,0,0.5);
cursor: pointer;
}
.button1:active {
background-color: #CCC;
border-color: rgba(0,0,0,0.9);
}
.button1:focus {
outline: none;
}
#drawing {
margin-top: 0px;
display: block;
margin: auto;
}
#annotes {
margin-top: 30px;
margin-bottom: 50px;
margin-left: 30px;
width: 960px;
height: 70px;
font-size: 12;
font-family: sans-serif;
text-align: justify;
word-break:keep-all;
}
#header {
margin-top: 30px;
margin-bottom: 50px;
margin-left: 30px;
font-size: 12;
font-family: sans-serif;
text-align: justify;
word-break:keep-all;
}
#logo {
float: right;
margin-top: 0px;
width: 300px;
height: 120px;
}
#logo img{
width: 100%;
height: auto;
}
</style>
<body>
<div #container>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="button1" value = 0>0</button>
<button type="button" class="button1" value = 2>2</button>
</div>
<div id="drawing"> <svg width="960" height="990"></svg> </div>
</div>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
var data = [
{"event" : "asdfadsf",
"blocks": 2000,
"denom": "t",
"first": 2000,
"second": 800,
"domain": [800]},
{"event" : "Break",
"blocks": 0,
"denom": "t",
"first":0,
"second":0,
"domain": [800]
},
{"event" : "asdfasdf",
"blocks": 1000,
"denom": "m",
"first": 1000,
"second": 200,
"domain": [200]},
{"event" : "Break",
"denom": "m",
"blocks": 0,
"first": 0,
"second": 0,
"domain": [200]}
];
var formatNumber = d3.format(",d");
var colorScale = d3.scaleThreshold().range(["#70C1B3","#FF1654","#B2DBBF","#F3FFBD","#247BA0"])
var svg = d3.select("svg");
var width = +svg.attr("width"),
height = +svg.attr("height");
var groupSpacing = 3,
cellSpacing = 1,
cellSize = Math.floor((width - 11 * groupSpacing) / 100) - cellSpacing,
offset = Math.floor((width - 100 * cellSize - 90 * cellSpacing - 11 * groupSpacing) / 2);
var updateDuration = 125,
updateDelay = updateDuration / 500;
var cell = svg.append("g")
.attr("class", "cells")
.attr("transform", "translate(" + offset + "," + (offset + 30) + ")");
var label = svg.append("text")
.attr("class", "label");
var label_second = svg.append("text")
.attr("class", "label_second");
var annotes = d3.select("#annotes")
.style("opacity", 1)
function square(d) {
var n1 = d.blocks
var annoted = d.event
var cScale = colorScale.domain(d.domain)
var n0 = cell.selectAll("rect").size();
cells = cell.selectAll("rect")
.data(d3.range(n1));
console.log(n0,n1,cells);
cells.exit().transition()
.delay(function(d, i) { return (n0 - i) * updateDelay})
.duration(updateDuration)
.attr("width", 0)
.remove();
cells.enter().append("rect")
.attr("width", 0)
.attr("height", cellSize)
.attr("x", function(i) {
var x0 = Math.floor(i / 100) % 10, x1 = Math.floor(i % 10);
return groupSpacing * x0 + (cellSpacing + cellSize) * (x1 + x0 * 10);
})
.attr("y", function(i) {
var y0 = Math.floor(i / 1000), y1 = Math.floor(i % 100 / 10);
return groupSpacing * y0 + (cellSpacing + cellSize) * (y1 + y0 * 10);
})
.style("fill", function(i){
return "lightgrey"
})
.style("opacity", 0.8)
.transition()
.delay(function(d, i) {return (i - n0) * updateDelay;})
.duration(updateDuration)
.attr("width", cellSize)
.transition()
.delay(function(d, i) {return ((i - n0) * updateDelay) + 2500;})
.duration(updateDuration)
.style("fill", function(i){
return cScale(i)
});
annotes
.text(annoted)
.transition().style("opacity", function() {
if (d.event == "Break") {
return 0;
}
else {
return 1;
};
})
.delay(function(d, i) { return (i - n0) * updateDelay; })
.duration(Math.abs(n1 - n0) * updateDelay + updateDuration / 2)
label
.attr("x", offset + groupSpacing)
.attr("y", offset + groupSpacing)
.attr("dy", ".71em")
.style("opacity", function() {
if (d.event == "Break") {
return 0;
}
else {
return 1;
};
})
.transition()
.duration(Math.abs(n1 - n0) * updateDelay + updateDuration / 2)
.ease(d3.easeLinear)
.tween("text", function() {
if (d.denom === "t") {
n0 = n0;
n1 = n1;
}
else if (d.denom === "m") {
n0 = n0 * 1000;
n1 = d.first * 1000;
};
var self = this;
var i = d3.interpolateNumber(n0, n1);
return function(t) {
self.textContent = "2018 :" + formatNumber(Math.round(i(t)));
};
});
label_second
.attr("x", offset + groupSpacing + 250)
.attr("y", offset + groupSpacing)
.attr("dy", ".71em")
.style("opacity", function() {
if (d.event == "Break") {
return 0;
}
else {
return 1;
};
})
.transition()
.duration(Math.abs(n1 - n0) * updateDelay + updateDuration / 2)
.ease(d3.easeLinear)
.tween("text", function() {
if (d.denom === "t") {
n0 = 0;
n1 = d.second;
}
else if (d.denom === "m") {
n0 = 0;
n1 = d.second * 1000;
};
var self = this;
var i = d3.interpolateNumber(n0, n1);
return function(t) {
self.textContent = "2017 :" + formatNumber(Math.round(i(t)));
};
});
};
d3.selectAll(".button1").on("click", function animate(){
option = +this.value;
square(data[1]);
setTimeout(function(){
square(data[option]);
}, 2 * (updateDelay * 100 * 100 + updateDuration + 1000))
console.log('b');
});
d3.select(self.frameElement).style("height", height + "px");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment