Old school D3 from simpler times

All examples By author By category About

mattborn

Full window Github gist

Bambu Prototype

Prototype Template

To serve, npm i -g live-server, then live-server --port=1111 from this directory and open localhost:1111 in your browser.

In a separate Terminal window, run ./watch to compile .jsx files into .js with babel.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <script src="typekit.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="render-point"></div>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script>
      System.config({
        baseURL: '.',
        transpiler: 'babel',
        babelOptions: {
          optional: [
            'runtime'
          ],
          blacklist: []
        },
        map: {
          'lodash': 'npm:lodash-node@3.10.1',
          'moment': 'npm:moment',
          'pure-render-mixin': 'npm:react-addons-pure-render-mixin',
          'radium': 'npm:radium@0.14.1',
          'react': 'npm:react@0.14.0',
          'react-dom': 'npm:react-dom@0.14.0',
          'tinycolor': 'github:bgrins/TinyColor',
        },
        paths: {
          '*': '*.js'
        }
      });
      System.import('Main');
    </script>
  </body>
</html>

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <script src="typekit.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="render-point"></div>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script>
      System.config({
        baseURL: '.',
        transpiler: 'babel',
        babelOptions: {
          optional: [
            'runtime'
          ],
          blacklist: []
        },
        map: {
          'lodash': 'npm:lodash-node@3.10.1',
          'moment': 'npm:moment',
          'pure-render-mixin': 'npm:react-addons-pure-render-mixin',
          'radium': 'npm:radium@0.14.1',
          'react': 'npm:react@0.14.0',
          'react-dom': 'npm:react-dom@0.14.0',
          'tinycolor': 'github:bgrins/TinyColor',
        },
        paths: {
          '*': '*.js'
        }
      });
      System.import('Main');
    </script>
  </body>
</html>
    

https://jspm.io/system@0.16.js