'use strict';

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

var _set = require('babel-runtime/core-js/set');

var _set2 = _interopRequireDefault(_set);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

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

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactTilt = require('react-tilt');

var _reactTilt2 = _interopRequireDefault(_reactTilt);

var _link = require('next/dist/lib/link.js');

var _link2 = _interopRequireDefault(_link);

var _d3Array = require('d3-array');

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

var _page2 = _interopRequireDefault(_page);

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

var _footer2 = _interopRequireDefault(_footer);

var _lines = require('../components/tiles/lines');

var _lines2 = _interopRequireDefault(_lines);

var _bars = require('../components/tiles/bars');

var _bars2 = _interopRequireDefault(_bars);

var _dots = require('../components/tiles/dots');

var _dots2 = _interopRequireDefault(_dots);

var _patterns = require('../components/tiles/patterns');

var _patterns2 = _interopRequireDefault(_patterns);

var _gradients = require('../components/tiles/gradients');

var _gradients2 = _interopRequireDefault(_gradients);

var _area = require('../components/tiles/area');

var _area2 = _interopRequireDefault(_area);

var _stacked = require('../components/tiles/stacked');

var _stacked2 = _interopRequireDefault(_stacked);

var _multiline = require('../components/tiles/multiline');

var _multiline2 = _interopRequireDefault(_multiline);

var _axis = require('../components/tiles/axis');

var _axis2 = _interopRequireDefault(_axis);

var _bargroup = require('../components/tiles/bargroup');

var _bargroup2 = _interopRequireDefault(_bargroup);

var _barstack = require('../components/tiles/barstack');

var _barstack2 = _interopRequireDefault(_barstack);

var _heatmap = require('../components/tiles/heatmap');

var _heatmap2 = _interopRequireDefault(_heatmap);

var _lineradial = require('../components/tiles/lineradial');

var _lineradial2 = _interopRequireDefault(_lineradial);

var _arc = require('../components/tiles/arc');

var _arc2 = _interopRequireDefault(_arc);

var _tree = require('../components/tiles/tree');

var _tree2 = _interopRequireDefault(_tree);

var _dendrogram = require('../components/tiles/dendrogram');

var _dendrogram2 = _interopRequireDefault(_dendrogram);

var _voronoi = require('../components/tiles/voronoi');

var _voronoi2 = _interopRequireDefault(_voronoi);

var _legends = require('../components/tiles/legends');

var _legends2 = _interopRequireDefault(_legends);

var _boxplot = require('../components/tiles/boxplot');

var _boxplot2 = _interopRequireDefault(_boxplot);

var _geoMercator = require('../components/tiles/geo-mercator');

var _geoMercator2 = _interopRequireDefault(_geoMercator);

var _network = require('../components/tiles/network');

var _network2 = _interopRequireDefault(_network);

var _streamgraph = require('../components/tiles/streamgraph');

var _streamgraph2 = _interopRequireDefault(_streamgraph);

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

var _jsxFileName = '/Users/hshoff/code/vx/packages/vx-demo/components/gallery.js';


var items = ['#242424', '#c3dae8', '#ef5843', '#f5f2e3', '#f6c431', '#32deaa', 'rgba(243, 129, 129, 1.000)', '#00f2ff', '#f4419f', '#3130e3', '#12122e', '#ff657c'];

var Gallery = function (_React$Component) {
  (0, _inherits3.default)(Gallery, _React$Component);

  function Gallery() {
    (0, _classCallCheck3.default)(this, Gallery);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Gallery.__proto__ || (0, _getPrototypeOf2.default)(Gallery)).call(this));

    _this.nodes = new _set2.default();
    _this.state = { dimensions: [] };
    _this.resize = _this.resize.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(Gallery, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      window.addEventListener('resize', this.resize, false);
      setTimeout(function () {
        _this2.resize();
      }, 1);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      window.removeEventListener('resize', this.resize);
    }
  }, {
    key: 'resize',
    value: function resize() {
      var newState = [];
      this.nodes.forEach(function (node) {
        if (!node) return;
        newState.push([node.offsetWidth, node.clientHeight]);
      });
      this.setState({ dimensions: newState });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var t1 = this.state.dimensions[0] || [8, 300];
      var t2 = this.state.dimensions[1] || [8, 300];
      var t3 = this.state.dimensions[2] || [8, 300];
      var t4 = this.state.dimensions[3] || [8, 300];
      var t5 = this.state.dimensions[4] || [8, 300];
      var t6 = this.state.dimensions[5] || [8, 300];
      var t7 = this.state.dimensions[6] || [8, 300];
      var t8 = this.state.dimensions[7] || [8, 300];
      var t9 = this.state.dimensions[8] || [8, 300];
      var t10 = this.state.dimensions[9] || [8, 300];
      var t11 = this.state.dimensions[10] || [8, 300];
      var t12 = this.state.dimensions[11] || [8, 300];
      var t13 = this.state.dimensions[12] || [8, 300];
      var t14 = this.state.dimensions[13] || [8, 300];
      var t15 = this.state.dimensions[14] || [8, 300];
      var t16 = this.state.dimensions[15] || [8, 300];
      var t17 = this.state.dimensions[16] || [8, 300];
      var t18 = this.state.dimensions[17] || [8, 300];
      var t19 = this.state.dimensions[18] || [8, 300];
      var t20 = this.state.dimensions[19] || [8, 300];

      return _react2.default.createElement('div', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 98
        }
      }, _react2.default.createElement('div', { className: 'gallery', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 99
        }
      }, _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 100
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/lines', __source: {
          fileName: _jsxFileName,
          lineNumber: 101
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: items[0] },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 102
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 107
        }
      }, _react2.default.createElement(_lines2.default, { width: t1[0], height: t1[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 108
        }
      })), _react2.default.createElement('div', { className: 'details', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 110
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 111
        }
      }, 'Lines'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 112
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 113
        }
      }, '<Shape.Line />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 119
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/bars', __source: {
          fileName: _jsxFileName,
          lineNumber: 120
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: items[1] },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 121
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 126
        }
      }, _react2.default.createElement(_bars2.default, { width: t2[0], height: t2[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 127
        }
      })), _react2.default.createElement('div', { className: 'details color-blue', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 129
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 130
        }
      }, 'Bars'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 131
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 132
        }
      }, '<Shape.Bar />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 138
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/dots', __source: {
          fileName: _jsxFileName,
          lineNumber: 139
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: items[2] },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 140
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 145
        }
      }, _react2.default.createElement(_dots2.default, { width: t3[0], height: t3[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 146
        }
      })), _react2.default.createElement('div', {
        className: 'details color-yellow',
        style: { zIndex: 1 },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 148
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 152
        }
      }, 'Dots'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 153
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 154
        }
      }, '<Glyph.GlyphCircle />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 160
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/patterns', __source: {
          fileName: _jsxFileName,
          lineNumber: 161
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: items[3] },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 162
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 167
        }
      }, _react2.default.createElement(_patterns2.default, { width: t4[0], height: t4[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 168
        }
      })), _react2.default.createElement('div', { className: 'details color-gray', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 170
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 171
        }
      }, 'Patterns'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 172
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 173
        }
      }, '<Pattern />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 179
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/areas', __source: {
          fileName: _jsxFileName,
          lineNumber: 180
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: items[5] },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 181
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 186
        }
      }, _react2.default.createElement(_area2.default, {
        width: t5[0],
        height: t5[1],
        margin: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 80
        },
        __source: {
          fileName: _jsxFileName,
          lineNumber: 187
        }
      })), _react2.default.createElement('div', { className: 'details', style: { zIndex: 1 }, 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 198
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 199
        }
      }, 'Areas'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 200
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 201
        }
      }, '<Shape.AreaClosed />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 207
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/stacked-areas', __source: {
          fileName: _jsxFileName,
          lineNumber: 208
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: items[6] },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 209
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 214
        }
      }, _react2.default.createElement(_stacked2.default, {
        width: t6[0],
        height: t6[1],
        margin: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 80
        },
        __source: {
          fileName: _jsxFileName,
          lineNumber: 215
        }
      })), _react2.default.createElement('div', {
        className: 'details',
        style: { color: 'rgba(251, 224, 137, 1.000)' },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 226
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 230
        }
      }, 'Stacked Areas'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 231
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 232
        }
      }, '<Shape.AreaStack />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 238
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/gradients', __source: {
          fileName: _jsxFileName,
          lineNumber: 239
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: {
          background: 'white',
          boxShadow: '0 1px 6px rgba(0,0,0,0.1)'
        },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 240
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 248
        }
      }, _react2.default.createElement(_gradients2.default, { width: t7[0], height: t7[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 249
        }
      })), _react2.default.createElement('div', { className: 'details color-gray', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 251
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 252
        }
      }, 'Gradients'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 253
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 254
        }
      }, '<Gradient />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 260
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/glyphs', __source: {
          fileName: _jsxFileName,
          lineNumber: 261
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: items[7] },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 262
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 267
        }
      }, _react2.default.createElement(_multiline2.default, {
        width: t8[0],
        height: t8[1],
        margin: {
          top: 10,
          left: 0,
          right: 0,
          bottom: 80
        },
        __source: {
          fileName: _jsxFileName,
          lineNumber: 268
        }
      })), _react2.default.createElement('div', {
        className: 'details',
        style: { color: 'rgba(126, 31, 220, 1.000)' },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 279
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 283
        }
      }, 'Glyphs'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 284
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 285
        }
      }, '<Glyph.GlyphDot />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 291
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/axis', __source: {
          fileName: _jsxFileName,
          lineNumber: 292
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: items[8] },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 293
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 298
        }
      }, _react2.default.createElement(_axis2.default, {
        width: t9[0],
        height: t9[1],
        margin: {
          top: 20,
          left: 60,
          right: 40,
          bottom: 120
        },
        __source: {
          fileName: _jsxFileName,
          lineNumber: 299
        }
      })), _react2.default.createElement('div', { className: 'details', style: { color: '#8e205f' }, 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 310
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 311
        }
      }, 'Axis'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 312
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 313
        }
      }, '<Axis.AxisLeft /> + <Axis.AxisBottom />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 320
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/bargroup', __source: {
          fileName: _jsxFileName,
          lineNumber: 321
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: '#612efb' },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 322
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 327
        }
      }, _react2.default.createElement(_bargroup2.default, { width: t10[0], height: t10[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 328
        }
      })), _react2.default.createElement('div', { className: 'details', style: { color: '#e5fd3d' }, 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 330
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 331
        }
      }, 'Bar Group'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 332
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 333
        }
      }, '<Shape.BarGroup />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 339
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/barstack', __source: {
          fileName: _jsxFileName,
          lineNumber: 340
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: '#eaedff' },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 341
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 346
        }
      }, _react2.default.createElement(_barstack2.default, { width: t11[0], height: t11[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 347
        }
      })), _react2.default.createElement('div', {
        className: 'details',
        style: { color: '#a44afe', zIndex: 1 },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 349
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 353
        }
      }, 'Bar Stack'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 354
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 355
        }
      }, '<Shape.BarStack />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 361
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/heatmaps', __source: {
          fileName: _jsxFileName,
          lineNumber: 362
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: '#28272c' },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 363
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 368
        }
      }, _react2.default.createElement(_heatmap2.default, { width: t12[0], height: t12[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 369
        }
      })), _react2.default.createElement('div', {
        className: 'details',
        style: { color: 'rgba(255,255,255,0.3)' },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 371
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 375
        }
      }, 'Heatmaps'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 376
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 377
        }
      }, '<HeatmapCircle /> + <HeatmapRect />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 383
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/lineradial', __source: {
          fileName: _jsxFileName,
          lineNumber: 384
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: '#744cca' },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 385
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 390
        }
      }, _react2.default.createElement(_lineradial2.default, { width: t13[0], height: t13[1] - 80, __source: {
          fileName: _jsxFileName,
          lineNumber: 391
        }
      })), _react2.default.createElement('div', { className: 'details', style: { color: '#919fe5' }, 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 393
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 394
        }
      }, 'Radial Lines'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 395
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 396
        }
      }, '<Shape.LineRadial />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 402
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/arcs', __source: {
          fileName: _jsxFileName,
          lineNumber: 403
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: '#c94acc' },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 404
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 409
        }
      }, _react2.default.createElement(_arc2.default, { width: t14[0], height: t14[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 410
        }
      })), _react2.default.createElement('div', { className: 'details', style: { color: 'white' }, 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 412
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 413
        }
      }, 'Arcs'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 414
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 415
        }
      }, '<Shape.Arc />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 421
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/trees', __source: {
          fileName: _jsxFileName,
          lineNumber: 422
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: '#272b4d' },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 423
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 428
        }
      }, _react2.default.createElement(_tree2.default, { width: t15[0], height: t15[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 429
        }
      })), _react2.default.createElement('div', { className: 'details', style: { color: '#269688' }, 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 431
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 432
        }
      }, 'Trees'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 433
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 434
        }
      }, '<Hierarchy.Tree /> + <Shape.LinkHorizontal />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 441
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/dendrograms', __source: {
          fileName: _jsxFileName,
          lineNumber: 442
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { background: '#306c90' },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 443
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 448
        }
      }, _react2.default.createElement(_dendrogram2.default, { width: t15[0], height: t15[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 449
        }
      })), _react2.default.createElement('div', { className: 'details', style: { color: '#5dc26f' }, 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 451
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 452
        }
      }, 'Dendrograms'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 453
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 454
        }
      }, '<Hierarchy.Cluster /> + <Shape.LinkVertical />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 461
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/legends', __source: {
          fileName: _jsxFileName,
          lineNumber: 462
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        style: { backgroundColor: 'black' },
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 463
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 468
        }
      }, _react2.default.createElement(_legends2.default, {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 469
        }
      })), _react2.default.createElement('div', { className: 'details', style: { color: '#494949' }, 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 471
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 472
        }
      }, 'Legends'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 473
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 474
        }
      }, '<Legend />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 480
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/voronoi', __source: {
          fileName: _jsxFileName,
          lineNumber: 481
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        style: {
          boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 6px'
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 482
        }
      }, _react2.default.createElement('div', {
        className: 'image',
        style: {
          backgroundColor: '#eb6d88',
          borderRadius: 14
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 489
        }
      }, _react2.default.createElement(_voronoi2.default, { width: t16[0], height: t16[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 496
        }
      })), _react2.default.createElement('div', { className: 'details', style: { color: '#F54EA2' }, 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 498
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 499
        }
      }, 'Voronoi'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 500
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 501
        }
      }, '<Voronoi.VoronoiPolygon /> ')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 508
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/boxplot', __source: {
          fileName: _jsxFileName,
          lineNumber: 509
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        style: { background: '#fd7e14' },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 510
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 515
        }
      }, _react2.default.createElement(_boxplot2.default, { width: t17[0], height: t17[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 516
        }
      })), _react2.default.createElement('div', {
        className: 'details',
        style: { color: '#FFFFFF', zIndex: 1 },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 518
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 522
        }
      }, 'BoxPlot'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 523
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 524
        }
      }, '<BoxPlot /> ')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 531
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/geo-mercator', __source: {
          fileName: _jsxFileName,
          lineNumber: 532
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 533
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 537
        }
      }, _react2.default.createElement(_geoMercator2.default, { width: t18[0], height: t18[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 538
        }
      })), _react2.default.createElement('div', { className: 'details', style: { color: '#f63a48' }, 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 540
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 541
        }
      }, 'Geo'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 542
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 543
        }
      }, '<Geo.Mercator />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 550
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/network', __source: {
          fileName: _jsxFileName,
          lineNumber: 551
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 552
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 556
        }
      }, _react2.default.createElement(_network2.default, { width: t19[0], height: t19[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 557
        }
      })), _react2.default.createElement('div', {
        className: 'details',
        style: {
          color: '#ffffff'
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 559
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 565
        }
      }, 'Network'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 566
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 567
        }
      }, '<Network.Graph />')))))), _react2.default.createElement(_reactTilt2.default, { className: 'tilt', options: { max: 8, scale: 1 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 574
        }
      }, _react2.default.createElement(_link2.default, { prefetch: true, href: '/streamgraph', __source: {
          fileName: _jsxFileName,
          lineNumber: 575
        }
      }, _react2.default.createElement('div', {
        className: 'gallery-item',
        ref: function ref(d) {
          return _this3.nodes.add(d);
        },
        style: { background: '#ffd7d9' },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 576
        }
      }, _react2.default.createElement('div', { className: 'image', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 581
        }
      }, _react2.default.createElement(_streamgraph2.default, { width: t20[0], height: t20[1], __source: {
          fileName: _jsxFileName,
          lineNumber: 582
        }
      })), _react2.default.createElement('div', {
        className: 'details',
        style: {
          color: '#036ecd'
        },
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 584
        }
      }, _react2.default.createElement('div', { className: 'title', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 590
        }
      }, 'Streamgraph'), _react2.default.createElement('div', { className: 'description', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 591
        }
      }, _react2.default.createElement('pre', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 592
        }
      }, '<Shape.Stack />')))))), _react2.default.createElement('div', { className: 'gallery-item placeholder', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 598
        }
      }), _react2.default.createElement('div', { className: 'gallery-item placeholder', 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 599
        }
      })), _react2.default.createElement('div', {
        'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 602
        }
      }, _react2.default.createElement('h1', { style: { textAlign: 'center', lineHeight: '.8em' }, 'data-jsx': 4071667161,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 603
        }
      }, 'More on the way!')), _react2.default.createElement(_footer2.default, {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 608
        }
      }), _react2.default.createElement(_style2.default, {
        styleId: 4071667161,
        css: 'h3[data-jsx="4071667161"] {margin-top: 0;margin-left: 40px;margin-bottom: 0;}.gallery[data-jsx="4071667161"] {display:-webkit-flex; display:flex;-webkit-flex-direction: row;-moz-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;flex-wrap: wrap;justify-content: space-around;overflow-x: hidden;padding-bottom: 20px;}.gallery-item[data-jsx="4071667161"] {background-color: white;margin: 5px;display:-webkit-flex; display:flex;height: 390px;-webkit-flex: 1;-moz-flex: 1;flex: 1;min-width: 25%;-webkit-flex-direction: column;-moz-flex-direction: column;flex-direction: column;border-radius: 14px;}.gallery-item.placeholder[data-jsx="4071667161"] {height: 1px;}.image[data-jsx="4071667161"] {-webkit-flex: 1;-moz-flex: 1;flex: 1;display:-webkit-flex; display:flex;}.details[data-jsx="4071667161"] {text-align: center;padding: 15px 20px;color: #ffffff;}.title[data-jsx="4071667161"] {font-weight: 900;line-height: 0.9rem;}.description[data-jsx="4071667161"] {font-weight: 300;font-size: 14px;}pre[data-jsx="4071667161"] {margin: 0;}.color-blue[data-jsx="4071667161"] {color: rgba(25, 231, 217, 1);}.color-yellow[data-jsx="4071667161"] {color: #f6c431;}.color-gray[data-jsx="4071667161"] {color: #333;}@media (max-width: 960px) {.gallery-item[data-jsx="4071667161"] {min-width: 45%;}}@media (max-width: 600px) {.gallery-item[data-jsx="4071667161"] {min-width: 100%;}}\n/*# sourceMappingURL=data:application/json;base64,  */\n/*@ sourceURL=components/gallery.js */'
      }));
    }
  }]);

  return Gallery;
}(_react2.default.Component);

exports.default = Gallery;