|
<!DOCTYPE html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> |
|
<style> |
|
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } |
|
svg { width: 100%; height: 100%; } |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<script> |
|
var margin = {top: 120, right: 10, bottom: 20, left: 10}; |
|
var width = 960 - margin.left - margin.right; |
|
var height = 500 - margin.top - margin.bottom; |
|
|
|
|
|
var letterGroupY = 0; |
|
var overText; |
|
var lastX = 100; |
|
var letterSpacing = 15; |
|
|
|
var argArray = [[1,5,9],[2,5,8],[3,5,2],[4,5,4],[5,5,4]]; |
|
var letters = "MVPIYDIANOASTZUTUTVRAAEKMALRWOPINSFAZSMPOEDFESWESQS"; |
|
|
|
|
|
|
|
var svgCircles = d3.select("body") |
|
.append("svg") |
|
.attr("width", width + margin.left + margin.right + 60) |
|
.attr("height", height) |
|
.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") |
|
.on("click", function() { |
|
argArray = [[1,5,9],[2,5,8],[3,5,2],[4,5,4],[5,5,4]]; |
|
svgCircles.selectAll(".overTextLetter").remove(); |
|
lastX = 100; |
|
findWords(argArray.shift()); |
|
}) |
|
|
|
|
|
|
|
var baseLetters = svgCircles.selectAll("baseLetters") |
|
.data(letters) |
|
.enter() |
|
.append("text") |
|
.attr("x", function(d,i) { |
|
return 100 + (i * letterSpacing); |
|
}) |
|
.attr("y", letterGroupY) |
|
.style("opacity", 0.3) |
|
.style("font","bold 28px monospace") |
|
.text(function(d) { return d;}); |
|
|
|
function findWords(args) { |
|
|
|
//Adds a layer that is identical to the bottom layer |
|
//Allows the ability to move a ltter such that the bottom layer letter stays. |
|
overText = svgCircles.selectAll(".overtext") |
|
.data(letters) |
|
.enter() |
|
.append("text") |
|
.classed("overTextLetter", true) |
|
.attr("x", function(d,i) { |
|
return 100 + (i * letterSpacing); |
|
}) |
|
.attr("y", letterGroupY) |
|
.style("opacity",0) |
|
.style("font","bold 28px monospace") |
|
.text(function(d,i) { return d;}); |
|
|
|
|
|
var letterPos = args[0], |
|
cycle = args[1], |
|
letterCount = args[2]; |
|
|
|
var count = 0; |
|
var n = 0; |
|
//Delay allows stepping through each one rather than doing all of them at the same time. |
|
overText |
|
.transition() |
|
.delay(function(d,i) { return i * 30;}) |
|
.each(function(d,i) { |
|
n++; |
|
var currentPos = i; |
|
if (count == letterCount) { |
|
currentPos = -1; |
|
} |
|
var targetLetterPos = letterPos + (cycle * count); |
|
if (currentPos == targetLetterPos) { |
|
count++; |
|
} |
|
|
|
d3.select(this) |
|
.transition() |
|
.style("fill","green") |
|
.style("opacity",1) |
|
.transition() |
|
.style("opacity",function(d) { |
|
if (currentPos == targetLetterPos || d3.select(this).classed("moved")) { |
|
return 1; |
|
} else { |
|
return 0; |
|
} |
|
}) |
|
.style("fill", function(d) { |
|
if (currentPos == targetLetterPos || d3.select(this).classed("moved")) { |
|
return "blue" |
|
} else { |
|
return "black"; |
|
} |
|
}); |
|
}) |
|
.each("end", function(d,i) { |
|
n--; |
|
if (!n) { |
|
moveWord(); |
|
} |
|
}); |
|
}; |
|
|
|
|
|
findWords(argArray.shift()); |
|
|
|
|
|
|
|
|
|
function moveWord() { |
|
var n = 0; |
|
overText |
|
.transition() |
|
.duration(500) |
|
.delay(500) |
|
.attr("y", function(d,i) { |
|
n++; |
|
var color = d3.select(this).style("fill"); |
|
if (color == "rgb(0, 0, 255)" && !d3.select(this).classed("moved")) { |
|
return letterGroupY + 30; |
|
} |
|
}) |
|
.attr("x", function(d,i) { |
|
var color = d3.select(this).style("fill"); |
|
if (color == "rgb(0, 0, 255)" && !d3.select(this).classed("moved")) { |
|
d3.select(this).classed("moved", true); |
|
lastX = lastX + letterSpacing; |
|
return lastX; |
|
} |
|
|
|
}) |
|
.each("end", function() { |
|
n--; |
|
if (!n) { |
|
var args = argArray.shift(); |
|
if (args != undefined) { |
|
lastX = lastX + letterSpacing; |
|
findWords(args); |
|
} |
|
} |
|
}) |
|
}; |
|
</script> |
|
</body> |
|
|
