Skip to content

Instantly share code, notes, and snippets.

@nivas8292
Last active August 29, 2015 14:22
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save nivas8292/2b38b28ec8368b8967f4 to your computer and use it in GitHub Desktop.
Time Plot - Line Graph with Line/Path Animation
<html>
<head>
<title>D3 Time Plot</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
div.tooltip {
position: absolute;
/* height: 25px;
width: 100px;*/
padding: 10px;
background: lightsteelblue;
color: white;
border: solid 1px #aaa;
border-radius: 10px;
opacity: 0;
}
</style>
</head>
<body>
<div class="tooltip"></div>
<br><button id="animate">Animate</button><br><br>
<script>
var N = 10;
var w = 700;
var h = 420;
var margin = {
top: 20,
bottom: 60,
left: 50,
right: 20
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var dataset = [
{key: "Jelly", value: 60, date: "2014/01/01"},
{key: "Jelly", value: 58, date: "2014/01/02"},
{key: "Jelly", value: 59, date: "2014/01/03"},
{key: "Jelly", value: 56, date: "2014/01/04"},
{key: "Jelly", value: 57, date: "2014/01/05"},
{key: "Jelly", value: 55, date: "2014/01/06"},
{key: "Jelly", value: 56, date: "2014/01/07"},
{key: "Jelly", value: 52, date: "2014/01/08"},
{key: "Jelly", value: 54, date: "2014/01/09"},
{key: "Jelly", value: 57, date: "2014/01/10"},
{key: "Jelly", value: 56, date: "2014/01/11"},
{key: "Jelly", value: 59, date: "2014/01/12"},
{key: "Jelly", value: 56, date: "2014/01/13"},
{key: "Jelly", value: 52, date: "2014/01/14"},
{key: "Jelly", value: 48, date: "2014/01/15"},
{key: "Jelly", value: 47, date: "2014/01/16"},
{key: "Jelly", value: 48, date: "2014/01/17"},
{key: "Jelly", value: 45, date: "2014/01/18"},
{key: "Jelly", value: 43, date: "2014/01/19"},
{key: "Jelly", value: 41, date: "2014/01/20"},
{key: "Jelly", value: 37, date: "2014/01/21"},
{key: "Jelly", value: 36, date: "2014/01/22"},
{key: "Jelly", value: 39, date: "2014/01/23"},
{key: "Jelly", value: 41, date: "2014/01/24"},
{key: "Jelly", value: 42, date: "2014/01/25"},
{key: "Jelly", value: 40, date: "2014/01/26"},
{key: "Jelly", value: 43, date: "2014/01/27"},
{key: "Jelly", value: 41, date: "2014/01/28"},
{key: "Jelly", value: 39, date: "2014/01/29"},
{key: "Jelly", value: 40, date: "2014/01/30"},
{key: "Jelly", value: 39, date: "2014/01/31"}
];
var dateParser = d3.time.format("%Y/%m/%d").parse;
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) {
return d.value
})])
.range([height, 0]);
var xScale = d3.time.scale()
.domain(d3.extent(dataset, function (d) {
return dateParser(d.date)
}))
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(xScale)
.ticks(d3.time.days, 7)
.tickFormat(d3.time.format("%m/%d"))
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.ticks(5)
.orient("left");
var line = d3.svg.line()
.x(function (d) {
return xScale(dateParser(d.date));
})
.y(function (d) {
return yScale(d.value);
})
.interpolate("monotone");
var area = d3.svg.area()
.x(function (d) {
return xScale(dateParser(d.date))
})
.y0(height)
.y1(function (d) {
return yScale(d.value);
})
.interpolate("monotone");
var chart = d3.select("body")
.append("svg")
.attr("id", "chart")
.attr("height", h)
.attr("width", w)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function plot(params) {
this.append("g")
.classed("x axis", true)
.attr("transform", "translate(0," + height + ")")
.call(params.axis.x);
this.append("g")
.classed("y axis", true)
.call(params.axis.y);
//Enter
this.selectAll('.area')
.data([params.data])
.enter()
.append("path")
.classed("area", true);
this.selectAll('.trendline')
.data([params.data])
.enter()
.append("path")
.classed("trendline", true);
this.selectAll('.point')
.data(params.data)
.enter()
.append("circle")
.attr("r", "2")
.classed("point", true);
//Update
this.selectAll(".area")
.attr("d", function (d) {
return area(d);
});
this.selectAll(".trendline")
.attr("d", function (d) {
return line(d);
});
this.selectAll('.point')
.attr("cx", function (d, i) {
return xScale(dateParser(d.date));
})
.attr("cy", function (d, i) {
return yScale(d.value);
})
.on('mouseover', function (d) {
params.tooltip
.style("left", d3.event.x)
.style("top", d3.event.y)
.transition()
.duration(500)
.style("opacity", 1)
.text(d.date + " , " + d.value);
})
.on('mouseout', function () {
params.tooltip
.transition()
.duration(500)
.style("opacity", 0);
});
//Exit
this.selectAll('.area')
.data(params.data)
.exit()
.remove();
this.selectAll('.trendline')
.data([params.data])
.exit()
.remove();
this.selectAll('.point')
.data(params.data)
.exit()
.remove();
}
plot.call(chart, {
data: dataset,
axis: {x: xAxis, y: yAxis},
tooltip: d3.select(".tooltip")
});
d3.select('#animate').on('click', function () {
var self = this;
chart.selectAll('.trendline')
.style("stroke-dashoffset", w + 100)
.style("stroke-dasharray", w + 100)
.transition()
.duration(5000)
.each("start", function () {
d3.select(self).attr("disabled", "disabled")
})
.each("end", function () {
d3.select(self).attr("disabled", null)
})
.style("stroke-dashoffset", 0);
});
</script>
</body>
</html>
body, html {
margin:0;
padding:0;
font-family:"Arial", sans-serif;
font-size:0.95em;
text-align:center;
}
#chart {
background-color:#F5F2EB;
border: 1px solid #CCC;
}
.bar {
fill:purple;
shape-rendering:crispEdges;
}
.bar-label {
text-anchor:end;
fill:white;
}
.axis path,
.axis line {
fill:none;
stroke:#000;
shape-rendering:crispEdges;
}
.gridline path,
.gridline line {
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}
.trendline {
fill: none;
stroke: #ccc;
stroke-width: 2;
/*stroke-dasharray:10;*/
}
.area {
fill: #ccc;
stroke: #ccc;
opacity: 0.25;
}
.donut {
opacity:0.1;
}
.axis-label {
text-anchor: middle;
}
.chart-header {
text-transform: capitalize;
font-size: 110%;
}
.temperature {
stroke:#95cddf;
stroke-width:2px;
}
.rain {
fill:none;
stroke:#cc627a;
stroke-width:0.5;
}
#cursor {
stroke: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment