An isotype-based visualization created with the Stardust library. Data is generated randomly.
Last active
December 1, 2016 07:39
-
-
Save donghaoren/2c74c539c74dc41292fb0af869503df6 to your computer and use it in GitHub Desktop.
Stardust Example: Isotype
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: Isotypes" |
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" /> | |
| <canvas id="main-canvas" /></canvas> | |
| <div data-switch="mode"> | |
| <button class="active" data-value="mode1">Multi-column</button><button data-value="mode2">Single-column</button> | |
| <div class="fps"></div> | |
| </div> | |
| <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"> | |
| let canvas = document.getElementById("main-canvas"); | |
| let width = 960; | |
| let height = 470; | |
| let platform = Stardust.platform("webgl-2d", canvas, width, height); | |
| // SVG file created from Adobe Illustrator: | |
| let svgFile = ` | |
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="10px" height="20px"> | |
| <polygon points=" | |
| 7.5234375,11.2519531 7.5234375,4.3295898 5.9628906,4.3295898 5.9628906,2.3691406 5.3920898,1.7827148 | |
| 4.6079102,1.7827148 4.0356445,2.3691406 4.0356445,4.3295898 2.4765625,4.3295898 2.4765625,11.2519531 3.3203125,11.7666016 | |
| 3.3779297,17.2871094 2.4765625,17.9169922 7.5234375,17.9179688 6.6230469,17.2871094 6.6796875,11.7675781 | |
| "/> | |
| </svg> | |
| `; | |
| var data = []; | |
| [ 27, 53, 91, 52, 112, 42, 107, 91, 68, 56, 115, 86, 26, 102, 28, 23, 119, 110 ].forEach((x, index) => { | |
| for(let i = 0; i < x; i++) { | |
| data.push({ | |
| type: index % 3, | |
| column: Math.floor(index / 3) | |
| }); | |
| } | |
| }); | |
| var typeCounter = [ 0, 0, 0 ]; | |
| var typeColumnCounter = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]; | |
| data.forEach((d) => { | |
| d.typeIndex = typeCounter[d.type]++; | |
| d.typeColumnIndex = typeColumnCounter[3 * d.column + d.type]++; | |
| }); | |
| // Convert the SVG file to Stardust mark spec. | |
| let isotype = new Stardust.mark.isotype(svgFile); | |
| // Create the mark object. | |
| let isotypes = Stardust.mark.create(isotype, platform); | |
| let isotypeHeight = 18; | |
| let colors = [[31,119,180],[255,127,14],[44,160,44]]; | |
| colors = colors.map((x) => [ x[0] / 255, x[1] / 255, x[2] / 255, 1 ]); | |
| let pScale = Stardust.scale.custom(` | |
| Vector2( | |
| 20 + column * 160 + type * 45 + typeColumnIndex % 5 * 8, | |
| 460 - floor(typeColumnIndex / 5) * 18 | |
| ) | |
| `) | |
| pScale.attr("typeColumnIndex", d => d.typeColumnIndex); | |
| pScale.attr("column", d => d.column); | |
| pScale.attr("typeIndex", d => d.typeIndex); | |
| pScale.attr("type", d => d.type); | |
| let qScale = Stardust.scale.custom(` | |
| Vector2( | |
| 65 + type * 300 + typeIndex % 30 * 8, | |
| 460 - floor(typeIndex / 30) * 18 | |
| ) | |
| `) | |
| qScale.attr("typeIndex", d => d.typeIndex); | |
| qScale.attr("type", d => d.type); | |
| let interpolateScale = Stardust.scale.interpolate("Vector2") | |
| interpolateScale.t(0); | |
| isotypes.attr("position", interpolateScale(pScale(), qScale())); | |
| isotypes.attr("color", d => colors[d.type]); | |
| isotypes.attr("size", 1.0); | |
| isotypes.data(data); | |
| function render() { | |
| platform.clear(); | |
| isotypes.render(); | |
| } | |
| render(); | |
| switches.mode_changed = function(newValue) { | |
| beginTransition((t) => { | |
| if(newValue == "mode1") | |
| interpolateScale.t(1 - t); | |
| if(newValue == "mode2") | |
| interpolateScale.t(t); | |
| render(); | |
| }); | |
| }; | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment