stepper example

<!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>

https://d3js.org/d3.v4.min.js