Last active
December 18, 2015 01:48
-
-
Save milkbread/5706273 to your computer and use it in GitHub Desktop.
JavaScript: Timeline example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="RKToolbox.js"></script> | |
| <style> | |
| @import url(RKToolbox_0.1.css); | |
| </style> | |
| </head> | |
| <body> | |
| <div id=timeline></div> | |
| <script> | |
| var timeline = new timeLine(d3.select("#timeline"),900,200); | |
| timeline.addScalebar([new Date(2012, 0, 1), new Date(2013, 0, 1)]); | |
| var indicatorPositions = [] | |
| function clickAction(){ | |
| indicatorPositions=timeline.getIndicPosition() | |
| //return "hallohohooo" | |
| } | |
| //console.log(test.getListener()) | |
| timeline.addClickListener(clickAction); | |
| //timeline.reDefineIndicators(40) | |
| timeline.reDefineIndicators(4, 2) | |
| //console.log(test.getListener()) | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //should be able to define: indicWidth, indicSideWidth | |
| function timeLine(container,width,height){ | |
| //initialize some variables | |
| var indicWidth = 12, indicSideWidth = 4, indicatorGroup, indicatorLeftpart, indicatorRightpart, indicatorLeft, indicatorRight; | |
| var axisScale = d3.time.scale(); | |
| var timelineSVG = container.append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var timelineGroup = timelineSVG.append("g"); | |
| //this is the background of the timeline | |
| timelineGroup.append("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height) | |
| .attr("id","_background") | |
| var xAxisGroup = timelineGroup.append("g"); | |
| //this is the interactive area of the timeline | |
| var timeline = timelineGroup.append("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height) | |
| .attr("id","timelineSVG") | |
| .on("mousemove",overAction); | |
| defineIndicators(); | |
| //add the scalebar...has to be done from 'outside'...returns the 'xAxisGroup' | |
| this.addScalebar=addScalebar; | |
| function addScalebar(domain_){ | |
| //add the text and something like a 'scalebar' | |
| axisScale.domain(domain_).range([0,width]); //tutorial for the time scale: http://bl.ocks.org/mbostock/4149176 | |
| var xAxis = d3.svg.axis() | |
| .scale(axisScale); | |
| xAxisGroup.call(xAxis).attr("class", "axis"); | |
| xAxisGroup.selectAll("text").attr("transform","rotate(-90, 0, 0)"); | |
| xAxisGroup.attr("transform","translate(0,"+(height/2)+")"); | |
| return xAxisGroup; | |
| } | |
| //variables of the functions | |
| var indicBools = [false,false], | |
| indicPos = [0,width]; | |
| //identic for left and right...just call the 'downAction' | |
| function leftDownAction(){ | |
| var value = (d3.mouse(this)[0]); | |
| downAction(value, 'left') | |
| } | |
| function rightDownAction(){ | |
| var value = (d3.mouse(this)[0]); | |
| downAction(value, 'right') | |
| } | |
| //check which side called me and check if indicator is currently static or dynamic | |
| function downAction(value, side){ | |
| if(side=='left'){ | |
| if(indicBools[0]==false)indicBools[0]=true; | |
| else {indicPos[0]=value;indicBools[0]=false;indicatorLeftpart.transition().duration(1000).attr("x",value+indicWidth);indicatorLeft.transition().attr("x",value)} | |
| } | |
| else if(side=='right'){ | |
| if(indicBools[1]==false)indicBools[1]=true; | |
| else {indicPos[1]=value;indicBools[1]=false;indicatorRightpart.transition().duration(1000).attr("x",value-indicSideWidth);indicatorRight.transition().attr("x",value)} | |
| } | |
| //execute the user defined function for a click event...when there is one | |
| if(clickListenerTest==true && ((indicBools[1]==false && side=='right')|| (indicBools[0]==false && side=='left')))clickListener(); | |
| } | |
| //check if and which side was clicked and transition its position | |
| function overAction(){ | |
| var dur = 100; | |
| if(indicBools[0]==true){ | |
| var value = (d3.mouse(this)[0]); | |
| if(indicPos[1]>value){ | |
| indicatorLeft.attr("x",value) | |
| indicatorLeftpart.attr("x",value-indicSideWidth) | |
| } | |
| } | |
| else if(indicBools[1]==true){ | |
| var value = (d3.mouse(this)[0]); | |
| if(indicPos[0]<value){ | |
| indicatorRight.attr("x",value) | |
| indicatorRightpart.attr("x",value+indicWidth) | |
| } | |
| } | |
| } | |
| this.getIndicPosition=getIndicPosition; | |
| function getIndicPosition(){ | |
| return [axisScale(indicPos[0]),axisScale(indicPos[1])]; | |
| } | |
| var clickListenerTest = false; | |
| this.addClickListener=addClickListener; | |
| function addClickListener(listener_){ | |
| clickListener = listener_; | |
| clickListenerTest = true; | |
| } | |
| this.getClickListener=getClickListener; | |
| function getClickListener(){ | |
| return clickListener(); | |
| } | |
| this.defineIndicators=defineIndicators; | |
| function defineIndicators(){ | |
| //add some indicators | |
| //short side of the main left indicator | |
| indicatorGroup = timelineGroup.append("g") | |
| indicatorLeftpart = indicatorGroup.append("rect").attr("x", indicWidth).attr("y", 0).attr("width", indicSideWidth).attr("height", height) | |
| .attr("id","indiSide"); | |
| //short side of the main right indicator | |
| indicatorRightpart = indicatorGroup.append("rect").attr("x", width-indicSideWidth-indicWidth).attr("y", 0).attr("width", indicSideWidth).attr("height", height).attr("id","indiSide"); | |
| //left main indicator | |
| indicatorLeft = indicatorGroup.append("rect").attr("x", 0).attr("y", 0) .attr("width", indicWidth).attr("height", height) | |
| .attr("id","indicatorLeft") | |
| .on("mousedown",leftDownAction); | |
| //right main indicator | |
| indicatorRight = indicatorGroup.append("rect").attr("x", width-indicWidth).attr("y", 0).attr("width", indicWidth).attr("height", height) | |
| .attr("id","indicatorLeft") | |
| .on("mousedown",rightDownAction); | |
| } | |
| this.reDefineIndicators=reDefineIndicators; | |
| function reDefineIndicators(width, side){ | |
| if(side!=undefined)indicSideWidth = side; | |
| indicWidth = width; | |
| indicatorGroup.selectAll("rect").remove() | |
| defineIndicators(); | |
| } | |
| } | |
| function dummyFunction(this_){ | |
| console.log("This is the 'mousedown'...add a function to the '.downAction()' for action!") | |
| var value = (d3.mouse(this_)[0]); | |
| console.log("Currently, I can offer you the mouseposition: ",value) | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #timeline{ | |
| fill:rgba(0,0,0,0.7); | |
| } | |
| #indicatorLeft{ | |
| fill:rgba(255,255,255,0.4); | |
| } | |
| #indiSide{ | |
| fill:rgba(255,0,0,0.3); | |
| } | |
| #_background{ | |
| fill:rgba(100,100,100,1); | |
| } | |
| .axis path, | |
| .axis line{ | |
| fill: none; | |
| stroke: white; | |
| stroke-width:4; | |
| shape-rendering: crispEdges; | |
| opacity:0.2; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 30px; | |
| text-anchor:left; | |
| fill:#0f0; | |
| opacity:0.8; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment