d3-scatter.js

(function() {
    $(document).ready(function() {
        var d3data;
 
        $('button.points').on('click', function() {
            var i = 0;
            var points = parseInt($('input.points').val(), 10);
            var maxValue = 10000;
            var types = _.range(10);
            var curTime = new Date().getTime();
            var dayAgo = new Date(curTime - 1000 * 60 * 60 * 24).getTime();
 
            d3data = [];
            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, type: _.sample(types) });
            }
 
            if (d3data.length > 0) {
                $('button').prop('disabled', false);
            }
        });
        
        $('button:not(.points)').prop('disabled', true);
 
        $('.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');
        });
    });
 
    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 d.type;},
            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 + ")");
 
        // 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');
        var canvas = $canvas.get(0);
        var context = canvas.getContext("2d");
 
        context.fillStyle = "#fff";
        context.rect(0,0,canvas.attributes.width,canvas.attributes.height);
        context.fill();

        var reverseLookup = {};
 
        data.forEach(function(point) {
            var x = xMap(point),
                y = yMap(point);
            
            // inefficient reverse lookup
            reverseLookup[Math.floor(x)] = reverseLookup[Math.floor(x)] || {};
            reverseLookup[Math.floor(x)][Math.floor(y)] = point;

            context.beginPath();
            context.arc(x, y, 2, 0, 2 * Math.PI, false);
            context.fillStyle = color(cValue(point));
            context.fill();
        });

        $canvas.mousemove(function(e) {
            var offsetX = e.offsetX,
                offsetY = e.offsetY,
                point = reverseLookup[offsetX] ? reverseLookup[offsetX][offsetY] : null;

            if (point) {
                console.log('at data point', point);
            }
        });
    }
})();

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://underscorejs.org/underscore.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;
            }
        </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>
 
        <canvas class="d3-canvas" height="500" width="960"></canvas>
        <br/>
        <button class="d3-canvas-start" disabled>D3 Canvas Start</button>
        <pre class="d3-canvas-timing"></pre>
    </body>
</html>