Skip to content

Instantly share code, notes, and snippets.

@pstuffa

pstuffa/index.html

Created March 29, 2017 15:26
Show Gist options
  • Save pstuffa/1f292bac326e8a21fe323430a5ae4140 to your computer and use it in GitHub Desktop.
Save pstuffa/1f292bac326e8a21fe323430a5ae4140 to your computer and use it in GitHub Desktop.
Download ZIP
Link
Raw
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>
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment