Skip to content

Instantly share code, notes, and snippets.

@surjikal
Forked from sirrobert/index.html
Last active May 4, 2019 20:32
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 surjikal/1f42ca6c31df18b49a8359db85328c63 to your computer and use it in GitHub Desktop.
Save surjikal/1f42ca6c31df18b49a8359db85328c63 to your computer and use it in GitHub Desktop.
Smoothly streaming line graph
<!DOCTYPE html>
<html>
<head>
<title>Line Chart</title>
<link type="text/css" rel="stylesheet" href="line.css"/>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<script type="text/javascript" src="line.js"></script>
</body>
</html>
.rule line {
stroke: #eee;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
(function () {
// Set up the parameters of the chart object.
var rate = 500 // The scroll and update speed of the graph (ms)
, points = 20 // The number of points to generate
, width = 550 // Chart width
, height = 275 // Chart height
, padding = 40 // Visual padding for the axis labels
, updates = 0 // The number of updates that have been performed
// These appear to be factories for generaring values. Will look more at
// it later.
, x = d3.scale.linear().domain([0, 1]).range([0, width])
, y = d3.scale.linear().domain([-0.5, 0.5]).range([height, 0])
// Get a data set. 10 points.
function _getData () {
return d3.range(points + 2).map(function(i) {return _getDataPoint(i)})
}
// Get a single point of data.
function _getDataPoint(i) {
return {x: (i)/points, y: (Math.random() - 0.5)}
}
// Add a data point to the right of the graph and slide the line to the
// left.
var addData = function() {
// Grab the path
var path = d3.select("path")
// Grab the data from the path
var data = path[0][0].__data__
// Slap a new random point to the end of the data
data.push(_getDataPoint(data.length))
// Increment the total number of updates. This lets us know how much to
// move the path. This is a sub-optimal solution.
updates++
// Apply the new data to the path and re-draw.
path
.data([data])
.transition()
.duration(rate)
// Use a linear easing to keep an even scroll
.ease("linear")
.attr("d", d3.svg.line()
.x(function(d,i) { return x(d.x - updates/points) })
.y(function(d) {return y(d.y)})
// I'm not sure if this is the interpolation that works best, but I
// can't find a better one...
.interpolate("basis")
)
}
// Create the chart object to the desired parameters.
var chart = d3.select("body")
.data([_getData()])
.append("svg:svg")
.attr("width", width + padding)
.attr("height", height + padding * 2)
.append("svg:g")
// I have no idea what this does yet.
.attr("transform", "translate(" + padding + "," + padding + ")")
// Creating rules for the background grid.
var rules = chart.selectAll("g.rule")
.data(x.ticks(10))
.enter()
.append("svg:g")
.attr("class","rule")
// This seems to add the vertical lines.
rules
.append("svg:line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", 0)
.attr("y2", height - 1)
// Horizontal lines
rules
.append("svg:line")
.attr("class", function(d) {return d ? null : "axis"})
.attr("y1", y)
.attr("y2", y)
.attr("x1", 0)
.attr("x2", width + 1)
// X-axis labels
rules
.append("svg:text")
.attr("x", x)
.attr("y", height + 3)
.attr("dy", ".71em")
.attr("text-anchor", "middle")
.text(x.tickFormat(10))
// Y-axis labels
rules
.append("svg:text")
.attr("y", y)
.attr("x", -3)
.attr("dy", ".35em")
.attr("text-anchor", "end")
.text(x.tickFormat(10))
// Now add the line. This should be last so it sits on top of the
// reference rulers.
chart
.append("svg:path")
.attr("class", "line")
.attr("d", d3.svg.line()
.x(function(d) {return x(d.x)})
.y(function(d) {return y(d.y)})
.interpolate("basis")
)
// Make it a "live" updating chart.
window.setInterval(addData, rate)
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment