index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: lightgray !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 colorScale = d3.scaleOrdinal()
.domain(["gr","br","ta", " "])
.range(["#adfc16","#df4812","#fd9138","lightgray"])
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 links = [" grgrgrgrgrgr \n grgrgrgrgrgrgrgr \n ta grbrbrbrbrbrbrgr ta \n ta brbrbrbrbrbrbrbr ta \n tatabrtagrtatagrtabrtata \n tatabrtabrtatabrtabrtata \n tatatatatatatatatatabr \n grtatabrbrtatagrbrbr \n brbrbrbrbrtatatagrgrgrta \n brbrtabrbrbrbrgrgrgrgrgrta \n brtatatabrbrtabrbrgrgrbr \n brbrtabrbrbrtagrbrbrbrgr \n brbrtabrbrbrtabrbrgrgrgr \n brbrbrbrbrbrtagrgrgrbr \n tatatatata brbrbr \n brbrbr \n"," grgrgrgrgrgr \n grgrgrgrgrgrgrgr \n ta grbrbrbrbrbrbrgr ta \n ta brbrbrbrbrbrbrbr ta \n tatabrtagrtatagrtabrtata \n tatabrtabrtatabrtabrtata \n tatatatatatatatatatabr \n grgrtatabrbrtatagrgrbr \n brbrbrbrbrtatatatagrgrbrbrbr \n brbrtabrbrbrbrgrgrgrgrgrtabrbr \n brtatatabrbrtabrbrgrgrtatatabr \n brbrtabrbrbrtagrbrbrbrbrtatata \n brbrtabrbrbrtabrbrgrgrgrgrta \n brbrbrbrbrbrtagrgrgrgrgrgr \n tatatatatabr brbrbrbr \n brbrbr \n"]
var linkData = [];
links.forEach(function(link, linkNum) {
link.split("\n").forEach(function(line, i) {
linkData.push({"num": linkNum,"points":line.match(/[\s\S]{1,2}/g)});
})
});
linkData = linkData.filter(function(d) { return d.points != null })
var loopIndex = 0;
x.domain([0, linkData[0].points.length])
y.domain([0, linkData[0].points.length])
svg.selectAll(".block-group")
.data(linkData.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) { return colorScale(d) });
var indexNum = 0;
d3.interval(function(elapsed) {
svg.selectAll(".block-group")
.data(linkData.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) { return colorScale(d) });
if(indexNum == links.length-1) {
indexNum = 0;
} else {
indexNum += 1;
}
}, 300);
</script>
zelda-data
grgrgrgrgrgr
grgrgrgrgrgrgrgr
ta grbrbrbrbrbrbrgr ta
ta brbrbrbrbrbrbrbr ta
tatabrtagrtatagrtabrtata
tatabrtabrtatabrtabrtata
tatatatatatatatatatabr
grtatabrbrtatagrbrbr
brbrbrbrbrtatatagrgrgrta
brbrtabrbrbrbrgrgrgrgrgrta
brtatatabrbrtabrbrgrgrbr
brbrtabrbrbrtagrbrbrbrgr
brbrtabrbrbrtabrbrgrgrgr
brbrbrbrbrbrtagrgrgrbr
tatatatata brbrbr
brbrbr
grgrgrgrgrgr
grgrgrgrgrgrgrgr
ta grbrbrbrbrbrbrgr ta
ta brbrbrbrbrbrbrbr ta
tatabrtagrtatagrtabrtata
tatabrtabrtatabrtabrtata
tatatatatatatatatatabr
grgrtatabrbrtatagrgrbr
brbrbrbrbrtatatatagrgrbrbrbr
brbrtabrbrbrbrgrgrgrgrgrtabrbr
brtatatabrbrtabrbrgrgrtatatabr
brbrtabrbrbrtagrbrbrbrbrtatata
brbrtabrbrbrtabrbrgrgrgrgrta
brbrbrbrbrbrtagrgrgrgrgrgr
tatatatatabr brbrbrbr
brbrbr