Skip to content

Instantly share code, notes, and snippets.

@milkbread

milkbread/RKToolbox.js

Last active December 18, 2015 07:00
Show Gist options
  • Save milkbread/5743667 to your computer and use it in GitHub Desktop.
Save milkbread/5743667 to your computer and use it in GitHub Desktop.
Download ZIP
HTML: Slider example
Raw
index.html
<!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=slider></div>
<script>
var slider = new slider(d3.select("#slider"),960,200);
slider.addScalebar([0,20]);
slider.reDefineIndicator(8)
slider.addClickListener(clickAction);
slider.addHoverListener(hoverAction);
var indicatorPosition;
function clickAction(){
indicatorPosition=slider.getIndicPosition()
console.log(indicatorPosition)
//return "test"
}
var indicatorPositionHover;
function hoverAction(){
indicatorPositionHover=slider.getIndicPosition()
console.log(indicatorPositionHover)
//return "test"
}
</script>
</body>
</html>
Raw
RKToolbox.js
//SLIDER - 1 indicator
function slider(container,width,height){
//initialize some variables
var indicWidth = 12, clickListenerTest=false, hoverListenerTest=false, clickListener, hoverListener, indicPos = width/2;
var indicatorStartPosition = 0;
var axisScale = d3.scale.linear();
var sliderSVG = container.append("svg")
.attr("width", width)
.attr("height", height);
var sliderGroup = sliderSVG.append("g");
//this is the background of the slider
sliderGroup.append("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height)
.attr("id","_background")
this.currentValue = sliderGroup.append("text").attr("x", width/2).attr("y", height/2-10).text("Current value: "+indicatorStartPosition + " km^2").style("text-anchor","middle").style("fill","#fff");
var maxVal = indicatorStartPosition;
this.maxValue = sliderGroup.append("text").attr("x", width/2).attr("y", height/2+20).text("Maximum value: "+indicatorStartPosition + " km^2").style("text-anchor","middle").style("fill","#fff");
var xAxisGroup = sliderGroup.append("g");
//this is the interactive area of the slider
var sliderArea = sliderGroup.append("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height)
.attr("id","sliderSVG")
.on("mousemove",overAction);
var indicator = sliderGroup.append("rect").attr("x", indicatorStartPosition).attr("y", 0) .attr("width", indicWidth).attr("height", height)
.attr("id","indicator").attr("class","static")
.on("mousedown",mousedown);
var tester = false;
function mousedown(){
if(tester==true){
tester = false;
indicator.attr("class","static");
//execute the user defined function for a click event...when there is one
if(clickListenerTest==true )clickListener();
}
else {
tester = true;
indicator.attr("class","dynamic");
}
}
function overAction(){
if(tester==true){
var value = (d3.mouse(this)[0]);
indicPos = value;
indicator.attr("x", value-(indicWidth/2))
//execute the user defined function for a hover event...when there is one
if(hoverListenerTest==true )hoverListener();
}
}
//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)").text(function(d){return d/1000000});
xAxisGroup.attr("transform","translate(0,"+(height/2)+")");
return xAxisGroup;
}
this.reDefineIndicator=reDefineIndicator;
function reDefineIndicator(width_){
indicator.attr("width", width_);
}
this.addClickListener=addClickListener;
function addClickListener(listener_){
clickListener = listener_;
clickListenerTest = true;
}
this.getClickListener=getClickListener;
function getClickListener(){
return clickListener();
}
this.addHoverListener=addHoverListener;
function addHoverListener(listener_){
hoverListener = listener_;
hoverListenerTest = true;
}
this.getHoverListener=getHoverListener;
function getHoverListener(){
return hoverListener();
}
this.getIndicPosition=getIndicPosition;
function getIndicPosition(){
var value_ = (axisScale.invert(indicPos)/1000000).toFixed(4)
if(parseFloat(value_)>parseFloat(maxVal)){
maxVal = value_;
this.maxValue.text("Maximum value: "+maxVal + " km^2")
}
this.currentValue.text("Current value: "+value_ + " km^2")
return axisScale.invert(indicPos);
}
}
//should be able to define: indicWidth, indicSideWidth
//TIMELINE - 2 indicators
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 toolbox_version(){
return "0.1.2";
}
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)
}
Raw
RKToolbox_0.1.css
#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;
}
#indicator{
fill:rgb(255,0,0);
}
.dynamic{
opacity:0.8;
}
.static{
opacity:0.4;
}
#sliderSVG{
opacity:0.2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment