Skip to content

Instantly share code, notes, and snippets.

@mforando

mforando/.block

Last active September 27, 2017 16:57
Show Gist options
  • Save mforando/55e54cd46ce2a2bc249fc6c497c76d47 to your computer and use it in GitHub Desktop.
Save mforando/55e54cd46ce2a2bc249fc6c497c76d47 to your computer and use it in GitHub Desktop.
Download ZIP
Implementing Great Arcs in Tableau
Raw
.block
license: mit
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment