Skip to content

Instantly share code, notes, and snippets.

@SpaceActuary

SpaceActuary/.block

Last active February 28, 2017 05:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SpaceActuary/c6571fdfe785c0811d02cdb5e65eb352 to your computer and use it in GitHub Desktop.
Save SpaceActuary/c6571fdfe785c0811d02cdb5e65eb352 to your computer and use it in GitHub Desktop.
Download ZIP
stepper example
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
font-family: Helvetica, sans; font-size: 33}
a.step-link {
padding: 5px;
background-color: #0054db;
color: #666;
text-decoration: none;
}
a.step-link:hover, a.active {
color: #ddd;
}
a.step-link:hover, a.target {
background-color: #f40024;
}
</style>
</head>
<body>
<div id="vis-nav">
<a href="#" id="step-1" class="step-link">Step1</a>
<a href="#" id="step-2" class="step-link">Step2</a>
<a href="#" id="step-3" class="step-link">Step3</a>
<a href="#" id="step-4" class="step-link">Step4</a>
<a href="#" id="step-5" class="step-link active target">Step5</a>
<a href="#" id="step-6" class="step-link">Step6</a>
<a href="#" id="step-7" class="step-link">Step7</a>
<a href="#" id="step-8" class="step-link">Step8</a>
<a href="#" id="step-9" class="step-link">Step9</a>
</div>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
svg.append("text")
.text("Edit the code below to change me!")
.attr("y", 200)
.attr("x", 120)
.attr("id", "myText")
.style("font-size", 36)
.style("font-family", "monospace")
var steps = {
"step-1": function(){ showHideText("This is step one."); },
"step-2": function(){ showHideText("This is step two."); },
"step-3": function(){ showHideText("This is step three."); },
"step-4": function(){ showHideText("This is step four."); },
"step-5": function(){ showHideText("This is step five."); },
"step-6": function(){ showHideText("This is step six."); },
"step-7": function(){ showHideText("This is step seven."); },
"step-8": function(){ showHideText("This is step eight."); },
"step-9": function(){ showHideText("This is step nine."); }
}
console.log("steps", steps)
function switchStep(newStep){
d3.selectAll(".step-link").classed("active", false);
d3.select("#" + newStep).classed("active", true);
var action = steps[newStep]
console.log(newStep, steps, action)
action();
}
function nextStep(){
var attrID = d3.select(".active").attr("id").split("-")[0]
activeIndex = +d3.select(".active").attr("id").split("-")[1],
targetIndex = +d3.select(".target").attr("id").split("-")[1],
nextIndex = activeIndex + Math.sign(targetIndex - activeIndex);
return (nextIndex == activeIndex) ? false : [attrID, nextIndex].join("-");
}
function switchTarget(newStep){
d3.selectAll(".step-link").classed("target", false);
d3.select("#" + newStep).classed("target", true);
}
function switchAnnotation(newStep){
d3.selectAll(".annotation-step")
.style("display", "none")
.style("opacity", 0.0);
d3.select("#" + newStep + "-annotation")
.style("display", "block")
.transition().delay(300).duration(500)
.style("opacity", 1);
}
d3.selectAll("a.step-link").on("click", function(d){
var clickedStep = d3.select(this).attr("id");
switchTarget(clickedStep);
switchStep(nextStep());
//switchAnnotation(clickedStep);
return false;
});
var showHideText = function(myText){
d3.select("#myText")
.style("opacity", 0.0)
.text(myText)
.transition().duration(1500)
.style("opacity", 1.0)
.transition().duration(1500)
.style("opacity", 0.0);
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment