A scatterplot created with the Stardust library. Data is generated using a formula.
Last active
December 1, 2016 07:39
-
-
Save donghaoren/46068d0de800c2ca72d57ff194955c3e to your computer and use it in GitHub Desktop.
Stardust Example: Scatterplot
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit | |
| description: "Stardust Example: Scatterplot" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="//stardust-vis.github.io/examples/assets/style.css" type="text/css" /> | |
| <style> | |
| body { margin: 0; padding: 0; } | |
| p { margin: 0; padding: 0; } | |
| </style> | |
| <canvas id="main-canvas" /> | |
| <div class="initializing"><p>Initializing...</p></div> | |
| <script src="//d3js.org/d3.v3.min.js" type="text/javascript"></script> | |
| <script type="text/javascript" src="//stardust-vis.github.io/stardust/stardust.bundle.min.js"></script> | |
| <script src="//stardust-vis.github.io/examples/assets/utils.js" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| var canvas = document.getElementById("main-canvas"); | |
| var width = 960; | |
| var height = 500; | |
| var platform = Stardust.platform("webgl-2d", canvas, width, height); | |
| var Nx = 96 * 1; | |
| var Ny = 50 * 1; | |
| var data = []; | |
| for(var i = 0; i < Nx; i++) { | |
| for(var j = 0; j < Ny; j++) { | |
| var x = i / (Nx - 1) * 2 - 1; | |
| var y = j / (Ny - 1) * 2 - 1; | |
| var scale = 2; | |
| var len = Math.sqrt(x * x + y * y); | |
| var d = len * Math.exp(-len * len * 5); | |
| var dx = y / len * d; | |
| var dy = -x / len * d; | |
| data.push({ | |
| x: x + dx * scale, | |
| y: y + dy * scale | |
| }); | |
| } | |
| } | |
| let circle = new Stardust.mark.circle(16); | |
| var circles = Stardust.mark.create(circle, platform); | |
| var circles2 = Stardust.mark.create(circle, platform); | |
| var scaleX = Stardust.scale.linear() | |
| .domain([ -1, 1 ]) | |
| .range([ 10, width - 10 ]); | |
| var scaleY = Stardust.scale.linear() | |
| .domain([ -1, 1 ]) | |
| .range([ 10, height - 10 ]); | |
| circles.attr("center", Stardust.scale.Vector2(scaleX(d => d.x), scaleY(d => d.y))); | |
| circles.attr("radius", 2); | |
| circles.attr("color", [ 0, 0, 0, 0.4 ]); | |
| circles2.attr("center", Stardust.scale.Vector2(scaleX(d => d.x), scaleY(d => d.y))); | |
| circles2.attr("radius", 4); | |
| circles2.attr("color", [ 255, 0, 0, 1 ]); | |
| circles.data(data); | |
| circles.render(); | |
| platform.beginPicking(canvas.width, canvas.height); | |
| circles.render(); | |
| platform.endPicking(); | |
| canvas.onmousemove = e => { | |
| let bounds = canvas.getBoundingClientRect(); | |
| var x = e.clientX - bounds.left; | |
| var y = e.clientY - bounds.top; | |
| var p = platform.getPickingPixel(x * 2, y * 2); | |
| if(p) { | |
| platform.clear(); | |
| circles.render(); | |
| circles2.attr("color", [ 1, 0, 0, 1 ]); | |
| circles2.data([ data[p[1]] ]); | |
| circles2.render(); | |
| } | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment