var fit = require('canvas-fit') var mouseWheel = require('mouse-wheel') var mouseChange = require('mouse-change') var gaussRandom = require('gauss-random') var createScatter = require('gl-scatter2d-fancy') var createSelectBox = require('gl-select-box') var createSpikes = require('gl-spikes2d') var createPlot = require('../plot') var canvas = document.createElement('canvas') document.body.appendChild(canvas) window.addEventListener('resize', fit(canvas, null, +window.devicePixelRatio), false) var gl = canvas.getContext('webgl') var POINT_COUNT = 1e1 var aspect = gl.drawingBufferWidth / gl.drawingBufferHeight var dataBox = [-10,-10/aspect,10,10/aspect] function makeTicks(lo, hi) { var result = [] for(var i=lo; i<=hi; ++i) { result.push({ x: i, text: i + '' }) } return result } var options = { gl: gl, dataBox: dataBox, title: '100 million points', ticks: [ makeTicks(-20,20), makeTicks(-20,20) ], labels: ['x', 'y'], pixelRatio: +window.devicePixelRatio, tickMarkWidth: [2,2,2,2], tickMarkLength: [6,6,6,6] } var plot = createPlot(options) var selectBox = createSelectBox(plot, { innerFill: false, outerFill: true }) selectBox.enabled = false var spikes = createSpikes(plot) var positions = new Float32Array(2 * POINT_COUNT) for(var i=0; i<2*POINT_COUNT; ++i) { positions[i] = gaussRandom() } var glyphs = new Array(POINT_COUNT) var MARKERS = [ '●', '#', '✝', '+' ] for(var i=0; i