|
(function() { |
|
$(document).ready(function() { |
|
var d3data; |
|
var dydata; |
|
|
|
$('button.points').on('click', function() { |
|
var i = 0; |
|
var points = parseInt($('input.points').val(), 10); |
|
var maxValue = 10000; |
|
var curTime = new Date().getTime(); |
|
var dayAgo = new Date(curTime - 1000 * 60 * 60 * 24).getTime(); |
|
|
|
d3data = []; |
|
dydata = []; |
|
for (i = 0; i < points; i++) { |
|
var x = new Date(Math.random() * 1000 * 60 * 60 * 24 + dayAgo); |
|
var y = Math.random() * maxValue; |
|
d3data.push({ x: x, y: y }); |
|
dydata.push([ x, y ]); |
|
} |
|
|
|
if (d3data.length > 0 && dydata.length > 0) { |
|
$('button').prop('disabled', false); |
|
} |
|
}); |
|
|
|
$('button:not(.points)').prop('disabled', true); |
|
|
|
$('.d3-start').on('click', function() { |
|
var start = new Date(); |
|
var finish; |
|
drawD3Graph(d3data); |
|
finish = new Date(); |
|
$('.d3-timing').text('Total time: ' + (finish.getTime() - start.getTime()) + ' ms' + |
|
' to render ' + d3data.length + ' points'); |
|
}); |
|
|
|
$('.d3-canvas-start').on('click', function() { |
|
var start = new Date(); |
|
var finish; |
|
drawD3Canvas(d3data); |
|
finish = new Date(); |
|
$('.d3-canvas-timing').text('Total time: ' + (finish.getTime() - start.getTime()) + ' ms' + |
|
' to render ' + d3data.length + ' points'); |
|
}); |
|
|
|
$('.dy-start').on('click', function() { |
|
var start = new Date(); |
|
var finish; |
|
drawDygraph(dydata); |
|
finish = new Date(); |
|
$('.dy-timing').text('Total time: ' + (finish.getTime() - start.getTime()) + ' ms' + |
|
' to render ' + dydata.length + ' points'); |
|
}); |
|
}); |
|
|
|
function drawD3Graph(data) { |
|
var margin = {top: 20, right: 20, bottom: 30, left: 40}; |
|
var width = 960 - margin.left - margin.right; |
|
var height = 500 - margin.top - margin.bottom; |
|
var $d3Timing = $('.d3-timing'); |
|
var aveTransition = 0; |
|
var totalTransitions = 0; |
|
|
|
/* |
|
* value accessor - returns the value to encode for a given data object. |
|
* scale - maps value to a visual display encoding, such as a pixel position. |
|
* map function - maps from data value to display value |
|
* axis - sets up axis |
|
*/ |
|
|
|
// setup x |
|
var xValue = function(d) { return d.x;}, // data -> value |
|
xScale = d3.time.scale().range([0, width]), // value -> display |
|
xMap = function(d) { return xScale(xValue(d));}, // data -> display |
|
xAxis = d3.svg.axis().scale(xScale).orient("bottom"); |
|
|
|
// setup y |
|
var yValue = function(d) { return d.y;}, // data -> value |
|
yScale = d3.scale.linear().range([height, 0]), // value -> display |
|
yMap = function(d) { return yScale(yValue(d));}, // data -> display |
|
yAxis = d3.svg.axis().scale(yScale).orient("left"); |
|
|
|
// setup fill color |
|
var cValue = function(d) { return 0;}, |
|
color = d3.scale.category10(); |
|
|
|
// add the graph canvas to the body of the webpage |
|
var svg = d3.select(".d3-svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
// add the tooltip area to the webpage |
|
var tooltip = d3.select("body").append("div") |
|
.attr("class", "tooltip") |
|
.style("opacity", 0); |
|
|
|
// don't want dots overlapping axis, so add in buffer to data domain |
|
xScale.domain([d3.min(data, xValue), d3.max(data, xValue)]); |
|
yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]); |
|
|
|
// x-axis |
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(xAxis) |
|
.append("text") |
|
.attr("class", "label") |
|
.attr("x", width) |
|
.attr("y", 15) |
|
.style("text-anchor", "end") |
|
.text("Time"); |
|
|
|
// y-axis |
|
svg.append("g") |
|
.attr("class", "y axis") |
|
.call(yAxis) |
|
.append("text") |
|
.attr("class", "label") |
|
.attr("transform", "rotate(-90)") |
|
.attr("y", 15) |
|
.attr("dy", ".71em") |
|
.style("text-anchor", "end") |
|
.text("Random Value"); |
|
|
|
// draw dots |
|
svg.selectAll(".dot") |
|
.data(data) |
|
.enter().append("circle") |
|
.attr("class", "dot") |
|
.attr("r", 2) |
|
.attr("cx", xMap) |
|
.attr("cy", yMap) |
|
.style("fill", function(d) { return color(cValue(d));}) |
|
.on("mouseover", function(d) { |
|
d3.event.toElement.style.setProperty("stroke", "white"); |
|
d3.event.toElement.style.setProperty("stroke", 100); |
|
}) |
|
.on("mouseout", function(d) { |
|
d3.event.fromElement.style.setProperty("stroke", "none"); |
|
d3.event.fromElement.style.setProperty("z-index", 0); |
|
}); |
|
} |
|
|
|
function drawD3Canvas(data) { |
|
var margin = {top: 20, right: 20, bottom: 30, left: 40}; |
|
var width = 960 - margin.left - margin.right; |
|
var height = 500 - margin.top - margin.bottom; |
|
var $d3Timing = $('.d3-timing'); |
|
var aveTransition = 0; |
|
var totalTransitions = 0; |
|
|
|
/* |
|
* value accessor - returns the value to encode for a given data object. |
|
* scale - maps value to a visual display encoding, such as a pixel position. |
|
* map function - maps from data value to display value |
|
* axis - sets up axis |
|
*/ |
|
|
|
// setup x |
|
var xValue = function(d) { return d.x;}, // data -> value |
|
xScale = d3.time.scale().range([0, width]), // value -> display |
|
xMap = function(d) { return xScale(xValue(d));}, // data -> display |
|
xAxis = d3.svg.axis().scale(xScale).orient("bottom"); |
|
|
|
// setup y |
|
var yValue = function(d) { return d.y;}, // data -> value |
|
yScale = d3.scale.linear().range([height, 0]), // value -> display |
|
yMap = function(d) { return yScale(yValue(d));}, // data -> display |
|
yAxis = d3.svg.axis().scale(yScale).orient("left"); |
|
|
|
// setup fill color |
|
var cValue = function(d) { return 0;}, |
|
color = d3.scale.category10(); |
|
|
|
// add the graph canvas to the body of the webpage |
|
var dataContainer = d3.select('.d3-canvas').append('custom') |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
// add the tooltip area to the webpage |
|
var tooltip = d3.select("body").append("div") |
|
.attr("class", "tooltip") |
|
.style("opacity", 0); |
|
|
|
// don't want dots overlapping axis, so add in buffer to data domain |
|
xScale.domain([d3.min(data, xValue), d3.max(data, xValue)]); |
|
yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]); |
|
|
|
//Draw directly to the canvas |
|
var canvas = $('.d3-canvas').get(0); |
|
var context = canvas.getContext("2d"); |
|
var dots = d3.selectAll('custom.dot'); |
|
var radius = 50; |
|
|
|
context.fillStyle = "#fff"; |
|
context.rect(0,0,canvas.attributes.width,canvas.attributes.height); |
|
context.fill(); |
|
|
|
data.forEach(function(point) { |
|
context.beginPath(); |
|
context.arc(xMap(point), yMap(point), 2, 0, 2 * Math.PI, false); |
|
context.fillStyle = color(cValue(point)); |
|
context.fill(); |
|
}); |
|
} |
|
|
|
function drawDygraph(data) { |
|
var graph = new Dygraph($('.dy-div').get(0), |
|
data, |
|
{ |
|
drawPoints: true, |
|
strokeWidth: 0, |
|
width: 960, |
|
height: 500, |
|
highlightSeriesOpts: {} |
|
}); |
|
} |
|
})(); |
