Graphing Spike

d3-scatter.js

(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: {}
                });
    }
})();

index.html

<!doctype html>
<html>
    <head>
        <title>Graphing Spike</title>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.0/dygraph-combined.js"></script>
        <script src="./d3-scatter.js"></script>
        <style>
            body {
                font: 11px sans-serif;
            }

            .axis path,
            .axis line {
                fill: none;
                stroke: #ccc;
                shape-rendering: crispEdges;
            }

            .label {
                color: #ccc;
            }

            .dot {
            }

            .tooltip {
                position: absolute;
                width: 200px;
                height: 28px;
                pointer-events: none;
                background: white;
            }
            svg {
                background: #333;
            }
        </style>
    </head>
    <body>
        <div>
            <label>
                <input type="text" class="points" value="10000"></input>
                Number of points to generate
            </label>
            <button class="points">Generate Data</button>
        </div>


        <svg class="d3-svg"></svg>
        <button class="d3-start" disabled>D3 Start</button>
        <pre class="d3-timing"></pre>

        <div class="dy-div"></div>
        <button class="dy-start" disabled>Dygraph Start</button>
        <pre class="dy-timing"></pre>

        <canvas class="d3-canvas" height="500" width="960"></canvas>
        <button class="d3-canvas-start" disabled>D3 Canvas Start</button>
        <pre class="d3-canvas-timing"></pre>
    </body>
</html>