Skip to content

Instantly share code, notes, and snippets.

@dem42

dem42/index.html

Created October 21, 2012 23:40
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 dem42/3928949 to your computer and use it in GitHub Desktop.
Save dem42/3928949 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="chart">
<script language="javascript">
var m = [80, 80, 80, 80]; // margins
var w = 900 - m[1] - m[3]; // width
var h = 400 - m[0] - m[2]; // height
var data = [];
var data1 = [7,12,10,9,20,13,2,15,2,19,20,10];
var data2 = [5,10,12,19,10,3,8,5,12,19,22,24];
var data1_max = d3.max(data1)
//axis generator functions .. apply them to things and they get called
var x = d3.scale.linear().domain([0, data1.length])
.range([0, w + m[1] + m[3]]);
var y = d3.scale.linear().domain([0, data1_max]).range([h, 0]);
//growing x
var x_grow = d3.scale.linear().domain([0, 0]).range([0, 0]);
//line function here
//applied with .call(line)
var line = d3.svg.line()
.interpolate("linear")
.x(function(d,i) {
console.log("here",i,x_grow(i));
return x(i);
})
.y(function(d) {
return y(d);
})
// Add an SVG element with the desired dimensions and margin.
//and translate by margin
var graph = d3.select("#chart").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
var xAxis = d3.svg.axis().scale(x).orient("bottom");
// Add the x-axis.
graph.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
// create left yAxis
var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
// Add the y-axis to the left
graph.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(-25,0)")
.call(yAxisLeft);
//clip path to make sure we clip everything that is out of h, w
var clip = graph.append("defs").append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("id", "clip-rect")
.attr("x", "0")
.attr("y", "0")
.attr("width", 0)
.attr("height", h);
// Add the line by appending an svg:path element with the data line we created above
// do this AFTER the axes above so that the line is above the tick-lines
var path = graph.append("svg:path")
.attr("class","path")
.attr("clip-path", "url(#clip)")
.data([data1])
.attr("d", line);
window.setInterval(update,2000);
var cnt=0;
function update()
{
console.log(cnt);
cnt=d3.min([data1.length, cnt+1]);
var tran = d3.transition().duration(1000);
tran.select("#clip-rect").attr("width", x(cnt-1));
}
</script>
</div>
</div>
</body>
</html>
Raw
style.css
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment