Skip to content

Instantly share code, notes, and snippets.

@will-hart
Last active December 18, 2015 19:09
Show Gist options
  • Save will-hart/5830458 to your computer and use it in GitHub Desktop.
Save will-hart/5830458 to your computer and use it in GitHub Desktop.
// a basic counter and date template for adding new data
var seconds = 0;
var base_date = "2012-10-09 12:57:";
// declare five data arrays
var all_data = [
[],
[],
[],
[],
[]
];
// build the data arrays with random data
for (i = 0; i < 10; i++) {
for (j = 0; j < 5; j++) {
all_data[j].push({
timeLogged: new Date(base_date + "0" + seconds),
value: j * 10 + Math.random() * 7
});
}
seconds++;
}
getYMax = function(data) {
return d3.max(data.map(function(array) {
return d3.max(array, function(d) {
return d.value;
});
}));
}
// update the chart with new data
updateChart = function (chart, data) {
// check if we have a full "minute" of data. If yes just exit
// rather than screwing around with dates.
if (seconds >= 59) return;
// Add a new random variable one second after the last one
for (i = 0; i < 5; i++) {
data[i].push({
timeLogged: new Date(base_date + seconds),
value: i * 10 + Math.random() * 2 * (i + 1)
});
}
seconds++;
// remove the old chart and draw a new one
chart.remove();
draw(data);
},
// Draw the initial chart
draw = function (data) {
var colours = ["#0078e7", "#198A34", "#ff158a", "#cfda20", "#202020"],
margin = {
top: 80,
right: 60,
bottom: 60,
left: 60
},
width = innerWidth - margin.left - margin.right,
height = innerHeight - margin.top - margin.bottom,
x = d3.time.scale.utc()
.domain(d3.extent(data[0], function (d) {
return d.timeLogged;
}))
.range([0, width]),
y = d3.scale.linear()
.domain([0, getYMax(data)])
.range([height, 0]),
xAxis = d3.svg.axis().scale(x).orient('bottom'),
yAxis = d3.svg.axis().scale(y).orient('left'),
line = d3.svg.line()
.x(function (d) {
return x(d.timeLogged);
})
.y(function (d) {
return y(d.value);
}),
chart = d3.select("body").append("svg:svg")
.data([data])
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("viewBox", "0, 0, " + innerWidth + ", " + innerHeight)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/* draw the x-axis */
chart.append("g")
.attr("class", "x_axis")
.attr("transform", "translate(0, " + height + ")")
.call(xAxis);
/* draw the y-axis */
chart.append("g")
.attr("class", "y_axis")
.call(yAxis);
/* draw the lines */
for (i = 0; i < 5; i++) {
chart.append("svg:path")
.data([all_data[i]])
.attr("class", "line")
.attr("fill", "none")
.attr("stroke", colours[i])
.attr("stroke-width", 2)
.attr("d", line);
}
// draw the legend at the top of the screen
for (i = 0; i < 5; i++) {
// draw the coloured block
chart.append("svg:rect")
.attr("x", 25 + 130 * i)
.attr("y", -46)
.attr("stroke", colours[i])
.attr("fill", colours[i])
.attr("height", 3)
.attr("width", 22);
// draw the text
chart.append("svg:text")
.attr("x", 50 + 130 * i)
.attr("y", -40)
.text("Series " + (i+1));
}
/* force the chart to update every half second */
setTimeout(function () {
updateChart(chart, data);
}, 250);
};
// do the drawing :)
draw(all_data);
<html>
<head>
<script src="d3.js"></script>
<script src="graph.js"></script>
<style type="text/css">
svg {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -9999;
}
.x_axis path, .x_axis line, .y_axis path, .y_axis line {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
</head>
<body></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment