|
//Speed & animation-control variables |
|
var maprate = 4760/12, |
|
pause=0, |
|
timepause=0, |
|
start = 0, |
|
interval, |
|
loop, |
|
dateiter; |
|
|
|
//Data parameter variables |
|
var minyr, |
|
maxyr, |
|
dates, |
|
years; |
|
|
|
//Selection variables |
|
var slider, |
|
handle, |
|
brush, |
|
timer, |
|
timeaxis, |
|
timescale = d3.time.scale(), |
|
datemark; |
|
|
|
var timepad = 100; //bottom padding for slider |
|
|
|
var width = Math.max(960, window.innerWidth), |
|
height = Math.max(700, window.innerHeight); |
|
|
|
// load data |
|
d3.csv("time.csv", |
|
type, |
|
function(error, data) { |
|
|
|
dates = d3.set(data.map(function(d) {return d.Date;})).values().map(function(z) {return new Date(z);}); |
|
|
|
years = d3.set(data.map(function(d) {return +d.Date.getFullYear();})).values().map(function(z) {return +z;}); |
|
|
|
minyr = d3.min(years); |
|
maxyr = d3.max(years); |
|
|
|
timescale |
|
.rangeRound([0,width - 40]) |
|
.clamp(true) |
|
; |
|
|
|
timeaxis = d3.svg.axis() |
|
.scale(timescale) |
|
.orient("bottom") |
|
.tickSize(0) |
|
.tickPadding(12) |
|
.ticks(0) |
|
; |
|
|
|
sliderbox = d3.select("#sliderbox") |
|
.attr("width",1800); |
|
|
|
timer = sliderbox.append("g"); |
|
|
|
timescale .domain([new Date(minyr,0,1),new Date(maxyr,12,31)]); |
|
|
|
timer |
|
.attr("class", "x axis") |
|
.attr("transform","translate(" + 20 + "," + Math.floor((height - (timepad/2))) + ")") |
|
.call(timeaxis) |
|
.select(".domain") |
|
|
|
brush = d3.svg.brush() |
|
.x(timescale) |
|
.extent([0,0]) |
|
.on("brush",function() { //Now separate into mousedown -> clearInterval, drag -> animate, mouseup -> setInterval components |
|
var mouseval = timescale.invert(d3.mouse(this)[0]); |
|
var val = new Date(mouseval.getFullYear(),12); |
|
var strval = val.toISOString(); |
|
dateiter = dates.map(function(d) {return d.toISOString();}).indexOf(strval); |
|
brush.extent([val,val]); |
|
//handle.attr("cx",timescale(val)); |
|
handle.attr("transform","translate(" + timescale(val) + ",0)") |
|
clearInterval(interval); |
|
update(data,val); |
|
interval = setInterval(loop,maprate); |
|
}) |
|
; |
|
|
|
slider = timer |
|
.append("g") |
|
.attr("class","slider") |
|
.call(brush) |
|
; |
|
slider.selectAll(".extent,.resize") |
|
.remove(); |
|
|
|
dateiter = 0; |
|
|
|
handle = slider .append("g") |
|
.attr("class","handle preload") |
|
.attr("transform","translate(" + timescale(dates[0]) + ",0)"); |
|
|
|
handle.append("line") |
|
.attr("class","datemark outer preload"); |
|
|
|
handle.append("line") |
|
.attr("class","datemark inner preload"); |
|
|
|
handle.append("text") |
|
.attr("class","datemark label") |
|
.attr("y",-12) |
|
.attr("x",0) |
|
.attr("text-anchor","middle"); |
|
|
|
d3.selectAll(".datemark.preload") // size of brush dragger |
|
.attr("x1",0) |
|
.attr("x2",0) |
|
.attr("y1",-5) |
|
.attr("y2",5); |
|
|
|
dateiter = 0; // date incrementer - start |
|
|
|
loop = function(){ |
|
clearInterval(interval); |
|
if ((timepause == 0 && pause == 0) || start == 0) { |
|
update(data,dates[dateiter]); |
|
if (dateiter < dates.length - 1) {++dateiter;} |
|
else { |
|
dateiter = 0; |
|
timepause=1; |
|
setTimeout(function(){timepause = 0;},3000); |
|
} |
|
} |
|
start = 1; |
|
interval = setInterval(loop, maprate); |
|
} |
|
|
|
interval = setInterval(loop, maprate); |
|
|
|
}); //end data callback |
|
|
|
|
|
|
|
function update(data,date) { |
|
var yr = date.getFullYear(); // spits out the years for slider |
|
|
|
var usedat = data.filter(yrfilter(yr)); |
|
|
|
var curr = [timescale(date)]; |
|
|
|
handle |
|
.transition(50) |
|
.attr("transform",function(d) {return "translate(" + Math.floor(curr) + ",0)"}); |
|
|
|
timer.selectAll(".datemark,.handle") // point that moves on timer |
|
.classed('preload',0); |
|
|
|
timer.select(".datemark.label") |
|
.text(d3.time.format("%Y")(date)); |
|
|
|
timer.select(".datemark.labelbox") |
|
.attr("height", 50) |
|
.attr("width", 50) |
|
.attr("x", 5) |
|
.attr("y",-12) |
|
.style("fill-opacity",0); |
|
|
|
var datapoints = d3.select("#points").selectAll("circle").data(data) |
|
.enter() |
|
.append("circle") |
|
.attr("class", function(d){return "dot " +d.Year}); |
|
|
|
var circles = d3.selectAll(".dot") |
|
.classed({'preload': false, 'loaded': true}) |
|
.data(usedat, function(d) { return d ? d.Radius : this.id; }, function(d) { return d ? d.x : this.id; }, function(d) { return d ? d.y : this.id; }); |
|
|
|
circles |
|
.transition() |
|
.duration(475) |
|
.attr("r", function(d){return d.Radius}) |
|
.attr("cx", function(d){return d.x}) |
|
.attr("cy", function(d){return d.y}) |
|
.style("fill", "#ff0000") |
|
.style("opacity", 1) |
|
.transition() |
|
.duration(300) |
|
.attr("r", function(d){return d.Radius}) |
|
.attr("cx", function(d){return d.x}) |
|
.attr("cy", function(d){return d.y}) |
|
.style("fill", "#ff0000") |
|
.style("opacity", 0.7) |
|
.transition() |
|
.duration(250) |
|
.attr("r", function(d){return d.Radius}) |
|
.attr("cx", function(d){return d.x}) |
|
.attr("cy", function(d){return d.y}) |
|
.style("fill", "#ff0000") |
|
.style("opacity", 0.5) |
|
.transition() |
|
.duration(150) |
|
.attr("r", function(d){return d.Radius}) |
|
.attr("cx", function(d){return d.x}) |
|
.attr("cy", function(d){return d.y}) |
|
.style("fill", "#ff0000") |
|
.style("opacity", 0.2) |
|
.remove(); |
|
|
|
|
|
} //end update |
|
|
|
//Filter by year. |
|
function yrfilter(year) { |
|
return function(element) { |
|
return element.Year == year; |
|
} |
|
} |
|
|
|
function type(d) { |
|
d.Year = +d.Year; |
|
d.Date = new Date(d.Year,12); |
|
return d; |
|
} |
