ANYTUG: Great Arcs in Tableau

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>Dynamic Annotations in a Visualization Stepper</title>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<style>
body {
  font-family: Franklin Gothic Book;
  font-size: 0.8em;
}
h1 {
  font-family: Franklin Gothic Medium;
  font-size: 42px; 
  margin:0;
  color:black;
}

h2.subtitle {
  font-family: Franklin Gothic Book;
  font-size: .8em;
  padding: 0px;
  opacity:.7
  color: #666;
  color:black;
}

a.step-link {
	font-family:Franklin Gothic Medium;
	text-decoration: none;
	z-index: 20;
	display:inline-block;
	overflow: hidden;
	border: .5px solid gray;
	font-family:Verdana;
	font-size:10.5px;
 text-decoration: none;
 border: 1px solid gray;
  padding: 2px 5px 2px 5px;
  color: black;
  opacity:.6;
  background-color: rgb(240,240,240);
}

a.step-link:last-child {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3;
	border-radius: 0px 3px 3px 0px;
}
a.step-link:first-child {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3;
	border-radius: 3px 0px 0px 3px;
}

a.step-link:hover, a.active {
  opacity:1;
    background-color: rgb(230,230,230);
}

#container{
  margin: auto;
  width: 1000px;
}

#vis-container {
  position: relative;
  width: 1000px;
  height: 1000px;
  margin-top: 20px;

}

#annotation-steps {
  position: absolute;
  z-index: 40;
}

#vis-nav {

}

#vis-canvas {
  position: absolute;
  width: 1000px;
  height: 1000px;
  overflow: hidden;
  background-color: none;
}

#tableauBezier1{
  position: absolute;
  width: 1000px;
  height: 1000px;
  overflow: hidden;
  background-color: none;
}

#vis-bezier {
  position: absolute;
  width: 1000px;
  height: 1000px;
  overflow: hidden;
  z-index: 1000;
  background-color: none;
}

.annotation-step {
  background-color: green;
  position: absolute;
  display: none;
  z-index:1000;
}

.annotation {
  position: absolute;
}

#step0-left-annotation {
  left: 0px;
  top: -15px;
  width: 220px;
  text-align:left;
}

#step0-low-annotation {
  left: 0px;
  top: 425px;
  width: 900px;
  text-align:center;
}

#step1-left-annotation {
  left: 280px;
  top: 35px;
  width: 240px;
  text-align:left;
}

#step3-left-annotation {
  left: 520px;
  top: 40px;
  width: 300px;

}
#step3-annotation {
  left: 480px;
  top: 265px;
  width: 300px;
  text-align: center;
}
.domain {
	stroke: rgb(210,210,210); 
	}

.curve, .line {
stroke: black;
  fill: none;
  stroke-width: 1px;
  stroke-opacity: .6;
}
.curve {
  stroke: red;
  stroke-width: 3px;
}
.control {
  fill: #ccc;
  stroke: #000;
  stroke-width: .5px;
	cursor: move;
}
.control.drag, .control:hover {
	fill: rgb(0,50,100);
}
.t, .controltext {
  font-size: .6em;
}
svg {
  display: inline-block;
}
.curve {
stroke-width: 2px;
stroke: red;
stroke-opacity:.8;
}

.t {
	font-size: 64px;
}

#greatCircleIframe {
  position: absolute;
  overflow: hidden;
  z-index: 10;
  background-color: none;
;}
	
</style>
<body>
  <div id="container">
    <h1>Albany Tableau Users Group: Great Arcs/Circles</h1>
    <p>While there are multiple ways to draw smooth curves on a map, a common technique is to use the equation of Great Arcs (or segments of great circles) to draw intermediary points in Tableau between a starting point and ending point.  In the storypoints below, the basic concept of Great Circles is demonstrated through a Jason Davies' D3 visualization.  Next, the tableau implementation of Great Arcs is shown, using the various locations Edward Snowden fled to after the US Department of Justice charged him with espionage<div id="vis-nav">
    <a href="#" id="step0" class="step-link active">Great Arcs 101</a><a href="#" id="step1" class="step-link">Sample Dataset</a><a href="#" id="step2" class="step-link">Snowden's Great Arcs</a>
 </div>
	
    <div id="vis-container">
		
		
		<div id="vis-canvas"></div>
		<div class="vis-greatCircles" id="source">
		<a>For more information, please see: <a href="https://www.jasondavies.com/maps/intersect/">https://www.jasondavies.com/maps/intersect/</a></a>
		<br></br>
		</div>
		<iframe frameBorder="0" id="greatCircleIframe" class="vis-greatCircles" height = 700; width=900; src="https://www.jasondavies.com/maps/intersect/"></iframe>

</div>
  <script src="https://d3js.org/tableau-2.min.js"></script>
  <script src="tableau-2.2.1.min.js"></script>
  <script>
 
  var laststep = "step0";
  
	function tableauViz(url,htmlElement) {
	
		var placeholderDiv = document.getElementById("tableauBezier1");
			  
		var options = {
			width: placeholderDiv.offsetWidth,
			height: placeholderDiv.offsetHeight,
			hideTabs: true,
			hideToolbar: true,
			onFirstInteractive: function () {
			  workbook = viz.getWorkbook();
			  activeSheet = workbook.getActiveSheet();
			}
			
		  };
		  
		  viz = new tableau.Viz(placeholderDiv, url, options);
		  
	}
			
	function switchStep(newStep)
	{
	
	  d3.selectAll(".step-link").classed("active", false);
	  d3.select("#" + newStep).classed("active", true);
	 
	  if (newStep=="step0"){
		d3.selectAll("#tableauBezier1").remove();
		d3.selectAll("#vis-canvas").attr("class","vis-greatCircles").html('<a>For more information, please see: <a href="https://www.jasondavies.com/maps/intersect/">https://www.jasondavies.com/maps/intersect/</a></a>')
		d3.selectAll("#vis-canvas").append("iframe").attr("frameBorder","0").attr("class","vis-greatCircles").attr("width",900).attr("height",700).attr("src","https://www.jasondavies.com/maps/intersect/");
	  ;}
	  else {
  		d3.selectAll("#tableauBezier1").remove();
	  	d3.selectAll(".vis-greatCircles").remove();
			}
	  
	  
	  if (newStep=="step1"){  
			if (laststep!="step2"){
				d3.selectAll("#tableauBezier1").remove();
			    d3.selectAll("#vis-container").append("div").attr("id","tableauBezier1");
			tableauViz("https://public.tableau.com/views/TableauUsersGroupSnowdensRouteData/StraightLine")	  			
			;}
		else {

;}
	  }
	  
	  if (newStep=="step2"){
	  
	  
	    d3.selectAll("#tableauBezier1").remove();
		  d3.selectAll("#vis-container").append("div").attr("id","tableauBezier1");
		  tableauViz("https://public.tableau.com/views/TableauUsersGroupSnowdenArcs/SnowdenArcs?:embed=y&:display_count=yes&publish=yes")
			;}	
	 	  
	laststep = newStep;
	
	}

function switchAnnotation(newStep)
	{
	
	  d3.selectAll(".annotation-step")
		.style("display", "none")
		.style("opacity", 0.0);

console.log(newStep + "-annotation")
		
	  d3.select("#" + newStep + "-annotation")
		.style("display", "block")
		.transition().delay(300).duration(2000)
		  .style("opacity", 1);
	}

d3.selectAll("a.step-link").on("click", function(d) {
	  var clickedStep = d3.select(this).attr("id");
	  switchStep(clickedStep);
	  switchAnnotation(clickedStep);
	  return false;
	});
  
  
  </script>
</body>

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

https://d3js.org/tableau-2.min.js