'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _style = require('styled-jsx/style.js');

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _page = require('../components/page');

var _page2 = _interopRequireDefault(_page);

var _footer = require('../components/footer');

var _footer2 = _interopRequireDefault(_footer);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _jsxFileName = '/Users/hshoff/code/vx/packages/vx-demo/pages/home.js';

exports.default = function () {
  return _react2.default.createElement(_page2.default, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 6
    }
  }, _react2.default.createElement('div', { className: 'page-left', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 7
    }
  }, _react2.default.createElement('h2', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 8
    }
  }, _react2.default.createElement('a', { name: 'about', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 8
    }
  }), 'About'), _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 9
    }
  }, _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 10
    }
  }, 'vx'), ' is collection of reusable low-level visualization components. ', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 10
    }
  }, 'vx'), ' combines the power of ', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 10
    }
  }, 'd3'), ' to generate your visualization with the benefits of ', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 10
    }
  }, 'react'), ' for updating the DOM.'), _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 12
    }
  }, _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 12
    }
  }, 'react + d3 = vx')), _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 13
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 13
    }
  }, 'github.com/hshoff/vx')), _react2.default.createElement('h2', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 14
    }
  }, _react2.default.createElement('a', { name: 'motivation', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 14
    }
  }), 'Motivation'), _react2.default.createElement('div', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 15
    }
  }, _react2.default.createElement('strong', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 15
    }
  }, 'Goal')), _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 16
    }
  }, 'The goal is to create a library of components you can use to make both your own resuable chart library or your slick custom one-off chart. ', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 16
    }
  }, 'vx'), ' is largely unopinionated and is meant to be build on top of. Keep your bundle sizes down and use only the packages you need.'), _react2.default.createElement('div', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 17
    }
  }, _react2.default.createElement('strong', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 17
    }
  }, 'How?')), _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 18
    }
  }, 'Under the hood, ', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 18
    }
  }, 'vx'), ' is using ', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 18
    }
  }, 'd3'), ' for the calculations and math. If you\'re creating your own awesome chart library ontop of ', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 18
    }
  }, 'vx'), ', it\'s easy to create a component api that hides ', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 18
    }
  }, 'd3'), ' entirely. Meaning your team could create charts as easily as using reusable react components.'), _react2.default.createElement('div', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 19
    }
  }, _react2.default.createElement('strong', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 19
    }
  }, 'But why?')), _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 20
    }
  }, 'Mixing two mental models for updating the DOM is never a good time. Copy and pasting d3 code into ', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 20
    }
  }, 'componentDidMount()'), ' is just that. This collection of components lets you easily build your own reusable visualization charts or library without having to learn d3. No more selections or ', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 20
    }
  }, 'enter()'), '/', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 20
    }
  }, 'exit()'), '/', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 20
    }
  }, 'update()'), '.'), _react2.default.createElement('h2', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 21
    }
  }, _react2.default.createElement('a', { name: 'status', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 21
    }
  }), 'Status'), _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 22
    }
  }, _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 23
    }
  }, 'Super beta'), ' Hold off on using this in production until I shake out some of the bigger API problems (post v1.0.0+).'), _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 25
    }
  }, 'If you\'re a curious coder, feel free to install and play around with the packages. I recommend using ', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 26
    }
  }, '--save-exact'), ' when you ', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 26
    }
  }, 'npm install'), '.'), _react2.default.createElement('h2', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 28
    }
  }, _react2.default.createElement('a', { name: 'packages', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 28
    }
  }), 'Packages'), _react2.default.createElement('ul', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 29
    }
  }, _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 30
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/tree/master/packages/vx-annotation', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 30
    }
  }, '@vx/annotation')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 31
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/tree/master/packages/vx-axis', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 31
    }
  }, '@vx/axis')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 32
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/tree/master/packages/vx-curve', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 32
    }
  }, '@vx/curve')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 33
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/tree/master/packages/vx-demo', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 33
    }
  }, '@vx/demo')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 34
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/tree/master/packages/vx-glyph', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 34
    }
  }, '@vx/glyph')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 35
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/tree/master/packages/vx-grid', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 35
    }
  }, '@vx/grid')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 36
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/tree/master/packages/vx-group', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 36
    }
  }, '@vx/group')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 37
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/tree/master/packages/vx-marker', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 37
    }
  }, '@vx/marker')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 38
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/tree/master/packages/vx-mock-data', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 38
    }
  }, '@vx/mock-data')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 39
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/tree/master/packages/vx-point', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 39
    }
  }, '@vx/point')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 40
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/tree/master/packages/vx-responsive', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 40
    }
  }, '@vx/responsive')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 41
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/tree/master/packages/vx-scale', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 41
    }
  }, '@vx/scale')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 42
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/tree/master/packages/vx-shape', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 42
    }
  }, '@vx/shape')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 43
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/tree/master/packages/vx-text', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 43
    }
  }, '@vx/text'))), _react2.default.createElement('h2', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 46
    }
  }, _react2.default.createElement('a', { name: 'roadmap', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 46
    }
  }), 'Roadmap'), _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 47
    }
  }, 'Lots coming soon, check out the ', _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx/blob/master/ROADMAP.md', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 47
    }
  }, 'roadmap'), '.'), _react2.default.createElement('h2', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 49
    }
  }, _react2.default.createElement('a', { name: 'faq', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 49
    }
  }), 'FAQ'), _react2.default.createElement('ol', { className: 'faq', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 50
    }
  }, _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 51
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 52
    }
  }, 'What does ', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 52
    }
  }, 'vx'), ' stand for?'), _react2.default.createElement('blockquote', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 53
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 54
    }
  }, 'vx stands for visualization components.'))), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 57
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 58
    }
  }, 'Do you plan on supporting animation/transitions?'), _react2.default.createElement('blockquote', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 59
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 60
    }
  }, 'yup!'))), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 63
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 64
    }
  }, 'Do I have to use every package to make a chart?'), _react2.default.createElement('blockquote', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 65
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 66
    }
  }, 'nope! pick and choose the packages you need.'))), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 69
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 70
    }
  }, 'Can I use this to create my own library of charts for my team?'), _react2.default.createElement('blockquote', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 71
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 72
    }
  }, 'Please do.'))), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 75
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 76
    }
  }, 'I like using ', _react2.default.createElement('code', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 76
    }
  }, 'd3'), '.'), _react2.default.createElement('blockquote', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 77
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 78
    }
  }, 'Me too.')))), _react2.default.createElement(_footer2.default, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 82
    }
  })), _react2.default.createElement('div', { className: 'page-right', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 84
    }
  }, _react2.default.createElement('ul', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 85
    }
  }, _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 86
    }
  }, _react2.default.createElement('a', { href: '#about', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 86
    }
  }, 'About')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 87
    }
  }, _react2.default.createElement('a', { href: '#motivation', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 87
    }
  }, 'Motivation')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 88
    }
  }, _react2.default.createElement('a', { href: '#status', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 88
    }
  }, 'Status')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 89
    }
  }, _react2.default.createElement('a', { href: '#packages', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 89
    }
  }, 'Packages')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 90
    }
  }, _react2.default.createElement('a', { href: '#roadmap', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 90
    }
  }, 'Roadmap')), _react2.default.createElement('li', {
    'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 91
    }
  }, _react2.default.createElement('a', { href: '#faq', 'data-jsx': 3046986382,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 91
    }
  }, 'FAQ')))), _react2.default.createElement(_style2.default, {
    styleId: 3046986382,
    css: '.page-left[data-jsx="3046986382"] blockquote[data-jsx="3046986382"] {border-left: 2px solid #efefef;padding: .5rem 1rem;color: #777;}.page-left[data-jsx="3046986382"] blockquote[data-jsx="3046986382"] p[data-jsx="3046986382"] {margin: 0;}.page-right[data-jsx="3046986382"] > ul[data-jsx="3046986382"] {display:-webkit-flex; display:flex;-webkit-flex-direction: column;-moz-flex-direction: column;flex-direction: column;-webkit-flex: 1;-moz-flex: 1;flex: 1;position: fixed;font-family: \'Karla\';color: #000;margin-left: 3vw;}.faq[data-jsx="3046986382"] {margin-bottom: 10vh;}@media (max-width: 600px) {.page-left[data-jsx="3046986382"] {margin-top: 10px;}.page-right[data-jsx="3046986382"] {opacity: 0;margin-top: 0;padding: 0;}}\n/*# sourceMappingURL=data:application/json;base64,  */\n/*@ sourceURL=pages/home.js */'
  }));
};