Skip to content

Instantly share code, notes, and snippets.

@gelicia

gelicia/_.md

Last active August 29, 2015 14:17
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 gelicia/3aa45a2d4f011ddaece8 to your computer and use it in GitHub Desktop.
Save gelicia/3aa45a2d4f011ddaece8 to your computer and use it in GitHub Desktop.
Download ZIP
chartslider
Raw
_.md
Raw
config.json
{"description":"chartslider","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"main.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"inline-console":false,"thumbnail":"http://i.imgur.com/FeNzx8b.png"}
Raw
data.csv
date reg
07/01/14 50
07/02/14 24
07/03/14 27
07/04/14 43
07/05/14 36
07/06/14 34
07/07/14 31
07/08/14 44
07/09/14 37
07/10/14 42
07/11/14 45
07/12/14 40
07/13/14 41
07/14/14 45
07/15/14 42
07/16/14 39
07/17/14 37
07/18/14 37
07/19/14 51
07/20/14 32
07/21/14 48
07/22/14 33
07/23/14 50
07/24/14 47
07/25/14 43
07/26/14 43
07/27/14 33
07/28/14 42
07/29/14 40
07/30/14 40
07/31/14 43
08/01/14 39
08/02/14 44
08/03/14 37
08/04/14 45
08/05/14 37
08/06/14 47
08/07/14 48
08/08/14 40
08/09/14 35
08/10/14 40
08/11/14 30
08/12/14 54
08/13/14 41
08/14/14 44
08/15/14 50
08/16/14 44
08/17/14 49
08/18/14 43
08/19/14 34
08/20/14 37
08/21/14 38
08/22/14 59
08/23/14 41
08/24/14 51
08/25/14 32
08/26/14 35
08/27/14 53
08/28/14 33
08/29/14 48
08/30/14 49
08/31/14 38
09/01/14 38
09/02/14 37
09/03/14 32
09/04/14 29
09/05/14 38
09/06/14 29
09/07/14 31
09/08/14 33
09/09/14 42
09/10/14 43
09/11/14 49
09/12/14 40
09/13/14 47
09/14/14 45
09/15/14 37
09/16/14 38
09/17/14 50
09/18/14 38
09/19/14 31
09/20/14 58
09/21/14 32
09/22/14 36
09/23/14 46
09/24/14 42
09/25/14 26
09/26/14 33
09/27/14 45
09/28/14 32
09/29/14 43
09/30/14 46
10/01/14 37
10/02/14 46
10/03/14 44
10/04/14 43
10/05/14 28
10/06/14 43
10/07/14 52
10/08/14 41
10/09/14 45
10/10/14 42
10/11/14 42
10/12/14 38
10/13/14 46
10/14/14 50
10/15/14 41
10/16/14 43
10/17/14 20
10/18/14 38
10/19/14 46
10/20/14 34
10/21/14 39
10/22/14 41
10/23/14 30
10/24/14 54
10/25/14 40
10/26/14 42
10/27/14 49
10/28/14 45
10/29/14 41
10/30/14 40
10/31/14 43
11/01/14 34
11/02/14 41
11/03/14 47
11/04/14 51
11/05/14 37
11/06/14 35
Raw
inlet.js
var data = tributary.data;
var margin = {left : 52, top: 125};
var screenWidth = 617;
var svg = d3.select("svg");
var dateRange = d3.extent(data, function(d){return new Date(d.date);});
var timeScale = d3.time.scale().domain(dateRange).range([margin.left,
screenWidth - margin.left]);
var axisTicks = d3.svg.axis().scale(timeScale)
.tickFormat(d3.time.format("%x"))
.ticks(d3.time.months, 1);
//draw the timeline line
svg.append('line')
.attr({
x1: margin.left,
y1: margin.top,
x2: screenWidth - margin.left,
y2: margin.top,
"stroke": "black",
"stroke-width": "2px"
});
svg.append("g")
.attr({
"transform": "translate(0," + (margin.top) + ")",
"class": "timeScale"
})
.call(axisTicks)
.selectAll("text").attr({
transform: "translate(17, -43) rotate(-38)"
});
var slider = svg.append("circle").attr({
cx: margin.left ,
cy: margin.top,
r: 6,
fill : '#3D89C4',
stroke : "#000000"
});
var drag = d3.behavior.drag()
.on("drag", function(d,i) {
var dis = d3.select(this);
var potDrag = Number(dis.attr("cx")) + d3.event.dx;
console.log(timeScale.invert(potDrag));
if (potDrag > margin.left && potDrag < screenWidth-margin.left){
dis.attr("cx", + dis.attr("cx") + d3.event.dx);
}
})
.on("dragend", function(d,i) {
var dis = d3.select(this);
var x = +dis.attr("cx");
})
drag.apply(slider);
Raw
main.css
.timeScale path,
.timeScale line {
fill: none;
}
.timeScale{
font-size: 13px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment