From 381fe30493e098575448579df50864effa339862 Mon Sep 17 00:00:00 2001
From: Katie Paxton-Fear <katie.paxton-fear@watt.co.uk>
Date: Mon, 30 Oct 2017 10:55:58 +0000
Subject: [PATCH 1/2] Added Support for clicking on a knot to go to a specific
 page

---
 example/index.html   | 19 +++++++++----------
 src/timeknots-min.js |  2 +-
 src/timeknots.js     |  6 ++++++
 3 files changed, 16 insertions(+), 11 deletions(-)
diff --git a/example/index.html b/example/index.html
index 7a37fe4..c54e3c6 100644
--- a/example/index.html
+++ b/example/index.html
@@ -2,7 +2,7 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 <script src="../src/d3.v2.min.js" type="application/javascript"></script>
-<script src="../src/timeknots.js" type="application/javascript"></script>
+<script src="../src/timeknots-min.js" type="application/javascript"></script>
 <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
 <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
 <style>
@@ -24,7 +24,7 @@ <h5><a href='https://github.com/alangrafu/timeknots'>https://github.com/alangraf
 <div class="fluid-row">
 <div class="span3">
  <h2>Stanley Kubrick's movies</h2>
- <h5>Part of Kubrick's Filmography form Wikipedia</h5>
+ <h5>Part of Kubrick's Filmography form Wikipedia with links to each page</h5>
  <div id="timeline1" style="width:500px;"></div>
  <h2>Numeric, non date data</h2>
  <div id="timelineNonDate" style="width:200px;"></div>
@@ -50,13 +50,13 @@ <h5>Shows random meetings/free days</h5>
 ];
 TimeKnots.draw("#timelineNonDate", nonDatedata, {dateDimension:false, color: "teal", width:500, showLabels: true, labelFormat: "%Y"});
 
-var kurbickFilms = [{name:"Day of the Fight", date: "1951-04-26", img: "http://upload.wikimedia.org/wikipedia/en/thumb/c/c4/Day_of_the_Fight_title.jpg/215px-Day_of_the_Fight_title.jpg"},
-  {name:"The Seafarers", 	date:"1953-10-15", img: "http://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Seafarers_title.jpg/225px-Seafarers_title.jpg"},
-  {name:"Lolita (1962 film)", 	date:"1962-06-13", img: "http://upload.wikimedia.org/wikipedia/en/thumb/7/72/LolitaPoster.jpg/215px-LolitaPoster.jpg"},
-  {name:"Fear and Desire", date:	"1953-03-31", img: "http://upload.wikimedia.org/wikipedia/en/f/f7/Fear_and_Desire_Poster.jpg"},
-  {name:"Paths of Glory", date:	"1957-12-25", img: "http://upload.wikimedia.org/wikipedia/en/thumb/b/bc/PathsOfGloryPoster.jpg/220px-PathsOfGloryPoster.jpg"},
-  {name:"A Clockwork Orange (film)", date:	"1971-12-19", img: "http://upload.wikimedia.org/wikipedia/en/thumb/4/48/Clockwork_orangeA.jpg/220px-Clockwork_orangeA.jpg"},
-  {name:"Killer's Kiss", date:	"1955-09-28", img: "http://upload.wikimedia.org/wikipedia/en/thumb/a/a6/KillersKissPoster.jpg/220px-KillersKissPoster.jpg"}
+var kurbickFilms = [{name:"Day of the Fight", url:"https://en.wikipedia.org/wiki/Day_of_the_Fight", date: "1951-04-26", img: "http://upload.wikimedia.org/wikipedia/en/thumb/c/c4/Day_of_the_Fight_title.jpg/215px-Day_of_the_Fight_title.jpg"},
+  {name:"The Seafarers", 	date:"1953-10-15", url:"https://en.wikipedia.org/wiki/The_Seafarers", img: "http://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Seafarers_title.jpg/225px-Seafarers_title.jpg"},
+  {name:"Lolita (1962 film)", 	date:"1962-06-13", url:"https://en.wikipedia.org/wiki/Lolita_(1962_film)", img: "http://upload.wikimedia.org/wikipedia/en/thumb/7/72/LolitaPoster.jpg/215px-LolitaPoster.jpg"},
+  {name:"Fear and Desire", date:	"1953-03-31", url:"https://en.wikipedia.org/wiki/Fear_and_Desire", img: "http://upload.wikimedia.org/wikipedia/en/f/f7/Fear_and_Desire_Poster.jpg"},
+  {name:"Paths of Glory", date:	"1957-12-25", url:"https://en.wikipedia.org/wiki/Paths_of_Glory", img: "http://upload.wikimedia.org/wikipedia/en/thumb/b/bc/PathsOfGloryPoster.jpg/220px-PathsOfGloryPoster.jpg"},
+  {name:"A Clockwork Orange (film)", date:	"1971-12-19", url:"https://en.wikipedia.org/wiki/A_Clockwork_Orange_(film)", img: "http://upload.wikimedia.org/wikipedia/en/thumb/4/48/Clockwork_orangeA.jpg/220px-Clockwork_orangeA.jpg"},
+  {name:"Killer's Kiss", date:	"1955-09-28", url: "https://en.wikipedia.org/wiki/Killer%27s_Kiss", img: "http://upload.wikimedia.org/wikipedia/en/thumb/a/a6/KillersKissPoster.jpg/220px-KillersKissPoster.jpg"}
 ];
 
 TimeKnots.draw("#timeline1", kurbickFilms, {dateFormat: "%B %Y", color: "#696", width:500, showLabels: true, labelFormat: "%Y"});
@@ -75,7 +75,6 @@ <h5>Shows random meetings/free days</h5>
 TimeKnots.draw("#timeline2", mySchedule, {horizontalLayout: false, color: "#669", height: 450, width:200, showLabels: true, labelFormat:"%H:%M"});
 
 
-
 var agenda = new Array();
 var day = 86400000;
 var today = new Date();
diff --git a/src/timeknots-min.js b/src/timeknots-min.js
index 4056edf..e3414d2 100644
--- a/src/timeknots-min.js
+++ b/src/timeknots-min.js
@@ -1 +1 @@
-var TimeKnots={draw:function(a,b,c){var d={width:600,height:200,radius:10,lineWidth:4,color:"#999",background:"#FFF",dateFormat:"%Y/%m/%d %H:%M:%S",horizontalLayout:!0,showLabels:!1,labelFormat:"%Y/%m/%d %H:%M:%S",addNow:!1,seriesColor:d3.scale.category20(),dateDimension:!0};if(void 0!=c)for(var e in c)d[e]=c[e];0!=d.addNow&&b.push({date:new Date,name:d.addNowLabel||"Today"});var f=d3.select(a).append("div").style("opacity",0).style("position","absolute").style("font-family","Helvetica Neue").style("font-weight","300").style("background","rgba(0,0,0,0.5)").style("color","white").style("padding","5px 10px 5px 10px").style("-moz-border-radius","8px 8px").style("border-radius","8px 8px"),g=d3.select(a).append("svg").attr("width",d.width).attr("height",d.height);if(d.dateDimension)var h=b.map(function(a){return Date.parse(a.date)}),i=d3.max(h),j=d3.min(h);else var h=b.map(function(a){return a.value}),i=d3.max(h),j=d3.min(h);var k=1.5*(d3.max(b.map(function(a){return a.radius}))||d.radius)+d.lineWidth,l=d.horizontalLayout?(d.width-2*k)/(i-j):(d.height-2*k)/(i-j),m=[];if(i==j&&(l=0,k=d.horizontalLayout?d.width/2:d.height/2),linePrevious={x1:null,x2:null,y1:null,y2:null},g.selectAll("line").data(b).enter().append("line").attr("class","timeline-line").attr("x1",function(a){var b;if(d.horizontalLayout){var c=d.dateDimension?new Date(a.date).getTime():a.value;b=Math.floor(l*(c-j)+k)}else b=Math.floor(d.width/2);return linePrevious.x1=b,b}).attr("x2",function(a){if(null!=linePrevious.x1)return linePrevious.x1;if(d.horizontalLayout){var b=d.dateDimension?new Date(a.date).getTime():a.value;ret=Math.floor(l*(b-j))}return Math.floor(d.width/2)}).attr("y1",function(a){var b;if(d.horizontalLayout)b=Math.floor(d.height/2);else{var c=d.dateDimension?new Date(a.date).getTime():a.value;b=Math.floor(l*(c-j))+k}return linePrevious.y1=b,b}).attr("y2",function(a){if(null!=linePrevious.y1)return linePrevious.y1;if(d.horizontalLayout)return Math.floor(d.height/2);var b=d.dateDimension?new Date(a.date).getTime():a.value;return Math.floor(l*(b-j))}).style("stroke",function(a){return void 0!=a.color?a.color:void 0!=a.series?(m.indexOf(a.series)<0&&m.push(a.series),d.seriesColor(m.indexOf(a.series))):d.color}).style("stroke-width",d.lineWidth),g.selectAll("circle").data(b).enter().append("circle").attr("class","timeline-event").attr("r",function(a){return void 0!=a.radius?a.radius:d.radius}).style("stroke",function(a){return void 0!=a.color?a.color:void 0!=a.series?(m.indexOf(a.series)<0&&m.push(a.series),console.log(a.series,m,m.indexOf(a.series)),d.seriesColor(m.indexOf(a.series))):d.color}).style("stroke-width",function(a){return void 0!=a.lineWidth?a.lineWidth:d.lineWidth}).style("fill",function(a){return void 0!=a.background?a.background:d.background}).attr("cy",function(a){if(d.horizontalLayout)return Math.floor(d.height/2);var b=d.dateDimension?new Date(a.date).getTime():a.value;return Math.floor(l*(b-j)+k)}).attr("cx",function(a){if(d.horizontalLayout){var b=d.dateDimension?new Date(a.date).getTime():a.value,c=Math.floor(l*(b-j)+k);return c}return Math.floor(d.width/2)}).on("mouseover",function(a){if(d.dateDimension)var b=d3.time.format(d.dateFormat),c=b(new Date(a.date)),e=""!=c?a.name+" <small>("+c+")</small>":a.name;else var b=function(a){return a},c=a.value,e=a.name+" <small>("+a.value+")</small>";d3.select(this).style("fill",function(a){return void 0!=a.color?a.color:d.color}).transition().duration(100).attr("r",function(a){return void 0!=a.radius?Math.floor(1.5*a.radius):Math.floor(1.5*d.radius)}),f.html(""),void 0!=a.img&&f.append("img").style("float","left").style("margin-right","4px").attr("src",a.img).attr("width","64px"),f.append("div").style("float","left").html(e),f.transition().duration(100).style("opacity",.9)}).on("mouseout",function(){d3.select(this).style("fill",function(a){return void 0!=a.background?a.background:d.background}).transition().duration(100).attr("r",function(a){return void 0!=a.radius?a.radius:d.radius}),f.transition().duration(100).style("opacity",0)}),0!=d.showLabels){if(d.dateDimension)var n=d3.time.format(d.labelFormat),o=n(new Date(j)),p=n(new Date(i));else var n=function(a){return a},o=j,p=i;g.append("text").text(o).style("font-size","70%").attr("x",function(a){return d.horizontalLayout?d3.max([0,k-this.getBBox().width/2]):Math.floor(this.getBBox().width/2)}).attr("y",function(a){return d.horizontalLayout?Math.floor(d.height/2+(k+this.getBBox().height)):k+this.getBBox().height/2}),g.append("text").text(p).style("font-size","70%").attr("x",function(a){return d.horizontalLayout?d.width-d3.max([this.getBBox().width,k+this.getBBox().width/2]):Math.floor(this.getBBox().width/2)}).attr("y",function(a){return d.horizontalLayout?Math.floor(d.height/2+(k+this.getBBox().height)):d.height-k+this.getBBox().height/2})}g.on("mousemove",function(){return tipPixels=parseInt(f.style("height").replace("px","")),f.style("top",d3.event.pageY-tipPixels-k+"px").style("left",d3.event.pageX+20+"px")}).on("mouseout",function(){return f.style("opacity",0).style("top","0px").style("left","0px")})}};
\ No newline at end of file
+var TimeKnots={draw:function(t,e,i){var o={width:600,height:200,radius:10,lineWidth:4,color:"#999",background:"#FFF",dateFormat:"%Y/%m/%d %H:%M:%S",horizontalLayout:!0,showLabels:!1,labelFormat:"%Y/%m/%d %H:%M:%S",addNow:!1,seriesColor:d3.scale.category20(),dateDimension:!0};if(void 0!=i)for(var r in i)o[r]=i[r];0!=o.addNow&&e.push({date:new Date,name:o.addNowLabel||"Today"});var a=d3.select(t).append("div").style("opacity",0).style("position","absolute").style("font-family","Helvetica Neue").style("font-weight","300").style("background","rgba(0,0,0,0.5)").style("color","white").style("padding","5px 10px 5px 10px").style("-moz-border-radius","8px 8px").style("border-radius","8px 8px"),n=d3.select(t).append("svg").attr("width",o.width).attr("height",o.height);if(o.dateDimension)var l=e.map(function(t){return Date.parse(t.date)}),s=d3.max(l),d=d3.min(l);else var l=e.map(function(t){return t.value}),s=d3.max(l),d=d3.min(l);var u=1.5*(d3.max(e.map(function(t){return t.radius}))||o.radius)+o.lineWidth,h=o.horizontalLayout?(o.width-2*u)/(s-d):(o.height-2*u)/(s-d),f=[];if(s==d&&(h=0,u=o.horizontalLayout?o.width/2:o.height/2),linePrevious={x1:null,x2:null,y1:null,y2:null},n.selectAll("line").data(e).enter().append("line").attr("class","timeline-line").attr("x1",function(t){var e;if(o.horizontalLayout){var i=o.dateDimension?new Date(t.date).getTime():t.value;e=Math.floor(h*(i-d)+u)}else e=Math.floor(o.width/2);return linePrevious.x1=e,e}).attr("x2",function(t){if(null!=linePrevious.x1)return linePrevious.x1;if(o.horizontalLayout){var e=o.dateDimension?new Date(t.date).getTime():t.value;ret=Math.floor(h*(e-d))}return Math.floor(o.width/2)}).attr("y1",function(t){var e;if(o.horizontalLayout)e=Math.floor(o.height/2);else{var i=o.dateDimension?new Date(t.date).getTime():t.value;e=Math.floor(h*(i-d))+u}return linePrevious.y1=e,e}).attr("y2",function(t){if(null!=linePrevious.y1)return linePrevious.y1;if(o.horizontalLayout)return Math.floor(o.height/2);var e=o.dateDimension?new Date(t.date).getTime():t.value;return Math.floor(h*(e-d))}).style("stroke",function(t){return void 0!=t.color?t.color:void 0!=t.series?(f.indexOf(t.series)<0&&f.push(t.series),o.seriesColor(f.indexOf(t.series))):o.color}).style("stroke-width",o.lineWidth),n.selectAll("circle").data(e).enter().append("circle").attr("class","timeline-event").attr("r",function(t){return void 0!=t.radius?t.radius:o.radius}).style("stroke",function(t){return void 0!=t.color?t.color:void 0!=t.series?(f.indexOf(t.series)<0&&f.push(t.series),console.log(t.series,f,f.indexOf(t.series)),o.seriesColor(f.indexOf(t.series))):o.color}).style("stroke-width",function(t){return void 0!=t.lineWidth?t.lineWidth:o.lineWidth}).style("fill",function(t){return void 0!=t.background?t.background:o.background}).attr("cy",function(t){if(o.horizontalLayout)return Math.floor(o.height/2);var e=o.dateDimension?new Date(t.date).getTime():t.value;return Math.floor(h*(e-d)+u)}).attr("cx",function(t){if(o.horizontalLayout){var e=o.dateDimension?new Date(t.date).getTime():t.value;return Math.floor(h*(e-d)+u)}return Math.floor(o.width/2)}).on("mouseover",function(t){if(o.dateDimension)i=""!=(e=d3.time.format(o.dateFormat)(new Date(t.date)))?t.name+" <small>("+e+")</small>":t.name;else var e=t.value,i=t.name+" <small>("+t.value+")</small>";d3.select(this).style("fill",function(t){return void 0!=t.color?t.color:o.color}).transition().duration(100).attr("r",function(t){return void 0!=t.radius?Math.floor(1.5*t.radius):Math.floor(1.5*o.radius)}),a.html(""),void 0!=t.img&&a.append("img").style("float","left").style("margin-right","4px").attr("src",t.img).attr("width","64px"),a.append("div").style("float","left").html(i),a.transition().duration(100).style("opacity",.9)}).on("click",function(t){d3.select(this),void 0!=t.url&&(window.location.href=t.url)}).on("mouseout",function(){d3.select(this).style("fill",function(t){return void 0!=t.background?t.background:o.background}).transition().duration(100).attr("r",function(t){return void 0!=t.radius?t.radius:o.radius}),a.transition().duration(100).style("opacity",0)}),0!=o.showLabels){if(o.dateDimension)var c=(y=d3.time.format(o.labelFormat))(new Date(d)),m=y(new Date(s));else var y=function(t){return t},c=d,m=s;n.append("text").text(c).style("font-size","70%").attr("x",function(t){return o.horizontalLayout?d3.max([0,u-this.getBBox().width/2]):Math.floor(this.getBBox().width/2)}).attr("y",function(t){return o.horizontalLayout?Math.floor(o.height/2+(u+this.getBBox().height)):u+this.getBBox().height/2}),n.append("text").text(m).style("font-size","70%").attr("x",function(t){return o.horizontalLayout?o.width-d3.max([this.getBBox().width,u+this.getBBox().width/2]):Math.floor(this.getBBox().width/2)}).attr("y",function(t){return o.horizontalLayout?Math.floor(o.height/2+(u+this.getBBox().height)):o.height-u+this.getBBox().height/2})}n.on("mousemove",function(){return tipPixels=parseInt(a.style("height").replace("px","")),a.style("top",d3.event.pageY-tipPixels-u+"px").style("left",d3.event.pageX+20+"px")}).on("mouseout",function(){return a.style("opacity",0).style("top","0px").style("left","0px")})}};
\ No newline at end of file
diff --git a/src/timeknots.js b/src/timeknots.js
index 471ce96..76960d2 100644
--- a/src/timeknots.js
+++ b/src/timeknots.js
@@ -177,6 +177,12 @@ var TimeKnots = {
       .style("opacity", .9);
 
     })
+    .on("click", function(d){
+        d3.select(this);
+        if(d.url != undefined) {
+            window.location.href = d.url;
+        }
+    })
     .on("mouseout", function(){
         d3.select(this)
         .style("fill", function(d){if(d.background != undefined){return d.background} return cfg.background}).transition()

From 310e057caa84f4610accedce32297e0c9e3d0333 Mon Sep 17 00:00:00 2001
From: Katie Paxton-Fear <katie.paxton-fear@watt.co.uk>
Date: Tue, 31 Oct 2017 11:37:27 +0000
Subject: [PATCH 2/2] Added support for modals on click of knots issue #5

---
 example/index.html   | 35 +++++++++++++++++++++++++++++------
 src/timeknots-min.js |  2 +-
 src/timeknots.js     |  5 +++++
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/example/index.html b/example/index.html
index c54e3c6..fa27c3a 100644
--- a/example/index.html
+++ b/example/index.html
@@ -1,10 +1,17 @@
 <html>
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
-<script src="../src/d3.v2.min.js" type="application/javascript"></script>
-<script src="../src/timeknots-min.js" type="application/javascript"></script>
-<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
-<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <script
+         src="https://code.jquery.com/jquery-3.2.1.min.js"
+         integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+         crossorigin="anonymous"></script>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
+ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
+
+ <script src="../src/d3.v2.min.js" type="application/javascript"></script>
+ <script src="../src/timeknots.js" type="application/javascript"></script>
 <style>
 body {
   font: 18px "Helvetica Neue";
@@ -50,7 +57,7 @@ <h5>Shows random meetings/free days</h5>
 ];
 TimeKnots.draw("#timelineNonDate", nonDatedata, {dateDimension:false, color: "teal", width:500, showLabels: true, labelFormat: "%Y"});
 
-var kurbickFilms = [{name:"Day of the Fight", url:"https://en.wikipedia.org/wiki/Day_of_the_Fight", date: "1951-04-26", img: "http://upload.wikimedia.org/wikipedia/en/thumb/c/c4/Day_of_the_Fight_title.jpg/215px-Day_of_the_Fight_title.jpg"},
+var kurbickFilms = [{name:"Day of the Fight", date: "1951-04-26",modal:"myModal",  img: "http://upload.wikimedia.org/wikipedia/en/thumb/c/c4/Day_of_the_Fight_title.jpg/215px-Day_of_the_Fight_title.jpg"},
   {name:"The Seafarers", 	date:"1953-10-15", url:"https://en.wikipedia.org/wiki/The_Seafarers", img: "http://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Seafarers_title.jpg/225px-Seafarers_title.jpg"},
   {name:"Lolita (1962 film)", 	date:"1962-06-13", url:"https://en.wikipedia.org/wiki/Lolita_(1962_film)", img: "http://upload.wikimedia.org/wikipedia/en/thumb/7/72/LolitaPoster.jpg/215px-LolitaPoster.jpg"},
   {name:"Fear and Desire", date:	"1953-03-31", url:"https://en.wikipedia.org/wiki/Fear_and_Desire", img: "http://upload.wikimedia.org/wikipedia/en/f/f7/Fear_and_Desire_Poster.jpg"},
@@ -97,6 +104,22 @@ <h5>Shows random meetings/free days</h5>
 
 </script>
 
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
+ <div class="modal-dialog" role="document">
+  <div class="modal-content">
+   <div class="modal-header">
+    <h4 class="modal-title">Modal title</h4>
+   </div>
+   <div class="modal-body">
+    <p>One fine body&hellip;</p>
+   </div>
+   <div class="modal-footer">
+    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+   </div>
+  </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+
 </body>
 </html>
 
diff --git a/src/timeknots-min.js b/src/timeknots-min.js
index e3414d2..887ffaa 100644
--- a/src/timeknots-min.js
+++ b/src/timeknots-min.js
@@ -1 +1 @@
-var TimeKnots={draw:function(t,e,i){var o={width:600,height:200,radius:10,lineWidth:4,color:"#999",background:"#FFF",dateFormat:"%Y/%m/%d %H:%M:%S",horizontalLayout:!0,showLabels:!1,labelFormat:"%Y/%m/%d %H:%M:%S",addNow:!1,seriesColor:d3.scale.category20(),dateDimension:!0};if(void 0!=i)for(var r in i)o[r]=i[r];0!=o.addNow&&e.push({date:new Date,name:o.addNowLabel||"Today"});var a=d3.select(t).append("div").style("opacity",0).style("position","absolute").style("font-family","Helvetica Neue").style("font-weight","300").style("background","rgba(0,0,0,0.5)").style("color","white").style("padding","5px 10px 5px 10px").style("-moz-border-radius","8px 8px").style("border-radius","8px 8px"),n=d3.select(t).append("svg").attr("width",o.width).attr("height",o.height);if(o.dateDimension)var l=e.map(function(t){return Date.parse(t.date)}),s=d3.max(l),d=d3.min(l);else var l=e.map(function(t){return t.value}),s=d3.max(l),d=d3.min(l);var u=1.5*(d3.max(e.map(function(t){return t.radius}))||o.radius)+o.lineWidth,h=o.horizontalLayout?(o.width-2*u)/(s-d):(o.height-2*u)/(s-d),f=[];if(s==d&&(h=0,u=o.horizontalLayout?o.width/2:o.height/2),linePrevious={x1:null,x2:null,y1:null,y2:null},n.selectAll("line").data(e).enter().append("line").attr("class","timeline-line").attr("x1",function(t){var e;if(o.horizontalLayout){var i=o.dateDimension?new Date(t.date).getTime():t.value;e=Math.floor(h*(i-d)+u)}else e=Math.floor(o.width/2);return linePrevious.x1=e,e}).attr("x2",function(t){if(null!=linePrevious.x1)return linePrevious.x1;if(o.horizontalLayout){var e=o.dateDimension?new Date(t.date).getTime():t.value;ret=Math.floor(h*(e-d))}return Math.floor(o.width/2)}).attr("y1",function(t){var e;if(o.horizontalLayout)e=Math.floor(o.height/2);else{var i=o.dateDimension?new Date(t.date).getTime():t.value;e=Math.floor(h*(i-d))+u}return linePrevious.y1=e,e}).attr("y2",function(t){if(null!=linePrevious.y1)return linePrevious.y1;if(o.horizontalLayout)return Math.floor(o.height/2);var e=o.dateDimension?new Date(t.date).getTime():t.value;return Math.floor(h*(e-d))}).style("stroke",function(t){return void 0!=t.color?t.color:void 0!=t.series?(f.indexOf(t.series)<0&&f.push(t.series),o.seriesColor(f.indexOf(t.series))):o.color}).style("stroke-width",o.lineWidth),n.selectAll("circle").data(e).enter().append("circle").attr("class","timeline-event").attr("r",function(t){return void 0!=t.radius?t.radius:o.radius}).style("stroke",function(t){return void 0!=t.color?t.color:void 0!=t.series?(f.indexOf(t.series)<0&&f.push(t.series),console.log(t.series,f,f.indexOf(t.series)),o.seriesColor(f.indexOf(t.series))):o.color}).style("stroke-width",function(t){return void 0!=t.lineWidth?t.lineWidth:o.lineWidth}).style("fill",function(t){return void 0!=t.background?t.background:o.background}).attr("cy",function(t){if(o.horizontalLayout)return Math.floor(o.height/2);var e=o.dateDimension?new Date(t.date).getTime():t.value;return Math.floor(h*(e-d)+u)}).attr("cx",function(t){if(o.horizontalLayout){var e=o.dateDimension?new Date(t.date).getTime():t.value;return Math.floor(h*(e-d)+u)}return Math.floor(o.width/2)}).on("mouseover",function(t){if(o.dateDimension)i=""!=(e=d3.time.format(o.dateFormat)(new Date(t.date)))?t.name+" <small>("+e+")</small>":t.name;else var e=t.value,i=t.name+" <small>("+t.value+")</small>";d3.select(this).style("fill",function(t){return void 0!=t.color?t.color:o.color}).transition().duration(100).attr("r",function(t){return void 0!=t.radius?Math.floor(1.5*t.radius):Math.floor(1.5*o.radius)}),a.html(""),void 0!=t.img&&a.append("img").style("float","left").style("margin-right","4px").attr("src",t.img).attr("width","64px"),a.append("div").style("float","left").html(i),a.transition().duration(100).style("opacity",.9)}).on("click",function(t){d3.select(this),void 0!=t.url&&(window.location.href=t.url)}).on("mouseout",function(){d3.select(this).style("fill",function(t){return void 0!=t.background?t.background:o.background}).transition().duration(100).attr("r",function(t){return void 0!=t.radius?t.radius:o.radius}),a.transition().duration(100).style("opacity",0)}),0!=o.showLabels){if(o.dateDimension)var c=(y=d3.time.format(o.labelFormat))(new Date(d)),m=y(new Date(s));else var y=function(t){return t},c=d,m=s;n.append("text").text(c).style("font-size","70%").attr("x",function(t){return o.horizontalLayout?d3.max([0,u-this.getBBox().width/2]):Math.floor(this.getBBox().width/2)}).attr("y",function(t){return o.horizontalLayout?Math.floor(o.height/2+(u+this.getBBox().height)):u+this.getBBox().height/2}),n.append("text").text(m).style("font-size","70%").attr("x",function(t){return o.horizontalLayout?o.width-d3.max([this.getBBox().width,u+this.getBBox().width/2]):Math.floor(this.getBBox().width/2)}).attr("y",function(t){return o.horizontalLayout?Math.floor(o.height/2+(u+this.getBBox().height)):o.height-u+this.getBBox().height/2})}n.on("mousemove",function(){return tipPixels=parseInt(a.style("height").replace("px","")),a.style("top",d3.event.pageY-tipPixels-u+"px").style("left",d3.event.pageX+20+"px")}).on("mouseout",function(){return a.style("opacity",0).style("top","0px").style("left","0px")})}};
\ No newline at end of file
+var TimeKnots={draw:function(t,e,i){var o={width:600,height:200,radius:10,lineWidth:4,color:"#999",background:"#FFF",dateFormat:"%Y/%m/%d %H:%M:%S",horizontalLayout:!0,showLabels:!1,labelFormat:"%Y/%m/%d %H:%M:%S",addNow:!1,seriesColor:d3.scale.category20(),dateDimension:!0};if(void 0!=i)for(var r in i)o[r]=i[r];0!=o.addNow&&e.push({date:new Date,name:o.addNowLabel||"Today"});var a=d3.select(t).append("div").style("opacity",0).style("position","absolute").style("font-family","Helvetica Neue").style("font-weight","300").style("background","rgba(0,0,0,0.5)").style("color","white").style("padding","5px 10px 5px 10px").style("-moz-border-radius","8px 8px").style("border-radius","8px 8px"),n=d3.select(t).append("svg").attr("width",o.width).attr("height",o.height);if(o.dateDimension)var l=e.map(function(t){return Date.parse(t.date)}),s=d3.max(l),d=d3.min(l);else var l=e.map(function(t){return t.value}),s=d3.max(l),d=d3.min(l);var u=1.5*(d3.max(e.map(function(t){return t.radius}))||o.radius)+o.lineWidth,h=o.horizontalLayout?(o.width-2*u)/(s-d):(o.height-2*u)/(s-d),f=[];if(s==d&&(h=0,u=o.horizontalLayout?o.width/2:o.height/2),linePrevious={x1:null,x2:null,y1:null,y2:null},n.selectAll("line").data(e).enter().append("line").attr("class","timeline-line").attr("x1",function(t){var e;if(o.horizontalLayout){var i=o.dateDimension?new Date(t.date).getTime():t.value;e=Math.floor(h*(i-d)+u)}else e=Math.floor(o.width/2);return linePrevious.x1=e,e}).attr("x2",function(t){if(null!=linePrevious.x1)return linePrevious.x1;if(o.horizontalLayout){var e=o.dateDimension?new Date(t.date).getTime():t.value;ret=Math.floor(h*(e-d))}return Math.floor(o.width/2)}).attr("y1",function(t){var e;if(o.horizontalLayout)e=Math.floor(o.height/2);else{var i=o.dateDimension?new Date(t.date).getTime():t.value;e=Math.floor(h*(i-d))+u}return linePrevious.y1=e,e}).attr("y2",function(t){if(null!=linePrevious.y1)return linePrevious.y1;if(o.horizontalLayout)return Math.floor(o.height/2);var e=o.dateDimension?new Date(t.date).getTime():t.value;return Math.floor(h*(e-d))}).style("stroke",function(t){return void 0!=t.color?t.color:void 0!=t.series?(f.indexOf(t.series)<0&&f.push(t.series),o.seriesColor(f.indexOf(t.series))):o.color}).style("stroke-width",o.lineWidth),n.selectAll("circle").data(e).enter().append("circle").attr("class","timeline-event").attr("r",function(t){return void 0!=t.radius?t.radius:o.radius}).style("stroke",function(t){return void 0!=t.color?t.color:void 0!=t.series?(f.indexOf(t.series)<0&&f.push(t.series),console.log(t.series,f,f.indexOf(t.series)),o.seriesColor(f.indexOf(t.series))):o.color}).style("stroke-width",function(t){return void 0!=t.lineWidth?t.lineWidth:o.lineWidth}).style("fill",function(t){return void 0!=t.background?t.background:o.background}).attr("cy",function(t){if(o.horizontalLayout)return Math.floor(o.height/2);var e=o.dateDimension?new Date(t.date).getTime():t.value;return Math.floor(h*(e-d)+u)}).attr("cx",function(t){if(o.horizontalLayout){var e=o.dateDimension?new Date(t.date).getTime():t.value;return Math.floor(h*(e-d)+u)}return Math.floor(o.width/2)}).on("mouseover",function(t){if(o.dateDimension)i=""!=(e=d3.time.format(o.dateFormat)(new Date(t.date)))?t.name+" <small>("+e+")</small>":t.name;else var e=t.value,i=t.name+" <small>("+t.value+")</small>";d3.select(this).style("fill",function(t){return void 0!=t.color?t.color:o.color}).transition().duration(100).attr("r",function(t){return void 0!=t.radius?Math.floor(1.5*t.radius):Math.floor(1.5*o.radius)}),a.html(""),void 0!=t.img&&a.append("img").style("float","left").style("margin-right","4px").attr("src",t.img).attr("width","64px"),a.append("div").style("float","left").html(i),a.transition().duration(100).style("opacity",.9)}).on("click",function(t){d3.select(this),void 0!=t.url&&(window.location.href=t.url),void 0!=t.modal&&(console.log("#"+t.modal),$("#"+t.modal).modal())}).on("mouseout",function(){d3.select(this).style("fill",function(t){return void 0!=t.background?t.background:o.background}).transition().duration(100).attr("r",function(t){return void 0!=t.radius?t.radius:o.radius}),a.transition().duration(100).style("opacity",0)}),0!=o.showLabels){if(o.dateDimension)var c=(y=d3.time.format(o.labelFormat))(new Date(d)),m=y(new Date(s));else var y=function(t){return t},c=d,m=s;n.append("text").text(c).style("font-size","70%").attr("x",function(t){return o.horizontalLayout?d3.max([0,u-this.getBBox().width/2]):Math.floor(this.getBBox().width/2)}).attr("y",function(t){return o.horizontalLayout?Math.floor(o.height/2+(u+this.getBBox().height)):u+this.getBBox().height/2}),n.append("text").text(m).style("font-size","70%").attr("x",function(t){return o.horizontalLayout?o.width-d3.max([this.getBBox().width,u+this.getBBox().width/2]):Math.floor(this.getBBox().width/2)}).attr("y",function(t){return o.horizontalLayout?Math.floor(o.height/2+(u+this.getBBox().height)):o.height-u+this.getBBox().height/2})}n.on("mousemove",function(){return tipPixels=parseInt(a.style("height").replace("px","")),a.style("top",d3.event.pageY-tipPixels-u+"px").style("left",d3.event.pageX+20+"px")}).on("mouseout",function(){return a.style("opacity",0).style("top","0px").style("left","0px")})}};
\ No newline at end of file
diff --git a/src/timeknots.js b/src/timeknots.js
index 76960d2..a2aae75 100644
--- a/src/timeknots.js
+++ b/src/timeknots.js
@@ -182,6 +182,11 @@ var TimeKnots = {
         if(d.url != undefined) {
             window.location.href = d.url;
         }
+        if(d.modal != undefined)
+        {
+            console.log("#"+d.modal);
+            $("#"+d.modal).modal();
+        }
     })
     .on("mouseout", function(){
         d3.select(this)
