index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #000 !important;
}
</style>
<body>
<div id="chart" align="center" ></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: 60, right: 60, bottom: 60, left: 60},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom
;
var y = d3.scaleLinear()
.range([0, height])
var x = d3.scaleLinear()
.range([0, width]);
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var lemmings = [" bl \n bl blblbl \n blblre \n bl rerere \n orre \n orre \n orrere \n grgr \n grgr \n tatata \n"," bl \n bl blblbl \n blblre \n bl rerere \n orre \n orre \n orrere \n grgr \n blblgrgr \n tata \n"," \n bl \n bl blblbl \n blblre \n bl rerere \n orre \n ororre \n orrereog \n dggrgrgrgr \n tatadg grtata\n"," bl \n bl blblbl \n blblre \n bl rerere \n orre \n orre \n orrere \n grgr \n tatagrgr \n tata \n"," bl \n bl blblbl \n blblre \n bl rerere \n orre \n orre \n orrere \n grgr \n grgr \n tatata \n"," bl \n bl blblbl \n blblre \n bl rerere \n orre \n orre \n reog \n grgr \n grgrdgta \n tata \n"," \n bl \n bl blblbl \n blblre \n bl rerere \n orre \n orog \n reog \n grgrgrdgdg \n tatata dgtata\n"," bl \n bl blblbl \n blblre \n bl rerere \n orre \n orre \n reog \n grgr \n tatadgdg \n tata \n"]
var lemmingData = [];
var lemmingDict = {};
lemmings.forEach(function(lemming, lemmingNum) {
lemming.split("\n").forEach(function(line, i) {
lemmingData.push({"num": lemmingNum,"points":line.match(/[\s\S]{1,2}/g)});
lemmingDict[lemmingNum] = line.match(/[\s\S]{1,2}/g);
})
});
lemmingData = lemmingData.filter(function(d) { return d.points != null })
var loopIndex = 0;
x.domain([0, 9])
y.domain([0, lemmingData[0].points.length])
svg.selectAll(".block-group")
.data(lemmingData.filter(function(d) { return d.num == 0 }))
.enter().append("g")
.attr("class", "block-group")
.attr("transform", function(d,i) {return "translate(0," + y(i) + ")" } )
.selectAll(".block")
.data(function(d) { return d.points })
.enter().append("rect")
.attr("class", "block")
.attr("x", function(d, i) { return x(i) })
.attr("width", width/x.domain()[1])
.attr("height", height/y.domain()[1])
.style("fill", function(d) {
switch(d) {
case "re":
return "#a4170f"
break;
case "bl":
return "#1a315f"
break;
case "or":
return "#df7006"
break;
case "gr":
return "#414141"
break;
case "ta":
return "#a58271"
break;
case "dg":
return "#252525"
break;
default:
return "#000"
}
});
var indexNum = 0;
var t = d3.interval(function(elapsed) {
svg.selectAll(".block-group")
.data(lemmingData.filter(function(d) { return d.num == indexNum }))
.selectAll(".block")
.data(function(d) { return d.points })
.attr("x", function(d, i) { return x(i) })
.style("fill", function(d) {
switch(d) {
case "re":
return "#a4170f"
break;
case "bl":
return "#1a315f"
break;
case "or":
return "#df7006"
break;
case "gr":
return "#414141"
break;
case "ta":
return "#a58271"
break;
case "dg":
return "#252525"
break;
default:
return "#000"
}
});
if(indexNum == lemmings.length-1) {
indexNum = 0;
} else {
indexNum += 1;
}
}, 100);
</script>