Merge pull request #105 from nschnierer/nschnierer-geo

[geo] add package geo

packages/vx-demo/components/gallery.js

@@ -25,6 +25,7 @@ import Cluster from '../components/tiles/dendrogram';
 import Voronoi from '../components/tiles/voronoi';
 import Legends from '../components/tiles/legends';
 import BoxPlot from '../components/tiles/boxplot';
+import GeoMercator from '../components/tiles/geo-mercator';
 
 const items = [
   '#242424',
@@ -87,6 +88,7 @@ export default class Gallery extends React.Component {
     const t15 = this.state.dimensions[14] || [8, 300];
     const t16 = this.state.dimensions[15] || [8, 300];
     const t17 = this.state.dimensions[16] || [8, 300];
+    const t18 = this.state.dimensions[17] || [8, 300];
 
     return (
       <div>
@@ -521,6 +523,26 @@ export default class Gallery extends React.Component {
               </div>
             </Link>
           </Tilt>
+
+          <Tilt className="tilt" options={{ max: 8, scale: 1 }}>
+            <Link prefetch href="/geo-mercator">
+              <div
+                className="gallery-item"
+                ref={d => this.nodes.add(d)}
+              >
+                <div className="image">
+                  <GeoMercator width={t18[0]} height={t18[1]} />
+                </div>
+                <div className="details" style={{ color: '#ffffff', textShadow: '0 0 1px #333' }}>
+                  <div className="title">Geo</div>
+                  <div className="description">
+                    <pre>{`<Geo.Mercator />`}</pre>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          </Tilt>
+
           <div className="gallery-item placeholder" />
           <div className="gallery-item placeholder" />
         </div>

packages/vx-demo/components/tiles/geo-mercator.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { GradientTealBlue, RadialGradient } from '@vx/gradient';
+import { Mercator } from '@vx/geo';
+import * as topojson from 'topojson-client';
+import topology from '../../static/vx-geo/world-topo.json';
+
+export default ({ width, height, events = false }) => {
+  if (width < 10) return <div />;
+
+  const world = topojson.feature(topology, topology.objects.units);
+
+  return (
+    <svg width={width} height={height}>
+      <RadialGradient
+        id="geo_mercator_radial"
+        from="#55bdd5"
+        to="#4f3681"
+        r={'80%'}
+      />
+      <rect
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        fill={`url(#geo_mercator_radial)`}
+        rx={14}
+      />
+      <Mercator
+        data={world.features}
+        scale={width / 630 * 100}
+        translate={[width / 2, height / 2 + 50]}
+        fill={() => '#8be4c5'}
+        stroke={() => '#5fcfa7'}
+        onClick={data => event => {
+          if (!events) return;
+          alert(`Clicked: ${data.properties.name} (${data.id})`);
+        }}
+      />
+    </svg>
+  );
+};

packages/vx-demo/package.json

@@ -41,6 +41,7 @@
     "@vx/text": "0.0.127",
     "@vx/tooltip": "0.0.127",
     "@vx/voronoi": "0.0.127",
+    "@vx/geo": "file:../vx-geo",
     "classnames": "^2.2.5",
     "d3-array": "^1.1.1",
     "d3-format": "^1.2.0",
@@ -56,7 +57,8 @@
     "react-github-button": "^0.1.10",
     "react-motion": "^0.4.7",
     "react-tilt": "^0.1.3",
-    "recompose": "^0.23.0"
+    "recompose": "^0.23.0",
+    "topojson-client": "^3.0.0"
   },
   "browserify": {
     "transform": [

packages/vx-demo/pages/geo-mercator.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import Show from '../components/show';
+import GeoMercator from '../components/tiles/geo-mercator';
+
+export default () => {
+  return (
+    <Show
+      events
+      component={GeoMercator}
+      title="Geo Mercator"
+    >
+      {`
+import React from 'react';
+import { GradientTealBlue, RadialGradient } from '@vx/gradient';
+import { Mercator } from '@vx/geo';
+import * as topojson from 'topojson-client';
+import topology from '../../static/vx-geo/world-topo.json';
+
+export default ({ width, height, events = false }) => {
+  if (width < 10) return <div />;
+
+  const world = topojson.feature(topology, topology.objects.units);
+
+  return (
+    <svg width={width} height={height}>
+      <RadialGradient
+        id="geo_mercator_radial"
+        from="#55bdd5"
+        to="#4f3681"
+        r={'80%'}
+      />
+      <rect
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        fill={\`url(#geo_mercator_radial)\`}
+        rx={14}
+      />
+      <Mercator
+        data={world.features}
+        scale={width / 630 * 100}
+        translate={[width / 2, height / 2 + 50]}
+        fill={() => '#8be4c5'}
+        stroke={() => '#5fcfa7'}
+        onClick={data => event => {
+          if (!events) return;
+          alert(\`Clicked: \${data.properties.name} (\${data.id})\`);
+        }}
+      />
+    </svg>
+  );
+};
+`}
+    </Show>
+  );
+};

packages/vx-geo/.babelrc

@@ -0,0 +1,19 @@
+{
+  "presets": ["es2015", "react", "stage-0"],
+  "plugins": [],
+  "env": {
+    "development": {
+      "plugins": [
+        ["react-transform", {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }]
+        }],
+        "transform-runtime",
+        "transform-decorators-legacy"
+      ]
+    }
+  }
+}

packages/vx-geo/Makefile

@@ -0,0 +1 @@
+include node_modules/react-fatigue-dev/Makefile

packages/vx-geo/Readme.md

@@ -0,0 +1,99 @@
+# @vx/geo
+
+```
+npm install --save @vx/geo
+```
+
+Draw GeoJSON/TopoJSON features with different projections using d3-geo and react to render it.
+
+## `<Mercator />`
+The spherical Mercator projection. Many online street mapping services use a variant of the spherical Mercator projection (OpenStreetMap, Bing Maps, Google Maps, ...).
+
+### Example
+
+<img width="500" src="https://user-images.githubusercontent.com/3831579/28503643-0fb53628-700b-11e7-824c-293f5df0caf5.png" alt="vx-geo-mercator">
+
+```js
+<Mercator
+  data={myData}
+  scale={myScale}
+  translate={[width / 2, height / 2]}
+  fill={(feature) => '#aaaaaa'}
+  onClick={data => event => {
+    alert(`Clicked!`);
+  }}
+/>
+```
+
+### Properties
+
+|      Name       |       Default       |   Type   |                                                 Description                                                 |
+|:--------------- |:------------------- |:-------- |:----------------------------------------------------------------------------------------------------------- |
+| data            |                     | object   | GeoJSON/TopoJSON features.                                                                                  |
+| projectionFunc  |                     | function | Returns projection function.                                                                                |
+| clipAngle       |                     | number   | Sets the projection’s clipping circle radius.                                                               |
+| clipExtent      |                     | array    | Sets the projection’s viewport clip extent.                                                                 |
+| scale           |                     | number   | Sets the projection’s scale.                                                                                |
+| translate       | [480, 250]          | array    | Sets the projection’s translation offset.                                                                   |
+| center          | [0, 0]              | array    | Sets the projection’s center.                                                                               |
+| rotate          |                     | array    | Sets the projection’s three-axis rotation.                                                                  |
+| precision       |                     | number   | Sets the threshold for the projection’s adaptive resampling.                                                |
+| fitExtent       |                     | array    | Sets the projection’s scale and translate. [extend, object]                                                 |
+| fitSize         |                     | array    | A convenience method for fitExtent. [size, object]                                                          |
+| centroid        |                     | function | Get centroid of path.                                                                                       |
+| className       | `vx-mercator`       | string   | The class name for the `path` element.                                                                      |
+
+
+## `<Orthographic />`
+
+The orthographic projection.
+
+### Example
+
+<img width="200" src="https://user-images.githubusercontent.com/3831579/28503686-bfb776f8-700b-11e7-942d-8c3124f1f618.png" alt="vx-geo-mercator">
+
+```js
+<Orthographic
+  data={myData}
+  scale={myScale}
+  translate={[width / 2, height / 2]}
+  fill={(feature) => '#aaaaaa'}
+  onClick={data => event => {
+    alert(`Clicked!`);
+  }}
+/>
+```
+
+### Properties
+Same properties as Mercator.
+
+|      Name       |       Default       |   Type   |                                                 Description                                                 |
+|:--------------- |:------------------- |:-------- |:----------------------------------------------------------------------------------------------------------- |
+| className       | `vx-orthographic`   | string   | The class name for the `path` element.                                                                      |
+
+## `<Albers />`
+
+The albers projection.
+
+### Example
+
+<img width="250" src="https://user-images.githubusercontent.com/3831579/28503693-d27ed9fc-700b-11e7-9e0a-e6b54a4a9b83.png" alt="vx-geo-mercator">
+
+```js
+<Albers
+  data={myData}
+  scale={myScale}
+  translate={[width / 2, height / 2]}
+  fill={(feature) => '#aaaaaa'}
+  onClick={data => event => {
+    alert(`Clicked!`);
+  }}
+/>
+```
+
+### Properties
+Same properties as Mercator.
+
+|      Name       |       Default       |   Type   |                                                 Description                                                 |
+|:--------------- |:------------------- |:-------- |:----------------------------------------------------------------------------------------------------------- |
+| className       | `vx-albers`         | string   | The class name for the `path` element.                                                                      |

packages/vx-geo/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@vx/geo",
+  "version": "0.0.132",
+  "description": "vx geo",
+  "main": "build/index.js",
+  "scripts": {
+    "build": "make build SRC=./src",
+    "prepublish": "make build SRC=./src",
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hshoff/vx.git"
+  },
+  "keywords": [
+    "vx",
+    "react",
+    "d3",
+    "visualizations",
+    "charts",
+    "geo"
+  ],
+  "author": "@nschnierer",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hshoff/vx/issues"
+  },
+  "homepage": "https://github.com/hshoff/vx#readme",
+  "dependencies": {
+    "@vx/group": "0.0.127",
+    "classnames": "^2.2.5",
+    "d3-geo": "^1.6.4",
+    "prop-types": "^15.5.10"
+  },
+  "devDependencies": {
+    "babel-jest": "^20.0.3",
+    "enzyme": "^2.9.1",
+    "jest": "^20.0.4",
+    "react": "^15.0.0 || 15.x",
+    "react-addons-test-utils": "^15.6.0",
+    "react-fatigue-dev": "github:tj/react-fatigue-dev",
+    "react-test-renderer": "^15.6.1",
+    "react-tools": "^0.13.3",
+    "regenerator-runtime": "^0.10.5",
+    "topojson-client": "^3.0.0"
+  },
+  "peerDependencies": {
+    "react": "^15.0.0 || 15.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/vx-geo/src/index.js

@@ -0,0 +1,3 @@
+export { default as Albers } from './projections/Albers';
+export { default as Mercator } from './projections/Mercator';
+export { default as Orthographic } from './projections/Orthographic';

packages/vx-geo/src/projections/Albers.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import Projection from './Projection';
+
+export default function Albers(props) {
+  return <Projection projection="albers" {...props} />;
+}

packages/vx-geo/src/projections/Graticule.js

@@ -0,0 +1 @@
+// TODO: Add graticule component.

packages/vx-geo/src/projections/Mercator.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import Projection from './Projection';
+
+export default function Mercator(props) {
+  return <Projection projection="mercator" {...props} />;
+}

packages/vx-geo/src/projections/Orthographic.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import Projection from './Projection';
+
+export default function Orthographic(props) {
+  return <Projection projection="orthographic" {...props} />;
+}