'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: 'jsx-160753959' + ' ' + 'home',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 7
    }
  }, _react2.default.createElement('div', {
    className: 'jsx-160753959' + ' ' + 'hero',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 8
    }
  }, _react2.default.createElement('h1', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 9
    }
  }, 'React + D3 = VX'), _react2.default.createElement('div', {
    className: 'jsx-160753959' + ' ' + 'btn-container',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 10
    }
  }, _react2.default.createElement('a', { href: 'https://github.com/hshoff/vx', className: 'jsx-160753959' + ' ' + 'btn',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 11
    }
  }, 'View on Github'))), _react2.default.createElement('div', {
    className: 'jsx-160753959' + ' ' + 'container',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 16
    }
  }, _react2.default.createElement('div', {
    className: 'jsx-160753959' + ' ' + 'content',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 17
    }
  }, _react2.default.createElement('p', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 18
    }
  }, _react2.default.createElement('code', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 19
    }
  }, 'vx'), ' is collection of reusable low-level visualization components.', ' ', _react2.default.createElement('code', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 20
    }
  }, 'vx'), ' combines the power of ', _react2.default.createElement('code', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 20
    }
  }, 'd3'), ' to generate your visualization with the benefits of ', _react2.default.createElement('code', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 21
    }
  }, 'react'), ' for updating the DOM.')), _react2.default.createElement('div', {
    className: 'jsx-160753959' + ' ' + 'content',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 24
    }
  }, _react2.default.createElement('h3', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 25
    }
  }, 'Goal'), _react2.default.createElement('p', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 26
    }
  }, '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', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 28
    }
  }, '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: 'jsx-160753959' + ' ' + 'content',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 33
    }
  }, _react2.default.createElement('h3', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 34
    }
  }, 'How?'), _react2.default.createElement('p', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 35
    }
  }, 'Under the hood, ', _react2.default.createElement('code', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 36
    }
  }, 'vx'), ' is using ', _react2.default.createElement('code', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 36
    }
  }, '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', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 38
    }
  }, 'd3'), ' entirely. Meaning your team could create charts as easily as using reusable react components.')), _react2.default.createElement('div', {
    className: 'jsx-160753959' + ' ' + 'content',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 42
    }
  }, _react2.default.createElement('h3', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 43
    }
  }, 'But why?'), _react2.default.createElement('p', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 44
    }
  }, 'Mixing two mental models for updating the DOM is never a good time. Copy and pasting d3 code into ', _react2.default.createElement('code', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 46
    }
  }, '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', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 48
    }
  }, 'enter()'), '/', _react2.default.createElement('code', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 48
    }
  }, 'exit()'), '/', _react2.default.createElement('code', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 48
    }
  }, 'update()'), '.')), _react2.default.createElement('div', {
    className: 'jsx-160753959' + ' ' + 'content',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 53
    }
  }, _react2.default.createElement('h3', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 54
    }
  }, 'FAQ'), _react2.default.createElement('ol', {
    className: 'jsx-160753959' + ' ' + 'faq',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 55
    }
  }, _react2.default.createElement('li', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 56
    }
  }, _react2.default.createElement('p', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 57
    }
  }, 'What does ', _react2.default.createElement('code', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 58
    }
  }, 'vx'), ' stand for?'), _react2.default.createElement('blockquote', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 60
    }
  }, _react2.default.createElement('p', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 61
    }
  }, 'vx stands for visualization components.'))), _react2.default.createElement('li', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 64
    }
  }, _react2.default.createElement('p', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 65
    }
  }, 'Do you plan on supporting animation/transitions?'), _react2.default.createElement('blockquote', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 66
    }
  }, _react2.default.createElement('p', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 67
    }
  }, 'yup!'))), _react2.default.createElement('li', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 70
    }
  }, _react2.default.createElement('p', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 71
    }
  }, 'Do I have to use every package to make a chart?'), _react2.default.createElement('blockquote', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 72
    }
  }, _react2.default.createElement('p', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 73
    }
  }, 'nope! pick and choose the packages you need.'))), _react2.default.createElement('li', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 76
    }
  }, _react2.default.createElement('p', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 77
    }
  }, 'Can I use this to create my own library of charts for my team?'), _react2.default.createElement('blockquote', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 78
    }
  }, _react2.default.createElement('p', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 79
    }
  }, 'Please do.'))), _react2.default.createElement('li', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 82
    }
  }, _react2.default.createElement('p', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 83
    }
  }, 'I like using ', _react2.default.createElement('code', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 84
    }
  }, 'd3'), '.'), _react2.default.createElement('blockquote', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 86
    }
  }, _react2.default.createElement('p', {
    className: 'jsx-160753959',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 87
    }
  }, 'Me too.')))))), _react2.default.createElement(_footer2.default, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 93
    }
  })), _react2.default.createElement(_style2.default, {
    styleId: '160753959',
    css: '.btn.jsx-160753959{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.jsx-160753959{margin-top:8rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.home.jsx-160753959{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:white;padding:1rem;}.home.jsx-160753959 h1.jsx-160753959{font-family:\'Montserrat\';color:#fc2e1c;font-size:95pt;line-height:1em;margin:0;padding:0;opacity:0.9;margin-top:130px;-webkit-letter-spacing:20px;-moz-letter-spacing:20px;-ms-letter-spacing:20px;letter-spacing:20px;text-transform:uppercase;text-align:center;}.hero.jsx-160753959{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-direction:column;-ms-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.jsx-160753959{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.content.jsx-160753959{max-width:640px;min-width:640px;margin:1rem auto 0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.content.jsx-160753959 h3.jsx-160753959{margin-bottom:0;}blockquote.jsx-160753959{border-left:2px solid #efefef;padding:0.5rem 1rem;color:#777;}blockquote.jsx-160753959 p.jsx-160753959{margin:0;}.faq.jsx-160753959{min-width:640px;}@media (max-width:600px){.hero.jsx-160753959 h1.jsx-160753959{font-size:35pt;margin-top:40px;padding:0;}.btn.jsx-160753959{font-size:12px;padding:4px 20px;margin-top:2rem;}.hero.jsx-160753959{height:50vh;background-size:90%;margin-bottom:1rem;}.content.jsx-160753959,.faq.jsx-160753959{min-width:300px;}}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,  */\n/*@ sourceURL=pages/home.js */'
  }));
};
//# sourceMappingURL=data:application/json;charset=utf-8;base64, 