Skip to content

Instantly share code, notes, and snippets.

@mforando

mforando/.block

Last active September 28, 2017 15:07
Show Gist options
  • Save mforando/b431fc12f4c6fb5f43af7a2eb7927b0a to your computer and use it in GitHub Desktop.
Save mforando/b431fc12f4c6fb5f43af7a2eb7927b0a to your computer and use it in GitHub Desktop.
Download ZIP
Great Arcs
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://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<script src="https://public.tableau.com/javascripts/api/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