Skip to content

Instantly share code, notes, and snippets.

@caravinden

caravinden/index.html

Last active February 7, 2017 11:04
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 caravinden/e4d3fc0cd6092675d10850ecb3d6ce8d to your computer and use it in GitHub Desktop.
Save caravinden/e4d3fc0cd6092675d10850ecb3d6ce8d to your computer and use it in GitHub Desktop.
Download ZIP
Navigator Implementation using d3.js
Raw
index.html
<html>
<head>
<title>Navigator</title>
</head>
<script src="//d3js.org/d3.v3.min.js"></script>
<style>
.navi-text {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: 200;
fill: #FFFFFF;
}
</style>
<div id="AirRoot"></div>
<div id="Mobi"></div>
<script>
/* Navigator.js is a javascript library that helps to
* make a visualization on navigation. d3.js and svg
* are the two main technology used.
*/
var Navigator = function(config) {
var me = this;
me.width = config.width || 800,
me.height = config.height || 20,
me.naviW = config.nw || 90,
me.naviH = config.nh || 20,
me.naviS = config.ns || 3,
me.naviT = config.nt || 10,
me.divID = config.divId || '',
me.data = config.data || '';
me.initNavigator()
me.plotNavigator();
}
/* To initialize the navigator ploating area
* by svg component. Svg can be positioned using
* margin component.
*/
Navigator.prototype.initNavigator = function() {
var me = this,
margin = {top: 0, right: 0, bottom: 0, left: 0},
width = me.width - margin.left - margin.right,
height = me.height - margin.top - margin.bottom;
var svg = d3.select("#"+me.divID)
.append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.attr("id", "Navigator"+me.divID)
.append('g')
.attr("transform", function(d, i) {
return "translate("+margin.left+","+margin.top+")";
});
}
/* Update the navigator trail to show
* the current sequence and percentage
*/
Navigator.prototype.plotNavigator = function() {
var me = this,
data = me.data;
if(data.length != 0){
d3.select(".navigator-g"+me.divID).remove();
}
var g = d3.select("#Navigator"+me.divID+" >g")
.selectAll("g")
.data(data);
var entering = g.enter()
.append("svg:g")
.attr('class', 'navigator-g'+me.divID)
.attr("transform", function(d, i) {
return "translate(" + (i * (me.naviW + me.naviS)) + ", 1)";
});
entering.append("svg:polygon")
.attr("points", function(d, i) {
return me.navigatorPoints(d, i); })
.style("fill", function(d){ return d.color; })
entering.append("svg:text")
.attr("x", 17)
.attr("y", me.naviH / 2)
.attr("dy", "0.35em")
.attr("class", "navi-text")
.text(function(d) {
var lblTxt = d.name ? d.name : '';
return lblTxt.length >12 ? lblTxt.slice(0,10)+".." : lblTxt;
});
entering.append("svg:title")
.text(function(d){ return d.name ? d.name : ''; })
g.exit().remove();
d3.select("#navigators").style("visibility", "");
}
/* Generate a string that describes the points of a
* navigator polygon.
*/
Navigator.prototype.navigatorPoints = function(d, i) {
var me = this;
var points = [];
points.push("0,0");
points.push(me.naviW + ",0");
points.push(me.naviW + me.naviT + "," + (me.naviH / 2));
points.push(me.naviW + "," + me.naviH);
points.push("0," + me.naviH);
i > 0 ? points.push(me.naviT + "," + (me.naviH / 2)) : '';
return points.join(" ");
}
var data = [{"name":"Banglore","color":"#762a83"},{"name":"Dubai","color":"#8c510a"},{"name":"France","color":"#bf812d"},{"name":"Canada","color":"#1b7837"},{"name":"Dallas","color":"#5aae61"}];
var navigatorObj = new Navigator({
width: 800,
height: 20,
nw: 90,
nh: 20,
ns: 3,
nt: 10,
divId: "AirRoot",
data: data
})
var dataA = [{"name":"Home","color":"#186C58"},{"name":"Menu","color":"#8c510a"},{"name":"Tools","color":"#bf812d"},{"name":"Time","color":"#bf812d"}];
var navigatorObj = new Navigator({
width: 800,
height: 20,
nw: 90,
nh: 20,
ns: 3,
nt: 10,
divId: "Mobi",
data: dataA
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment