特征提取

分类／聚类

可视化

画什么

用什么工具
怎么上色

画什么

Shipmap

挑一个画板 (Map)

挑一个画笔 (Interface)

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序
• 复杂度高会减慢渲染速度（DOM）
• 不适合游戏应用

Canvas (2D/3D)

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

MapD

Open Source GPU Database and Visualization Platform for Real-Time Analytics.

* https://www.mapd.com/

怎么上色（计算）？

A tool for making JavaScript code run faster.

Hello World

// input

(function () {
  function hello() { return 'hello'; }
  function world() { return 'world'; }
  global.s = hello() + ' ' + world();
})();

// output

(function () {
  s = "hello world";
})();

Elimination of abstraction tax

// input

(function () {
  var self = this;
  ['A', 'B', 42].forEach(function(x) {
    var name = '_' 
        + x.toString()[0].toLowerCase();
    var y = parseInt(x);
    self[name] = y ? y : x;
  });
})();

// output

(function () {
  _a = "A";
  _b = "B";
  _4 = 42;
})();

Fibonacci

// input

(function () {
  function fibonacci(x) {
    return x <= 1 ? 
      x : fibonacci(x - 1) + fibonacci(x - 2);
  }
  global.x = fibonacci(23);
})();

// output

(function () {
  x = 28657;
})();

Module Initialization

// input

(function () {
  let moduleTable = {};
  function define(id, f) { moduleTable[id] = f; }
  function require(id) {
    let x = moduleTable[id];
    return x instanceof Function ? 
        (moduleTable[id] = x()) : x;
  }
  global.require = require;
  define("one", function() { return 1; });
  define("two", function() { 
    return require("one") + require("one"); 
  });
  define("three", function() { 
    return require("two") + require("one"); 
  });
  define("four", function() { 
    return require("three") + require("one"); 
  });
})();
three = require("three");

// output

(function () {
  function _2() {
    return 3 + 1;
  }

  var _1 = {
    one: 1,
    two: 2,
    three: 3,
    four: _2
  };

  function _0(id) {
    let x = _1[id];
    return x instanceof Function ? 
        _1[id] = x() : x;
  }

  require = _0;
  three = 3;
})();

Environment Interactions and Branching

// input

(function(){
  function fib(x) { 
    return x <= 1 ? 
      x : fib(x - 1) + fib(x - 2); 
  }
  let x = Date.now();
  if (x === 0) x = fib(10);
  global.result = x;
})();

// output

(function () {
  var _0 = Date.now();
  if (typeof _0 !== "number") {
    throw new Error(
        "Prepack model invariant violation"
    );
  }
  result = _0 === 0 ? 55 : _0;
})();

How does it work?

• Abstract Syntax Tree(AST)
• Concrete Execution
• Symbolic Execution
• Abstract Interpretation
• Heap Serialization

试一试