├── .gitignore
├── README.md
├── examples
    ├── common
    │   ├── stardust
    │   │   ├── stardust.bundle.js
    │   │   └── stardust.bundle.min.js
    │   ├── style.css
    │   └── utils.js
    ├── daily-activities
    │   ├── data.json
    │   ├── index.html
    │   ├── metadata.json
    │   ├── preview.png
    │   └── preview_small.png
    ├── glyphs
    │   ├── README.md
    │   ├── car.csv
    │   ├── index.html
    │   ├── metadata.json
    │   ├── preview.png
    │   └── preview_small.png
    ├── graph
    │   ├── README.md
    │   ├── clustering.py
    │   ├── facebook_1912.json
    │   ├── facebook_1912_clusters.json
    │   ├── index.html
    │   ├── metadata.json
    │   ├── preview.png
    │   └── preview_small.png
    ├── index-chart
    │   ├── README.md
    │   ├── index.html
    │   ├── metadata.json
    │   ├── preview.png
    │   ├── preview_small.png
    │   └── stock.csv
    ├── isotype
    │   ├── README.md
    │   ├── index.html
    │   ├── metadata.json
    │   ├── preview.png
    │   └── preview_small.png
    ├── parametric-functions
    │   ├── README.md
    │   ├── index.html
    │   ├── metadata.json
    │   ├── preview.png
    │   └── preview_small.png
    ├── sanddance
    │   ├── README.md
    │   ├── demovoteclean.tsv
    │   ├── index.html
    │   ├── metadata.json
    │   ├── preview.png
    │   └── preview_small.png
    ├── scatterplot
    │   ├── README.md
    │   ├── index.html
    │   ├── metadata.json
    │   ├── preview.png
    │   └── preview_small.png
    ├── shader
    │   ├── README.md
    │   ├── index.html
    │   ├── metadata.json
    │   ├── preview.png
    │   └── preview_small.png
    ├── squares
    │   ├── README.md
    │   ├── index.html
    │   ├── metadata.json
    │   ├── mnist.csv
    │   ├── preview.png
    │   ├── preview_small.png
    │   └── squares.js
    └── webvr
    │   ├── beethoven.json
    │   ├── index.html
    │   ├── metadata.json
    │   ├── preview.png
    │   ├── preview_small.png
    │   ├── userCode.js
    │   └── webvr-polyfill.min.js
├── package.json
└── server
    ├── src
        ├── examples.ts
        ├── server.ts
        ├── static.ts
        └── templates.ts
    └── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
1 | server/dist/
2 | node_modules/
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [Archived] Stardust Example Code
 2 | ====
 3 | 
 4 | Please use the unified repo for further development: https://github.com/stardustjs/stardust
 5 | 
 6 | Stardust Example Code
 7 | ====
 8 | 
 9 | This repository provides a set of Web visualization and graphic examples using the Stardust library.
10 | 
11 | Example Structure
12 | ----
13 | 
14 | We use a similar approach as in bl.ocks.org:
15 | 
16 | - Each example is runnable standalone with some common code provided in the `static` folder in this repository.
17 | - Each example has a `metadata.json` file for description, and a `preview.png` file for thumbnail.
18 | - The content of each example is rendered as a HTML file for reading online.
19 | 
20 | Common code for all examples:
21 | 
22 | - `static/assets/style.css`: The common CSS styling for Stardust's examples to have a uniform look
23 | - `static/assets/utils.js`: Some utility functions, including:
24 |     - FPS measure
25 |     - Transition timing
26 | - `stardust/stardust.bundle.js`
27 |     - The version of Stardust that works with the examples.
28 | 
29 | `metadata.json` format:
30 | 
31 |     {
32 |         description: "A short description file",
33 |         excludes?: [
34 |             "file.to.exclude",
35 |             ...
36 |         ]
37 |     }
38 | 


--------------------------------------------------------------------------------
/examples/common/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     font-size: 14px;
 5 |     box-sizing: border-box;
 6 |     -webkit-user-select: none;
 7 |     -moz-user-select: none;
 8 |     user-select: none;
 9 |     font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
10 | }
11 | div, p { margin: 0; padding: 0; font-size: 14px; line-height: 1em; }
12 | canvas, svg { margin: 0; padding: 0; display: block }
13 | .fps {
14 |     float: right;
15 |     display: block;
16 |     height: 30px;
17 |     padding-right: 10px;
18 |     line-height: 30px;
19 |     font-size: 15px;
20 |     font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
21 | }
22 | [data-switch] {
23 |     margin: 0; padding: 0 0px;
24 |     line-height: 30px;
25 |     height: 30px;
26 |     width: 960px;
27 | }
28 | [data-switch] [data-value] {
29 |     font-size: 14px;
30 |     font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
31 |     display: inline-block;
32 |     margin: 0; padding: 0; border: none;
33 |     outline: none;
34 |     border-radius: 2px;
35 |     padding-left: 10px; padding-right: 10px;
36 |     padding-top: 2px; padding-bottom: 2px;
37 |     line-height: 18px;
38 |     margin: 3px;
39 |     margin-right: 0;
40 |     vertical-align: top;
41 |     cursor: pointer;
42 |     background: #EEE;
43 |     border: 1px solid #CCC;
44 |     color: black;
45 | }
46 | [data-switch] [data-value]:hover {
47 |     background: #2196F3;
48 |     color: #FFF;
49 |     border: 1px solid #1E88E5;
50 | }
51 | [data-switch] [data-value].active {
52 |     background: #1565C0;
53 |     color: #FFF;
54 |     border: 1px solid #0D47A1;
55 | }
56 | 
57 | .initializing, .loading {
58 |     position: fixed;
59 |     left: 0; right: 0;
60 |     top: 0;
61 |     bottom: 0;
62 |     padding-top: 220px;
63 |     text-align: center;
64 |     font-size: 20px;
65 |     background: rgba(192, 192, 192, 0.8);
66 |     color: #555;
67 | }
68 | 
69 | .initializing p, .loading p {
70 |     font-size: 20px;
71 |     line-height: 40px;
72 |     height: 40px;
73 | }
74 | 


--------------------------------------------------------------------------------
/examples/common/utils.js:
--------------------------------------------------------------------------------
  1 | // Common code for stardust examples
  2 | 
  3 | // Transition controller
  4 | var _previousTransition = null;
  5 | 
  6 | function beginTransition(func, maxTime) {
  7 |     if(_previousTransition) _previousTransition.stop();
  8 |     _previousTransition = null;
  9 |     maxTime = maxTime || 1;
 10 |     var t0 = new Date().getTime();
 11 |     var req = null;
 12 |     var totalFrames = 0;
 13 |     var rerender = function() {
 14 |         req = null;
 15 |         var t1 = new Date().getTime();
 16 |         var t = (t1 - t0) / 1000;
 17 |         var shouldStop = false;
 18 |         if(t > maxTime) {
 19 |             t = maxTime;
 20 |             shouldStop = true;
 21 |         }
 22 |         func(t);
 23 |         totalFrames += 1;
 24 |         if(!shouldStop) {
 25 |             req = requestAnimationFrame(rerender);
 26 |         } else {
 27 |             requestAnimationFrame(function() {
 28 |                 var t1 = new Date().getTime();
 29 |                 d3.select(".fps").text("FPS: " + (totalFrames / ((t1 - t0) / 1000)).toFixed(1));
 30 |             });
 31 |         }
 32 |     };
 33 |     req = requestAnimationFrame(rerender);
 34 |     _previousTransition = {
 35 |         stop: function() {
 36 |             if(req != null) cancelAnimationFrame(rerender);
 37 |         }
 38 |     }
 39 |     return _previousTransition;
 40 | }
 41 | 
 42 | function measureFPS(renderFunction) {
 43 |     var count = 10;
 44 |     var totalFrames = 0;
 45 |     var t0 = new Date().getTime();
 46 |     var doFrame = function() {
 47 |         if(totalFrames >= count) {
 48 |             var t1 = new Date().getTime();
 49 |             var fps = totalFrames / ((t1 - t0) / 1000);
 50 |             d3.select(".fps").text("FPS: " + fps.toFixed(1));
 51 |             return;
 52 |         }
 53 |         renderFunction();
 54 |         totalFrames += 1;
 55 |         requestAnimationFrame(doFrame);
 56 |     };
 57 |     requestAnimationFrame(doFrame);
 58 | }
 59 | 
 60 | function FPS() {
 61 |     this.updates = [];
 62 |     this.updateIndex = 0;
 63 | }
 64 | 
 65 | FPS.prototype.update = function() {
 66 |     this.updateIndex += 1;
 67 |     this.updates.push(new Date().getTime());
 68 |     if(this.updates.length > 100) {
 69 |         this.updates.splice(0, this.updates.length - 100);
 70 |     }
 71 |     if(this.updateIndex % 20 == 0) {
 72 |         var dt = (this.updates[this.updates.length - 1] - this.updates[0]) / (this.updates.length - 1);
 73 |         d3.select(".fps").text("FPS: " + (1000 / dt).toFixed(1));
 74 |     }
 75 | }
 76 | 
 77 | var switches = {};
 78 | 
 79 | d3.select("[data-switch]").each(function(s) {
 80 |     var name = d3.select(this).attr("data-switch");
 81 |     var modes = d3.select(this).selectAll("[data-value]");
 82 |     var valueDefault = modes.filter(".active").attr("data-value");
 83 |     switches[name] = valueDefault;
 84 |     modes.on("click", function() {
 85 |         modes.classed("active", false);
 86 |         d3.select(this).classed("active", true);
 87 |         var newValue = d3.select(this).attr("data-value");
 88 |         var previous = switches[name];
 89 |         if(previous != newValue) {
 90 |             switches[name] = newValue;
 91 |             if(switches[name + "_changed"]) {
 92 |                 switches[name + "_changed"](switches[name], previous);
 93 |             }
 94 |         }
 95 |     });
 96 | });
 97 | 
 98 | function loadData(path, callback) {
 99 |     var loadingDiv = d3.select("body").append("div").classed("loading", true);
100 |     loadingDiv.append("p").text("Loading data...");
101 |     var cb = function(err, data) {
102 |         if(err) {
103 |             loadingDiv.append("p").text("Could not load data. Please check your network connection.");
104 |         } else {
105 |             loadingDiv.remove();
106 |             callback(data);
107 |         }
108 |     };
109 |     if(path.match(/\.csv$/i)) {
110 |         d3.csv(path, cb);
111 |     }
112 |     if(path.match(/\.tsv$/i)) {
113 |         d3.tsv(path, cb);
114 |     }
115 |     if(path.match(/\.json$/i)) {
116 |         d3.json(path, cb);
117 |     }
118 | }
119 | 
120 | document.addEventListener("DOMContentLoaded", function(e) {
121 |     d3.select(".initializing").remove();
122 | });


--------------------------------------------------------------------------------
/examples/daily-activities/data.json:
--------------------------------------------------------------------------------
   1 | [
   2 |   {
   3 |     "name": "Honoré de Balzac",
   4 |     "type": "Writer",
   5 |     "description": "Hailed as a founder of realism, he shook the 19th century literary scene with his unflinching take on Parisian society.",
   6 |     "activities": [
   7 |       {
   8 |         "type": "sleep",
   9 |         "duration": 1,
  10 |         "start": 0,
  11 |         "description": "Sleep"
  12 |       },
  13 |       {
  14 |         "type": "creative",
  15 |         "duration": 7,
  16 |         "start": 1,
  17 |         "description": "Wore monkish robe and Moroccan slippers for his priest-like work"
  18 |       },
  19 |       {
  20 |         "type": "sleep",
  21 |         "duration": 1.5,
  22 |         "start": 8,
  23 |         "description": "Nap"
  24 |       },
  25 |       {
  26 |         "type": "creative",
  27 |         "duration": 6,
  28 |         "start": 9.5,
  29 |         "description": "Had a cup of black coffee before starting work"
  30 |       },
  31 |       {
  32 |         "type": "food",
  33 |         "duration": 2.5,
  34 |         "start": 15.5,
  35 |         "description": "Received friends, took a bath, went out for dinner"
  36 |       },
  37 |       {
  38 |         "type": "sleep",
  39 |         "duration": 6,
  40 |         "start": 18,
  41 |         "description": "Sleep"
  42 |       }
  43 |     ]
  44 |   },
  45 |   {
  46 |     "name": "John Milton",
  47 |     "type": "Poet",
  48 |     "description": "Milton’s poem ‘Paradise Lost’ is an epic in the true sense of the word – originally published as ten books and over ten thousand lines of verse. Writing in the 17th century, during a time of religious upheaval, he passionately defended the right to free speech.",
  49 |     "activities": [
  50 |       {
  51 |         "type": "sleep",
  52 |         "duration": 4,
  53 |         "start": 0,
  54 |         "description": "Sleep"
  55 |       },
  56 |       {
  57 |         "type": "other",
  58 |         "duration": 1,
  59 |         "start": 4,
  60 |         "description": "Meditation"
  61 |       },
  62 |       {
  63 |         "type": "food",
  64 |         "duration": 2,
  65 |         "start": 5,
  66 |         "description": "Listening to aide reading bible"
  67 |       },
  68 |       {
  69 |         "type": "creative",
  70 |         "duration": 3,
  71 |         "start": 7,
  72 |         "description": "Dictating to aide"
  73 |       },
  74 |       {
  75 |         "type": "creative",
  76 |         "duration": 2,
  77 |         "start": 10,
  78 |         "description": "Listening to aide read back"
  79 |       },
  80 |       {
  81 |         "type": "food",
  82 |         "duration": 1,
  83 |         "start": 12,
  84 |         "description": "Lunch"
  85 |       },
  86 |       {
  87 |         "type": "exercise",
  88 |         "duration": 3,
  89 |         "start": 13,
  90 |         "description": "Walk up and down his garden"
  91 |       },
  92 |       {
  93 |         "type": "food",
  94 |         "duration": 5,
  95 |         "start": 16,
  96 |         "description": "Having guests over, supper, smoking a pipe"
  97 |       },
  98 |       {
  99 |         "type": "sleep",
 100 |         "duration": 3,
 101 |         "start": 21,
 102 |         "description": "Sleep"
 103 |       }
 104 |     ]
 105 |   },
 106 |   {
 107 |     "name": "Haruki Murakami",
 108 |     "type": "Writer",
 109 |     "description": "A contemporary Japanese author, Murakami penned works including ‘Norwegian Wood’ and ‘Kafka on the Shore’. His magic realist style has earned him the Franz Kafka Prize, and other awards.",
 110 |     "activities": [
 111 |       {
 112 |         "type": "sleep",
 113 |         "duration": 4,
 114 |         "start": 0,
 115 |         "description": "Sleep"
 116 |       },
 117 |       {
 118 |         "type": "creative",
 119 |         "duration": 8,
 120 |         "start": 4,
 121 |         "description": "Writing"
 122 |       },
 123 |       {
 124 |         "type": "exercise",
 125 |         "duration": 1,
 126 |         "start": 12,
 127 |         "description": "Walking and swimming"
 128 |       },
 129 |       {
 130 |         "type": "food",
 131 |         "duration": 8,
 132 |         "start": 13,
 133 |         "description": "Doing housework, admin and spending time with family"
 134 |       },
 135 |       {
 136 |         "type": "sleep",
 137 |         "duration": 3,
 138 |         "start": 21,
 139 |         "description": "Sleep"
 140 |       }
 141 |     ]
 142 |   },
 143 |   {
 144 |     "name": "Voltaire",
 145 |     "type": "Writer",
 146 |     "description": "A French Enlightenment writer, outspoken critic of the Catholic Church and defender of free speech, Voltaire applied his witty approach to all sorts of literary forms including novels, poems and essays. ",
 147 |     "activities": [
 148 |       {
 149 |         "type": "sleep",
 150 |         "duration": 4,
 151 |         "start": 0,
 152 |         "description": "Sleep"
 153 |       },
 154 |       {
 155 |         "type": "creative",
 156 |         "duration": 8,
 157 |         "start": 4,
 158 |         "description": "Working in bed, dictating his thoughts to a secretary"
 159 |       },
 160 |       {
 161 |         "type": "other",
 162 |         "duration": 0.5,
 163 |         "start": 12,
 164 |         "description": "Getting dressed"
 165 |       },
 166 |       {
 167 |         "type": "creative",
 168 |         "duration": 1.5,
 169 |         "start": 12.5,
 170 |         "description": "Working"
 171 |       },
 172 |       {
 173 |         "type": "admin",
 174 |         "duration": 2,
 175 |         "start": 14,
 176 |         "description": "Surveying the estate with secretary"
 177 |       },
 178 |       {
 179 |         "type": "creative",
 180 |         "duration": 4,
 181 |         "start": 16,
 182 |         "description": "Working"
 183 |       },
 184 |       {
 185 |         "type": "food",
 186 |         "duration": 1.5,
 187 |         "start": 20,
 188 |         "description": "Dinner with family"
 189 |       },
 190 |       {
 191 |         "type": "creative",
 192 |         "duration": 2.5,
 193 |         "start": 21.5,
 194 |         "description": "Working"
 195 |       }
 196 |     ]
 197 |   },
 198 |   {
 199 |     "name": "Benjamin Franklin",
 200 |     "type": "Politician",
 201 |     "description": "One of the founding fathers of the United States, Franklin earned the title of the ‘first American’. Through his writing and campaigning for colonial unity, he was a defining voice in the shaping of American society.",
 202 |     "activities": [
 203 |       {
 204 |         "type": "sleep",
 205 |         "duration": 5,
 206 |         "start": 0,
 207 |         "description": "Sleep"
 208 |       },
 209 |       {
 210 |         "type": "food",
 211 |         "duration": 3,
 212 |         "start": 5,
 213 |         "description": "Wash, make a resolution, have breakfast"
 214 |       },
 215 |       {
 216 |         "type": "creative",
 217 |         "duration": 4,
 218 |         "start": 8,
 219 |         "description": "Work"
 220 |       },
 221 |       {
 222 |         "type": "food",
 223 |         "duration": 2,
 224 |         "start": 12,
 225 |         "description": "Reading, life admin, lunch"
 226 |       },
 227 |       {
 228 |         "type": "creative",
 229 |         "duration": 4,
 230 |         "start": 14,
 231 |         "description": "Work"
 232 |       },
 233 |       {
 234 |         "type": "food",
 235 |         "duration": 4,
 236 |         "start": 18,
 237 |         "description": "Supper, music, putting things in order, socialising"
 238 |       },
 239 |       {
 240 |         "type": "sleep",
 241 |         "duration": 2,
 242 |         "start": 22,
 243 |         "description": "Sleep"
 244 |       }
 245 |     ]
 246 |   },
 247 |   {
 248 |     "name": "Immanuel Kant",
 249 |     "type": "Philosopher",
 250 |     "description": "A German philosopher who continues to have a profound influence on contemporary thought. Among his achievements, he established a firm basis for factual knowledge, paving the way for the scientific method.",
 251 |     "activities": [
 252 |       {
 253 |         "type": "sleep",
 254 |         "duration": 5,
 255 |         "start": 0,
 256 |         "description": "Sleep"
 257 |       },
 258 |       {
 259 |         "type": "food",
 260 |         "duration": 1,
 261 |         "start": 5,
 262 |         "description": "Tea and pipe"
 263 |       },
 264 |       {
 265 |         "type": "creative",
 266 |         "duration": 1,
 267 |         "start": 6,
 268 |         "description": "Writing"
 269 |       },
 270 |       {
 271 |         "type": "admin",
 272 |         "duration": 4,
 273 |         "start": 7,
 274 |         "description": "Lecturing at the university"
 275 |       },
 276 |       {
 277 |         "type": "food",
 278 |         "duration": 4,
 279 |         "start": 11,
 280 |         "description": "Meat and wine at the pub for lunch, main meal of the day"
 281 |       },
 282 |       {
 283 |         "type": "exercise",
 284 |         "duration": 1,
 285 |         "start": 15,
 286 |         "description": "Walk"
 287 |       },
 288 |       {
 289 |         "type": "creative",
 290 |         "duration": 3,
 291 |         "start": 16,
 292 |         "description": "Working with Joseph Green"
 293 |       },
 294 |       {
 295 |         "type": "food",
 296 |         "duration": 3,
 297 |         "start": 19,
 298 |         "description": "Reading"
 299 |       },
 300 |       {
 301 |         "type": "sleep",
 302 |         "duration": 2,
 303 |         "start": 22,
 304 |         "description": "Sleep"
 305 |       }
 306 |     ]
 307 |   },
 308 |   {
 309 |     "name": "Kurt Vonnegut",
 310 |     "type": "Writer",
 311 |     "description": "Described as a counterculture’s novelist, Vonnegut wrote in a satirical style that embodied the more cynical views of American society. His works like ‘Cat’s Cradle’ are praised for their blending of science fiction with gallows humor.",
 312 |     "activities": [
 313 |       {
 314 |         "type": "sleep",
 315 |         "duration": 5.5,
 316 |         "start": 0,
 317 |         "description": "Sleep"
 318 |       },
 319 |       {
 320 |         "type": "creative",
 321 |         "duration": 2.5,
 322 |         "start": 5.5,
 323 |         "description": "Writing"
 324 |       },
 325 |       {
 326 |         "type": "food",
 327 |         "duration": 0.5,
 328 |         "start": 8,
 329 |         "description": "Breakfast"
 330 |       },
 331 |       {
 332 |         "type": "creative",
 333 |         "duration": 1.5,
 334 |         "start": 8.5,
 335 |         "description": "Writing"
 336 |       },
 337 |       {
 338 |         "type": "exercise",
 339 |         "duration": 1.5,
 340 |         "start": 10,
 341 |         "description": "Walk, swim"
 342 |       },
 343 |       {
 344 |         "type": "food",
 345 |         "duration": 1,
 346 |         "start": 11.5,
 347 |         "description": "Lunch"
 348 |       },
 349 |       {
 350 |         "type": "admin",
 351 |         "duration": 5,
 352 |         "start": 12.5,
 353 |         "description": "Teaching at school"
 354 |       },
 355 |       {
 356 |         "type": "food",
 357 |         "duration": 4.5,
 358 |         "start": 17.5,
 359 |         "description": "Drinking scotch, making supper, listenting to jazz"
 360 |       },
 361 |       {
 362 |         "type": "sleep",
 363 |         "duration": 2,
 364 |         "start": 22,
 365 |         "description": "Sleep"
 366 |       }
 367 |     ]
 368 |   },
 369 |   {
 370 |     "name": "Maya Angelou",
 371 |     "type": "Writer",
 372 |     "description": "Poet and author, Angelou represented a strong voice of the Civil Rights movement. Her novel ‘I Know Why the Caged Bird Sings’ brought her international acclaim for its frank exploration of race and identity. ",
 373 |     "activities": [
 374 |       {
 375 |         "type": "sleep",
 376 |         "duration": 5.5,
 377 |         "start": 0,
 378 |         "description": "Sleep"
 379 |       },
 380 |       {
 381 |         "type": "other",
 382 |         "duration": 0.5,
 383 |         "start": 5.5,
 384 |         "description": "Getting dressed"
 385 |       },
 386 |       {
 387 |         "type": "food",
 388 |         "duration": 0.5,
 389 |         "start": 6,
 390 |         "description": "Coffee with husband"
 391 |       },
 392 |       {
 393 |         "type": "other",
 394 |         "duration": 0.5,
 395 |         "start": 6.5,
 396 |         "description": "Commute to hotel room she rented for work"
 397 |       },
 398 |       {
 399 |         "type": "creative",
 400 |         "duration": 8,
 401 |         "start": 7,
 402 |         "description": "Writing in hotel room, the more anonymous the better"
 403 |       },
 404 |       {
 405 |         "type": "food",
 406 |         "duration": 4.5,
 407 |         "start": 15,
 408 |         "description": "Shower, cook, have dinner with husband"
 409 |       },
 410 |       {
 411 |         "type": "creative",
 412 |         "duration": 0.5,
 413 |         "start": 19.5,
 414 |         "description": "Reading work to husband"
 415 |       },
 416 |       {
 417 |         "type": "food",
 418 |         "duration": 2,
 419 |         "start": 20,
 420 |         "description": "Time with husband"
 421 |       },
 422 |       {
 423 |         "type": "sleep",
 424 |         "duration": 2,
 425 |         "start": 22,
 426 |         "description": "Sleep"
 427 |       }
 428 |     ]
 429 |   },
 430 |   {
 431 |     "name": "Wystan Hugh Auden",
 432 |     "type": "Poet",
 433 |     "description": "Auden was an English-born poet who wrote about religion, politics and love. His 400-odd poems ranged enormously in style, from ballads and haikus to obscure modern forms.",
 434 |     "activities": [
 435 |       {
 436 |         "type": "sleep",
 437 |         "duration": 5.5,
 438 |         "start": 0,
 439 |         "description": "Sleep"
 440 |       },
 441 |       {
 442 |         "type": "food",
 443 |         "duration": 0.5,
 444 |         "start": 5.5,
 445 |         "description": "Coffee with a crossword"
 446 |       },
 447 |       {
 448 |         "type": "creative",
 449 |         "duration": 5,
 450 |         "start": 6,
 451 |         "description": "Worked with a dose of Benzedrine, a daily routine he kept up for 20 years"
 452 |       },
 453 |       {
 454 |         "type": "food",
 455 |         "duration": 0.5,
 456 |         "start": 11,
 457 |         "description": "Lunch"
 458 |       },
 459 |       {
 460 |         "type": "creative",
 461 |         "duration": 6.5,
 462 |         "start": 11.5,
 463 |         "description": "Main work"
 464 |       },
 465 |       {
 466 |         "type": "food",
 467 |         "duration": 1.5,
 468 |         "start": 18,
 469 |         "description": "Strong vodka martinis"
 470 |       },
 471 |       {
 472 |         "type": "food",
 473 |         "duration": 2.5,
 474 |         "start": 19.5,
 475 |         "description": "Dinner with friends"
 476 |       },
 477 |       {
 478 |         "type": "sleep",
 479 |         "duration": 2,
 480 |         "start": 22,
 481 |         "description": "Used sedative to go to sleep"
 482 |       }
 483 |     ]
 484 |   },
 485 |   {
 486 |     "name": "Ludwig Van Beethoven ",
 487 |     "type": "Composer",
 488 |     "description": "A revolutionary in the music world, Beethoven broke with convention to compose highly original works, continuing to write even after losing his hearing.",
 489 |     "activities": [
 490 |       {
 491 |         "type": "sleep",
 492 |         "duration": 6,
 493 |         "start": 0,
 494 |         "description": "Sleep"
 495 |       },
 496 |       {
 497 |         "type": "food",
 498 |         "duration": 0.5,
 499 |         "start": 6,
 500 |         "description": "Just a coffee, 60 beans per cup "
 501 |       },
 502 |       {
 503 |         "type": "creative",
 504 |         "duration": 8,
 505 |         "start": 6.5,
 506 |         "description": "Worked on compositions at his desk, taking the occasional break to walk outdoors, which aided his creativity"
 507 |       },
 508 |       {
 509 |         "type": "food",
 510 |         "duration": 1,
 511 |         "start": 14.5,
 512 |         "description": "Dinner with wine"
 513 |       },
 514 |       {
 515 |         "type": "exercise",
 516 |         "duration": 1,
 517 |         "start": 15.5,
 518 |         "description": "Long walk"
 519 |       },
 520 |       {
 521 |         "type": "food",
 522 |         "duration": 4,
 523 |         "start": 16.5,
 524 |         "description": "Tavern to eat and to read a newspaper"
 525 |       },
 526 |       {
 527 |         "type": "food",
 528 |         "duration": 1,
 529 |         "start": 20.5,
 530 |         "description": "Supper"
 531 |       },
 532 |       {
 533 |         "type": "sleep",
 534 |         "duration": 2.5,
 535 |         "start": 21.5,
 536 |         "description": "Sleep"
 537 |       }
 538 |     ]
 539 |   },
 540 |   {
 541 |     "name": "Mary Flannery O'Connor",
 542 |     "type": "Writer",
 543 |     "description": "Known as one of America’s most important fiction writers, O’Connor developed a Southern Gothic style. Her works include ‘The Violent Bear it Away’ which explores themes of violence and spiritual awakening.",
 544 |     "activities": [
 545 |       {
 546 |         "type": "sleep",
 547 |         "duration": 6,
 548 |         "start": 0,
 549 |         "description": "Sleep"
 550 |       },
 551 |       {
 552 |         "type": "food",
 553 |         "duration": 1,
 554 |         "start": 6,
 555 |         "description": "Praying, having coffee"
 556 |       },
 557 |       {
 558 |         "type": "food",
 559 |         "duration": 2,
 560 |         "start": 7,
 561 |         "description": "Church"
 562 |       },
 563 |       {
 564 |         "type": "creative",
 565 |         "duration": 3,
 566 |         "start": 9,
 567 |         "description": "Work"
 568 |       },
 569 |       {
 570 |         "type": "food",
 571 |         "duration": 9,
 572 |         "start": 12,
 573 |         "description": "Hobbies, guests, painting, taking care of birds"
 574 |       },
 575 |       {
 576 |         "type": "sleep",
 577 |         "duration": 3,
 578 |         "start": 21,
 579 |         "description": "Sleep"
 580 |       }
 581 |     ]
 582 |   },
 583 |   {
 584 |     "name": "Le Corbusier",
 585 |     "type": "Architect",
 586 |     "description": "A Swiss-French architect who enraged the establishment with his bold modern designs. Famous works include Unité d'Habitation in Marseilles, and Notre Dame du Haut in Ronchamp.",
 587 |     "activities": [
 588 |       {
 589 |         "type": "sleep",
 590 |         "duration": 6,
 591 |         "start": 0,
 592 |         "description": "Sleep"
 593 |       },
 594 |       {
 595 |         "type": "exercise",
 596 |         "duration": 0.5,
 597 |         "start": 6,
 598 |         "description": "Preparing mind and body for the day ahead"
 599 |       },
 600 |       {
 601 |         "type": "food",
 602 |         "duration": 2.5,
 603 |         "start": 6.5,
 604 |         "description": "Breakfast with wife"
 605 |       },
 606 |       {
 607 |         "type": "creative",
 608 |         "duration": 5.5,
 609 |         "start": 9,
 610 |         "description": "Painting, drawing, writing"
 611 |       },
 612 |       {
 613 |         "type": "admin",
 614 |         "duration": 3,
 615 |         "start": 14.5,
 616 |         "description": "Office hours (getting others to work on his ideas)"
 617 |       },
 618 |       {
 619 |         "type": "food",
 620 |         "duration": 5.5,
 621 |         "start": 17.5,
 622 |         "description": "Time at home"
 623 |       },
 624 |       {
 625 |         "type": "sleep",
 626 |         "duration": 1,
 627 |         "start": 23,
 628 |         "description": "Sleep"
 629 |       }
 630 |     ]
 631 |   },
 632 |   {
 633 |     "name": "Victor Hugo",
 634 |     "type": "Writer",
 635 |     "description": "This French writer brought the world ‘Les Misérables’ and ‘The Hunchback of Notre-Dame’, among other novels. He was one of the few Romanticists to have achieved popularity during his lifetime. ",
 636 |     "activities": [
 637 |       {
 638 |         "type": "sleep",
 639 |         "duration": 6,
 640 |         "start": 0,
 641 |         "description": "Sleep"
 642 |       },
 643 |       {
 644 |         "type": "food",
 645 |         "duration": 0.5,
 646 |         "start": 6,
 647 |         "description": "Coffee and two raw eggs"
 648 |       },
 649 |       {
 650 |         "type": "creative",
 651 |         "duration": 4.5,
 652 |         "start": 6.5,
 653 |         "description": "Writing"
 654 |       },
 655 |       {
 656 |         "type": "other",
 657 |         "duration": 1,
 658 |         "start": 11,
 659 |         "description": "Ice bath on the roof"
 660 |       },
 661 |       {
 662 |         "type": "food",
 663 |         "duration": 1,
 664 |         "start": 12,
 665 |         "description": "Guests and lunch"
 666 |       },
 667 |       {
 668 |         "type": "exercise",
 669 |         "duration": 2,
 670 |         "start": 13,
 671 |         "description": "Long, strenuous exercise"
 672 |       },
 673 |       {
 674 |         "type": "other",
 675 |         "duration": 1,
 676 |         "start": 15,
 677 |         "description": "Visit to the barber"
 678 |       },
 679 |       {
 680 |         "type": "food",
 681 |         "duration": 2,
 682 |         "start": 16,
 683 |         "description": "Date"
 684 |       },
 685 |       {
 686 |         "type": "creative",
 687 |         "duration": 2,
 688 |         "start": 18,
 689 |         "description": "Writing"
 690 |       },
 691 |       {
 692 |         "type": "food",
 693 |         "duration": 2,
 694 |         "start": 20,
 695 |         "description": "Dinner, playing cards, going out"
 696 |       },
 697 |       {
 698 |         "type": "sleep",
 699 |         "duration": 2,
 700 |         "start": 22,
 701 |         "description": "Sleep"
 702 |       }
 703 |     ]
 704 |   },
 705 |   {
 706 |     "name": "Wolfgang Amadeus Mozart",
 707 |     "type": "Composer",
 708 |     "description": "A composer from the age of 5, Mozart worked prolifically throughout his life.  He created such masterpieces as ‘Symphony No. 40’ and the opera ‘Don Giovanni’. ",
 709 |     "activities": [
 710 |       {
 711 |         "type": "creative",
 712 |         "duration": 1,
 713 |         "start": 0,
 714 |         "description": "Composing"
 715 |       },
 716 |       {
 717 |         "type": "sleep",
 718 |         "duration": 5,
 719 |         "start": 1,
 720 |         "description": "Sleep"
 721 |       },
 722 |       {
 723 |         "type": "other",
 724 |         "duration": 1,
 725 |         "start": 6,
 726 |         "description": "Getting dressed"
 727 |       },
 728 |       {
 729 |         "type": "creative",
 730 |         "duration": 2,
 731 |         "start": 7,
 732 |         "description": "Composing"
 733 |       },
 734 |       {
 735 |         "type": "admin",
 736 |         "duration": 4,
 737 |         "start": 9,
 738 |         "description": "Giving music lessons"
 739 |       },
 740 |       {
 741 |         "type": "food",
 742 |         "duration": 4,
 743 |         "start": 13,
 744 |         "description": "Lunch with friends"
 745 |       },
 746 |       {
 747 |         "type": "creative",
 748 |         "duration": 4,
 749 |         "start": 17,
 750 |         "description": "Composing or giving concerts"
 751 |       },
 752 |       {
 753 |         "type": "food",
 754 |         "duration": 2,
 755 |         "start": 21,
 756 |         "description": "Time with friends"
 757 |       },
 758 |       {
 759 |         "type": "creative",
 760 |         "duration": 1,
 761 |         "start": 23,
 762 |         "description": "Composing"
 763 |       }
 764 |     ]
 765 |   },
 766 |   {
 767 |     "name": "Charles Darwin",
 768 |     "type": "Scientist",
 769 |     "description": "In ‘The Origin of the Species’, Darwin established his theory of evolution, along with his place in history as a revolutionary thinker.",
 770 |     "activities": [
 771 |       {
 772 |         "type": "sleep",
 773 |         "duration": 7,
 774 |         "start": 0,
 775 |         "description": "Sleep"
 776 |       },
 777 |       {
 778 |         "type": "exercise",
 779 |         "duration": 0.5,
 780 |         "start": 7,
 781 |         "description": "Walk"
 782 |       },
 783 |       {
 784 |         "type": "food",
 785 |         "duration": 0.5,
 786 |         "start": 7.5,
 787 |         "description": "Breakfast"
 788 |       },
 789 |       {
 790 |         "type": "creative",
 791 |         "duration": 1.5,
 792 |         "start": 8,
 793 |         "description": "Focused work"
 794 |       },
 795 |       {
 796 |         "type": "admin",
 797 |         "duration": 1,
 798 |         "start": 9.5,
 799 |         "description": "Reading mail"
 800 |       },
 801 |       {
 802 |         "type": "creative",
 803 |         "duration": 1.5,
 804 |         "start": 10.5,
 805 |         "description": "Work"
 806 |       },
 807 |       {
 808 |         "type": "exercise",
 809 |         "duration": 0.5,
 810 |         "start": 12,
 811 |         "description": "Walking the dog"
 812 |       },
 813 |       {
 814 |         "type": "food",
 815 |         "duration": 0.5,
 816 |         "start": 12.5,
 817 |         "description": "Lunch"
 818 |       },
 819 |       {
 820 |         "type": "admin",
 821 |         "duration": 1,
 822 |         "start": 13,
 823 |         "description": "Reading newspapers"
 824 |       },
 825 |       {
 826 |         "type": "admin",
 827 |         "duration": 1,
 828 |         "start": 14,
 829 |         "description": "Writing letters"
 830 |       },
 831 |       {
 832 |         "type": "sleep",
 833 |         "duration": 1,
 834 |         "start": 15,
 835 |         "description": "Nap"
 836 |       },
 837 |       {
 838 |         "type": "exercise",
 839 |         "duration": 0.5,
 840 |         "start": 16,
 841 |         "description": "Walk"
 842 |       },
 843 |       {
 844 |         "type": "admin",
 845 |         "duration": 1,
 846 |         "start": 16.5,
 847 |         "description": "Admin bits and bobs"
 848 |       },
 849 |       {
 850 |         "type": "food",
 851 |         "duration": 0.5,
 852 |         "start": 17.5,
 853 |         "description": "Idleness"
 854 |       },
 855 |       {
 856 |         "type": "food",
 857 |         "duration": 1,
 858 |         "start": 18,
 859 |         "description": "Reading for pleasure"
 860 |       },
 861 |       {
 862 |         "type": "food",
 863 |         "duration": 1,
 864 |         "start": 19,
 865 |         "description": "Tea with egg"
 866 |       },
 867 |       {
 868 |         "type": "food",
 869 |         "duration": 1,
 870 |         "start": 20,
 871 |         "description": "Playing backgammon"
 872 |       },
 873 |       {
 874 |         "type": "admin",
 875 |         "duration": 1,
 876 |         "start": 21,
 877 |         "description": "Reading science books"
 878 |       },
 879 |       {
 880 |         "type": "creative",
 881 |         "duration": 2,
 882 |         "start": 22,
 883 |         "description": "Lying in bed, solving problems"
 884 |       }
 885 |     ]
 886 |   },
 887 |   {
 888 |     "name": "Charles Dickens",
 889 |     "type": "Writer",
 890 |     "description": "Arguably the most famous novelist of the Victorian period, Dickens is known for his vivid characters, as found in novels like ‘Great Expectations’ and ‘The Christmas Carol’. ",
 891 |     "activities": [
 892 |       {
 893 |         "type": "sleep",
 894 |         "duration": 7,
 895 |         "start": 0,
 896 |         "description": "Sleep"
 897 |       },
 898 |       {
 899 |         "type": "other",
 900 |         "duration": 1,
 901 |         "start": 7,
 902 |         "description": "Waking up"
 903 |       },
 904 |       {
 905 |         "type": "food",
 906 |         "duration": 1,
 907 |         "start": 8,
 908 |         "description": "Breakfast"
 909 |       },
 910 |       {
 911 |         "type": "creative",
 912 |         "duration": 5,
 913 |         "start": 9,
 914 |         "description": "Writing in absolute quiet"
 915 |       },
 916 |       {
 917 |         "type": "exercise",
 918 |         "duration": 3,
 919 |         "start": 14,
 920 |         "description": "Walking around London"
 921 |       },
 922 |       {
 923 |         "type": "food",
 924 |         "duration": 1,
 925 |         "start": 17,
 926 |         "description": "Gap time"
 927 |       },
 928 |       {
 929 |         "type": "food",
 930 |         "duration": 1,
 931 |         "start": 18,
 932 |         "description": "Dinner"
 933 |       },
 934 |       {
 935 |         "type": "food",
 936 |         "duration": 5,
 937 |         "start": 19,
 938 |         "description": "Time with friends and family"
 939 |       }
 940 |     ]
 941 |   },
 942 |   {
 943 |     "name": "Sigmund Freud",
 944 |     "type": "Psychoanalyst",
 945 |     "description": "Freud both shocked and intrigued European society with his theories of the human psyche and sexual urges. Writings like ‘The Interpretation of Dreams’ are still key texts in academic courses around the world. ",
 946 |     "activities": [
 947 |       {
 948 |         "type": "creative",
 949 |         "duration": 1,
 950 |         "start": 0,
 951 |         "description": "Writing"
 952 |       },
 953 |       {
 954 |         "type": "sleep",
 955 |         "duration": 6,
 956 |         "start": 1,
 957 |         "description": "Sleep"
 958 |       },
 959 |       {
 960 |         "type": "food",
 961 |         "duration": 1,
 962 |         "start": 7,
 963 |         "description": "Breakfast and trimming beard"
 964 |       },
 965 |       {
 966 |         "type": "creative",
 967 |         "duration": 4,
 968 |         "start": 8,
 969 |         "description": "Treating patients"
 970 |       },
 971 |       {
 972 |         "type": "food",
 973 |         "duration": 1,
 974 |         "start": 12,
 975 |         "description": "Gap time"
 976 |       },
 977 |       {
 978 |         "type": "food",
 979 |         "duration": 1,
 980 |         "start": 13,
 981 |         "description": "Lunch"
 982 |       },
 983 |       {
 984 |         "type": "exercise",
 985 |         "duration": 1,
 986 |         "start": 14,
 987 |         "description": "Speedy walk"
 988 |       },
 989 |       {
 990 |         "type": "creative",
 991 |         "duration": 6,
 992 |         "start": 15,
 993 |         "description": "Consulting and treating patients"
 994 |       },
 995 |       {
 996 |         "type": "food",
 997 |         "duration": 1.5,
 998 |         "start": 21,
 999 |         "description": "Supper and card games"
1000 |       },
1001 |       {
1002 |         "type": "creative",
1003 |         "duration": 1.5,
1004 |         "start": 22.5,
1005 |         "description": "Reading and writing"
1006 |       }
1007 |     ]
1008 |   },
1009 |   {
1010 |     "name": "Vladimir Nabokov ",
1011 |     "type": "Writer",
1012 |     "description": "A Russian American novelist who wrote the daring ‘Lolita’. The book is among the most controversial yet enduring works of 20th century literature. ",
1013 |     "activities": [
1014 |       {
1015 |         "type": "sleep",
1016 |         "duration": 1,
1017 |         "start": 0,
1018 |         "description": "Trying to fall sleep"
1019 |       },
1020 |       {
1021 |         "type": "sleep",
1022 |         "duration": 6.5,
1023 |         "start": 1,
1024 |         "description": "Sleep"
1025 |       },
1026 |       {
1027 |         "type": "food",
1028 |         "duration": 1,
1029 |         "start": 7.5,
1030 |         "description": "Thinking in bed"
1031 |       },
1032 |       {
1033 |         "type": "food",
1034 |         "duration": 1.5,
1035 |         "start": 8.5,
1036 |         "description": "Shave, breakfast, meditation, bath"
1037 |       },
1038 |       {
1039 |         "type": "creative",
1040 |         "duration": 1,
1041 |         "start": 10,
1042 |         "description": "Writing"
1043 |       },
1044 |       {
1045 |         "type": "exercise",
1046 |         "duration": 0.5,
1047 |         "start": 11,
1048 |         "description": "Walk"
1049 |       },
1050 |       {
1051 |         "type": "creative",
1052 |         "duration": 1.5,
1053 |         "start": 11.5,
1054 |         "description": "Work"
1055 |       },
1056 |       {
1057 |         "type": "food",
1058 |         "duration": 1,
1059 |         "start": 13,
1060 |         "description": "Lunch"
1061 |       },
1062 |       {
1063 |         "type": "creative",
1064 |         "duration": 4.5,
1065 |         "start": 14,
1066 |         "description": "Writing"
1067 |       },
1068 |       {
1069 |         "type": "exercise",
1070 |         "duration": 0.5,
1071 |         "start": 18.5,
1072 |         "description": "Walk"
1073 |       },
1074 |       {
1075 |         "type": "food",
1076 |         "duration": 2,
1077 |         "start": 19,
1078 |         "description": "Time with family"
1079 |       },
1080 |       {
1081 |         "type": "creative",
1082 |         "duration": 2.5,
1083 |         "start": 21,
1084 |         "description": "Reading"
1085 |       },
1086 |       {
1087 |         "type": "sleep",
1088 |         "duration": 0.5,
1089 |         "start": 23.5,
1090 |         "description": "Trying to sleep"
1091 |       }
1092 |     ]
1093 |   },
1094 |   {
1095 |     "name": "Kingsley Amis",
1096 |     "type": "Writer",
1097 |     "description": "This London-born writer was best known for his comedic novels. ‘Lucky Jim’ was his first and most famous. ",
1098 |     "activities": [
1099 |       {
1100 |         "type": "food",
1101 |         "duration": 0.5,
1102 |         "start": 0,
1103 |         "description": "Drinking"
1104 |       },
1105 |       {
1106 |         "type": "sleep",
1107 |         "duration": 7.5,
1108 |         "start": 0.5,
1109 |         "description": "Sleep"
1110 |       },
1111 |       {
1112 |         "type": "food",
1113 |         "duration": 1.5,
1114 |         "start": 8,
1115 |         "description": "Grapefruit, cereal, banana, tea"
1116 |       },
1117 |       {
1118 |         "type": "creative",
1119 |         "duration": 3.5,
1120 |         "start": 9.5,
1121 |         "description": "He would pick up from where he left off the previous evening"
1122 |       },
1123 |       {
1124 |         "type": "food",
1125 |         "duration": 3.5,
1126 |         "start": 13,
1127 |         "description": "Lunch at the pub with a drink before and a coffee after"
1128 |       },
1129 |       {
1130 |         "type": "sleep",
1131 |         "duration": 0.5,
1132 |         "start": 16.5,
1133 |         "description": "Nap in his favorite armchair"
1134 |       },
1135 |       {
1136 |         "type": "creative",
1137 |         "duration": 2,
1138 |         "start": 17,
1139 |         "description": "Main work"
1140 |       },
1141 |       {
1142 |         "type": "food",
1143 |         "duration": 4,
1144 |         "start": 19,
1145 |         "description": "Dinner with family, drinking scotch and water whilst settling down to his favorite television programs"
1146 |       },
1147 |       {
1148 |         "type": "food",
1149 |         "duration": 1,
1150 |         "start": 23,
1151 |         "description": "Final scotch and water"
1152 |       }
1153 |     ]
1154 |   },
1155 |   {
1156 |     "name": "Thomas Mann",
1157 |     "type": "Writer",
1158 |     "description": "Mann’s bold use of symbolism and irony made him one of Germany’s most significant 20th century writers. He drew on influences from Nietzsche to Goethe to express the psychology of the artist and the intellectual. ",
1159 |     "activities": [
1160 |       {
1161 |         "type": "sleep",
1162 |         "duration": 8,
1163 |         "start": 0,
1164 |         "description": "Sleep"
1165 |       },
1166 |       {
1167 |         "type": "other",
1168 |         "duration": 1,
1169 |         "start": 8,
1170 |         "description": "Taking a bath"
1171 |       },
1172 |       {
1173 |         "type": "creative",
1174 |         "duration": 3,
1175 |         "start": 9,
1176 |         "description": "Writing"
1177 |       },
1178 |       {
1179 |         "type": "food",
1180 |         "duration": 0.5,
1181 |         "start": 12,
1182 |         "description": "Lunch"
1183 |       },
1184 |       {
1185 |         "type": "creative",
1186 |         "duration": 3.5,
1187 |         "start": 12.5,
1188 |         "description": "Reading"
1189 |       },
1190 |       {
1191 |         "type": "sleep",
1192 |         "duration": 1,
1193 |         "start": 16,
1194 |         "description": "Nap"
1195 |       },
1196 |       {
1197 |         "type": "food",
1198 |         "duration": 0.5,
1199 |         "start": 17,
1200 |         "description": "Tea with family"
1201 |       },
1202 |       {
1203 |         "type": "admin",
1204 |         "duration": 1.5,
1205 |         "start": 17.5,
1206 |         "description": "Reading newspapers, mail"
1207 |       },
1208 |       {
1209 |         "type": "exercise",
1210 |         "duration": 0.5,
1211 |         "start": 19,
1212 |         "description": "Walk"
1213 |       },
1214 |       {
1215 |         "type": "food",
1216 |         "duration": 4.5,
1217 |         "start": 19.5,
1218 |         "description": "Time with family, guests, listening to music"
1219 |       }
1220 |     ]
1221 |   },
1222 |   {
1223 |     "name": "Richard Strauss",
1224 |     "type": "Composer",
1225 |     "description": "A leading composer of the German Romantic movement, Strauss is most famed for his operas, including the modern, dissonant work ‘Salome’, which produced a highly passionate reaction from the audience who cheered for 38 curtain calls. ",
1226 |     "activities": [
1227 |       {
1228 |         "type": "sleep",
1229 |         "duration": 8,
1230 |         "start": 0,
1231 |         "description": "Sleep"
1232 |       },
1233 |       {
1234 |         "type": "food",
1235 |         "duration": 1.5,
1236 |         "start": 8,
1237 |         "description": "Breakfast of 3 eggs, tea, and jam; bath"
1238 |       },
1239 |       {
1240 |         "type": "exercise",
1241 |         "duration": 0.5,
1242 |         "start": 9.5,
1243 |         "description": "Walk"
1244 |       },
1245 |       {
1246 |         "type": "creative",
1247 |         "duration": 3,
1248 |         "start": 10,
1249 |         "description": "Composing"
1250 |       },
1251 |       {
1252 |         "type": "food",
1253 |         "duration": 1,
1254 |         "start": 13,
1255 |         "description": "Lunch with friends"
1256 |       },
1257 |       {
1258 |         "type": "food",
1259 |         "duration": 1,
1260 |         "start": 14,
1261 |         "description": "Reading or playing games"
1262 |       },
1263 |       {
1264 |         "type": "creative",
1265 |         "duration": 1,
1266 |         "start": 15,
1267 |         "description": "Composing"
1268 |       },
1269 |       {
1270 |         "type": "food",
1271 |         "duration": 1,
1272 |         "start": 16,
1273 |         "description": "Dinner and tea"
1274 |       },
1275 |       {
1276 |         "type": "exercise",
1277 |         "duration": 1,
1278 |         "start": 17,
1279 |         "description": "Walk"
1280 |       },
1281 |       {
1282 |         "type": "admin",
1283 |         "duration": 1,
1284 |         "start": 18,
1285 |         "description": "Writing letters"
1286 |       },
1287 |       {
1288 |         "type": "food",
1289 |         "duration": 2.5,
1290 |         "start": 19,
1291 |         "description": "Dinner and socialising"
1292 |       },
1293 |       {
1294 |         "type": "food",
1295 |         "duration": 0.5,
1296 |         "start": 21.5,
1297 |         "description": "Reading for pleasure"
1298 |       },
1299 |       {
1300 |         "type": "sleep",
1301 |         "duration": 2,
1302 |         "start": 22,
1303 |         "description": "Sleep"
1304 |       }
1305 |     ]
1306 |   },
1307 |   {
1308 |     "name": "Pyotr Ilyich Tchaikovsky",
1309 |     "type": "Composer",
1310 |     "description": "Russia’s most famous composer, Tchaikovsky created works throughout his life, including ‘The Nutcracker’ and ‘The Sleeping Beauty’. Piano lessons began when he was just 5 years old and prompted a life-long fascination with music.",
1311 |     "activities": [
1312 |       {
1313 |         "type": "sleep",
1314 |         "duration": 8,
1315 |         "start": 0,
1316 |         "description": "Sleep"
1317 |       },
1318 |       {
1319 |         "type": "food",
1320 |         "duration": 1,
1321 |         "start": 8,
1322 |         "description": "Tea, smoking, reading bible and philosophy"
1323 |       },
1324 |       {
1325 |         "type": "exercise",
1326 |         "duration": 0.5,
1327 |         "start": 9,
1328 |         "description": "Walk"
1329 |       },
1330 |       {
1331 |         "type": "admin",
1332 |         "duration": 0.5,
1333 |         "start": 9.5,
1334 |         "description": "Mail"
1335 |       },
1336 |       {
1337 |         "type": "creative",
1338 |         "duration": 2,
1339 |         "start": 10,
1340 |         "description": "Composing"
1341 |       },
1342 |       {
1343 |         "type": "food",
1344 |         "duration": 1,
1345 |         "start": 12,
1346 |         "description": "Lunch"
1347 |       },
1348 |       {
1349 |         "type": "exercise",
1350 |         "duration": 2,
1351 |         "start": 13,
1352 |         "description": "Long walk"
1353 |       },
1354 |       {
1355 |         "type": "food",
1356 |         "duration": 2,
1357 |         "start": 15,
1358 |         "description": "Tea, reading newspapers"
1359 |       },
1360 |       {
1361 |         "type": "creative",
1362 |         "duration": 2,
1363 |         "start": 17,
1364 |         "description": "Composing"
1365 |       },
1366 |       {
1367 |         "type": "other",
1368 |         "duration": 1,
1369 |         "start": 19,
1370 |         "description": "Gap time"
1371 |       },
1372 |       {
1373 |         "type": "food",
1374 |         "duration": 4,
1375 |         "start": 20,
1376 |         "description": "Dinner, having guests, socialising"
1377 |       }
1378 |     ]
1379 |   },
1380 |   {
1381 |     "name": "Franz Kafka",
1382 |     "type": "Writer",
1383 |     "description": "The author of ‘Metamorphosis’, Prague-born Kafka helped shape the course of modern literature, exploring existential themes of alienation and fear.",
1384 |     "activities": [
1385 |       {
1386 |         "type": "creative",
1387 |         "duration": 6,
1388 |         "start": 0,
1389 |         "description": "Writing"
1390 |       },
1391 |       {
1392 |         "type": "sleep",
1393 |         "duration": 2.5,
1394 |         "start": 6,
1395 |         "description": "Sleeping after struggling to fall asleep"
1396 |       },
1397 |       {
1398 |         "type": "admin",
1399 |         "duration": 6,
1400 |         "start": 8.5,
1401 |         "description": "Work at the worker's accident insurance institute"
1402 |       },
1403 |       {
1404 |         "type": "food",
1405 |         "duration": 1,
1406 |         "start": 14.5,
1407 |         "description": "Lunch"
1408 |       },
1409 |       {
1410 |         "type": "sleep",
1411 |         "duration": 4,
1412 |         "start": 15.5,
1413 |         "description": "Catching up on sleep"
1414 |       },
1415 |       {
1416 |         "type": "exercise",
1417 |         "duration": 1.5,
1418 |         "start": 19.5,
1419 |         "description": "Exercises next to the window, then a walk"
1420 |       },
1421 |       {
1422 |         "type": "food",
1423 |         "duration": 2,
1424 |         "start": 21,
1425 |         "description": "Dinner with family"
1426 |       },
1427 |       {
1428 |         "type": "creative",
1429 |         "duration": 1,
1430 |         "start": 23,
1431 |         "description": "Writing"
1432 |       }
1433 |     ]
1434 |   },
1435 |   {
1436 |     "name": "Gustave Flaubert",
1437 |     "type": "Writer",
1438 |     "description": "Author of the controversial ‘Madame Bovary’, Flaubert was charged with immorality by the government. Luckily, he was acquitted and continued to write his candid portraits of life in French society.",
1439 |     "activities": [
1440 |       {
1441 |         "type": "creative",
1442 |         "duration": 3,
1443 |         "start": 0,
1444 |         "description": "Writing"
1445 |       },
1446 |       {
1447 |         "type": "sleep",
1448 |         "duration": 7,
1449 |         "start": 3,
1450 |         "description": "Sleep"
1451 |       },
1452 |       {
1453 |         "type": "admin",
1454 |         "duration": 0.5,
1455 |         "start": 10,
1456 |         "description": "Newspapers, mail"
1457 |       },
1458 |       {
1459 |         "type": "other",
1460 |         "duration": 0.5,
1461 |         "start": 10.5,
1462 |         "description": "Taking a bath"
1463 |       },
1464 |       {
1465 |         "type": "food",
1466 |         "duration": 1,
1467 |         "start": 11,
1468 |         "description": "Light breakfast, typically eggs, vegetables, cheese or fruit and a cup of cold chocolate"
1469 |       },
1470 |       {
1471 |         "type": "exercise",
1472 |         "duration": 1,
1473 |         "start": 12,
1474 |         "description": "Outdoor stroll with family"
1475 |       },
1476 |       {
1477 |         "type": "admin",
1478 |         "duration": 1,
1479 |         "start": 13,
1480 |         "description": "Teaching history"
1481 |       },
1482 |       {
1483 |         "type": "creative",
1484 |         "duration": 5,
1485 |         "start": 14,
1486 |         "description": "Creative work, mostly reading"
1487 |       },
1488 |       {
1489 |         "type": "food",
1490 |         "duration": 1,
1491 |         "start": 19,
1492 |         "description": "Dinner with family"
1493 |       },
1494 |       {
1495 |         "type": "food",
1496 |         "duration": 1.5,
1497 |         "start": 20,
1498 |         "description": "Time with family, talking to mother"
1499 |       },
1500 |       {
1501 |         "type": "creative",
1502 |         "duration": 2.5,
1503 |         "start": 21.5,
1504 |         "description": "Creative work"
1505 |       }
1506 |     ]
1507 |   },
1508 |   {
1509 |     "name": "Pablo Picasso",
1510 |     "type": "Painter",
1511 |     "description": "Potentially the most important painter of the 20th century, Picasso’s long career spanned many styles of artwork, including the angular lines of Cubism, for which he is most well-known.",
1512 |     "activities": [
1513 |       {
1514 |         "type": "creative",
1515 |         "duration": 2.5,
1516 |         "start": 0,
1517 |         "description": "Painting"
1518 |       },
1519 |       {
1520 |         "type": "sleep",
1521 |         "duration": 8.5,
1522 |         "start": 2.5,
1523 |         "description": "Sleep"
1524 |       },
1525 |       {
1526 |         "type": "food",
1527 |         "duration": 4,
1528 |         "start": 11,
1529 |         "description": "Breakfast, seeing friends"
1530 |       },
1531 |       {
1532 |         "type": "creative",
1533 |         "duration": 7.5,
1534 |         "start": 15,
1535 |         "description": "Painting"
1536 |       },
1537 |       {
1538 |         "type": "food",
1539 |         "duration": 1,
1540 |         "start": 22.5,
1541 |         "description": "Dinner"
1542 |       },
1543 |       {
1544 |         "type": "creative",
1545 |         "duration": 0.5,
1546 |         "start": 23.5,
1547 |         "description": "Painting"
1548 |       }
1549 |     ]
1550 |   },
1551 |   {
1552 |     "name": "William Styron",
1553 |     "type": "Writer",
1554 |     "description": "Author of ‘Sophie’s Choice’, Styron was an American novelist considered to be one of the true original writers of his generation. His work often caused controversy for exploring challenging moral themes and morbid subject matter. ",
1555 |     "activities": [
1556 |       {
1557 |         "type": "food",
1558 |         "duration": 1,
1559 |         "start": 0,
1560 |         "description": "Up at night"
1561 |       },
1562 |       {
1563 |         "type": "food",
1564 |         "duration": 2,
1565 |         "start": 1,
1566 |         "description": "Listening to music, drinking, smoking"
1567 |       },
1568 |       {
1569 |         "type": "sleep",
1570 |         "duration": 9,
1571 |         "start": 3,
1572 |         "description": "Sleep"
1573 |       },
1574 |       {
1575 |         "type": "food",
1576 |         "duration": 1.5,
1577 |         "start": 12,
1578 |         "description": "Reading and thinking in bed"
1579 |       },
1580 |       {
1581 |         "type": "food",
1582 |         "duration": 1,
1583 |         "start": 13.5,
1584 |         "description": "Lunch"
1585 |       },
1586 |       {
1587 |         "type": "admin",
1588 |         "duration": 1.5,
1589 |         "start": 14.5,
1590 |         "description": "Errands, mail"
1591 |       },
1592 |       {
1593 |         "type": "creative",
1594 |         "duration": 4,
1595 |         "start": 16,
1596 |         "description": "Writing"
1597 |       },
1598 |       {
1599 |         "type": "food",
1600 |         "duration": 4,
1601 |         "start": 20,
1602 |         "description": "Dinner with family, then listening to music, drinking, smoking"
1603 |       }
1604 |     ]
1605 |   }
1606 | ]


--------------------------------------------------------------------------------
/examples/daily-activities/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <meta charset="utf-8">
  3 | <link rel="stylesheet" href="../common/style.css" type="text/css" />
  4 | <canvas id="main-canvas"></canvas>
  5 | <div data-switch="mode">
  6 |     <button class="active" data-value="mode1">Circular</button><button data-value="mode2">Linear</button>
  7 |     <div class="fps"></div>
  8 | </div>
  9 | <div class="initializing"><p>Initializing...</p></div>
 10 | <script src="//d3js.org/d3.v3.min.js" type="text/javascript"></script>
 11 | <script src="../common/stardust/stardust.bundle.js" type="text/javascript"></script>
 12 | <script src="../common/utils.js" type="text/javascript"></script>
 13 | <script type="text/javascript">
 14 |     // Create Stardust platform from canvas element
 15 |     var canvas = document.getElementById("main-canvas");
 16 |     var width = 960;
 17 |     var height = 470;
 18 |     var platform = Stardust.platform("webgl-2d", canvas, width, height);
 19 | 
 20 |     // Create bar marks using wedge
 21 |     var barMark = Stardust.mark.compile(`
 22 |         import { Wedge } from P2D;
 23 | 
 24 |         mark Bar(
 25 |             index: float,
 26 |             center: Vector2,
 27 |             vcenter: Vector2,
 28 |             radius: float,
 29 |             t1: float,
 30 |             t2: float,
 31 |             t: float,
 32 |             width: float,
 33 |             width2: float,
 34 |             color: Color = [ 0, 0, 0, 1 ]
 35 |         ) {
 36 |             let thetaA = (t1 - 6) / 12.0 * PI;
 37 |             let thetaB = (t2 - 6) / 12.0 * PI;
 38 |             let cP1 = center + Vector2(cos(thetaA), sin(thetaA)) * radius;
 39 |             let k = 1.5;
 40 |             if(t1 + t2 < 12) k = -0.5;
 41 |             let ss = 2;
 42 |             let ti = t * (1 + ss) - ss + (1 - index) * ss;
 43 |             if(ti < 0) ti = 0;
 44 |             if(ti > 1) ti = 1;
 45 |             Wedge(
 46 |                 mix(cP1, vcenter + Vector2(t1 * 38, 0), ti),
 47 |                 mix(thetaA, PI * k, ti),
 48 |                 mix(thetaB, PI * k, ti),
 49 |                 mix(radius * (thetaB - thetaA), (t2 - t1) * 38, ti),
 50 |                 mix(width2, width, ti),
 51 |                 color
 52 |             );
 53 |         }
 54 |     `);
 55 | 
 56 |     // Create bars with our barMark
 57 |     var bars = Stardust.mark.create(barMark.Bar, platform);
 58 | 
 59 |     // Use D3's scale for colors
 60 |     var colorScale = d3.scale.category10();
 61 | 
 62 |     loadData("data.json", (data) => {
 63 |         // Layout parameters
 64 |         let yScale = d3.scale.linear().domain([ 0, data.length - 1 ]).range([ 15, height - 15 ]);
 65 |         let h = (yScale(1) - yScale(0)) * 0.8;
 66 |         let sz = Math.sqrt((width - 15) * (height - 15) / data.length / 5);
 67 |         let grouping = Math.floor(width / sz / 2);
 68 | 
 69 |         // Attributes
 70 |         bars.attr("t", 0);
 71 |         bars.attr("t1", d => d.start);
 72 |         bars.attr("t2", d => d.start + d.duration);
 73 |         bars.attr("color", d => Stardust.Color.FromHTML(colorScale(d.type)));
 74 |         bars.attr("width", h);
 75 |         bars.attr("width2", sz * 0.3);
 76 | 
 77 |         // Instancing
 78 |         bars.instance(
 79 |             d => d.activities,
 80 |             (d, i) => {
 81 |                 return {
 82 |                     index: i / (data.length - 1),
 83 |                     center: [ i % grouping * sz * 2 + sz + 4, Math.floor(i / grouping) * sz * 2 + sz + 10 ],
 84 |                     radius: sz - sz * 0.3 / 2 - 2,
 85 |                     vcenter: [ 20, yScale(i) ]
 86 |                 };
 87 |             }
 88 |         );
 89 | 
 90 |         // Set data items to bars
 91 |         bars.data(data);
 92 | 
 93 |         // Render/Re-render bars
 94 |         function render() {
 95 |             platform.clear();
 96 |             bars.render();
 97 |         }
 98 | 
 99 |         render();
100 | 
101 |         // Handle switches and animation timing
102 |         switches.mode_changed = function(newValue) {
103 |             beginTransition((t) => {
104 |                 if(newValue == "mode1")
105 |                     bars.attr("t", 1 - t);
106 |                 if(newValue == "mode2")
107 |                     bars.attr("t", t);
108 |                 render();
109 |             });
110 |         };
111 |     });
112 | </script>


--------------------------------------------------------------------------------
/examples/daily-activities/metadata.json:
--------------------------------------------------------------------------------
1 | {
2 |     "description": "Stardust Example: Daily Activities of Creative People"
3 | }


--------------------------------------------------------------------------------
/examples/daily-activities/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/daily-activities/preview.png


--------------------------------------------------------------------------------
/examples/daily-activities/preview_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/daily-activities/preview_small.png


--------------------------------------------------------------------------------
/examples/glyphs/README.md:
--------------------------------------------------------------------------------
1 | Glyph-based visualization on the Auto MPG dataset.


--------------------------------------------------------------------------------
/examples/glyphs/car.csv:
--------------------------------------------------------------------------------
  1 | "MPG","Cylinders","Displacement","Horsepower","Weight","Acceleration","ModelYear","Origin","Name"
  2 | "18.0","8","307.0","130.0","3504.0","12.0","70","1","chevrolet chevelle malibu"
  3 | "15.0","8","350.0","165.0","3693.0","11.5","70","1","buick skylark 320"
  4 | "18.0","8","318.0","150.0","3436.0","11.0","70","1","plymouth satellite"
  5 | "16.0","8","304.0","150.0","3433.0","12.0","70","1","amc rebel sst"
  6 | "17.0","8","302.0","140.0","3449.0","10.5","70","1","ford torino"
  7 | "15.0","8","429.0","198.0","4341.0","10.0","70","1","ford galaxie 500"
  8 | "14.0","8","454.0","220.0","4354.0"," 9.0","70","1","chevrolet impala"
  9 | "14.0","8","440.0","215.0","4312.0"," 8.5","70","1","plymouth fury iii"
 10 | "14.0","8","455.0","225.0","4425.0","10.0","70","1","pontiac catalina"
 11 | "15.0","8","390.0","190.0","3850.0"," 8.5","70","1","amc ambassador dpl"
 12 | "15.0","8","383.0","170.0","3563.0","10.0","70","1","dodge challenger se"
 13 | "14.0","8","340.0","160.0","3609.0"," 8.0","70","1","plymouth 'cuda 340"
 14 | "15.0","8","400.0","150.0","3761.0"," 9.5","70","1","chevrolet monte carlo"
 15 | "14.0","8","455.0","225.0","3086.0","10.0","70","1","buick estate wagon (sw)"
 16 | "24.0","4","113.0"," 95.0","2372.0","15.0","70","3","toyota corona mark ii"
 17 | "22.0","6","198.0"," 95.0","2833.0","15.5","70","1","plymouth duster"
 18 | "18.0","6","199.0"," 97.0","2774.0","15.5","70","1","amc hornet"
 19 | "21.0","6","200.0"," 85.0","2587.0","16.0","70","1","ford maverick"
 20 | "27.0","4"," 97.0"," 88.0","2130.0","14.5","70","3","datsun pl510"
 21 | "26.0","4"," 97.0"," 46.0","1835.0","20.5","70","2","volkswagen 1131 deluxe sedan"
 22 | "25.0","4","110.0"," 87.0","2672.0","17.5","70","2","peugeot 504"
 23 | "24.0","4","107.0"," 90.0","2430.0","14.5","70","2","audi 100 ls"
 24 | "25.0","4","104.0"," 95.0","2375.0","17.5","70","2","saab 99e"
 25 | "26.0","4","121.0","113.0","2234.0","12.5","70","2","bmw 2002"
 26 | "21.0","6","199.0"," 90.0","2648.0","15.0","70","1","amc gremlin"
 27 | "10.0","8","360.0","215.0","4615.0","14.0","70","1","ford f250"
 28 | "10.0","8","307.0","200.0","4376.0","15.0","70","1","chevy c20"
 29 | "11.0","8","318.0","210.0","4382.0","13.5","70","1","dodge d200"
 30 | " 9.0","8","304.0","193.0","4732.0","18.5","70","1","hi 1200d"
 31 | "27.0","4"," 97.0"," 88.0","2130.0","14.5","71","3","datsun pl510"
 32 | "28.0","4","140.0"," 90.0","2264.0","15.5","71","1","chevrolet vega 2300"
 33 | "25.0","4","113.0"," 95.0","2228.0","14.0","71","3","toyota corona"
 34 | "19.0","6","232.0","100.0","2634.0","13.0","71","1","amc gremlin"
 35 | "16.0","6","225.0","105.0","3439.0","15.5","71","1","plymouth satellite custom"
 36 | "17.0","6","250.0","100.0","3329.0","15.5","71","1","chevrolet chevelle malibu"
 37 | "19.0","6","250.0"," 88.0","3302.0","15.5","71","1","ford torino 500"
 38 | "18.0","6","232.0","100.0","3288.0","15.5","71","1","amc matador"
 39 | "14.0","8","350.0","165.0","4209.0","12.0","71","1","chevrolet impala"
 40 | "14.0","8","400.0","175.0","4464.0","11.5","71","1","pontiac catalina brougham"
 41 | "14.0","8","351.0","153.0","4154.0","13.5","71","1","ford galaxie 500"
 42 | "14.0","8","318.0","150.0","4096.0","13.0","71","1","plymouth fury iii"
 43 | "12.0","8","383.0","180.0","4955.0","11.5","71","1","dodge monaco (sw)"
 44 | "13.0","8","400.0","170.0","4746.0","12.0","71","1","ford country squire (sw)"
 45 | "13.0","8","400.0","175.0","5140.0","12.0","71","1","pontiac safari (sw)"
 46 | "18.0","6","258.0","110.0","2962.0","13.5","71","1","amc hornet sportabout (sw)"
 47 | "22.0","4","140.0"," 72.0","2408.0","19.0","71","1","chevrolet vega (sw)"
 48 | "19.0","6","250.0","100.0","3282.0","15.0","71","1","pontiac firebird"
 49 | "18.0","6","250.0"," 88.0","3139.0","14.5","71","1","ford mustang"
 50 | "23.0","4","122.0"," 86.0","2220.0","14.0","71","1","mercury capri 2000"
 51 | "28.0","4","116.0"," 90.0","2123.0","14.0","71","2","opel 1900"
 52 | "30.0","4"," 79.0"," 70.0","2074.0","19.5","71","2","peugeot 304"
 53 | "30.0","4"," 88.0"," 76.0","2065.0","14.5","71","2","fiat 124b"
 54 | "31.0","4"," 71.0"," 65.0","1773.0","19.0","71","3","toyota corolla 1200"
 55 | "35.0","4"," 72.0"," 69.0","1613.0","18.0","71","3","datsun 1200"
 56 | "27.0","4"," 97.0"," 60.0","1834.0","19.0","71","2","volkswagen model 111"
 57 | "26.0","4"," 91.0"," 70.0","1955.0","20.5","71","1","plymouth cricket"
 58 | "24.0","4","113.0"," 95.0","2278.0","15.5","72","3","toyota corona hardtop"
 59 | "25.0","4"," 97.5"," 80.0","2126.0","17.0","72","1","dodge colt hardtop"
 60 | "23.0","4"," 97.0"," 54.0","2254.0","23.5","72","2","volkswagen type 3"
 61 | "20.0","4","140.0"," 90.0","2408.0","19.5","72","1","chevrolet vega"
 62 | "21.0","4","122.0"," 86.0","2226.0","16.5","72","1","ford pinto runabout"
 63 | "13.0","8","350.0","165.0","4274.0","12.0","72","1","chevrolet impala"
 64 | "14.0","8","400.0","175.0","4385.0","12.0","72","1","pontiac catalina"
 65 | "15.0","8","318.0","150.0","4135.0","13.5","72","1","plymouth fury iii"
 66 | "14.0","8","351.0","153.0","4129.0","13.0","72","1","ford galaxie 500"
 67 | "17.0","8","304.0","150.0","3672.0","11.5","72","1","amc ambassador sst"
 68 | "11.0","8","429.0","208.0","4633.0","11.0","72","1","mercury marquis"
 69 | "13.0","8","350.0","155.0","4502.0","13.5","72","1","buick lesabre custom"
 70 | "12.0","8","350.0","160.0","4456.0","13.5","72","1","oldsmobile delta 88 royale"
 71 | "13.0","8","400.0","190.0","4422.0","12.5","72","1","chrysler newport royal"
 72 | "19.0","3"," 70.0"," 97.0","2330.0","13.5","72","3","mazda rx2 coupe"
 73 | "15.0","8","304.0","150.0","3892.0","12.5","72","1","amc matador (sw)"
 74 | "13.0","8","307.0","130.0","4098.0","14.0","72","1","chevrolet chevelle concours (sw)"
 75 | "13.0","8","302.0","140.0","4294.0","16.0","72","1","ford gran torino (sw)"
 76 | "14.0","8","318.0","150.0","4077.0","14.0","72","1","plymouth satellite custom (sw)"
 77 | "18.0","4","121.0","112.0","2933.0","14.5","72","2","volvo 145e (sw)"
 78 | "22.0","4","121.0"," 76.0","2511.0","18.0","72","2","volkswagen 411 (sw)"
 79 | "21.0","4","120.0"," 87.0","2979.0","19.5","72","2","peugeot 504 (sw)"
 80 | "26.0","4"," 96.0"," 69.0","2189.0","18.0","72","2","renault 12 (sw)"
 81 | "22.0","4","122.0"," 86.0","2395.0","16.0","72","1","ford pinto (sw)"
 82 | "28.0","4"," 97.0"," 92.0","2288.0","17.0","72","3","datsun 510 (sw)"
 83 | "23.0","4","120.0"," 97.0","2506.0","14.5","72","3","toyouta corona mark ii (sw)"
 84 | "28.0","4"," 98.0"," 80.0","2164.0","15.0","72","1","dodge colt (sw)"
 85 | "27.0","4"," 97.0"," 88.0","2100.0","16.5","72","3","toyota corolla 1600 (sw)"
 86 | "13.0","8","350.0","175.0","4100.0","13.0","73","1","buick century 350"
 87 | "14.0","8","304.0","150.0","3672.0","11.5","73","1","amc matador"
 88 | "13.0","8","350.0","145.0","3988.0","13.0","73","1","chevrolet malibu"
 89 | "14.0","8","302.0","137.0","4042.0","14.5","73","1","ford gran torino"
 90 | "15.0","8","318.0","150.0","3777.0","12.5","73","1","dodge coronet custom"
 91 | "12.0","8","429.0","198.0","4952.0","11.5","73","1","mercury marquis brougham"
 92 | "13.0","8","400.0","150.0","4464.0","12.0","73","1","chevrolet caprice classic"
 93 | "13.0","8","351.0","158.0","4363.0","13.0","73","1","ford ltd"
 94 | "14.0","8","318.0","150.0","4237.0","14.5","73","1","plymouth fury gran sedan"
 95 | "13.0","8","440.0","215.0","4735.0","11.0","73","1","chrysler new yorker brougham"
 96 | "12.0","8","455.0","225.0","4951.0","11.0","73","1","buick electra 225 custom"
 97 | "13.0","8","360.0","175.0","3821.0","11.0","73","1","amc ambassador brougham"
 98 | "18.0","6","225.0","105.0","3121.0","16.5","73","1","plymouth valiant"
 99 | "16.0","6","250.0","100.0","3278.0","18.0","73","1","chevrolet nova custom"
100 | "18.0","6","232.0","100.0","2945.0","16.0","73","1","amc hornet"
101 | "18.0","6","250.0"," 88.0","3021.0","16.5","73","1","ford maverick"
102 | "23.0","6","198.0"," 95.0","2904.0","16.0","73","1","plymouth duster"
103 | "26.0","4"," 97.0"," 46.0","1950.0","21.0","73","2","volkswagen super beetle"
104 | "11.0","8","400.0","150.0","4997.0","14.0","73","1","chevrolet impala"
105 | "12.0","8","400.0","167.0","4906.0","12.5","73","1","ford country"
106 | "13.0","8","360.0","170.0","4654.0","13.0","73","1","plymouth custom suburb"
107 | "12.0","8","350.0","180.0","4499.0","12.5","73","1","oldsmobile vista cruiser"
108 | "18.0","6","232.0","100.0","2789.0","15.0","73","1","amc gremlin"
109 | "20.0","4"," 97.0"," 88.0","2279.0","19.0","73","3","toyota carina"
110 | "21.0","4","140.0"," 72.0","2401.0","19.5","73","1","chevrolet vega"
111 | "22.0","4","108.0"," 94.0","2379.0","16.5","73","3","datsun 610"
112 | "18.0","3"," 70.0"," 90.0","2124.0","13.5","73","3","maxda rx3"
113 | "19.0","4","122.0"," 85.0","2310.0","18.5","73","1","ford pinto"
114 | "21.0","6","155.0","107.0","2472.0","14.0","73","1","mercury capri v6"
115 | "26.0","4"," 98.0"," 90.0","2265.0","15.5","73","2","fiat 124 sport coupe"
116 | "15.0","8","350.0","145.0","4082.0","13.0","73","1","chevrolet monte carlo s"
117 | "16.0","8","400.0","230.0","4278.0"," 9.5","73","1","pontiac grand prix"
118 | "29.0","4"," 68.0"," 49.0","1867.0","19.5","73","2","fiat 128"
119 | "24.0","4","116.0"," 75.0","2158.0","15.5","73","2","opel manta"
120 | "20.0","4","114.0"," 91.0","2582.0","14.0","73","2","audi 100ls"
121 | "19.0","4","121.0","112.0","2868.0","15.5","73","2","volvo 144ea"
122 | "15.0","8","318.0","150.0","3399.0","11.0","73","1","dodge dart custom"
123 | "24.0","4","121.0","110.0","2660.0","14.0","73","2","saab 99le"
124 | "20.0","6","156.0","122.0","2807.0","13.5","73","3","toyota mark ii"
125 | "11.0","8","350.0","180.0","3664.0","11.0","73","1","oldsmobile omega"
126 | "20.0","6","198.0"," 95.0","3102.0","16.5","74","1","plymouth duster"
127 | "19.0","6","232.0","100.0","2901.0","16.0","74","1","amc hornet"
128 | "15.0","6","250.0","100.0","3336.0","17.0","74","1","chevrolet nova"
129 | "31.0","4"," 79.0"," 67.0","1950.0","19.0","74","3","datsun b210"
130 | "26.0","4","122.0"," 80.0","2451.0","16.5","74","1","ford pinto"
131 | "32.0","4"," 71.0"," 65.0","1836.0","21.0","74","3","toyota corolla 1200"
132 | "25.0","4","140.0"," 75.0","2542.0","17.0","74","1","chevrolet vega"
133 | "16.0","6","250.0","100.0","3781.0","17.0","74","1","chevrolet chevelle malibu classic"
134 | "16.0","6","258.0","110.0","3632.0","18.0","74","1","amc matador"
135 | "18.0","6","225.0","105.0","3613.0","16.5","74","1","plymouth satellite sebring"
136 | "16.0","8","302.0","140.0","4141.0","14.0","74","1","ford gran torino"
137 | "13.0","8","350.0","150.0","4699.0","14.5","74","1","buick century luxus (sw)"
138 | "14.0","8","318.0","150.0","4457.0","13.5","74","1","dodge coronet custom (sw)"
139 | "14.0","8","302.0","140.0","4638.0","16.0","74","1","ford gran torino (sw)"
140 | "14.0","8","304.0","150.0","4257.0","15.5","74","1","amc matador (sw)"
141 | "29.0","4"," 98.0"," 83.0","2219.0","16.5","74","2","audi fox"
142 | "26.0","4"," 79.0"," 67.0","1963.0","15.5","74","2","volkswagen dasher"
143 | "26.0","4"," 97.0"," 78.0","2300.0","14.5","74","2","opel manta"
144 | "31.0","4"," 76.0"," 52.0","1649.0","16.5","74","3","toyota corona"
145 | "32.0","4"," 83.0"," 61.0","2003.0","19.0","74","3","datsun 710"
146 | "28.0","4"," 90.0"," 75.0","2125.0","14.5","74","1","dodge colt"
147 | "24.0","4"," 90.0"," 75.0","2108.0","15.5","74","2","fiat 128"
148 | "26.0","4","116.0"," 75.0","2246.0","14.0","74","2","fiat 124 tc"
149 | "24.0","4","120.0"," 97.0","2489.0","15.0","74","3","honda civic"
150 | "26.0","4","108.0"," 93.0","2391.0","15.5","74","3","subaru"
151 | "31.0","4"," 79.0"," 67.0","2000.0","16.0","74","2","fiat x1.9"
152 | "19.0","6","225.0"," 95.0","3264.0","16.0","75","1","plymouth valiant custom"
153 | "18.0","6","250.0","105.0","3459.0","16.0","75","1","chevrolet nova"
154 | "15.0","6","250.0"," 72.0","3432.0","21.0","75","1","mercury monarch"
155 | "15.0","6","250.0"," 72.0","3158.0","19.5","75","1","ford maverick"
156 | "16.0","8","400.0","170.0","4668.0","11.5","75","1","pontiac catalina"
157 | "15.0","8","350.0","145.0","4440.0","14.0","75","1","chevrolet bel air"
158 | "16.0","8","318.0","150.0","4498.0","14.5","75","1","plymouth grand fury"
159 | "14.0","8","351.0","148.0","4657.0","13.5","75","1","ford ltd"
160 | "17.0","6","231.0","110.0","3907.0","21.0","75","1","buick century"
161 | "16.0","6","250.0","105.0","3897.0","18.5","75","1","chevroelt chevelle malibu"
162 | "15.0","6","258.0","110.0","3730.0","19.0","75","1","amc matador"
163 | "18.0","6","225.0"," 95.0","3785.0","19.0","75","1","plymouth fury"
164 | "21.0","6","231.0","110.0","3039.0","15.0","75","1","buick skyhawk"
165 | "20.0","8","262.0","110.0","3221.0","13.5","75","1","chevrolet monza 2+2"
166 | "13.0","8","302.0","129.0","3169.0","12.0","75","1","ford mustang ii"
167 | "29.0","4"," 97.0"," 75.0","2171.0","16.0","75","3","toyota corolla"
168 | "23.0","4","140.0"," 83.0","2639.0","17.0","75","1","ford pinto"
169 | "20.0","6","232.0","100.0","2914.0","16.0","75","1","amc gremlin"
170 | "23.0","4","140.0"," 78.0","2592.0","18.5","75","1","pontiac astro"
171 | "24.0","4","134.0"," 96.0","2702.0","13.5","75","3","toyota corona"
172 | "25.0","4"," 90.0"," 71.0","2223.0","16.5","75","2","volkswagen dasher"
173 | "24.0","4","119.0"," 97.0","2545.0","17.0","75","3","datsun 710"
174 | "18.0","6","171.0"," 97.0","2984.0","14.5","75","1","ford pinto"
175 | "29.0","4"," 90.0"," 70.0","1937.0","14.0","75","2","volkswagen rabbit"
176 | "19.0","6","232.0"," 90.0","3211.0","17.0","75","1","amc pacer"
177 | "23.0","4","115.0"," 95.0","2694.0","15.0","75","2","audi 100ls"
178 | "23.0","4","120.0"," 88.0","2957.0","17.0","75","2","peugeot 504"
179 | "22.0","4","121.0"," 98.0","2945.0","14.5","75","2","volvo 244dl"
180 | "25.0","4","121.0","115.0","2671.0","13.5","75","2","saab 99le"
181 | "33.0","4"," 91.0"," 53.0","1795.0","17.5","75","3","honda civic cvcc"
182 | "28.0","4","107.0"," 86.0","2464.0","15.5","76","2","fiat 131"
183 | "25.0","4","116.0"," 81.0","2220.0","16.9","76","2","opel 1900"
184 | "25.0","4","140.0"," 92.0","2572.0","14.9","76","1","capri ii"
185 | "26.0","4"," 98.0"," 79.0","2255.0","17.7","76","1","dodge colt"
186 | "27.0","4","101.0"," 83.0","2202.0","15.3","76","2","renault 12tl"
187 | "17.5","8","305.0","140.0","4215.0","13.0","76","1","chevrolet chevelle malibu classic"
188 | "16.0","8","318.0","150.0","4190.0","13.0","76","1","dodge coronet brougham"
189 | "15.5","8","304.0","120.0","3962.0","13.9","76","1","amc matador"
190 | "14.5","8","351.0","152.0","4215.0","12.8","76","1","ford gran torino"
191 | "22.0","6","225.0","100.0","3233.0","15.4","76","1","plymouth valiant"
192 | "22.0","6","250.0","105.0","3353.0","14.5","76","1","chevrolet nova"
193 | "24.0","6","200.0"," 81.0","3012.0","17.6","76","1","ford maverick"
194 | "22.5","6","232.0"," 90.0","3085.0","17.6","76","1","amc hornet"
195 | "29.0","4"," 85.0"," 52.0","2035.0","22.2","76","1","chevrolet chevette"
196 | "24.5","4"," 98.0"," 60.0","2164.0","22.1","76","1","chevrolet woody"
197 | "29.0","4"," 90.0"," 70.0","1937.0","14.2","76","2","vw rabbit"
198 | "33.0","4"," 91.0"," 53.0","1795.0","17.4","76","3","honda civic"
199 | "20.0","6","225.0","100.0","3651.0","17.7","76","1","dodge aspen se"
200 | "18.0","6","250.0"," 78.0","3574.0","21.0","76","1","ford granada ghia"
201 | "18.5","6","250.0","110.0","3645.0","16.2","76","1","pontiac ventura sj"
202 | "17.5","6","258.0"," 95.0","3193.0","17.8","76","1","amc pacer d/l"
203 | "29.5","4"," 97.0"," 71.0","1825.0","12.2","76","2","volkswagen rabbit"
204 | "32.0","4"," 85.0"," 70.0","1990.0","17.0","76","3","datsun b-210"
205 | "28.0","4"," 97.0"," 75.0","2155.0","16.4","76","3","toyota corolla"
206 | "26.5","4","140.0"," 72.0","2565.0","13.6","76","1","ford pinto"
207 | "20.0","4","130.0","102.0","3150.0","15.7","76","2","volvo 245"
208 | "13.0","8","318.0","150.0","3940.0","13.2","76","1","plymouth volare premier v8"
209 | "19.0","4","120.0"," 88.0","3270.0","21.9","76","2","peugeot 504"
210 | "19.0","6","156.0","108.0","2930.0","15.5","76","3","toyota mark ii"
211 | "16.5","6","168.0","120.0","3820.0","16.7","76","2","mercedes-benz 280s"
212 | "16.5","8","350.0","180.0","4380.0","12.1","76","1","cadillac seville"
213 | "13.0","8","350.0","145.0","4055.0","12.0","76","1","chevy c10"
214 | "13.0","8","302.0","130.0","3870.0","15.0","76","1","ford f108"
215 | "13.0","8","318.0","150.0","3755.0","14.0","76","1","dodge d100"
216 | "31.5","4"," 98.0"," 68.0","2045.0","18.5","77","3","honda accord cvcc"
217 | "30.0","4","111.0"," 80.0","2155.0","14.8","77","1","buick opel isuzu deluxe"
218 | "36.0","4"," 79.0"," 58.0","1825.0","18.6","77","2","renault 5 gtl"
219 | "25.5","4","122.0"," 96.0","2300.0","15.5","77","1","plymouth arrow gs"
220 | "33.5","4"," 85.0"," 70.0","1945.0","16.8","77","3","datsun f-10 hatchback"
221 | "17.5","8","305.0","145.0","3880.0","12.5","77","1","chevrolet caprice classic"
222 | "17.0","8","260.0","110.0","4060.0","19.0","77","1","oldsmobile cutlass supreme"
223 | "15.5","8","318.0","145.0","4140.0","13.7","77","1","dodge monaco brougham"
224 | "15.0","8","302.0","130.0","4295.0","14.9","77","1","mercury cougar brougham"
225 | "17.5","6","250.0","110.0","3520.0","16.4","77","1","chevrolet concours"
226 | "20.5","6","231.0","105.0","3425.0","16.9","77","1","buick skylark"
227 | "19.0","6","225.0","100.0","3630.0","17.7","77","1","plymouth volare custom"
228 | "18.5","6","250.0"," 98.0","3525.0","19.0","77","1","ford granada"
229 | "16.0","8","400.0","180.0","4220.0","11.1","77","1","pontiac grand prix lj"
230 | "15.5","8","350.0","170.0","4165.0","11.4","77","1","chevrolet monte carlo landau"
231 | "15.5","8","400.0","190.0","4325.0","12.2","77","1","chrysler cordoba"
232 | "16.0","8","351.0","149.0","4335.0","14.5","77","1","ford thunderbird"
233 | "29.0","4"," 97.0"," 78.0","1940.0","14.5","77","2","volkswagen rabbit custom"
234 | "24.5","4","151.0"," 88.0","2740.0","16.0","77","1","pontiac sunbird coupe"
235 | "26.0","4"," 97.0"," 75.0","2265.0","18.2","77","3","toyota corolla liftback"
236 | "25.5","4","140.0"," 89.0","2755.0","15.8","77","1","ford mustang ii 2+2"
237 | "30.5","4"," 98.0"," 63.0","2051.0","17.0","77","1","chevrolet chevette"
238 | "33.5","4"," 98.0"," 83.0","2075.0","15.9","77","1","dodge colt m/m"
239 | "30.0","4"," 97.0"," 67.0","1985.0","16.4","77","3","subaru dl"
240 | "30.5","4"," 97.0"," 78.0","2190.0","14.1","77","2","volkswagen dasher"
241 | "22.0","6","146.0"," 97.0","2815.0","14.5","77","3","datsun 810"
242 | "21.5","4","121.0","110.0","2600.0","12.8","77","2","bmw 320i"
243 | "21.5","3"," 80.0","110.0","2720.0","13.5","77","3","mazda rx-4"
244 | "43.1","4"," 90.0"," 48.0","1985.0","21.5","78","2","volkswagen rabbit custom diesel"
245 | "36.1","4"," 98.0"," 66.0","1800.0","14.4","78","1","ford fiesta"
246 | "32.8","4"," 78.0"," 52.0","1985.0","19.4","78","3","mazda glc deluxe"
247 | "39.4","4"," 85.0"," 70.0","2070.0","18.6","78","3","datsun b210 gx"
248 | "36.1","4"," 91.0"," 60.0","1800.0","16.4","78","3","honda civic cvcc"
249 | "19.9","8","260.0","110.0","3365.0","15.5","78","1","oldsmobile cutlass salon brougham"
250 | "19.4","8","318.0","140.0","3735.0","13.2","78","1","dodge diplomat"
251 | "20.2","8","302.0","139.0","3570.0","12.8","78","1","mercury monarch ghia"
252 | "19.2","6","231.0","105.0","3535.0","19.2","78","1","pontiac phoenix lj"
253 | "20.5","6","200.0"," 95.0","3155.0","18.2","78","1","chevrolet malibu"
254 | "20.2","6","200.0"," 85.0","2965.0","15.8","78","1","ford fairmont (auto)"
255 | "25.1","4","140.0"," 88.0","2720.0","15.4","78","1","ford fairmont (man)"
256 | "20.5","6","225.0","100.0","3430.0","17.2","78","1","plymouth volare"
257 | "19.4","6","232.0"," 90.0","3210.0","17.2","78","1","amc concord"
258 | "20.6","6","231.0","105.0","3380.0","15.8","78","1","buick century special"
259 | "20.8","6","200.0"," 85.0","3070.0","16.7","78","1","mercury zephyr"
260 | "18.6","6","225.0","110.0","3620.0","18.7","78","1","dodge aspen"
261 | "18.1","6","258.0","120.0","3410.0","15.1","78","1","amc concord d/l"
262 | "19.2","8","305.0","145.0","3425.0","13.2","78","1","chevrolet monte carlo landau"
263 | "17.7","6","231.0","165.0","3445.0","13.4","78","1","buick regal sport coupe (turbo)"
264 | "18.1","8","302.0","139.0","3205.0","11.2","78","1","ford futura"
265 | "17.5","8","318.0","140.0","4080.0","13.7","78","1","dodge magnum xe"
266 | "30.0","4"," 98.0"," 68.0","2155.0","16.5","78","1","chevrolet chevette"
267 | "27.5","4","134.0"," 95.0","2560.0","14.2","78","3","toyota corona"
268 | "27.2","4","119.0"," 97.0","2300.0","14.7","78","3","datsun 510"
269 | "30.9","4","105.0"," 75.0","2230.0","14.5","78","1","dodge omni"
270 | "21.1","4","134.0"," 95.0","2515.0","14.8","78","3","toyota celica gt liftback"
271 | "23.2","4","156.0","105.0","2745.0","16.7","78","1","plymouth sapporo"
272 | "23.8","4","151.0"," 85.0","2855.0","17.6","78","1","oldsmobile starfire sx"
273 | "23.9","4","119.0"," 97.0","2405.0","14.9","78","3","datsun 200-sx"
274 | "20.3","5","131.0","103.0","2830.0","15.9","78","2","audi 5000"
275 | "17.0","6","163.0","125.0","3140.0","13.6","78","2","volvo 264gl"
276 | "21.6","4","121.0","115.0","2795.0","15.7","78","2","saab 99gle"
277 | "16.2","6","163.0","133.0","3410.0","15.8","78","2","peugeot 604sl"
278 | "31.5","4"," 89.0"," 71.0","1990.0","14.9","78","2","volkswagen scirocco"
279 | "29.5","4"," 98.0"," 68.0","2135.0","16.6","78","3","honda accord lx"
280 | "21.5","6","231.0","115.0","3245.0","15.4","79","1","pontiac lemans v6"
281 | "19.8","6","200.0"," 85.0","2990.0","18.2","79","1","mercury zephyr 6"
282 | "22.3","4","140.0"," 88.0","2890.0","17.3","79","1","ford fairmont 4"
283 | "20.2","6","232.0"," 90.0","3265.0","18.2","79","1","amc concord dl 6"
284 | "20.6","6","225.0","110.0","3360.0","16.6","79","1","dodge aspen 6"
285 | "17.0","8","305.0","130.0","3840.0","15.4","79","1","chevrolet caprice classic"
286 | "17.6","8","302.0","129.0","3725.0","13.4","79","1","ford ltd landau"
287 | "16.5","8","351.0","138.0","3955.0","13.2","79","1","mercury grand marquis"
288 | "18.2","8","318.0","135.0","3830.0","15.2","79","1","dodge st. regis"
289 | "16.9","8","350.0","155.0","4360.0","14.9","79","1","buick estate wagon (sw)"
290 | "15.5","8","351.0","142.0","4054.0","14.3","79","1","ford country squire (sw)"
291 | "19.2","8","267.0","125.0","3605.0","15.0","79","1","chevrolet malibu classic (sw)"
292 | "18.5","8","360.0","150.0","3940.0","13.0","79","1","chrysler lebaron town @ country (sw)"
293 | "31.9","4"," 89.0"," 71.0","1925.0","14.0","79","2","vw rabbit custom"
294 | "34.1","4"," 86.0"," 65.0","1975.0","15.2","79","3","maxda glc deluxe"
295 | "35.7","4"," 98.0"," 80.0","1915.0","14.4","79","1","dodge colt hatchback custom"
296 | "27.4","4","121.0"," 80.0","2670.0","15.0","79","1","amc spirit dl"
297 | "25.4","5","183.0"," 77.0","3530.0","20.1","79","2","mercedes benz 300d"
298 | "23.0","8","350.0","125.0","3900.0","17.4","79","1","cadillac eldorado"
299 | "27.2","4","141.0"," 71.0","3190.0","24.8","79","2","peugeot 504"
300 | "23.9","8","260.0"," 90.0","3420.0","22.2","79","1","oldsmobile cutlass salon brougham"
301 | "34.2","4","105.0"," 70.0","2200.0","13.2","79","1","plymouth horizon"
302 | "34.5","4","105.0"," 70.0","2150.0","14.9","79","1","plymouth horizon tc3"
303 | "31.8","4"," 85.0"," 65.0","2020.0","19.2","79","3","datsun 210"
304 | "37.3","4"," 91.0"," 69.0","2130.0","14.7","79","2","fiat strada custom"
305 | "28.4","4","151.0"," 90.0","2670.0","16.0","79","1","buick skylark limited"
306 | "28.8","6","173.0","115.0","2595.0","11.3","79","1","chevrolet citation"
307 | "26.8","6","173.0","115.0","2700.0","12.9","79","1","oldsmobile omega brougham"
308 | "33.5","4","151.0"," 90.0","2556.0","13.2","79","1","pontiac phoenix"
309 | "41.5","4"," 98.0"," 76.0","2144.0","14.7","80","2","vw rabbit"
310 | "38.1","4"," 89.0"," 60.0","1968.0","18.8","80","3","toyota corolla tercel"
311 | "32.1","4"," 98.0"," 70.0","2120.0","15.5","80","1","chevrolet chevette"
312 | "37.2","4"," 86.0"," 65.0","2019.0","16.4","80","3","datsun 310"
313 | "28.0","4","151.0"," 90.0","2678.0","16.5","80","1","chevrolet citation"
314 | "26.4","4","140.0"," 88.0","2870.0","18.1","80","1","ford fairmont"
315 | "24.3","4","151.0"," 90.0","3003.0","20.1","80","1","amc concord"
316 | "19.1","6","225.0"," 90.0","3381.0","18.7","80","1","dodge aspen"
317 | "34.3","4"," 97.0"," 78.0","2188.0","15.8","80","2","audi 4000"
318 | "29.8","4","134.0"," 90.0","2711.0","15.5","80","3","toyota corona liftback"
319 | "31.3","4","120.0"," 75.0","2542.0","17.5","80","3","mazda 626"
320 | "37.0","4","119.0"," 92.0","2434.0","15.0","80","3","datsun 510 hatchback"
321 | "32.2","4","108.0"," 75.0","2265.0","15.2","80","3","toyota corolla"
322 | "46.6","4"," 86.0"," 65.0","2110.0","17.9","80","3","mazda glc"
323 | "27.9","4","156.0","105.0","2800.0","14.4","80","1","dodge colt"
324 | "40.8","4"," 85.0"," 65.0","2110.0","19.2","80","3","datsun 210"
325 | "44.3","4"," 90.0"," 48.0","2085.0","21.7","80","2","vw rabbit c (diesel)"
326 | "43.4","4"," 90.0"," 48.0","2335.0","23.7","80","2","vw dasher (diesel)"
327 | "36.4","5","121.0"," 67.0","2950.0","19.9","80","2","audi 5000s (diesel)"
328 | "30.0","4","146.0"," 67.0","3250.0","21.8","80","2","mercedes-benz 240d"
329 | "44.6","4"," 91.0"," 67.0","1850.0","13.8","80","3","honda civic 1500 gl"
330 | "33.8","4"," 97.0"," 67.0","2145.0","18.0","80","3","subaru dl"
331 | "29.8","4"," 89.0"," 62.0","1845.0","15.3","80","2","vokswagen rabbit"
332 | "32.7","6","168.0","132.0","2910.0","11.4","80","3","datsun 280-zx"
333 | "23.7","3"," 70.0","100.0","2420.0","12.5","80","3","mazda rx-7 gs"
334 | "35.0","4","122.0"," 88.0","2500.0","15.1","80","2","triumph tr7 coupe"
335 | "32.4","4","107.0"," 72.0","2290.0","17.0","80","3","honda accord"
336 | "27.2","4","135.0"," 84.0","2490.0","15.7","81","1","plymouth reliant"
337 | "26.6","4","151.0"," 84.0","2635.0","16.4","81","1","buick skylark"
338 | "25.8","4","156.0"," 92.0","2620.0","14.4","81","1","dodge aries wagon (sw)"
339 | "23.5","6","173.0","110.0","2725.0","12.6","81","1","chevrolet citation"
340 | "30.0","4","135.0"," 84.0","2385.0","12.9","81","1","plymouth reliant"
341 | "39.1","4"," 79.0"," 58.0","1755.0","16.9","81","3","toyota starlet"
342 | "39.0","4"," 86.0"," 64.0","1875.0","16.4","81","1","plymouth champ"
343 | "35.1","4"," 81.0"," 60.0","1760.0","16.1","81","3","honda civic 1300"
344 | "32.3","4"," 97.0"," 67.0","2065.0","17.8","81","3","subaru"
345 | "37.0","4"," 85.0"," 65.0","1975.0","19.4","81","3","datsun 210 mpg"
346 | "37.7","4"," 89.0"," 62.0","2050.0","17.3","81","3","toyota tercel"
347 | "34.1","4"," 91.0"," 68.0","1985.0","16.0","81","3","mazda glc 4"
348 | "34.7","4","105.0"," 63.0","2215.0","14.9","81","1","plymouth horizon 4"
349 | "34.4","4"," 98.0"," 65.0","2045.0","16.2","81","1","ford escort 4w"
350 | "29.9","4"," 98.0"," 65.0","2380.0","20.7","81","1","ford escort 2h"
351 | "33.0","4","105.0"," 74.0","2190.0","14.2","81","2","volkswagen jetta"
352 | "33.7","4","107.0"," 75.0","2210.0","14.4","81","3","honda prelude"
353 | "32.4","4","108.0"," 75.0","2350.0","16.8","81","3","toyota corolla"
354 | "32.9","4","119.0","100.0","2615.0","14.8","81","3","datsun 200sx"
355 | "31.6","4","120.0"," 74.0","2635.0","18.3","81","3","mazda 626"
356 | "28.1","4","141.0"," 80.0","3230.0","20.4","81","2","peugeot 505s turbo diesel"
357 | "30.7","6","145.0"," 76.0","3160.0","19.6","81","2","volvo diesel"
358 | "25.4","6","168.0","116.0","2900.0","12.6","81","3","toyota cressida"
359 | "24.2","6","146.0","120.0","2930.0","13.8","81","3","datsun 810 maxima"
360 | "22.4","6","231.0","110.0","3415.0","15.8","81","1","buick century"
361 | "26.6","8","350.0","105.0","3725.0","19.0","81","1","oldsmobile cutlass ls"
362 | "20.2","6","200.0"," 88.0","3060.0","17.1","81","1","ford granada gl"
363 | "17.6","6","225.0"," 85.0","3465.0","16.6","81","1","chrysler lebaron salon"
364 | "28.0","4","112.0"," 88.0","2605.0","19.6","82","1","chevrolet cavalier"
365 | "27.0","4","112.0"," 88.0","2640.0","18.6","82","1","chevrolet cavalier wagon"
366 | "34.0","4","112.0"," 88.0","2395.0","18.0","82","1","chevrolet cavalier 2-door"
367 | "31.0","4","112.0"," 85.0","2575.0","16.2","82","1","pontiac j2000 se hatchback"
368 | "29.0","4","135.0"," 84.0","2525.0","16.0","82","1","dodge aries se"
369 | "27.0","4","151.0"," 90.0","2735.0","18.0","82","1","pontiac phoenix"
370 | "24.0","4","140.0"," 92.0","2865.0","16.4","82","1","ford fairmont futura"
371 | "36.0","4","105.0"," 74.0","1980.0","15.3","82","2","volkswagen rabbit l"
372 | "37.0","4"," 91.0"," 68.0","2025.0","18.2","82","3","mazda glc custom l"
373 | "31.0","4"," 91.0"," 68.0","1970.0","17.6","82","3","mazda glc custom"
374 | "38.0","4","105.0"," 63.0","2125.0","14.7","82","1","plymouth horizon miser"
375 | "36.0","4"," 98.0"," 70.0","2125.0","17.3","82","1","mercury lynx l"
376 | "36.0","4","120.0"," 88.0","2160.0","14.5","82","3","nissan stanza xe"
377 | "36.0","4","107.0"," 75.0","2205.0","14.5","82","3","honda accord"
378 | "34.0","4","108.0"," 70.0","2245.0","16.9","82","3","toyota corolla"
379 | "38.0","4"," 91.0"," 67.0","1965.0","15.0","82","3","honda civic"
380 | "32.0","4"," 91.0"," 67.0","1965.0","15.7","82","3","honda civic (auto)"
381 | "38.0","4"," 91.0"," 67.0","1995.0","16.2","82","3","datsun 310 gx"
382 | "25.0","6","181.0","110.0","2945.0","16.4","82","1","buick century limited"
383 | "38.0","6","262.0"," 85.0","3015.0","17.0","82","1","oldsmobile cutlass ciera (diesel)"
384 | "26.0","4","156.0"," 92.0","2585.0","14.5","82","1","chrysler lebaron medallion"
385 | "22.0","6","232.0","112.0","2835.0","14.7","82","1","ford granada l"
386 | "32.0","4","144.0"," 96.0","2665.0","13.9","82","3","toyota celica gt"
387 | "36.0","4","135.0"," 84.0","2370.0","13.0","82","1","dodge charger 2.2"
388 | "27.0","4","151.0"," 90.0","2950.0","17.3","82","1","chevrolet camaro"
389 | "27.0","4","140.0"," 86.0","2790.0","15.6","82","1","ford mustang gl"
390 | "44.0","4"," 97.0"," 52.0","2130.0","24.6","82","2","vw pickup"
391 | "32.0","4","135.0"," 84.0","2295.0","11.6","82","1","dodge rampage"
392 | "28.0","4","120.0"," 79.0","2625.0","18.6","82","1","ford ranger"
393 | "31.0","4","119.0"," 82.0","2720.0","19.4","82","1","chevy s-10"
394 | 


--------------------------------------------------------------------------------
/examples/glyphs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <meta charset="utf-8">
  3 | <link rel="stylesheet" href="../common/style.css" type="text/css" />
  4 | <style type="text/css">
  5 |     #main-canvas { margin: 0; padding: 0; position: absolute; left: 0; top: 0 }
  6 |     #main-svg { margin: 0; padding: 0; position: absolute; left: 0; top: 0 }
  7 |     .axis path,
  8 |     .axis line {
  9 |         fill: none;
 10 |         stroke: black;
 11 |         shape-rendering: crispEdges;
 12 |     }
 13 | </style>
 14 | <canvas id="main-canvas"></canvas>
 15 | <svg id="main-svg"></svg>
 16 | <div data-switch="mode" style="margin-top: 470px">
 17 |     <button class="active" data-value="mode1">Mode 1</button><button data-value="mode2">Mode 2</button>
 18 |     <div class="fps"></div>
 19 | </div>
 20 | <div class="initializing"><p>Initializing...</p></div>
 21 | <script src="//d3js.org/d3.v3.min.js" type="text/javascript"></script>
 22 | <script src="../common/stardust/stardust.bundle.js" type="text/javascript"></script>
 23 | <script src="../common/utils.js" type="text/javascript"></script>
 24 | <script type="text/javascript">
 25 |     // Create Stardust platform from canvas element
 26 |     var canvas = document.getElementById("main-canvas");
 27 |     var width = 960;
 28 |     var height = 470;
 29 |     var margin = 10;
 30 |     var marginLeft = 35;
 31 |     var marginBottom = 20;
 32 |     var platform = Stardust.platform("webgl-2d", canvas, width, height);
 33 | 
 34 |     // Declare the glyph with the custom mark type
 35 |     var glyphMark = Stardust.mark.compile(`
 36 |         import { Triangle } from P2D;
 37 | 
 38 |         mark Glyph(
 39 |             x: float, y: float,
 40 |             v1: float, v2: float, v3: float, v4: float,
 41 |             color: Color = [ 0, 0, 0, 0.8 ]
 42 |         ) {
 43 |             let c = Vector2(x, y);
 44 |             let p1 = Vector2(x + v1, y);
 45 |             let p2 = Vector2(x, y + v2);
 46 |             let p3 = Vector2(x - v3, y);
 47 |             let p4 = Vector2(x, y - v4);
 48 |             Triangle(c, p1, p2, color);
 49 |             Triangle(c, p2, p3, color);
 50 |             Triangle(c, p3, p4, color);
 51 |             Triangle(c, p4, p1, color);
 52 |         }
 53 |     `);
 54 | 
 55 |     // Create glyphs with our glyphMark
 56 |     var glyphs = Stardust.mark.create(glyphMark.Glyph, platform);
 57 | 
 58 |     var glyphSize = 20;
 59 | 
 60 |     var colors = [ [228,26,28], [55,126,184], [77,175,74] ].map((d) => [ d[0] / 255, d[1] / 255, d[2] / 255, 0.8 ]);
 61 |     var cylinders2Color = [
 62 |         0, 0, 0, 0, 0, 1, 1, 2, 2
 63 |     ]
 64 | 
 65 |     loadData("car.csv", (data) => {
 66 |         var scale1 = Stardust.scale.linear()
 67 |             .domain(d3.extent(data, d => d.Horsepower)).range([ 0, glyphSize ]);
 68 |         var scale2 = Stardust.scale.linear()
 69 |             .domain(d3.extent(data, d => d.Weight)).range([ 0, glyphSize ]);
 70 |         var scale3 = Stardust.scale.linear()
 71 |             .domain(d3.extent(data, d => d.Acceleration)).range([ 0, glyphSize ]);
 72 |         var scale4 = Stardust.scale.linear()
 73 |             .domain(d3.extent(data, d => d.ModelYear)).range([ 0, glyphSize ]);
 74 |         var scaleX1 = Stardust.scale.linear()
 75 |             .domain(d3.extent(data, d => d.MPG)).range([ marginLeft, width - margin ]);
 76 |         var scaleY1 = Stardust.scale.linear()
 77 |             .domain(d3.extent(data, d => d.Displacement)).range([ margin, height - marginBottom ]);
 78 | 
 79 |         var scaleX2 = Stardust.scale.linear()
 80 |             .domain(d3.extent(data, d => d.Weight)).range([ marginLeft, width - margin ]);
 81 |         var scaleY2 = Stardust.scale.linear()
 82 |             .domain(d3.extent(data, d => d.Acceleration)).range([ margin, height - marginBottom ]);
 83 | 
 84 |         var interp = Stardust.scale.interpolate()
 85 |         interp.t(0);
 86 | 
 87 |         glyphs
 88 |             .attr("x", interp(scaleX1(d => d.MPG), scaleX2(d => d.Weight)))
 89 |             .attr("y", interp(scaleY1(d => d.Displacement), scaleY2(d => d.Acceleration)))
 90 |             .attr("v1", interp(scale1(d => d.Horsepower), scale1(d => d.Horsepower)))
 91 |             .attr("v2", interp(scale2(d => d.Weight), scale1(d => d.Horsepower)))
 92 |             .attr("v3", interp(scale3(d => d.Acceleration), scale1(d => d.Horsepower)))
 93 |             .attr("v4", interp(scale4(d => d.ModelYear), scale1(d => d.Horsepower)))
 94 |             .attr("color", d => colors[cylinders2Color[d.Cylinders]]);
 95 | 
 96 |         glyphs.data(data);
 97 | 
 98 | 
 99 |         // Draw axes with d3.
100 |         var svg = d3.select("#main-svg")
101 |             .attr("width", width)
102 |             .attr("height", height)
103 | 
104 |         var gMode1 = svg.append("g");
105 |         var gMode2 = svg.append("g");
106 | 
107 |         gMode1.append("g").classed("axis", true)
108 |             .attr("transform", `translate(0, ${height - marginBottom})`)
109 |             .call(d3.svg.axis().scale(d3.scale.linear().domain(scaleX1.domain()).range(scaleX1.range())).orient("bottom"))
110 |             .append("text").text("MPG").attr("x", width - margin).attr("y", -4).style("text-anchor", "end");
111 | 
112 |         gMode1.append("g").classed("axis", true)
113 |             .attr("transform", `translate(${marginLeft}, 0)`)
114 |             .call(d3.svg.axis().scale(d3.scale.linear().domain(scaleY1.domain()).range(scaleY1.range())).orient("left"))
115 |             .append("text").text("Displacement").attr("x", 5).attr("y", 20);
116 | 
117 |         gMode2.append("g").classed("axis", true)
118 |             .attr("transform", `translate(0, ${height - marginBottom})`)
119 |             .call(d3.svg.axis().scale(d3.scale.linear().domain(scaleX2.domain()).range(scaleX2.range())).orient("bottom"))
120 |             .append("text").text("Weight").attr("x", width - margin).attr("y", -4).style("text-anchor", "end");
121 | 
122 |         gMode2.append("g").classed("axis", true)
123 |             .attr("transform", `translate(${marginLeft}, 0)`)
124 |             .call(d3.svg.axis().scale(d3.scale.linear().domain(scaleY2.domain()).range(scaleY2.range())).orient("left"))
125 |             .append("text").text("Acceleration").attr("x", 5).attr("y", 20);
126 | 
127 |         function render() {
128 |             platform.clear();
129 |             glyphs.render();
130 |             gMode1.style("opacity", interp.t());
131 |             gMode2.style("opacity", 1 - interp.t());
132 |         }
133 | 
134 |         render();
135 | 
136 |         switches.mode_changed = function(newMode) {
137 |             beginTransition((t) => {
138 |                 if(newMode == "mode1")
139 |                     interp.t(1 - t);
140 |                 if(newMode == "mode2")
141 |                     interp.t(t);
142 |                 render();
143 |             });
144 |         }
145 |     });
146 | </script>


--------------------------------------------------------------------------------
/examples/glyphs/metadata.json:
--------------------------------------------------------------------------------
1 | {
2 |     "description": "Stardust Example: Glyph-based Visualization"
3 | }


--------------------------------------------------------------------------------
/examples/glyphs/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/glyphs/preview.png


--------------------------------------------------------------------------------
/examples/glyphs/preview_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/glyphs/preview_small.png


--------------------------------------------------------------------------------
/examples/graph/README.md:
--------------------------------------------------------------------------------
1 | Force-directed graph visualization using [D3](https://d3js.org/) for layout and [Stardust](https://stardustjs.github.io/) for rendering.


--------------------------------------------------------------------------------
/examples/graph/clustering.py:
--------------------------------------------------------------------------------
 1 | import json
 2 | import numpy
 3 | from sklearn.cluster import SpectralClustering
 4 | 
 5 | with open("facebook_1912.json", "rb") as f:
 6 |     graph = json.load(f)
 7 | 
 8 | matrix = numpy.zeros([ len(graph["nodes"]), len(graph["nodes"]) ])
 9 | 
10 | for e in graph["edges"]:
11 |     matrix[e["source"], e["target"]] = 1
12 |     matrix[e["target"], e["source"]] = 1
13 | 
14 | c = SpectralClustering(affinity = "precomputed")
15 | 
16 | clusters = c.fit_predict(matrix)
17 | 
18 | with open("facebook_1912_clusters.json", "wb") as f:
19 |     for node, c in zip(graph["nodes"], clusters):
20 |         node["cluster"] = int(c)
21 |     json.dump(graph, f)
22 | 
23 | 


--------------------------------------------------------------------------------
/examples/graph/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <meta charset="utf-8">
  3 | <link rel="stylesheet" href="../common/style.css" type="text/css" />
  4 | <style type="text/css">
  5 |     .fps {
  6 |         position: fixed;
  7 |         top: 0;
  8 |         right: 0;
  9 |         padding: 10px;
 10 |         margin: 0;
 11 |         font-size: 15px;
 12 |     }
 13 | 
 14 |     .sliders {
 15 |         position: absolute;
 16 |         left: 710px;
 17 |         width: 220px;
 18 |         top: 50px;
 19 |         bottom: 0;
 20 |     }
 21 | 
 22 |     .sliders label {
 23 |         display: block;
 24 |         font-weight: bold;
 25 |     }
 26 | 
 27 |     .sliders input {
 28 |         display: block;
 29 |         width: 100%;
 30 |         margin: 5px 0;
 31 |     }
 32 | </style>
 33 | <canvas id="main-canvas"></canvas>
 34 | <div class="sliders"></div>
 35 | <div class="fps"></div>
 36 | <div class="initializing">
 37 |     <p>Initializing...</p>
 38 | </div>
 39 | <script src="//d3js.org/d3.v4.min.js" type="text/javascript"></script>
 40 | <script src="../common/stardust/stardust.bundle.js" type="text/javascript"></script>
 41 | <script src="../common/utils.js" type="text/javascript"></script>
 42 | <script type="text/javascript">
 43 |     var canvas = document.getElementById("main-canvas");
 44 |     var width = 700;
 45 |     var height = 500;
 46 |     var platform = Stardust.platform("webgl-2d", canvas, width, height);
 47 |     platform.pixelRatio = window.devicePixelRatio || 1;
 48 | 
 49 |     var snodes = Stardust.mark.create(Stardust.mark.circle(8), platform);
 50 |     var snodesBG = Stardust.mark.create(Stardust.mark.circle(8), platform);
 51 |     var snodesSelected = Stardust.mark.create(Stardust.mark.circle(8), platform);
 52 |     var sedges = Stardust.mark.create(Stardust.mark.line(), platform);
 53 | 
 54 |     loadData("facebook_1912_clusters.json", (data) => {
 55 |         var nodes = data.nodes;
 56 |         var edges = data.edges;
 57 |         var N = nodes.length;
 58 | 
 59 |         for (var i = 0; i < N; i++) {
 60 |             nodes[i].index = i;
 61 |             nodes[i].x = Math.random() * width;
 62 |             nodes[i].y = Math.random() * height;
 63 |         }
 64 | 
 65 |         let colors = [
 66 |             [31, 119, 180],
 67 |             [255, 127, 14],
 68 |             [44, 160, 44],
 69 |             [214, 39, 40],
 70 |             [148, 103, 189],
 71 |             [140, 86, 75],
 72 |             [227, 119, 194],
 73 |             [127, 127, 127],
 74 |             [188, 189, 34],
 75 |             [23, 190, 207]
 76 |         ];
 77 |         colors = colors.map((x) => [x[0] / 255, x[1] / 255, x[2] / 255, 1]);
 78 | 
 79 |         snodes
 80 |             .attr("radius", 2)
 81 |             .attr("color", d => colors[d.cluster]);
 82 |         snodesBG
 83 |             .attr("radius", 3)
 84 |             .attr("color", [1, 1, 1, 0.5]);
 85 | 
 86 |         snodesSelected
 87 |             .attr("radius", 4)
 88 |             .attr("color", [228 / 255, 26 / 255, 28 / 255, 1]);
 89 | 
 90 |         sedges
 91 |             .attr("width", 0.5)
 92 |             .attr("color", d => {
 93 |                 if (d.source.cluster == d.target.cluster) return colors[d.source.cluster].slice(0, 3).concat([0.1]);
 94 |                 return [0.5, 0.5, 0.5, 0.1]
 95 |             });
 96 | 
 97 |         var force = d3.forceSimulation()
 98 |             .force("link", d3.forceLink().id(function (d) { return d.index }))
 99 |             .force("charge", d3.forceManyBody())
100 |             .force("forceX", d3.forceX(width / 2))
101 |             .force("forceY", d3.forceY(height / 2))
102 | 
103 |         force.nodes(nodes);
104 |         force.force("link").links(edges);
105 | 
106 |         force.force("forceX").strength(0.5);
107 |         force.force("forceY").strength(0.5);
108 |         force.force("link").distance(50);
109 |         force.force("link").strength(0.05);
110 |         force.force("charge").strength(-40);
111 | 
112 | 
113 |         function makeSlider(name, attr, min, max, defaultValue) {
114 |             d3.select(".sliders").append("label").text(name);
115 |             var slider = d3.select(".sliders").append("input");
116 |             slider
117 |                 .attr("type", "range")
118 |                 .attr("min", 0)
119 |                 .attr("max", 1000)
120 |                 .attr("value", (defaultValue - min) / (max - min) * 1000)
121 |             slider.on("input", () => {
122 |                 var val = +slider.property("value");
123 |                 var d = val / 1000 * (max - min) + min;
124 |                 if(attr == "gravity") {
125 |                     force.force("forceX").strength(d);
126 |                     force.force("forceY").strength(d);
127 |                 }
128 |                 if(attr == "linkDistance") {
129 |                     force.force("link").distance(d);
130 |                 }
131 |                 if(attr == "linkStrength") {
132 |                     force.force("link").strength(d);
133 |                 }
134 |                 if(attr == "charge") {
135 |                     force.force("charge").strength(d);
136 |                 }
137 |                 force.alphaTarget(0.3).restart();
138 |             });
139 |         }
140 | 
141 |         // makeSlider("Friction", "friction", 0.01, 1, 0.5);
142 |         makeSlider("Gravity", "gravity", 0.01, 1, 0.5);
143 |         makeSlider("Charge", "charge", -200, 0, -40);
144 |         makeSlider("Link Distance", "linkDistance", 0, 200, 50);
145 |         makeSlider("Link Strength", "linkStrength", 0, 0.2, 0.05);
146 | 
147 |         var positions = Stardust.array("Vector2")
148 |             .value(d => [d.x, d.y])
149 |             .data(nodes);
150 | 
151 |         var positionScale = Stardust.scale.custom("array(pos, value)")
152 |             .attr("pos", "Vector2Array", positions)
153 |         snodesSelected.attr("center", positionScale(d => d.index));
154 |         snodes.attr("center", positionScale(d => d.index));
155 |         snodesBG.attr("center", positionScale(d => d.index));
156 |         sedges.attr("p1", positionScale(d => d.source.index));
157 |         sedges.attr("p2", positionScale(d => d.target.index));
158 | 
159 |         snodesBG.data(nodes);
160 |         snodes.data(nodes);
161 |         sedges.data(edges);
162 | 
163 |         force.on("tick", () => {
164 |             if (isDragging && selectedNode && draggingLocation) {
165 |                 selectedNode.x = draggingLocation[0];
166 |                 selectedNode.y = draggingLocation[1];
167 |             }
168 |             positions.data(nodes);
169 |             requestRender();
170 |         });
171 | 
172 |         requestRender();
173 | 
174 |         // Handle dragging
175 | 
176 |         let selectedNode = null;
177 | 
178 |         var requested = null;
179 |         function requestRender() {
180 |             if (requested) return;
181 |             requested = requestAnimationFrame(render);
182 |         }
183 | 
184 |         var fps = new FPS();
185 | 
186 |         function render() {
187 |             requested = null;
188 |             snodesSelected.data(selectedNode ? [selectedNode] : []);
189 | 
190 |             // Cleanup and re-render.
191 |             platform.clear([1, 1, 1, 1]);
192 |             sedges.render();
193 |             snodesBG.render();
194 |             snodes.attr("radius", 2);
195 |             snodes.render();
196 | 
197 |             snodesSelected.render();
198 | 
199 |             // Render the picking buffer.
200 |             platform.beginPicking(canvas.width, canvas.height);
201 |             snodes.attr("radius", 6); // make radius larger so it's easier to select.
202 |             snodes.render();
203 |             platform.endPicking();
204 | 
205 |             fps.update();
206 |         }
207 | 
208 |         var isDragging = false;
209 |         var draggingLocation = null;
210 |         // Handle dragging.
211 |         canvas.onmousedown = function (e) {
212 |             var x = e.clientX - canvas.getBoundingClientRect().left;
213 |             var y = e.clientY - canvas.getBoundingClientRect().top;
214 |             var p = platform.getPickingPixel(x * platform.pixelRatio, y * platform.pixelRatio);
215 |             if (p) {
216 |                 selectedNode = nodes[p[1]];
217 |                 requestRender();
218 |                 isDragging = true;
219 |                 draggingLocation = [selectedNode.x, selectedNode.y];
220 |                 var onMove = function (e) {
221 |                     var nx = e.clientX - canvas.getBoundingClientRect().left;
222 |                     var ny = e.clientY - canvas.getBoundingClientRect().top;
223 |                     selectedNode.x = nx;
224 |                     selectedNode.y = ny;
225 |                     draggingLocation = [nx, ny];
226 |                     force.alphaTarget(0.3).restart();
227 |                     requestRender();
228 |                 };
229 |                 var onUp = function () {
230 |                     window.removeEventListener("mousemove", onMove);
231 |                     window.removeEventListener("mouseup", onUp);
232 |                     selectedNode = null;
233 |                     draggingLocation = null;
234 |                     isDragging = false;
235 |                 };
236 |                 window.addEventListener("mousemove", onMove);
237 |                 window.addEventListener("mouseup", onUp);
238 |             }
239 |         };
240 | 
241 |         canvas.onmousemove = function (e) {
242 |             if (isDragging) return;
243 |             var x = e.clientX - canvas.getBoundingClientRect().left;
244 |             var y = e.clientY - canvas.getBoundingClientRect().top;
245 |             var p = platform.getPickingPixel(x * platform.pixelRatio, y * platform.pixelRatio);
246 |             if (p) {
247 |                 if (selectedNode != nodes[p[1]]) {
248 |                     selectedNode = nodes[p[1]];
249 |                     requestRender();
250 |                 }
251 |             } else {
252 |                 if (selectedNode != null) {
253 |                     selectedNode = null;
254 |                     requestRender();
255 |                 }
256 |             }
257 |         }
258 |     });
259 | 
260 | </script>


--------------------------------------------------------------------------------
/examples/graph/metadata.json:
--------------------------------------------------------------------------------
1 | {
2 |     "description": "Stardust Example: Force-directed Graph"
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/graph/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/graph/preview.png


--------------------------------------------------------------------------------
/examples/graph/preview_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/graph/preview_small.png


--------------------------------------------------------------------------------
/examples/index-chart/README.md:
--------------------------------------------------------------------------------
1 | A index chart of five stocks. The axes, legend and rules are rendered with [D3](https://d3js.org/); the lines are rendered with [Stardust](https://stardustjs.github.io/).
2 | 
3 | Data from [nasdaq.com](http://www.nasdaq.com/symbol/csv/historical).


--------------------------------------------------------------------------------
/examples/index-chart/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <meta charset="utf-8">
  3 | <title>Stardust Example: Scatterplot</title>
  4 | <link rel="stylesheet" href="../common/style.css" type="text/css" />
  5 | <style type="text/css">
  6 |     .chart canvas,
  7 |     .chart svg {
  8 |         position: absolute;
  9 |         left: 0;
 10 |         top: 0;
 11 |     }
 12 | 
 13 |     .chart svg {
 14 |         pointer-events: none;
 15 |     }
 16 | 
 17 |     .axis path,
 18 |     .axis line {
 19 |         fill: none;
 20 |         stroke: black;
 21 |         shape-rendering: crispEdges;
 22 |     }
 23 | 
 24 |     .axis text {
 25 |         font-family: sans-serif;
 26 |         font-size: 13px;
 27 |     }
 28 | 
 29 |     .hline,
 30 |     .vline {
 31 |         stroke: black;
 32 |         shape-rendering: crispEdges;
 33 |     }
 34 | 
 35 |     .vline {
 36 |         stroke: rgb(220, 57, 18);
 37 |     }
 38 | </style>
 39 | <div class="chart">
 40 |     <canvas id="main-canvas"></canvas>
 41 |     <svg id="main-svg"></svg>
 42 | </div>
 43 | <div class="initializing"><p>Initializing...</p></div>
 44 | <script src="//d3js.org/d3.v3.min.js" type="text/javascript"></script>
 45 | <script src="../common/stardust/stardust.bundle.js" type="text/javascript"></script>
 46 | <script src="../common/utils.js" type="text/javascript"></script>
 47 | <script type="text/javascript">
 48 |     let width = 960;
 49 |     let height = 500;
 50 |     let margin_left = 70;
 51 |     let margin_right = 10;
 52 |     let margin_top = 10;
 53 |     let margin_bottom = 30;
 54 |     let canvas = d3.select("#main-canvas").node();
 55 |     let svg = d3.select("#main-svg");
 56 |     let platform = Stardust.platform("webgl-2d", canvas, width, height);
 57 |     svg.attr("width", width).attr("height", height);
 58 | 
 59 |     loadData("stock.csv", (data) => {
 60 |         let names = [ "MSFT", "AAPL", "IBM", "GOOGL", "AMZN" ];
 61 |         let colorsOriginal = [
 62 |             [ 0x66, 0xc2, 0xa5 ],
 63 |             [ 0xfc, 0x8d, 0x62 ],
 64 |             [ 0x8d, 0xa0, 0xcb ],
 65 |             [ 0xe7, 0x8a, 0xc3 ],
 66 |             [ 0xa6, 0xd8, 0x54 ]
 67 |         ];
 68 |         colors = colorsOriginal.map((x) => [ x[0] / 255, x[1] / 255, x[2] / 255, 1 ]);
 69 |         let polyline = Stardust.mark.polyline();
 70 | 
 71 |         let polylines = Stardust.mark.create(polyline, platform);
 72 | 
 73 |         let ranges = names.map((d) => {
 74 |             return [ d3.min(data, (x) => +x[d]), d3.max(data, (x) => +x[d]) ];
 75 |         });
 76 | 
 77 |         let xScale = d3.time.scale()
 78 |             .domain([ d3.min(data, (d) => +d.Time * 1000), d3.max(data, (d) => +d.Time * 1000) ])
 79 |             .range([ margin_left, width - margin_right ]);
 80 | 
 81 |         let yScale = Stardust.scale.linear()
 82 |             .domain([ 0, 1000 ])
 83 |             .range([ height - margin_bottom, margin_top ]);
 84 | 
 85 |         let legendItems = svg.append("g").selectAll("g").data(names)
 86 |             .enter().append("g")
 87 |         legendItems
 88 |             .attr("transform", (d, i) => `translate(${margin_left + 20}, ${margin_top + 20 * i + 10})`)
 89 |         legendItems.append("line")
 90 |             .attr("x1", 0).attr("x2", 15).attr("y1", 0).attr("y2", 0)
 91 |             .style("stroke", (d, i) => `rgb(${colorsOriginal[i].join(",")})`);
 92 |         legendItems.append("text")
 93 |             .attr("x", 20).attr("y", 5).text(d => d)
 94 |             .style("fill", (d, i) => `rgb(${colorsOriginal[i].join(",")})`);
 95 | 
 96 |         svg.append("g")
 97 |             .classed("axis", true)
 98 |             .attr("transform", `translate(0, ${height - margin_bottom})`)
 99 |             .call(d3.svg.axis().scale(xScale).orient("bottom").tickFormat(d3.time.format("%Y")));
100 |         let gYAxis = svg.append("g")
101 |             .classed("axis", true)
102 |             .attr("transform", `translate(${margin_left}, 0)`)
103 | 
104 |         let hline = svg.append("line")
105 |             .classed("hline", true)
106 |             .attr("x1", margin_left)
107 |             .attr("x2", width - margin_right)
108 |         let vline = svg.append("line")
109 |             .classed("vline", true)
110 |             .attr("y1", margin_top)
111 |             .attr("y2", height - margin_bottom)
112 | 
113 |         let indexScale = d3.scale.linear()
114 |             .domain([ 1 / 3, 3 ])
115 |             .range(yScale.range());
116 | 
117 |         polylines
118 |             .attr("p", Stardust.scale.Vector2(d => xScale(d.time), yScale(d => d.value)))
119 |             .attr("width", 1)
120 |             .attr("color", [ 0, 0, 0, 0.4 ]);
121 | 
122 |         let refIdx = 0;
123 | 
124 |         polylines.instance((d, i) => {
125 |             return data.map((x) => {
126 |                 return { time: +x.Time * 1000, value: +x[d] };
127 |             })
128 |         }, (d, i) => {
129 |             yScale.domain([ data[refIdx][d] * indexScale.domain()[0], data[refIdx][d] * indexScale.domain()[1] ]);
130 |             return { color: colors[i] };
131 |         });
132 | 
133 |         polylines.data(names);
134 | 
135 |         let rerender = () => {
136 |             indexScale.domain([
137 |                 d3.min(ranges, (x, i) => x[0] / data[refIdx][names[i]]),
138 |                 d3.max(ranges, (x, i) => x[1] / data[refIdx][names[i]])
139 |             ]);
140 |             hline.attr("y1", indexScale(1));
141 |             hline.attr("y2", indexScale(1));
142 |             vline.attr("x1", xScale(+data[refIdx].Time * 1000));
143 |             vline.attr("x2", xScale(+data[refIdx].Time * 1000));
144 |             gYAxis.call(d3.svg.axis().scale(indexScale).orient("left").tickFormat(d3.format(".0%")));
145 |             platform.clear();
146 |             polylines.render();
147 |         }
148 | 
149 |         rerender();
150 | 
151 |         d3.select(canvas).on("mousemove", () => {
152 |             let left = canvas.getBoundingClientRect().left;
153 |             let x = d3.event.clientX;
154 |             let d3xscale = d3.scale.linear().domain(xScale.domain()).range(xScale.range());
155 |             let t = d3xscale.invert(x - left) / 1000;
156 |             let idx = Math.floor((t - data[0].Time) / (data[data.length - 1].Time - data[0].Time) * (data.length - 1));
157 |             idx = Math.max(Math.min(idx, data.length - 1), 0);
158 |             refIdx = idx;
159 |             requestAnimationFrame(rerender);
160 |         });
161 |     });
162 | </script>


--------------------------------------------------------------------------------
/examples/index-chart/metadata.json:
--------------------------------------------------------------------------------
1 | {
2 |     "description": "Stardust Example: Index Chart"
3 | }


--------------------------------------------------------------------------------
/examples/index-chart/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/index-chart/preview.png


--------------------------------------------------------------------------------
/examples/index-chart/preview_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/index-chart/preview_small.png


--------------------------------------------------------------------------------
/examples/isotype/README.md:
--------------------------------------------------------------------------------
1 | An isotype-based visualization created with the [Stardust](https://stardustjs.github.io/) library. Data is generated randomly.


--------------------------------------------------------------------------------
/examples/isotype/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <meta charset="utf-8">
  3 | <link rel="stylesheet" href="../common/style.css" type="text/css" />
  4 | <canvas id="main-canvas" /></canvas>
  5 | <div data-switch="mode">
  6 |     <button class="active" data-value="mode1">Multi-column</button><button data-value="mode2">Single-column</button>
  7 |     <div class="fps"></div>
  8 | </div>
  9 | <div class="initializing"><p>Initializing...</p></div>
 10 | <script src="//d3js.org/d3.v3.min.js" type="text/javascript"></script>
 11 | <script src="../common/stardust/stardust.bundle.js" type="text/javascript"></script>
 12 | <script src="../common/utils.js" type="text/javascript"></script>
 13 | <script type="text/javascript">
 14 |     let canvas = document.getElementById("main-canvas");
 15 |     let width = 960;
 16 |     let height = 470;
 17 |     let platform = Stardust.platform("webgl-2d", canvas, width, height);
 18 | 
 19 |     // SVG file created from Adobe Illustrator:
 20 |     let svgFile = `
 21 |         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="10px" height="20px">
 22 |             <polygon points="
 23 |                 7.5234375,11.2519531 7.5234375,4.3295898 5.9628906,4.3295898 5.9628906,2.3691406 5.3920898,1.7827148
 24 |                 4.6079102,1.7827148 4.0356445,2.3691406 4.0356445,4.3295898 2.4765625,4.3295898 2.4765625,11.2519531 3.3203125,11.7666016
 25 |                 3.3779297,17.2871094 2.4765625,17.9169922 7.5234375,17.9179688 6.6230469,17.2871094 6.6796875,11.7675781
 26 |             "/>
 27 |         </svg>
 28 |     `;
 29 | 
 30 |     var data = [];
 31 |     [ 27, 53, 91, 52, 112, 42, 107, 91, 68, 56, 115, 86, 26, 102, 28, 23, 119, 110 ].forEach((x, index) => {
 32 |         for(let i = 0; i < x; i++) {
 33 |             data.push({
 34 |                 type: index % 3,
 35 |                 column: Math.floor(index / 3)
 36 |             });
 37 |         }
 38 |     });
 39 |     var typeCounter = [ 0, 0, 0 ];
 40 |     var typeColumnCounter = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
 41 |     data.forEach((d) => {
 42 |         d.typeIndex = typeCounter[d.type]++;
 43 |         d.typeColumnIndex = typeColumnCounter[3 * d.column + d.type]++;
 44 |     });
 45 | 
 46 |     // Convert the SVG file to Stardust mark spec.
 47 |     let isotype = new Stardust.mark.isotype(svgFile);
 48 | 
 49 |     // Create the mark object.
 50 |     let isotypes = Stardust.mark.create(isotype, platform);
 51 | 
 52 |     let isotypeHeight = 18;
 53 | 
 54 |     let colors = [[31,119,180],[255,127,14],[44,160,44]];
 55 |     colors = colors.map((x) => [ x[0] / 255, x[1] / 255, x[2] / 255, 1 ]);
 56 | 
 57 |     let pScale = Stardust.scale.custom(`
 58 |         Vector2(
 59 |             20 + column * 160 + type * 45 + typeColumnIndex % 5 * 8,
 60 |             460 - floor(typeColumnIndex / 5) * 18
 61 |         )
 62 |     `)
 63 |     pScale.attr("typeColumnIndex", d => d.typeColumnIndex);
 64 |     pScale.attr("column", d => d.column);
 65 |     pScale.attr("typeIndex", d => d.typeIndex);
 66 |     pScale.attr("type", d => d.type);
 67 | 
 68 |     let qScale = Stardust.scale.custom(`
 69 |         Vector2(
 70 |             65 + type * 300 + typeIndex % 30 * 8,
 71 |             460 - floor(typeIndex / 30) * 18
 72 |         )
 73 |     `)
 74 |     qScale.attr("typeIndex", d => d.typeIndex);
 75 |     qScale.attr("type", d => d.type);
 76 | 
 77 |     let interpolateScale = Stardust.scale.interpolate("Vector2")
 78 |     interpolateScale.t(0);
 79 | 
 80 |     isotypes.attr("position", interpolateScale(pScale(), qScale()));
 81 |     isotypes.attr("color", d => colors[d.type]);
 82 |     isotypes.attr("size", 1.0);
 83 |     isotypes.data(data);
 84 | 
 85 |     function render() {
 86 |         platform.clear();
 87 |         isotypes.render();
 88 |     }
 89 | 
 90 |     console.log(data.length);
 91 | 
 92 |     render();
 93 | 
 94 |     switches.mode_changed = function(newValue) {
 95 |         beginTransition((t) => {
 96 |             if(newValue == "mode1")
 97 |                 interpolateScale.t(1 - t);
 98 |             if(newValue == "mode2")
 99 |                 interpolateScale.t(t);
100 |             render();
101 |         });
102 |     };
103 | </script>


--------------------------------------------------------------------------------
/examples/isotype/metadata.json:
--------------------------------------------------------------------------------
1 | {
2 |     "description": "Stardust Example: Isotypes"
3 | }


--------------------------------------------------------------------------------
/examples/isotype/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/isotype/preview.png


--------------------------------------------------------------------------------
/examples/isotype/preview_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/isotype/preview_small.png


--------------------------------------------------------------------------------
/examples/parametric-functions/README.md:
--------------------------------------------------------------------------------
1 | Rendering two interesting [parametric functions](https://en.wikipedia.org/wiki/Parametric_equation). Left: a [Hypotrochoid](https://en.wikipedia.org/wiki/Hypotrochoid); right: a more complex function.
2 | Both functions are rendered using 100k circles.


--------------------------------------------------------------------------------
/examples/parametric-functions/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <meta charset="utf-8">
 3 | <link rel="stylesheet" href="../common/style.css" type="text/css" />
 4 | <style type="text/css">
 5 |     #main-canvas { margin: 0; padding: 0; position: absolute; left: 0; top: 0 }
 6 | </style>
 7 | <canvas id="main-canvas"></canvas>
 8 | <div class="fps"></div>
 9 | <div class="initializing"><p>Initializing...</p></div>
10 | <script src="//d3js.org/d3.v3.min.js" type="text/javascript"></script>
11 | <script src="../common/stardust/stardust.bundle.js" type="text/javascript"></script>
12 | <script src="../common/utils.js" type="text/javascript"></script>
13 | <script type="text/javascript">
14 |     var canvas = document.getElementById("main-canvas");
15 |     var width = 960;
16 |     var height = 500;
17 |     var margin = 10;
18 |     var marginLeft = 35;
19 |     var marginBottom = 20;
20 |     var platform = Stardust.platform("webgl-2d", canvas, width, height);
21 | 
22 |     var circleMark = Stardust.mark.circle(8);
23 | 
24 |     var data = [];
25 |     var N = 100000;
26 |     for(var i = 0; i < N; i++) {
27 |         data.push(i / N * Math.PI * 2);
28 |     }
29 | 
30 |     // Color based on phase
31 |     var scaleColor = Stardust.scale.custom(`hcl2rgb(Color(value + shift, 0.5, 0.5, 0.1))`);
32 |     scaleColor.attr("shift", 0);
33 | 
34 |     var left = Stardust.mark.create(circleMark, platform);
35 |     var scaleLeft = Stardust.scale.custom(`
36 |         Vector2(
37 |             (R - r) * cos(value) + d * cos((R / r - 1) * value),
38 |             (R - r) * sin(value) - d * sin((R / r - 1) * value)
39 |         ) * size + center
40 |     `).attr("d", 2.19).attr("R", 5).attr("r", 5 * (18 / 41)).attr("size", 45).attr("center", "Vector2", [ -13.33 + 250, 250 ]);
41 |     left.attr("center", scaleLeft(d => d * 41));
42 |     left.attr("radius", 1);
43 |     left.attr("color", scaleColor(d => d * 41));
44 |     left.data(data);
45 | 
46 | 
47 | 
48 |     var right = Stardust.mark.create(circleMark, platform);
49 |     var scaleRight = Stardust.scale.custom(`
50 |         Vector2(
51 |             cos(a * value) - cos(b * value) * cos(b * value) * cos(b * value),
52 |             sin(c * value) - sin(d * value) * sin(d * value) * sin(d * value)
53 |         ) * size + center
54 |     `).attr("a", 80).attr("b", 1).attr("c", 1).attr("d", 80).attr("size", 110).attr("center", "Vector2", [ -13.33 * 2 + 1000 - 250, 250 ]);
55 |     right.attr("center", scaleRight(d => d));
56 |     right.attr("radius", 1);
57 |     right.attr("color", scaleColor(d => d));
58 |     right.data(data);
59 | 
60 |     function render() {
61 |         left.render();
62 |         right.render();
63 |     }
64 | 
65 |     var t0 = new Date().getTime();
66 |     var fps = new FPS();
67 |     d3.timer(function() {
68 |         var t = new Date().getTime() - t0;
69 |         scaleLeft.attr("d", 1.95 + Math.sin(t / 500) * 0.4);
70 |         scaleColor.attr("shift", t / 250 % (Math.PI * 2));
71 |         render();
72 |         fps.update();
73 |     });
74 | </script>


--------------------------------------------------------------------------------
/examples/parametric-functions/metadata.json:
--------------------------------------------------------------------------------
1 | {
2 |     "description": "Stardust Example: Parametric Functions"
3 | }


--------------------------------------------------------------------------------
/examples/parametric-functions/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/parametric-functions/preview.png


--------------------------------------------------------------------------------
/examples/parametric-functions/preview_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/parametric-functions/preview_small.png


--------------------------------------------------------------------------------
/examples/sanddance/README.md:
--------------------------------------------------------------------------------
1 | Producing a [SandDance](https://www.sanddance.ms/) visualization with Stardust. Instance-based visualization with animation between 3 layouts: scatterplot of longitude and latitude, group by state, and group by longitude and latitude in 3D.
2 | 
3 | Data: DemoVote from [census.gov](http://www.census.gov) and [Guardian](http://www.theguardian.com/news/datablog/2012/nov/07/us-2012-election-county-results-download)


--------------------------------------------------------------------------------
/examples/sanddance/demovoteclean.tsv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/sanddance/demovoteclean.tsv


--------------------------------------------------------------------------------
/examples/sanddance/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <meta charset="utf-8">
  3 | <title>Stardust Example: Sanddance</title>
  4 | <link rel="stylesheet" href="../common/style.css" type="text/css" />
  5 | <canvas id="main-canvas"></canvas>
  6 | <div data-switch="mode">
  7 |     <button class="active" data-value="mode1">Map</button><button data-value="mode3">Map Bins</button><button data-value="mode2">State</button>
  8 |     <div class="fps"></div>
  9 | </div>
 10 | <div class="initializing"><p>Initializing...</p></div>
 11 | <script src="//d3js.org/d3.v3.min.js" type="text/javascript"></script>
 12 | <script src="../common/stardust/stardust.bundle.js" type="text/javascript"></script>
 13 | <script src="../common/utils.js" type="text/javascript"></script>
 14 | <script type="text/javascript">
 15 |     let width = 960;
 16 |     let height = 470;
 17 |     let canvas = document.getElementById("main-canvas");
 18 |     let platform = Stardust.platform("webgl-2d", canvas, width, height);
 19 |     platform.set3DView(Math.PI / 2, width / height);
 20 |     platform.setPose(new Stardust.Pose(
 21 |         new Stardust.Vector3(0, 0, 200),
 22 |         new Stardust.Quaternion(0, 0, 0, 1)
 23 |     ));
 24 |     platform.clear([ 1, 1, 1, 1 ]);
 25 |     loadData("demovoteclean.tsv", (data) => {
 26 |         let demovote = data;
 27 |         let mark = Stardust.mark.compile(`
 28 |             import { Cube } from P3D;
 29 | 
 30 |             let longitude: float;
 31 |             let latitude: float;
 32 |             let state: float;
 33 |             let stateBinIndex: float;
 34 |             let xBin: float;
 35 |             let yBin: float;
 36 |             let xyBinIndex: float;
 37 |             let index: float;
 38 | 
 39 |             function getPositionScatterplot(): Vector3 {
 40 |                 let scaleX = 0.2;
 41 |                 let scaleY = 0.3;
 42 |                 return Vector3(
 43 |                     scaleX * (longitude - (-95.9386152570054)),
 44 |                     scaleY * (latitude - (37.139536624928695)),
 45 |                     0
 46 |                 );
 47 |             }
 48 | 
 49 |             function getPositionStateBins(): Vector3 {
 50 |                 return Vector3(
 51 |                     (state - 48 / 2) * 0.3 + (stateBinIndex % 10 - 4.5) * 0.02,
 52 |                     floor(stateBinIndex / 10) * 0.02 - 2.0, 0
 53 |                 );
 54 |             }
 55 | 
 56 |             function getPositionXYBinning(): Vector3 {
 57 |                 let n = 6;
 58 |                 let txy = xyBinIndex % (n * n);
 59 |                 let tx = txy % n;
 60 |                 let ty = floor(txy / n);
 61 |                 let tz = floor(xyBinIndex / (n * n));
 62 |                 return Vector3(
 63 |                     (xBin - 9 / 2) * 0.6 + (tx - n / 2 + 0.5) * 0.04,
 64 |                     tz * 0.04 - 2.0,
 65 |                     (yBin - 6 / 2) * 0.6 + (ty - n / 2 + 0.5) * 0.04
 66 |                 );
 67 |             }
 68 | 
 69 |             function clamp01(t: float): float {
 70 |                 if(t < 0) t = 0;
 71 |                 if(t > 1) t = 1;
 72 |                 return t;
 73 |             }
 74 | 
 75 |             mark Mark(color: Color, t1: float, t2: float, t3: float, ki1: float, ki2: float, ki3: float) {
 76 |                 let p1 = getPositionScatterplot();
 77 |                 let p2 = getPositionStateBins();
 78 |                 let p3 = getPositionXYBinning();
 79 |                 let p = p1 * clamp01(t1 + ki1 * index) +
 80 |                     p2 * clamp01(t2 + ki2 * index) +
 81 |                     p3 * clamp01(t3 + ki3 * index);
 82 |                 Cube(
 83 |                     p * 50,
 84 |                     0.7,
 85 |                     color
 86 |                 );
 87 |             }
 88 |         `)["Mark"];
 89 |         let marks = Stardust.mark.create(mark, Stardust.shader.lighting(), platform);
 90 | 
 91 |         demovote.forEach(d => {
 92 |             d.Longitude = +d.Longitude;
 93 |             d.Latitude = +d.Latitude;
 94 |         });
 95 | 
 96 |         let longitudeExtent = d3.extent(demovote, d => d.Longitude);
 97 |         let latitudeExtent = d3.extent(demovote, d => d.Latitude);
 98 | 
 99 |         let longitudeScale = d3.scale.linear().domain(longitudeExtent).range([ 0, 1 ])
100 |         let latitudeScale = d3.scale.linear().domain(latitudeExtent).range([ 0, 1 ])
101 | 
102 |         // Map states to integer.
103 |         let states = new Set();
104 |         let state2number = {};
105 |         let state2count = {};
106 |         demovote.forEach(d => states.add(d.StateAbb));
107 |         states = Array.from(states);
108 |         states.sort();
109 |         states.forEach((d, i) => {
110 |             state2number[d] = i;
111 |             state2count[d] = 0;
112 |         });
113 | 
114 |         let xyBinCounter = {};
115 | 
116 |         let xBinCount = 10;
117 |         let yBinCount = 7;
118 | 
119 |         demovote.sort((a, b) => a.Obama - b.Obama);
120 | 
121 |         demovote.forEach((d, i) => {
122 |             d.index = i;
123 |             if(state2count[d.StateAbb] == null) state2count[d.StateAbb] = 0;
124 |             d.stateBinIndex = state2count[d.StateAbb]++;
125 | 
126 |             let xBin = Math.floor(longitudeScale(d.Longitude) * xBinCount);
127 |             let yBin = Math.floor(latitudeScale(d.Latitude) * yBinCount);
128 |             let bin = yBin * (xBinCount + 1) + xBin;
129 |             d.xBin = xBin;
130 |             d.yBin = yBin;
131 |             if(xyBinCounter[bin] == null) xyBinCounter[bin] = 0;
132 |             d.xyBinIndex = xyBinCounter[bin]++;
133 |         });
134 | 
135 | 
136 |         let s1 = d3.interpolateLab("#f7f7f7", "#0571b0");
137 |         let s2 = d3.interpolateLab("#f7f7f7", "#ca0020");
138 | 
139 |         let strToRGBA = (str) => {
140 |             let rgb = d3.rgb(str);
141 |             return [ rgb.r / 255, rgb.g / 255, rgb.b / 255, 1 ];
142 |         }
143 | 
144 |         let scaleColor = (value) => {
145 |             if(value > 0.5) {
146 |                 return strToRGBA(s1((value - 0.5) * 2));
147 |             } else {
148 |                 return strToRGBA(s2((0.5 - value) * 2));
149 |             }
150 |         }
151 | 
152 |         marks
153 |             .attr("index", d => d.index / (demovote.length - 1))
154 |             .attr("longitude", d => d.Longitude)
155 |             .attr("latitude", d => d.Latitude)
156 |             .attr("state", (d) => state2number[d.StateAbb])
157 |             .attr("stateBinIndex", (d) => d.stateBinIndex)
158 |             .attr("xBin", (d) => d.xBin)
159 |             .attr("yBin", (d) => d.yBin)
160 |             .attr("xyBinIndex", (d) => d.xyBinIndex)
161 |             .attr("color", (d) => scaleColor(d.Obama));
162 | 
163 |         let skewing = 1;
164 | 
165 |         function transition12(t) {
166 |             let tt = t * (1 + skewing) - skewing;
167 |             marks.attr("t1", 1 - tt).attr("t2", tt).attr("t3", 0).attr("ki1", -skewing).attr("ki2", +skewing).attr("ki3", 0);
168 |         }
169 |         function transition23(t) {
170 |             let tt = t * (1 + skewing) - skewing;
171 |             marks.attr("t1", 0).attr("t2", 1 - tt).attr("t3", tt).attr("ki1", 0).attr("ki2", -skewing).attr("ki3", +skewing);
172 |         }
173 |         function transition31(t) {
174 |             let tt = t * (1 + skewing) - skewing;
175 |             marks.attr("t1", tt).attr("t2", 0).attr("t3", 1 - tt).attr("ki1", +skewing).attr("ki2", 0).attr("ki3", -skewing);
176 |         }
177 | 
178 |         marks.data(demovote);
179 | 
180 |         function render() {
181 |             platform.clear([ 1, 1, 1, 1 ]);
182 |             marks.render();
183 |         }
184 | 
185 |         transition12(0);
186 |         render();
187 | 
188 |         var transitions = {
189 |             "mode1mode2": (t) => transition12(t),
190 |             "mode2mode1": (t) => transition12(1 - t),
191 |             "mode2mode3": (t) => transition23(t),
192 |             "mode3mode2": (t) => transition23(1 - t),
193 |             "mode3mode1": (t) => transition31(t),
194 |             "mode1mode3": (t) => transition31(1 - t),
195 |         }
196 | 
197 |         switches.mode_changed = (newMode, previousMode) => {
198 |             beginTransition((t) => {
199 |                 transitions[previousMode + newMode](t);
200 |                 render();
201 |             });
202 |         };
203 |     });
204 | </script>
205 | 


--------------------------------------------------------------------------------
/examples/sanddance/metadata.json:
--------------------------------------------------------------------------------
1 | {
2 |     "description": "Stardust Example: SandDance"
3 | }


--------------------------------------------------------------------------------
/examples/sanddance/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/sanddance/preview.png


--------------------------------------------------------------------------------
/examples/sanddance/preview_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/sanddance/preview_small.png


--------------------------------------------------------------------------------
/examples/scatterplot/README.md:
--------------------------------------------------------------------------------
1 | A scatterplot created with the [Stardust](https://stardustjs.github.io/) library. Data is generated using a formula.


--------------------------------------------------------------------------------
/examples/scatterplot/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <meta charset="utf-8">
 3 | <title>Stardust Example: Scatterplot</title>
 4 | <link rel="stylesheet" href="../common/style.css" type="text/css" />
 5 | <canvas id="main-canvas"></canvas>
 6 | <div class="initializing"><p>Initializing...</p></div>
 7 | <script src="//d3js.org/d3.v3.min.js" type="text/javascript"></script>
 8 | <script src="../common/stardust/stardust.bundle.js" type="text/javascript"></script>
 9 | <script src="../common/utils.js" type="text/javascript"></script>
10 | <script type="text/javascript">
11 |     var canvas = document.getElementById("main-canvas");
12 |     var width = 960;
13 |     var height = 500;
14 |     var platform = Stardust.platform("webgl-2d", canvas, width, height);
15 | 
16 |     var Nx = 96 * 1;
17 |     var Ny = 50 * 1;
18 | 
19 |     var data = [];
20 |     for(var i = 0; i < Nx; i++) {
21 |         for(var j = 0; j < Ny; j++) {
22 |             var x = i / (Nx - 1) * 2 - 1;
23 |             var y = j / (Ny - 1) * 2 - 1;
24 |             var scale = 2;
25 |             var len = Math.sqrt(x * x + y * y);
26 |             var d = len * Math.exp(-len * len * 5);
27 |             var dx = y / len * d;
28 |             var dy = -x / len * d;
29 |             data.push({
30 |                 x: x + dx * scale,
31 |                 y: y + dy * scale
32 |             });
33 |         }
34 |     }
35 | 
36 |     let circle = new Stardust.mark.circle(16);
37 | 
38 |     var circles = Stardust.mark.create(circle, platform);
39 |     var circles2 = Stardust.mark.create(circle, platform);
40 | 
41 |     var scaleX = Stardust.scale.linear()
42 |         .domain([ -1, 1 ])
43 |         .range([ 10, width - 10 ]);
44 |     var scaleY = Stardust.scale.linear()
45 |         .domain([ -1, 1 ])
46 |         .range([ 10, height - 10 ]);
47 |     circles.attr("center", Stardust.scale.Vector2(scaleX(d => d.x), scaleY(d => d.y)));
48 |     circles.attr("radius", 2);
49 |     circles.attr("color", [ 0, 0, 0, 0.4 ]);
50 |     circles2.attr("center", Stardust.scale.Vector2(scaleX(d => d.x), scaleY(d => d.y)));
51 |     circles2.attr("radius", 4);
52 |     circles2.attr("color", [ 255, 0, 0, 1 ]);
53 |     circles.data(data);
54 | 
55 |     circles.render();
56 | 
57 |     platform.beginPicking(canvas.width, canvas.height);
58 |     circles.render();
59 |     platform.endPicking();
60 | 
61 |     canvas.onmousemove = e => {
62 |         let bounds = canvas.getBoundingClientRect();
63 |         var x = e.clientX - bounds.left;
64 |         var y = e.clientY - bounds.top;
65 |         var p = platform.getPickingPixel(x * 2, y * 2);
66 |         if(p) {
67 |             platform.clear();
68 |             circles.render();
69 |             circles2.attr("color", [ 1, 0, 0, 1 ]);
70 |             circles2.data([ data[p[1]] ]);
71 |             circles2.render();
72 |         }
73 |     }
74 | </script>


--------------------------------------------------------------------------------
/examples/scatterplot/metadata.json:
--------------------------------------------------------------------------------
1 | {
2 |     "description": "Stardust Example: Scatterplot"
3 | }


--------------------------------------------------------------------------------
/examples/scatterplot/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/scatterplot/preview.png


--------------------------------------------------------------------------------
/examples/scatterplot/preview_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/scatterplot/preview_small.png


--------------------------------------------------------------------------------
/examples/shader/README.md:
--------------------------------------------------------------------------------
1 | A scatterplot created with the [Stardust](https://stardustjs.github.io/) library. Data is generated using a formula.


--------------------------------------------------------------------------------
/examples/shader/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <meta charset="utf-8">
 3 | <title>Stardust Example: Scatterplot</title>
 4 | <link rel="stylesheet" href="../common/style.css" type="text/css" />
 5 | <canvas id="main-canvas"></canvas>
 6 | <div class="initializing"><p>Initializing...</p></div>
 7 | <script src="//d3js.org/d3.v3.min.js" type="text/javascript"></script>
 8 | <script src="../common/stardust/stardust.bundle.js" type="text/javascript"></script>
 9 | <script src="../common/utils.js" type="text/javascript"></script>
10 | <script type="text/javascript">
11 |     var canvas = document.getElementById("main-canvas");
12 |     var width = 960;
13 |     var height = 500;
14 |     var platform = Stardust.platform("webgl-2d", canvas, width, height);
15 | 
16 |     var Nx = 96 * 1;
17 |     var Ny = 50 * 1;
18 | 
19 |     var data = [];
20 |     for(var i = 0; i < Nx; i++) {
21 |         for(var j = 0; j < Ny; j++) {
22 |             var x = i / (Nx - 1) * 2 - 1;
23 |             var y = j / (Ny - 1) * 2 - 1;
24 |             var scale = 2;
25 |             var len = Math.sqrt(x * x + y * y);
26 |             var d = len * Math.exp(-len * len * 5);
27 |             var dx = y / len * d;
28 |             var dy = -x / len * d;
29 |             data.push({
30 |                 x: x + dx * scale,
31 |                 y: y + dy * scale
32 |             });
33 |         }
34 |     }
35 | 
36 |     let circle = new Stardust.mark.compile(`
37 |         mark Mark(center: Vector2, radius: float, color: Color, k: float) {
38 |             emit [
39 |                 { position: center + Vector2(-radius, -radius), color: color, off: Vector2(-1, -1), k: k },
40 |                 { position: center + Vector2(-radius, radius), color: color, off: Vector2(-1, 1), k: k },
41 |                 { position: center + Vector2(radius, radius), color: color, off: Vector2(1, 1), k: k },
42 |                 { position: center + Vector2(-radius, -radius), color: color, off: Vector2(-1, -1), k: k },
43 |                 { position: center + Vector2(radius, -radius), color: color, off: Vector2(1, -1), k: k },
44 |                 { position: center + Vector2(radius, radius), color: color, off: Vector2(1, 1), k: k }
45 |             ];
46 |         }
47 |     `)["Mark"];
48 | 
49 |     var testShader = Stardust.shader.compile(`
50 |         shader Default(color: Color, off: Vector2, k: float) {
51 |             let r = exp(-sqrt(off.x * off.x + off.y * off.y) * k);
52 |             emit { color: Color(color.r, color.g, color.b, r) };
53 |         }
54 |     `)["Default"];
55 | 
56 |     var circles = Stardust.mark.create(circle, testShader, platform);
57 | 
58 |     var scaleX = Stardust.scale.linear()
59 |         .domain([ -1, 1 ])
60 |         .range([ 10, width - 10 ]);
61 |     var scaleY = Stardust.scale.linear()
62 |         .domain([ -1, 1 ])
63 |         .range([ 10, height - 10 ]);
64 |     circles.attr("center", Stardust.scale.Vector2(scaleX(d => d.x), scaleY(d => d.y)));
65 |     circles.attr("radius", 10);
66 |     circles.attr("color", [ 0, 0, 0, 0.4 ]);
67 |     circles.attr("k", 5);
68 | 
69 |     circles.data(data);
70 |     circles.render();
71 | 
72 |     var t0 = new Date().getTime();
73 |     setInterval(() => {
74 |         var time = new Date().getTime() - t0;
75 |         circles.attr("k", 8 + Math.sin(time / 1000) * 2);
76 |         platform.clear();
77 |         circles.render();
78 |     }, 10);
79 | </script>


--------------------------------------------------------------------------------
/examples/shader/metadata.json:
--------------------------------------------------------------------------------
1 | {
2 |     "description": "Stardust Example: Custom Shaders"
3 | }


--------------------------------------------------------------------------------
/examples/shader/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/shader/preview.png


--------------------------------------------------------------------------------
/examples/shader/preview_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/shader/preview_small.png


--------------------------------------------------------------------------------
/examples/squares/README.md:
--------------------------------------------------------------------------------
1 | The Squares performance visualization for multiclass classifiers, implemented using [Stardust](https://stardustjs.github.io/).
2 | 
3 | Data shown here is a 10-class classifier trained on the MNIST dataset.


--------------------------------------------------------------------------------
/examples/squares/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <meta charset="utf-8">
 3 | <link rel="stylesheet" href="../common/style.css" type="text/css" />
 4 | <script src="//d3js.org/d3.v3.min.js" type="text/javascript"></script>
 5 | <script src="../common/stardust/stardust.bundle.js" type="text/javascript"></script>
 6 | <script src="../common/utils.js" type="text/javascript"></script>
 7 | <style>
 8 |     .squares-container {
 9 |         position: relative;
10 |     }
11 |     .squares-container canvas, .squares-container svg {
12 |         position: absolute;
13 |         left: 0; top: 0;
14 |     }
15 |     .squares-container svg {
16 |         pointer-events: none;
17 |     }
18 |     .axis path,
19 |     .axis line {
20 |         fill: none;
21 |         stroke: black;
22 |         shape-rendering: crispEdges;
23 |     }
24 | 
25 |     .axis text {
26 |         font-family: sans-serif;
27 |         font-size: 11px;
28 |     }
29 | </style>
30 | <div class="squares-container">
31 |     <canvas id="main-canvas"></canvas>
32 |     <svg id="main-svg"></svg>
33 | </div>
34 | <div class="initializing"><p>Initializing...</p></div>
35 | <script src="squares.js" type="text/javascript"></script>
36 | <script type="text/javascript">
37 |     var container = d3.select(".squares-container");
38 |     var vis = new SquaresVisualization(container.node());
39 |     loadData("mnist.csv", (DATA) => {
40 |         vis.layout();
41 |         vis.setInstances(DATA.slice(0, 4000));
42 |         vis.setLayoutParameter({
43 |             y0: 10,
44 |             numberBins: 10,
45 |             squaresPerBin: 11,
46 |             squareSize: 3,
47 |             squareSpacing: 4,
48 |             xSpacing: 88
49 |         });
50 |     });
51 | </script>


--------------------------------------------------------------------------------
/examples/squares/metadata.json:
--------------------------------------------------------------------------------
1 | {
2 |     "description": "Stardust Example: Squares"
3 | }


--------------------------------------------------------------------------------
/examples/squares/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/squares/preview.png


--------------------------------------------------------------------------------
/examples/squares/preview_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/squares/preview_small.png


--------------------------------------------------------------------------------
/examples/squares/squares.js:
--------------------------------------------------------------------------------
  1 | class SquaresVisualization {
  2 | 
  3 |     makeSquaresMark(side, mode) {
  4 |         let squares = Stardust.mark.custom()
  5 |             .input("size", "float")
  6 |             .input("spacing", "float")
  7 |             .input("x0", "float")
  8 |             .input("xSpacing", "float")
  9 |             .input("y1", "float")
 10 |             .input("binSpacing", "float")
 11 |             .input("binIndex", "float")
 12 |             .input("binSquares", "float")
 13 |             .input("bin", "float")
 14 |             .input("color", "Color");
 15 |         if(side == "right") {
 16 |             squares
 17 |                 .input("assigned", "float")
 18 |                 .variable("x", "x0 + xSpacing * assigned")
 19 |         } else {
 20 |             squares
 21 |                 .input("label", "float")
 22 |                 .variable("x", "x0 + xSpacing * label")
 23 |         }
 24 |         squares
 25 |             .variable("y", "y1 - bin * binSpacing")
 26 |             .variable("binIx", "floor(binIndex / binSquares)")
 27 |             .variable("binIy", "(binIndex % binSquares)")
 28 |             .variable("bx", "binIx * spacing")
 29 |             .variable("by", "binIy * spacing")
 30 |         if(side == "right") {
 31 |             squares
 32 |                 .variable("px", "x + bx")
 33 |                 .variable("py", "y + by");
 34 |         } else {
 35 |             squares
 36 |                 .variable("px", "x - bx - spacing")
 37 |                 .variable("py", "y + by");
 38 |         }
 39 |         if(mode == "solid") {
 40 |             squares
 41 |                 .add("P2D.Rectangle")
 42 |                     .attr("p1", "Vector2(px, py)")
 43 |                     .attr("p2", "Vector2(px + spacing, py + spacing)")
 44 |                     .attr("color", "Color(1, 1, 1, 1)");
 45 |             squares
 46 |                 .add("P2D.Rectangle")
 47 |                     .attr("p1", "Vector2(px, py)")
 48 |                     .attr("p2", "Vector2(px + size, py + size)")
 49 |                     .attr("color", "color");
 50 |         }
 51 |         if(mode == "outlined") {
 52 |             squares
 53 |                 .add("P2D.Rectangle")
 54 |                     .attr("p1", "Vector2(px, py)")
 55 |                     .attr("p2", "Vector2(px + spacing, py + spacing)")
 56 |                     .attr("color", "Color(1, 1, 1, 1)");
 57 |             squares
 58 |                 .add("P2D.Rectangle")
 59 |                     .attr("p1", "Vector2(px, py)")
 60 |                     .attr("p2", "Vector2(px + size, py + size)")
 61 |                     .attr("color", "color");
 62 |             squares
 63 |                 .add("P2D.Rectangle")
 64 |                     .attr("p1", "Vector2(px + 0.5, py + 0.5)")
 65 |                     .attr("p2", "Vector2(px + size - 0.5, py + size - 0.5)")
 66 |                     .attr("color", "Color(1, 1, 1, 1)");
 67 |         }
 68 |         if(mode == "selection") {
 69 |             squares
 70 |                 .add("P2D.Rectangle")
 71 |                     .attr("p1", "Vector2(px, py)")
 72 |                     .attr("p2", "Vector2(px + size, py + size)")
 73 |                     .attr("color", "Color(0, 0, 0, 0)");
 74 |             squares
 75 |                 .add("P2D.OutlinedRectangle")
 76 |                     .attr("p1", "Vector2(px - 0.5, py - 0.5)")
 77 |                     .attr("p2", "Vector2(px + size + 0.5, py + size + 0.5)")
 78 |                     .attr("color", "Color(0, 0, 0, 1)");
 79 |         }
 80 |         return squares;
 81 |     }
 82 | 
 83 |     constructor(container) {
 84 |         let squares = this.makeSquaresMark("right", "solid");
 85 |         let squaresOutlined = this.makeSquaresMark("left", "outlined");
 86 |         let squaresSelection = this.makeSquaresMark("right", "selection");
 87 |         let squaresOutlinedSelection = this.makeSquaresMark("left", "selection");
 88 | 
 89 |         let parallelCoordinates = Stardust.mark.custom()
 90 |             .input("color", "Color")
 91 |             .input("x0", "float")
 92 |             .input("xSpacing", "float");
 93 |         for(let i = 0; i < 10; i++) {
 94 |             parallelCoordinates.input(`y${i}`, "float");
 95 |             parallelCoordinates.variable(`x${i}`, `x0 + xSpacing * ${i}`);
 96 |             if(i < 9) {
 97 |                 parallelCoordinates.add("P2D.Line")
 98 |                     .attr("p1", `Vector2(x${i}, y${i})`)
 99 |                     .attr("p2", `Vector2(x${i + 1}, y${i + 1})`)
100 |                     .attr("width", 2)
101 |                     .attr("color", `Color(color.r, color.g, color.b, 0.3)`);
102 |             }
103 |         }
104 | 
105 |         this._container = container;
106 |         this._canvas = d3.select(container).append("canvas");
107 |         this._canvasNode = this._canvas.node();
108 |         this._svg = d3.select(container).append("svg");
109 |         this._svgAxis = this._svg.append("g").classed("axis", true);
110 | 
111 |         let platform = Stardust.platform("webgl-2d", this._canvasNode);
112 | 
113 |         this._platform = platform;
114 | 
115 |         this._layout = {
116 |             numberBins: 10,
117 |             squaresPerBin: 10,
118 |             squareSize: 2,
119 |             squareSpacing: 3,
120 |             x0: 80,
121 |             xSpacing: 100,
122 |             y0: 10,
123 |             numberClasses: 10
124 |         };
125 | 
126 |         let colors = [[31,119,180],[255,127,14],[44,160,44],[214,39,40],[148,103,189],[140,86,75],[227,119,194],[127,127,127],[188,189,34],[23,190,207]];
127 |         colors = colors.map((x) => [ x[0] / 255, x[1] / 255, x[2] / 255, 1 ]);
128 | 
129 |         let mark = Stardust.mark.create(squares, platform);
130 |         mark
131 |             .attr("color", d => colors[d.label])
132 |             .attr("assigned", d => d.assigned)
133 |             .attr("binIndex", d => d.binIndex)
134 |             .attr("bin", d => d.scoreBin);
135 | 
136 |         let mark2 = Stardust.mark.create(squaresOutlined, platform);
137 |         mark2
138 |             .attr("color", d => colors[d.assigned])
139 |             .attr("label", d => d.label)
140 |             .attr("binIndex", d => d.binIndex2)
141 |             .attr("bin", d => d.scoreBin);
142 | 
143 |         let markOverlay = Stardust.mark.create(squaresSelection, platform);
144 |         markOverlay
145 |             .attr("color", [ 0, 0, 0, 1 ])
146 |             .attr("assigned", d => d.assigned)
147 |             .attr("binIndex", d => d.binIndex)
148 |             .attr("bin", d => d.scoreBin);
149 | 
150 |         let markOverlayOutlined = Stardust.mark.create(squaresOutlinedSelection, platform);
151 |         markOverlayOutlined
152 |             .attr("color", [ 0, 0, 0, 1 ])
153 |             .attr("label", d => d.label)
154 |             .attr("binIndex", d => d.binIndex2)
155 |             .attr("bin", d => d.scoreBin);
156 | 
157 |         let markPC = Stardust.mark.create(parallelCoordinates, platform);
158 |         let yScale = Stardust.scale.linear()
159 |             .domain([ 0, 1 ]).range([ 500, 100 ]);
160 |         markPC.attr("color", d => colors[d.label]);
161 |         for(let i = 0; i < 10; i++) {
162 |             ((i) => {
163 |                 markPC.attr(`y${i}`, yScale(d => d.scores[i]));
164 |             })(i);
165 |         }
166 | 
167 |         this._marks = {
168 |             squares: mark,
169 |             squaresOutlined: mark2,
170 |             squaresOverlay: markOverlay,
171 |             squaresOverlayOutlined: markOverlayOutlined,
172 |             parallelCoordinates: markPC,
173 |             yScale: yScale
174 |         }
175 | 
176 | 
177 | 
178 |         this._canvasNode.onmousemove = e => {
179 |             let bounds = this._canvasNode.getBoundingClientRect();
180 |             var x = e.clientX - bounds.left;
181 |             var y = e.clientY - bounds.top;
182 |             var p = this._platform.getPickingPixel(x * 2, y * 2);
183 |             if(p) {
184 |                 this.setSelection([ p[0].data()[p[1]] ]);
185 |             } else {
186 |                 this.setSelection([]);
187 |             }
188 |         };
189 |         this._canvasNode.onmousedown = e => {
190 |             let bounds = this._canvasNode.getBoundingClientRect();
191 |             var x = e.clientX - bounds.left;
192 |             var y = e.clientY - bounds.top;
193 |             var p = this._platform.getPickingPixel(x * 2, y * 2);
194 |             if(p) {
195 |                 let inst = p[0].data()[p[1]];
196 |                 let selection = this._instances.filter((d) => d.label == inst.label && d.assigned == inst.assigned && d.scoreBin == inst.scoreBin);
197 |                 this.setSelection(selection);
198 |             } else {
199 |                 this.setSelection([]);
200 |             }
201 |         };
202 |         this._canvasNode.ondblclick = e => {
203 |             let bounds = this._canvasNode.getBoundingClientRect();
204 |             var x = e.clientX - bounds.left;
205 |             var y = e.clientY - bounds.top;
206 |             var p = this._platform.getPickingPixel(x * 2, y * 2);
207 |             if(p) {
208 |                 let inst = p[0].data()[p[1]];
209 |                 let selection = this._instances.filter((d) => d.label == inst.label && d.assigned == inst.assigned);
210 |                 this.setSelection(selection);
211 |             } else {
212 |                 this.setSelection([]);
213 |             }
214 |         };
215 |     }
216 | 
217 |     setSelection(instances) {
218 |         this._marks.squaresOverlay.data(instances);
219 |         this._marks.squaresOverlayOutlined.data(instances.filter(d => d.label != d.assigned));
220 |         this._marks.parallelCoordinates.data(instances);
221 |         this.renderSelection();
222 |     }
223 | 
224 |     setInstances(DATA) {
225 |         this._DATA = DATA;
226 |         this._layout.numberClasses = 10;
227 |         let instances = DATA.map((d) => {
228 |             return {
229 |                 label: parseInt(d.Label.substr(1)),
230 |                 assigned: parseInt(d.Assigned.substr(1)),
231 |                 score: d[d.Assigned],
232 |                 scoreBin: Math.min(this._layout.numberBins - 1, Math.max(0, Math.floor(parseFloat(d[d.Assigned]) * this._layout.numberBins))),
233 |                 scores: [ +d.C0, +d.C1, +d.C2, +d.C3, +d.C4, +d.C5, +d.C6, +d.C7, +d.C8, +d.C9 ]
234 |             };
235 |         });
236 | 
237 |         let CM = [];
238 |         let CMBin = [];
239 | 
240 |         for(let i = 0; i < this._layout.numberClasses; i++) {
241 |             CM[i] = [];
242 |             CMBin[i] = [];
243 |             for(let j = 0; j < this._layout.numberClasses; j++) {
244 |                 CM[i][j] = 0;
245 |                 CMBin[i][j] = [];
246 |                 for(let k = 0; k < this._layout.numberBins; k++) {
247 |                     CMBin[i][j][k] = 0;
248 |                 }
249 |             }
250 |         }
251 | 
252 |         instances.sort(function(a, b) {
253 |             if(a.label == a.assigned) return b.label == b.assigned ? 0 : +1;
254 |             if(b.label == b.assigned) return a.label == a.assigned ? 0 : -1;
255 |             if(a.assigned != b.assigned)
256 |                 return a.assigned - b.assigned;
257 |             if(a.label != b.label)
258 |                 return a.label - b.label;
259 |             return a.score - b.score;
260 |         })
261 | 
262 |         instances.forEach(function(d) {
263 |             d.CMIndex = CM[d.label][d.assigned];
264 |             CM[d.label][d.assigned] += 1;
265 |             d.binIndex = CMBin[0][d.assigned][d.scoreBin];
266 |             CMBin[0][d.assigned][d.scoreBin] += 1;
267 |         });
268 | 
269 |         instances.sort(function(a, b) {
270 |             if(a.label == a.assigned) return b.label == b.assigned ? 0 : +1;
271 |             if(b.label == b.assigned) return a.label == a.assigned ? 0 : -1;
272 |             if(a.assigned != b.assigned)
273 |                 return -(a.assigned - b.assigned);
274 |             if(a.label != b.label)
275 |                 return a.label - b.label;
276 |             return a.score - b.score;
277 |         })
278 | 
279 |         instances.forEach(function(d) {
280 |             d.binIndex2 = CMBin[1][d.label][d.scoreBin];
281 |             CMBin[1][d.label][d.scoreBin] += 1;
282 |         });
283 | 
284 |         instances.forEach(function(d) {
285 |             d.CMCount = CM[d.label][d.assigned];
286 |         });
287 | 
288 |         instances.sort(function(a, b) {
289 |             return a.assigned - b.assigned;
290 |         });
291 | 
292 |         this._instances = instances;
293 | 
294 |         this._marks.squares.data(this._instances);
295 |         this._marks.squaresOutlined.data(this._instances.filter(d => d.label != d.assigned));
296 | 
297 |         this.layout();
298 |         this.render();
299 |     }
300 | 
301 |     layoutConfigSquares() {
302 |         let binSpacing = this._layout.squareSpacing * this._layout.squaresPerBin + this._layout.squareSpacing;
303 |         this._marks.yScale.range([ this._layout.y0 + binSpacing * this._layout.numberBins, this._layout.y0 ]);
304 | 
305 |         [
306 |             this._marks.squares,
307 |             this._marks.squaresOutlined,
308 |             this._marks.squaresOverlay,
309 |             this._marks.squaresOverlayOutlined
310 |         ].forEach(s => s
311 |             .attr("size", this._layout.squareSize)
312 |             .attr("spacing", this._layout.squareSpacing)
313 |             .attr("x0", this._layout.x0)
314 |             .attr("xSpacing", this._layout.xSpacing)
315 |             .attr("y1", this._layout.y0 + binSpacing * this._layout.numberBins - binSpacing + this._layout.squareSpacing / 2)
316 |             .attr("binSpacing", binSpacing)
317 |             .attr("binSquares", this._layout.squaresPerBin)
318 |         );
319 |         this._marks.parallelCoordinates
320 |             .attr("x0", this._layout.x0)
321 |             .attr("xSpacing", this._layout.xSpacing);
322 |     }
323 |     layout() {
324 |         this.layoutConfigSquares();
325 | 
326 |         var d3yscale = d3.scale.linear().domain(this._marks.yScale.domain()).range(this._marks.yScale.range());
327 |         var axis = d3.svg.axis().scale(d3yscale).orient("left");
328 |         this._svgAxis.attr("transform", "translate(30, 0)");
329 |         this._svgAxis.call(axis);
330 | 
331 |         let width = 960;
332 |         let height = 500;
333 |         this._svg.attr("width", width).attr("height", height);
334 |         this._platform.resize(width, height);
335 |     }
336 |     render() {
337 |         this._platform.beginPicking(this._canvasNode.width, this._canvasNode.height);
338 |         this._marks.squares.render();
339 |         this._marks.squaresOutlined.render();
340 |         this._platform.endPicking();
341 | 
342 |         this._platform.clear();
343 |         this._marks.squares.render();
344 |         this._marks.squaresOutlined.render();
345 |     }
346 |     renderSelection() {
347 |         this._platform.clear();
348 |         this._marks.squares.render();
349 |         this._marks.squaresOutlined.render();
350 |         this._marks.squaresOverlay.render();
351 |         this._marks.squaresOverlayOutlined.render();
352 |         this._marks.parallelCoordinates.render();
353 |     }
354 | 
355 |     setLayoutParameter(layout) {
356 |         let shouldRecompute = false;
357 |         for(let p in layout) {
358 |             if(layout.hasOwnProperty(p)) {
359 |                 this._layout[p] = layout[p];
360 |                 if(p == "numberBins" || p == "numberClasses") {
361 |                     shouldRecompute = true;
362 |                 }
363 |             }
364 |         }
365 |         if(shouldRecompute) {
366 |             this.setInstances(this._DATA);
367 |         }
368 |         this.layout();
369 |         this.render();
370 |     }
371 | }
372 | 


--------------------------------------------------------------------------------
/examples/webvr/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <meta charset="utf-8">
  5 | <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  6 | <meta name="mobile-web-app-capable" content="yes">
  7 | <meta name="apple-mobile-web-app-capable" content="yes">
  8 | 
  9 | <style>
 10 | html, body {
 11 |   width: 100%;
 12 |   height: 100%;
 13 |   background-color: #000;
 14 |   color: #ccc;
 15 |   margin: 0px;
 16 |   padding: 0;
 17 |   overflow: hidden;
 18 |   font-family: Helvetica, Arial, sans-serif;
 19 |   font-size: 16px;
 20 | }
 21 | span.error {
 22 |   padding: 10px;
 23 |   display: block;
 24 | }
 25 | span.overlay {
 26 |   position: absolute;
 27 |   display: block;
 28 |   left: 0; top: 0; right: 0; bottom: 0;
 29 |   padding: 10px;
 30 |   pointer-events: none;
 31 | }
 32 | canvas {
 33 |   position: absolute;
 34 |   top: 0;
 35 | }
 36 | </style>
 37 | </html>
 38 | <body>
 39 | 
 40 | <canvas id="main-canvas"></canvas>
 41 | <span class="overlay" id="overlay-element">Click the screen to start WebVR</span>
 42 | 
 43 | <script type="text/javascript">
 44 | WebVRConfig = {
 45 |   BUFFER_SCALE: 1.0,
 46 | };
 47 | </script>
 48 | <script type="text/javascript" src="webvr-polyfill.min.js"></script>
 49 | <script src="//d3js.org/d3.v3.min.js" type="text/javascript"></script>
 50 | <script type="text/javascript" src="../common/stardust/stardust.bundle.js"></script>
 51 | <script type="text/javascript" src="userCode.js"></script>
 52 | <script type="text/javascript">
 53 |     let canvas = document.getElementById("main-canvas");
 54 |     canvas.getContext("webgl", { alpha: false });
 55 |     let width = window.innerWidth;
 56 |     let height = window.innerHeight;
 57 |     let platform = Stardust.platform("webgl-webvr", canvas, width, height);
 58 |     platform.pixelRatio = 1;
 59 | 
 60 |     UserCode(platform, (userContext) => {
 61 |         navigator.getVRDisplays().then((displays) => {
 62 |             let vrDisplay = displays[0];
 63 |             if(!vrDisplay) {
 64 |                 document.body.innerHTML = '<span class="error">Could not find WebVR display</span>';
 65 |                 return;
 66 |             }
 67 | 
 68 |             function onResize() {
 69 |                 if(vrDisplay && vrDisplay.isPresenting) {
 70 |                     // If we're presenting we want to use the drawing buffer size
 71 |                     // recommended by the VRDevice, since that will ensure the best
 72 |                     // results post-distortion.
 73 |                     var leftEye = vrDisplay.getEyeParameters("left");
 74 |                     var rightEye = vrDisplay.getEyeParameters("right");
 75 |                     // For simplicity we're going to render both eyes at the same size,
 76 |                     // even if one eye needs less resolution. You can render each eye at
 77 |                     // the exact size it needs, but you'll need to adjust the viewports to
 78 |                     // account for that.
 79 |                     platform.resize(Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2, Math.max(leftEye.renderHeight, rightEye.renderHeight));
 80 |                 } else {
 81 |                     platform.resize(window.innerWidth, window.innerHeight);
 82 |                 }
 83 |             }
 84 |             function onVRDisplayPresentChange() {
 85 |                 onResize();
 86 |             }
 87 | 
 88 |             window.addEventListener("resize", onResize, false);
 89 |             window.addEventListener('vrdisplaypresentchange', onVRDisplayPresentChange);
 90 | 
 91 |             let frameData = new VRFrameData();
 92 | 
 93 |             function onAnimationFrame() {
 94 |                 if (vrDisplay.isPresenting) {
 95 |                     platform.clear([ 0, 0, 0, 1 ]);
 96 | 
 97 |                     vrDisplay.getFrameData(frameData);
 98 | 
 99 |                     // When presenting render a stereo view.
100 |                     platform._GL.viewport(0, 0, canvas.width * 0.5, canvas.height);
101 |                     platform.setWebVRView(frameData.leftViewMatrix, frameData.leftProjectionMatrix);
102 |                     userContext.render();
103 | 
104 |                     platform._GL.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
105 |                     platform.setWebVRView(frameData.rightViewMatrix, frameData.rightProjectionMatrix);
106 |                     userContext.render();
107 |                     // If we're currently presenting to the VRDisplay we need to
108 |                     // explicitly indicate we're done rendering.
109 |                     vrDisplay.submitFrame();
110 |                 }
111 |                 vrDisplay.requestAnimationFrame(onAnimationFrame);
112 |             }
113 |             vrDisplay.requestAnimationFrame(onAnimationFrame);
114 | 
115 |             canvas.onclick = () => {
116 |                 document.getElementById("overlay-element").remove();
117 |                 canvas.onclick = null;
118 |                 vrDisplay.requestPresent([{ source: canvas }]).catch((err) => {
119 |                     document.body.innerHTML = '<span class="error">' + err + '</span>';
120 |                 });
121 |             };
122 |         });
123 |     });
124 | </script>
125 | </body>


--------------------------------------------------------------------------------
/examples/webvr/metadata.json:
--------------------------------------------------------------------------------
1 | {
2 |     "description": "Stardust Example: WebVR",
3 |     "excludes": [ "webvr-polyfill.min.js" ]
4 | }
5 | 


--------------------------------------------------------------------------------
/examples/webvr/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/webvr/preview.png


--------------------------------------------------------------------------------
/examples/webvr/preview_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stardustjs/stardust-examples/a4b2f4383af2694cd41e4572017399cc5a758fa9/examples/webvr/preview_small.png


--------------------------------------------------------------------------------
/examples/webvr/userCode.js:
--------------------------------------------------------------------------------
  1 | function UserCode(platform, callback) {
  2 |     d3.json("beethoven.json", (err, DATA) => {
  3 | 
  4 |         let marks = Stardust.mark.compile(`
  5 |             import { Triangle } from P3D;
  6 | 
  7 |             mark Point(
  8 |                 center: Vector3,
  9 |                 size: float,
 10 |                 color: Color
 11 |             ) {
 12 |                 let p1 = Vector3(center.x + size, center.y + size, center.z - size);
 13 |                 let p2 = Vector3(center.x + size, center.y - size, center.z + size);
 14 |                 let p3 = Vector3(center.x - size, center.y + size, center.z + size);
 15 |                 let p4 = Vector3(center.x - size, center.y - size, center.z - size);
 16 |                 Triangle(p1, p2, p3, color);
 17 |                 Triangle(p4, p1, p2, color);
 18 |                 Triangle(p4, p2, p3, color);
 19 |                 Triangle(p4, p3, p1, color);
 20 |             }
 21 | 
 22 |             mark Line(
 23 |                 p1: Vector3, p2: Vector3,
 24 |                 size: float,
 25 |                 color: Color
 26 |             ) {
 27 |                 let x1 = Vector3(p1.x, p1.y, p1.z - size);
 28 |                 let x2 = Vector3(p1.x, p1.y, p1.z + size);
 29 |                 let x3 = Vector3(p2.x, p2.y, p2.z + size);
 30 |                 let x4 = Vector3(p2.x, p2.y, p2.z - size);
 31 |                 Triangle(x1, x2, x3, color);
 32 |                 Triangle(x4, x1, x2, color);
 33 |                 Triangle(x4, x2, x3, color);
 34 |                 Triangle(x4, x3, x1, color);
 35 |             }
 36 | 
 37 |             function getPosition(year: float, dayOfYear: float, secondOfDay: float): Vector3 {
 38 |                 let angle = dayOfYear / 366 * PI * 2;
 39 |                 let dayScaler = (secondOfDay / 86400 - 0.5);
 40 |                 let r = (year - 2006) / (2015 - 2006) * 200 + 50 + dayScaler * 50;
 41 |                 let x = cos(angle) * r;
 42 |                 let y = sin(angle) * r;
 43 |                 let z = dayScaler * 50;
 44 |                 return Vector3(x / 100, y / 100, z / 100);
 45 |             }
 46 | 
 47 |             function getPosition2(year: float, dayOfYear: float, secondOfDay: float): Vector3 {
 48 |                 let angle = dayOfYear / 366 * PI * 2;
 49 |                 let r = secondOfDay / 86400 * 200 + 50;
 50 |                 let x = cos(angle) * r;
 51 |                 let y = sin(angle) * r;
 52 |                 let z = 0;
 53 |                 return Vector3(x / 100, y / 100, z / 100);
 54 |             }
 55 | 
 56 |             mark Glyph(
 57 |                 year: float,
 58 |                 dayOfYear: float,
 59 |                 secondOfDay: float,
 60 |                 duration: float,
 61 |                 t: float,
 62 |                 color: Color
 63 |             ) {
 64 |                 let p = getPosition(year, dayOfYear, secondOfDay);
 65 |                 let p2 = getPosition2(year, dayOfYear, secondOfDay);
 66 |                 Point(p * (1 - t) + p2 * t, log(1 + duration) / 200, color = color);
 67 |             }
 68 | 
 69 |             mark LineChart(
 70 |                 year1: float,
 71 |                 dayOfYear1: float,
 72 |                 secondOfDay1: float,
 73 |                 year2: float,
 74 |                 dayOfYear2: float,
 75 |                 secondOfDay2: float,
 76 |                 c1: float,
 77 |                 c2: float,
 78 |                 t: float
 79 |             ) {
 80 |                 let p1 = getPosition(year1, dayOfYear1, secondOfDay1);
 81 |                 let p1p = getPosition2(year1, dayOfYear1, secondOfDay1);
 82 |                 let p2 = getPosition(year2, dayOfYear2, secondOfDay2);
 83 |                 let p2p = getPosition2(year2, dayOfYear2, secondOfDay2);
 84 |                 p1 = p1 + (p1p - p1) * t;
 85 |                 p2 = p2 + (p2p - p2) * t;
 86 |                 p1 = Vector3(p1.x, p1.y, c1 / 100);
 87 |                 p2 = Vector3(p2.x, p2.y, c2 / 100);
 88 |                 Line(p1, p2, 0.5 / 100, Color(1, 1, 1, 0.8));
 89 |             }
 90 |         `);
 91 | 
 92 |         let mark = Stardust.mark.create(marks.Glyph, platform);
 93 |         let lineChart = Stardust.mark.create(marks.LineChart, platform);
 94 | 
 95 |         DATA.forEach((d) => {
 96 |             d.duration = (d.checkInFirst - d.checkOut) / 86400;
 97 |             d.checkOut = new Date(d.checkOut * 1000);
 98 |             d.checkIn = new Date(d.checkInFirst * 1000);
 99 |         });
100 |         DATA = DATA.filter((d) => {
101 |             if(!d.checkIn || !d.checkOut) return false;
102 |             if(d.duration > 360) return false;
103 |             return d.checkOut.getFullYear() >= 2007 && d.checkOut.getFullYear() < 2016 && d.checkIn.getFullYear() >= 2007 && d.checkIn.getFullYear() < 2016;
104 |         });
105 | 
106 |         // Daily summary.
107 |         let days = new Map();
108 |         DATA.forEach((d) => {
109 |         let day = Math.floor(d.checkOut.getTime() / 1000 / 86400) * 86400;
110 |         if(!days.has(day)) days.set(day, 1);
111 |         else days.set(day, days.get(day) + 1);
112 |         });
113 |         let daysArray = [];
114 |         days.forEach((count, day) => {
115 |             daysArray.push({ day: new Date(day * 1000), count: count });
116 |         });
117 |         daysArray.sort((a, b) => a.day.getTime() - b.day.getTime());
118 | 
119 |         let colorScale = d3.scale.category10();
120 |         let color = (d) => {
121 |             let rgb = d3.rgb(colorScale(d.deweyClass));
122 |             return [ rgb.r / 255, rgb.g / 255, rgb.b / 255, 0.5 ];
123 |         };
124 | 
125 |         let dayOfYear = (d) => {
126 |             return Math.floor((d - new Date(d.getFullYear(), 0, 0)) / 86400000);
127 |         }
128 |         let secondOfDay = (d) => {
129 |             return d.getMinutes() * 60 + d.getHours() * 3600 + d.getSeconds();
130 |         }
131 |         mark.attr("duration", (d) => d.duration);
132 |         mark.attr("year", (d) => d.checkOut.getFullYear());
133 |         mark.attr("dayOfYear", (d) => dayOfYear(d.checkOut));
134 |         mark.attr("secondOfDay", (d) => secondOfDay(d.checkOut));
135 |         mark.attr("color", color);
136 |         // mark.attr("inYear", (d) => d.checkIn.getFullYear());
137 |         // mark.attr("inDayOfYear", (d) => dayOfYear(d.checkIn));
138 |         // mark.attr("inSecondOfDay", (d) => secondOfDay(d.checkIn));
139 |         mark.data(DATA);
140 | 
141 |         lineChart.attr("year1", (d) => d.day.getFullYear());
142 |         lineChart.attr("dayOfYear1", (d) => dayOfYear(d.day));
143 |         lineChart.attr("secondOfDay1", (d) => secondOfDay(d.day));
144 |         lineChart.attr("year2", (d, i) => daysArray[i + 1].day.getFullYear());
145 |         lineChart.attr("dayOfYear2", (d, i) => dayOfYear(daysArray[i + 1].day));
146 |         lineChart.attr("secondOfDay2", (d, i) => secondOfDay(daysArray[i + 1].day));
147 |         let zScale = Stardust.scale.linear().domain([ 0, d3.max(daysArray, (d) => d.count) ]).range([20, 60]);
148 |         lineChart.attr("c1", zScale((d) => d.count));
149 |         lineChart.attr("c2", zScale((d, i) => daysArray[i + 1].count));
150 |         lineChart.data(daysArray.slice(0, -1));
151 | 
152 |         mark.attr("t", 0);
153 | 
154 |         let t0 = new Date().getTime();
155 | 
156 |         function render() {
157 |             let time = (new Date().getTime() - t0) / 1000;
158 |             let t = (Math.sin(time / 5) + 1) / 2;
159 |             mark.attr("t", t);
160 | 
161 |             platform.setPose(
162 |                 new Stardust.Pose(
163 |                     new Stardust.Vector3(0, 0, 1),
164 |                     new Stardust.Quaternion(0, 0, 0, 1)
165 |                 )
166 |             );
167 |             lineChart.attr("t", mark.attr("t"));
168 |             lineChart.render();
169 |             mark.render();
170 |         }
171 | 
172 |         callback({
173 |             render: render
174 |         });
175 |     });
176 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "stardust-examples",
 3 |   "version": "0.2.0",
 4 |   "description": "Stardust examples",
 5 |   "scripts": {
 6 |     "test": "echo \"Error: no test specified\" && exit 1",
 7 |     "build": "tsc -p server",
 8 |     "deploy": "node server/dist/static.js",
 9 |     "watch": "tsc -p server -w",
10 |     "start": "node server/dist/server.js"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/stardustjs/stardust-examples.git"
15 |   },
16 |   "author": "",
17 |   "license": "ISC",
18 |   "bugs": {
19 |     "url": "https://github.com/stardustjs/stardust-examples/issues"
20 |   },
21 |   "homepage": "https://github.com/stardustjs/stardust-examples#readme",
22 |   "dependencies": {
23 |     "@types/express": "^4.0.37",
24 |     "@types/marked": "^0.3.0",
25 |     "@types/mkdirp": "^0.5.2",
26 |     "@types/mustache": "^0.8.30",
27 |     "@types/rimraf": "^2.0.2",
28 |     "express": "^4.15.4",
29 |     "marked": "^0.3.6",
30 |     "mkdirp": "^0.5.1",
31 |     "mustache": "^2.3.0",
32 |     "typescript": "^2.4.2"
33 |   },
34 |   "devDependencies": {
35 |     "rimraf": "^2.6.2"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/server/src/examples.ts:
--------------------------------------------------------------------------------
  1 | import * as path from "path";
  2 | import * as fs from "fs";
  3 | import * as mustache from "mustache";
  4 | import * as marked from "marked";
  5 | 
  6 | function fileExists(path: string): Promise<boolean> {
  7 |     return new Promise<boolean>((resolve, reject) => {
  8 |         fs.exists(path, (exists) => {
  9 |             resolve(exists);
 10 |         });
 11 |     });
 12 | }
 13 | 
 14 | function fileRead(path: string) {
 15 |     return new Promise<Buffer>((resolve, reject) => {
 16 |         fs.readFile(path, (err, data) => {
 17 |             if (err) {
 18 |                 reject(err);
 19 |             } else {
 20 |                 resolve(data);
 21 |             }
 22 |         });
 23 |     });
 24 | }
 25 | 
 26 | function dirRead(path: string): Promise<string[]> {
 27 |     return new Promise<string[]>((resolve, reject) => {
 28 |         fs.readdir(path, "utf8", (err, files) => {
 29 |             if (err) {
 30 |                 reject(err);
 31 |             } else {
 32 |                 resolve(files)
 33 |             }
 34 |         });
 35 |     });
 36 | }
 37 | 
 38 | export interface ExampleMetadata {
 39 |     path: string;
 40 |     name: string;
 41 |     description: string;
 42 |     excludes?: string[];
 43 | }
 44 | 
 45 | export class ExamplesManager {
 46 |     rootDir: string;
 47 | 
 48 |     constructor(rootDir: string) {
 49 |         this.rootDir = rootDir;
 50 |     }
 51 | 
 52 |     public async getMetadataFromName(name: string): Promise<ExampleMetadata> {
 53 |         let examplePath = path.join(this.rootDir, name);
 54 |         let configPath = path.join(examplePath, "metadata.json");
 55 |         let exists = await fileExists(configPath);
 56 |         if (exists) {
 57 |             let data = await fileRead(configPath);
 58 |             let metadata = JSON.parse(data.toString("utf8")) as ExampleMetadata;
 59 |             metadata.name = name;
 60 |             metadata.path = examplePath;
 61 |             return metadata;
 62 |         } else {
 63 |             return null;
 64 |         }
 65 |     }
 66 | 
 67 |     public async listExamples(): Promise<ExampleMetadata[]> {
 68 |         let files = await dirRead(this.rootDir);
 69 |         let metadatas = await Promise.all(files.map(file => this.getMetadataFromName(file)));
 70 |         return metadatas.filter(x => x != null);
 71 |     }
 72 | 
 73 |     /** List the actual files under the example directory */
 74 |     public async listExampleFiles(name: string): Promise<string[]> {
 75 |         let metadata = await this.getMetadataFromName(name);
 76 |         if (!metadata) {
 77 |             throw new Error("example not found");
 78 |         }
 79 |         let files = await dirRead(metadata.path);
 80 |         files = files.filter(f => f != "metadata.json");
 81 |         return files;
 82 |     }
 83 | 
 84 |     /** Create an index.html for an example */
 85 |     public async renderExample(name: string, template: string): Promise<string> {
 86 |         let metadata = await this.getMetadataFromName(name);
 87 |         if (!metadata) {
 88 |             throw new Error("example not found");
 89 |         }
 90 |         let readme = await this.getExampleFileText(name, "README.md", metadata);
 91 |         let content = readme ? marked.parse(readme) : null;
 92 |         let filenames = await this.listExampleFiles(name);
 93 |         let files: { filename: string, language: string, code: string, _order: number }[] = [];
 94 |         let acceptableExtensions: { [name: string]: string } = {
 95 |             ".js": "javascript",
 96 |             ".html": "html"
 97 |         }
 98 |         for (let filename of filenames) {
 99 |             if (metadata.excludes && metadata.excludes.indexOf(filename) >= 0) continue;
100 |             let extension = path.extname(filename).toLowerCase();
101 |             if (acceptableExtensions.hasOwnProperty(extension)) {
102 |                 let file = {
103 |                     filename: filename,
104 |                     language: acceptableExtensions[extension],
105 |                     code: await this.getExampleFileText(name, filename, metadata),
106 |                     _order: 1
107 |                 };
108 |                 if (filename == "index.html") file._order = 0;
109 |                 files.push(file);
110 |             }
111 |         }
112 |         files.sort((a, b) => {
113 |             if (a._order != b._order) return a._order - b._order;
114 |             return a.filename < b.filename ? -1 : 1;
115 |         });
116 |         return mustache.render(template, {
117 |             content: content,
118 |             description: metadata.description,
119 |             files: files
120 |         });
121 |     }
122 | 
123 |     // Get a content file from an example
124 |     public async getExampleFileText(name: string, subpath: string, metadata?: ExampleMetadata): Promise<string> {
125 |         let data = await this.getExampleFile(name, subpath, metadata);
126 |         if (data == null) return null;
127 |         return data.toString("utf8");
128 |     }
129 |     public async getExampleFile(name: string, subpath: string, metadata?: ExampleMetadata): Promise<Buffer> {
130 |         if (!metadata) metadata = await this.getMetadataFromName(name);
131 |         if (!metadata) {
132 |             throw new Error("example not found");
133 |         }
134 |         let filepath = path.join(metadata.path, subpath);
135 |         if (await fileExists(filepath)) {
136 |             return await fileRead(filepath);
137 |         } else {
138 |             return null;
139 |         }
140 |     }
141 | }


--------------------------------------------------------------------------------
/server/src/server.ts:
--------------------------------------------------------------------------------
 1 | import * as express from "express";
 2 | import * as mustache from "mustache";
 3 | import * as path from "path";
 4 | 
 5 | import { ExamplesManager } from "./examples";
 6 | import * as Templates from "./templates";
 7 | 
 8 | 
 9 | let manager = new ExamplesManager("./examples");
10 | 
11 | let app = express();
12 | 
13 | // Override Stardust library path
14 | app.use("/common/stardust", express.static("../stardust-bundle/dist", { etag: false }));
15 | 
16 | // Server common stuff
17 | app.use("/common", express.static("./examples/common", { etag: false }));
18 | 
19 | // Get file from example
20 | async function processExample(name: string, subpath: string): Promise<[string, Buffer]> {
21 |     if (subpath == "index.html") {
22 |         let content = await manager.renderExample(name, Templates.standaloneTemplate);
23 |         return ["text/html", new Buffer(content, "utf8")];
24 |     }
25 |     if (subpath == "content.html") subpath = "index.html";
26 |     let content = await manager.getExampleFile(name, subpath);
27 |     let extension = path.extname(subpath).toLowerCase();
28 |     let extensionMap: { [name: string]: string } = {
29 |         ".html": "text/html",
30 |         ".js": "text/javascript",
31 |         ".json": "application/x-json",
32 |         ".css": "text/css",
33 |         ".png": "image/png",
34 |         ".jpeg": "image/jpeg",
35 |         ".jpg": "image/jpeg"
36 |     };
37 |     return [extensionMap[extension] || "text/plain", content];
38 | }
39 | 
40 | app.get('/:example', function (req, res) {
41 |     processExample(req.params.example, "index.html").then(([contentType, content]) => {
42 |         res.contentType(contentType);
43 |         res.end(content, "binary");
44 |     }).catch((err) => {
45 |         console.log(err);
46 |         res.send("internal server error");
47 |     });
48 | });
49 | 
50 | app.get('/:example/:filename', function (req, res) {
51 |     processExample(req.params.example, req.params.filename).then(([contentType, content]) => {
52 |         res.contentType(contentType);
53 |         res.end(content, "binary");
54 |     }).catch((err) => {
55 |         console.log(err);
56 |         res.send("internal server error");
57 |     });
58 | });
59 | 
60 | app.get("/", (req, res) => {
61 |     manager.listExamples().then((x) => {
62 |         res.send(mustache.render(Templates.indexTemplate, { examples: x }));
63 |     });
64 | });
65 | 
66 | 
67 | app.listen(4000, "0.0.0.0");
68 | 


--------------------------------------------------------------------------------
/server/src/static.ts:
--------------------------------------------------------------------------------
 1 | import { ExamplesManager } from "./examples";
 2 | import * as Templates from "./templates";
 3 | import * as path from "path";
 4 | import * as rimraf from "rimraf";
 5 | import * as mkdirp from "mkdirp";
 6 | import * as fs from "fs";
 7 | 
 8 | let manager = new ExamplesManager("./examples");
 9 | 
10 | async function renderExamples(destination: string) {
11 |     let examples = await manager.listExamples();
12 |     for(let example of examples) {
13 |         let files = await manager.listExampleFiles(example.name);
14 |         let outdir = path.join(destination, example.name);
15 |         await new Promise((resolve, reject) => {
16 |             rimraf(outdir, (error) => {
17 |                 resolve();
18 |             });
19 |         })
20 |         mkdirp.sync(outdir);
21 |         for(let f of files) {
22 |             if(f == "README.md") continue;
23 |             let contents = await manager.getExampleFile(example.name, f, example);
24 |             console.log(example.name, f, contents.length);
25 |             if(f == "index.html") f = "content.html";
26 |             fs.writeFileSync(path.join(outdir, f), contents);
27 |         }
28 |         let index = await manager.renderExample(example.name, Templates.jekyllTemplate);
29 |         fs.writeFileSync(path.join(outdir, "index.html"), new Buffer(index, "utf8"));
30 |     }
31 | }
32 | 
33 | renderExamples("../stardustjs.github.io/examples");


--------------------------------------------------------------------------------
/server/src/templates.ts:
--------------------------------------------------------------------------------
 1 | export let indexTemplate = `<!DOCTYPE html>
 2 | <link rel="stylesheet" href="https://stardustjs.github.io/css/main.css" crossorigin="anonymous">
 3 | <style type="text/css">
 4 | #container {
 5 |     width: 960px;
 6 |     margin: 10px auto;
 7 | }
 8 | .examples li {
 9 |     height: 168px;
10 | }
11 | </style>
12 | <div id="container">
13 | <h1>Stardust Examples - Development Version</h1>
14 | <ul class="examples group">
15 |     {{#examples}}
16 |     <li>
17 |         <a href="{{name}}/">
18 |             <img src="{{name}}/preview.png" />
19 |             <div class="overlay"><span>{{description}}</span></div>
20 |         </a>
21 |     </li>
22 |     {{/examples}}
23 | </ul>
24 | </div>`;
25 | 
26 | export let jekyllTemplate = `---
27 | layout: default
28 | title: "{{description}}"
29 | ---
30 | <h1>{{description}}</h1>
31 | <iframe class="example-container" src="content.html" width="960px" height="500px" scrolling="no" sandbox="allow-popups allow-scripts allow-forms allow-same-origin"></iframe>
32 | {{{content}}}
33 | {{#files}}
34 | <h2>{{filename}}</h2>
35 | <pre><code class="highlight {{language}}">{{code}}</code></pre>
36 | {{/files}}
37 | `
38 | 
39 | export let standaloneTemplate = `<!DOCTYPE html>
40 | <link rel="stylesheet" href="https://stardustjs.github.io/css/main.css" crossorigin="anonymous">
41 | <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-light.min.css">
42 | <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
43 | <style type="text/css">
44 | #container {
45 |     width: 960px;
46 |     margin: 10px auto;
47 | }
48 | iframe {
49 |     border: none;
50 |     outline: 1px solid #d1d1d1
51 | }
52 | </style>
53 | <div id="container">
54 | <p><a href="/">Back</a></p>
55 | <h1>{{description}}</h1>
56 | <iframe class="example-container" src="content.html" width="960px" height="500px" scrolling="no" sandbox="allow-popups allow-scripts allow-forms allow-same-origin"></iframe>
57 | {{{content}}}
58 | {{#files}}
59 | <h2>{{filename}}</h2>
60 | <pre><code class="highlight {{language}}">{{code}}</code></pre>
61 | {{/files}}
62 | </div>
63 | <script>hljs.initHighlightingOnLoad();</script>
64 | 
65 | `


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "module": "commonjs",
 4 |         "moduleResolution": "node",
 5 |         "target": "es6",
 6 |         "rootDir": "./src",
 7 |         "outDir": "./dist",
 8 |         "noImplicitAny": true
 9 |     }
10 | }


--------------------------------------------------------------------------------