'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: 'home', 'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 7
    }
  }, _react2.default.createElement('div', { className: 'hero', 'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 8
    }
  }, _react2.default.createElement('h1', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 9
    }
  }, 'React + D3 = VX'), _react2.default.createElement('div', { className: 'btn-container', 'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 10
    }
  }, _react2.default.createElement('a', { className: 'btn', href: 'https://github.com/hshoff/vx', 'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 11
    }
  }, 'View on Github'))), _react2.default.createElement('div', { className: 'container', 'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 16
    }
  }, _react2.default.createElement('div', { className: 'content', 'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 17
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 18
    }
  }, _react2.default.createElement('code', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 19
    }
  }, 'vx'), ' is collection of reusable low-level visualization components. ', _react2.default.createElement('code', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 20
    }
  }, 'vx'), ' combines the power of ', _react2.default.createElement('code', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 21
    }
  }, 'd3'), ' to generate your visualization with the benefits of ', _react2.default.createElement('code', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 22
    }
  }, 'react'), ' for updating the DOM.')), _react2.default.createElement('div', { className: 'content', 'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 26
    }
  }, _react2.default.createElement('h3', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 27
    }
  }, 'Goal'), _react2.default.createElement('p', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 28
    }
  }, 'The goal is to create a library of components you can use to make both your own reusable chart library or your slick custom one-off chart. ', _react2.default.createElement('code', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 31
    }
  }, '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', { className: 'content', 'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 36
    }
  }, _react2.default.createElement('h3', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 37
    }
  }, 'How?'), _react2.default.createElement('p', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 38
    }
  }, 'Under the hood, ', _react2.default.createElement('code', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 39
    }
  }, 'vx'), ' is using ', _react2.default.createElement('code', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 39
    }
  }, 'd3'), ' ', 'for the calculations and math. If you\'re creating your own awesome chart library ontop of vx, it\'s easy to create a component api that hides ', _react2.default.createElement('code', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 42
    }
  }, 'd3'), ' entirely. Meaning your team could create charts as easily as using reusable react components.')), _react2.default.createElement('div', { className: 'content', 'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 47
    }
  }, _react2.default.createElement('h3', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 48
    }
  }, 'But why?'), _react2.default.createElement('p', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 49
    }
  }, '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': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 52
    }
  }, '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': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 55
    }
  }, 'enter()'), '/', _react2.default.createElement('code', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 55
    }
  }, 'exit()'), '/', _react2.default.createElement('code', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 55
    }
  }, 'update()'), '.')), _react2.default.createElement('div', { className: 'content', 'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 58
    }
  }, _react2.default.createElement('h3', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 59
    }
  }, 'FAQ'), _react2.default.createElement('ol', { className: 'faq', 'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 60
    }
  }, _react2.default.createElement('li', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 61
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 62
    }
  }, 'What does ', _react2.default.createElement('code', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 63
    }
  }, 'vx'), ' stand for?'), _react2.default.createElement('blockquote', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 65
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 66
    }
  }, 'vx stands for visualization components.'))), _react2.default.createElement('li', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 69
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 70
    }
  }, 'Do you plan on supporting animation/transitions?'), _react2.default.createElement('blockquote', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 71
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 72
    }
  }, 'yup!'))), _react2.default.createElement('li', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 75
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 76
    }
  }, 'Do I have to use every package to make a chart?'), _react2.default.createElement('blockquote', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 77
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 78
    }
  }, 'nope! pick and choose the packages you need.'))), _react2.default.createElement('li', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 81
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 82
    }
  }, 'Can I use this to create my own library of charts for my team?'), _react2.default.createElement('blockquote', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 86
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 87
    }
  }, 'Please do.'))), _react2.default.createElement('li', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 90
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 91
    }
  }, 'I like using ', _react2.default.createElement('code', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 92
    }
  }, 'd3'), '.'), _react2.default.createElement('blockquote', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 94
    }
  }, _react2.default.createElement('p', {
    'data-jsx': 3400825439,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 95
    }
  }, 'Me too.')))))), _react2.default.createElement(_footer2.default, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 101
    }
  })), _react2.default.createElement(_style2.default, {
    styleId: 3400825439,
    css: '.btn[data-jsx="3400825439"] {padding: 8px 20px;background-color: #fc2e1c;border-radius: 30px;border-top-right-radius: 0;color: #ffffff;font-family: \'Montserrat\';text-transform: uppercase;margin-right: 1rem;}.btn-container[data-jsx="3400825439"] {margin-top: 8rem;display:-webkit-flex; display:flex;-webkit-flex-direction: row;-moz-flex-direction: row;flex-direction: row;align-items: center;justify-content: center;}.home[data-jsx="3400825439"] {display:-webkit-flex; display:flex;-webkit-flex-direction: column;-moz-flex-direction: column;flex-direction: column;background: white;padding: 1rem;border-bottom: 1rem solid #fc2e1c;}.home[data-jsx="3400825439"] h1[data-jsx="3400825439"] {font-family: \'Montserrat\';color: #fc2e1c;font-size: 95pt;line-height: 1em;margin: 0;padding: 0;opacity: 0.9;margin-top: 130px;letter-spacing: 20px;text-transform: uppercase;text-align: center;}.hero[data-jsx="3400825439"] {display:-webkit-flex; display:flex;align-items: center;justify-content: center;-webkit-flex-direction: column;-moz-flex-direction: column;flex-direction: column;min-height: 60vh;background-size: 50%;background-repeat: no-repeat;background-position: center;background-image: url(\'static/tiger-gray.png\');margin-bottom: 1rem;}.container[data-jsx="3400825439"] {display:-webkit-flex; display:flex;align-items: center;-webkit-flex-direction: column;-moz-flex-direction: column;flex-direction: column;}.content[data-jsx="3400825439"] {max-width: 640px;min-width: 640px;margin: 1rem auto 0;display:-webkit-flex; display:flex;-webkit-flex-direction: column;-moz-flex-direction: column;flex-direction: column;}.content[data-jsx="3400825439"] h3[data-jsx="3400825439"] {margin-bottom: 0;}blockquote[data-jsx="3400825439"] {border-left: 2px solid #efefef;padding: 0.5rem 1rem;color: #777;}blockquote[data-jsx="3400825439"] p[data-jsx="3400825439"] {margin: 0;}.faq[data-jsx="3400825439"] {min-width: 640px;}@media (max-width: 600px) {.hero[data-jsx="3400825439"] h1[data-jsx="3400825439"] {font-size: 35pt;margin-top: 40px;padding: 0;}.btn[data-jsx="3400825439"] {font-size: 12px;padding: 4px 20px;margin-top: 2rem;}.hero[data-jsx="3400825439"] {height: 50vh;background-size: 90%;margin-bottom: 1rem;}.content[data-jsx="3400825439"],.faq[data-jsx="3400825439"] {min-width: 300px;}}\n/*# sourceMappingURL=data:application/json;base64,  */\n/*@ sourceURL=pages/home.js */'
  }));
};