Merge pull request #407 from lorenries/equal-earth

Add Equal Earth projection to @vx/geo
airbnb · Jan 8, 2019 · 635749c · 635749c
2 parents e2a0e9d + ec11beb
commit 635749c
Show file tree

Hide file tree

Showing 15 changed files with 84 additions and 32 deletions.
diff --git a/packages/vx-demo/static/docs/vx-bounds.html b/packages/vx-demo/static/docs/vx-bounds.html
@@ -35,7 +35,7 @@
       <div class="content">
       <h1 id="-vx-bounds">@vx/bounds</h1>
 <pre><code>npm install --save @vx/bounds
-</code></pre><h3 id="-withboundingrects-hoc"><code>withBoundingRects</code> HOC</h3>
+</code></pre><h3 id="withboundingrects-hoc"><code>withBoundingRects</code> HOC</h3>
 <p>It&#39;s often useful to determine whether elements (e.g., tooltips) overflow the bounds of their parent container and adjust positioning accordingly. The <code>withBoundingRects</code> higher-order component is meant to simplify this computation by passing in a component&#39;s bounding rect as well as its <em>parent&#39;s</em> bounding rect.</p>
 <h3 id="example-usage">Example usage</h3>
 <p>Example usage with a <code>&lt;Tooltip /&gt;</code> component</p>

diff --git a/packages/vx-demo/static/docs/vx-geo.html b/packages/vx-demo/static/docs/vx-geo.html
@@ -43,6 +43,7 @@ <h2 id="installation">Installation</h2>
 <ul>
 <li><a href="#graticule-">Graticule</a></li>
 <li><a href="#albers-">Albers</a></li>
+<li><a href="#equalearth-">EqualEarth</a></li>
 <li><a href="#mercator-">Mercator</a></li>
 <li><a href="#naturalearth-">NaturalEarth</a></li>
 <li><a href="#orthographic-">Orthographic</a></li>
@@ -60,6 +61,9 @@ <h3 id="graticule-">&lt;Graticule /&gt;</h3>
 <h3 id="albers-">&lt;Albers /&gt;</h3>
 
 <p>All props pass through to <code>&lt;Projection projection=&quot;albers&quot; {...props} /&gt;</code></p>
+<h3 id="equalearth-">&lt;EqualEarth /&gt;</h3>
+
+<p>All props pass through to <code>&lt;Projection projection=&quot;equalEarth&quot; {...props} /&gt;</code></p>
 <h3 id="mercator-">&lt;Mercator /&gt;</h3>
 
 <p>All props pass through to <code>&lt;Projection projection=&quot;mercator&quot; {...props} /&gt;</code></p>

diff --git a/packages/vx-demo/static/docs/vx-mock-data.html b/packages/vx-demo/static/docs/vx-mock-data.html
@@ -41,16 +41,16 @@ <h2 id="generators">Generators</h2>
 <pre><code class="lang-js">import Mock from &#39;@vx/mock-data&#39;;
 const points = Mock.genRandomNormalPoints();
 </code></pre>
-<h3 id="-mock-genrandomnormalpoints-"><code>Mock.genRandomNormalPoints()</code></h3>
+<h3 id="mock-genrandomnormalpoints-"><code>Mock.genRandomNormalPoints()</code></h3>
 <p>Returns a series of random normal x,y points.  </p>
-<h3 id="-mock-getdatevalue-n-"><code>Mock.getDateValue(n)</code></h3>
+<h3 id="mock-getdatevalue-n-"><code>Mock.getDateValue(n)</code></h3>
 <p>Generates <code>n</code> date values an hour apart from each other starting with the current time. </p>
 <h2 id="mocks">Mocks</h2>
 <p>Mock are essentially a bunch of data dumps that you can use like this:</p>
 <pre><code class="lang-js">import Mock from &#39;@vx/mock-data&#39;;
 const data = Mock.cityTemperature;
 </code></pre>
-<h3 id="-mock-applestock-"><code>Mock.appleStock</code></h3>
+<h3 id="mock-applestock"><code>Mock.appleStock</code></h3>
 <table>
 <thead>
 <tr>
@@ -66,7 +66,7 @@ <h3 id="-mock-applestock-"><code>Mock.appleStock</code></h3>
 </tr>
 </tbody>
 </table>
-<h3 id="-mock-browserusage-"><code>Mock.browserUsage</code></h3>
+<h3 id="mock-browserusage"><code>Mock.browserUsage</code></h3>
 <table>
 <thead>
 <tr>
@@ -103,7 +103,7 @@ <h3 id="-mock-browserusage-"><code>Mock.browserUsage</code></h3>
 </tr>
 </tbody>
 </table>
-<h3 id="-mock-citytemperature-"><code>Mock.cityTemperature</code></h3>
+<h3 id="mock-citytemperature"><code>Mock.cityTemperature</code></h3>
 <table>
 <thead>
 <tr>
@@ -125,7 +125,7 @@ <h3 id="-mock-citytemperature-"><code>Mock.cityTemperature</code></h3>
 </tr>
 </tbody>
 </table>
-<h3 id="-mock-groupdatevalue-"><code>Mock.groupDateValue</code></h3>
+<h3 id="mock-groupdatevalue"><code>Mock.groupDateValue</code></h3>
 <table>
 <thead>
 <tr>
@@ -144,7 +144,7 @@ <h3 id="-mock-groupdatevalue-"><code>Mock.groupDateValue</code></h3>
 </tr>
 </tbody>
 </table>
-<h3 id="-mock-letterfrequency-"><code>Mock.letterFrequency</code></h3>
+<h3 id="mock-letterfrequency"><code>Mock.letterFrequency</code></h3>
 <table>
 <thead>
 <tr>

diff --git a/packages/vx-demo/static/docs/vx-pattern.html b/packages/vx-demo/static/docs/vx-pattern.html
@@ -62,15 +62,15 @@ <h2 id="the-definition-caveat">The Definition Caveat</h2>
 <p>Like gradients, patterns are &quot;defined.&quot; When you put down a <code>&lt;PatternXYZ /&gt;</code>, it&#39;s putting a <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns"><code>&lt;pattern/&gt;</code></a> attribute in the SVG.</p>
 <p>It&#39;s often better to think of these as variable definitions rather than true DOM elements. When you use <code>fill=&quot;url(&#39;#pattern&#39;)&quot;</code> you&#39;re referencing the pattern&#39;s id: <code>pattern</code>.</p>
 <h2 id="pre-made-patterns">Pre-Made Patterns</h2>
-<h3 id="-patternscircles-"><code>PatternsCircles</code></h3>
+<h3 id="patternscircles"><code>PatternsCircles</code></h3>
 <p><img src="http://i.imgur.com/jd9YGJi.png" alt="circles example"></p>
 <pre><code class="lang-js">&lt;PatternCircles id=&quot;circles&quot; height={6} width={6} stroke={&#39;black&#39;} strokeWidth={1} /&gt;
 </code></pre>
-<h3 id="-patternshexagons-"><code>PatternsHexagons</code></h3>
+<h3 id="patternshexagons"><code>PatternsHexagons</code></h3>
 <p><img src="http://i.imgur.com/3EL1Lza.png" alt="hexagon example"></p>
 <pre><code class="lang-js">&lt;PatternHexagons id=&quot;hexagons&quot; height={3} size={8} stroke={&#39;red&#39;} strokeWidth={1} /&gt;
 </code></pre>
-<h3 id="-patternslines-"><code>PatternsLines</code></h3>
+<h3 id="patternslines"><code>PatternsLines</code></h3>
 <p><img src="http://i.imgur.com/E3cTmLZ.png" alt="lines example"></p>
 <pre><code class="lang-js">&lt;PatternLines
   id=&quot;lines&quot;
@@ -81,7 +81,7 @@ <h3 id="-patternslines-"><code>PatternsLines</code></h3>
   orientation={[&#39;diagonal&#39;]}
 /&gt;
 </code></pre>
-<h3 id="-patternswaves-"><code>PatternsWaves</code></h3>
+<h3 id="patternswaves"><code>PatternsWaves</code></h3>
 <p><img src="http://i.imgur.com/4fdwbhv.png" alt="waves example"></p>
 <pre><code class="lang-js">&lt;PatternWaves id=&quot;waves&quot; height={4} width={4} stroke={&#39;blue&#39;} strokeWidth={1} /&gt;
 </code></pre>

diff --git a/packages/vx-demo/static/docs/vx-point.html b/packages/vx-demo/static/docs/vx-point.html
@@ -44,9 +44,9 @@ <h2 id="example-usage">Example Usage</h2>
 let array  = point.toArray() // Convert point to array
 </code></pre>
 <h2 id="methods">Methods</h2>
-<h3 id="-point-value-"><code>point.value()</code></h3>
+<h3 id="point-value-"><code>point.value()</code></h3>
 <p>Returns an <code>{x, y}</code> object with the x and y coordinates.</p>
-<h3 id="-point-toarray-"><code>point.toArray()</code></h3>
+<h3 id="point-toarray-"><code>point.toArray()</code></h3>
 <p>Returns the coordinates as an array <code>[x, y]</code>.</p>
 
       </div>

diff --git a/packages/vx-demo/static/docs/vx-responsive.html b/packages/vx-demo/static/docs/vx-responsive.html
@@ -44,7 +44,7 @@ <h1 id="-vx-responsive">@vx/responsive</h1>
 <p><strong>With Components</strong></p>
 <p><code>ParentSize</code></p>
 <p><code>ScaleSVG</code></p>
-<h2 id="-withscreensize-"><code>withScreenSize</code></h2>
+<h2 id="withscreensize"><code>withScreenSize</code></h2>
 <p>If you would like your graph to adapt to the screen size, you can use <code>withScreenSize()</code>. The resulting component will pass <code>screenWidth</code> and <code>screenHeight</code> props to the wrapped component containing the respective screen dimensions.</p>
 <h3 id="example-">Example:</h3>
 <pre><code class="lang-js">import { withScreenSize } from &#39;@vx/responsive&#39;;
@@ -56,7 +56,7 @@ <h3 id="example-">Example:</h3>
 
 // ... Render the chartToRender somewhere
 </code></pre>
-<h2 id="-withparentsize-"><code>withParentSize</code></h2>
+<h2 id="withparentsize"><code>withParentSize</code></h2>
 <p>If you would like your graph to adapt to it&#39;s parent component&#39;s size, you can use <code>withParentSize()</code>. The resulting component will pass <code>parentWidth</code> and <code>parentHeight</code> props to the wrapped component containing the respective parent&#39;s dimensions.</p>
 <h3 id="example-">Example:</h3>
 <pre><code class="lang-js">import { withParentSize } from &#39;@vx/responsive&#39;;
@@ -68,7 +68,7 @@ <h3 id="example-">Example:</h3>
 
 // ... Render the chartToRender somewhere
 </code></pre>
-<h2 id="-parentsize-"><code>ParentSize</code></h2>
+<h2 id="parentsize"><code>ParentSize</code></h2>
 <p>You might do the same thing using the <code>ParentSize</code> component.</p>
 <h3 id="example-">Example:</h3>
 <pre><code class="lang-js">import { ParentSize } from &#39;@vx/responsive&#39;;
@@ -95,7 +95,7 @@ <h3 id="example-">Example:</h3>
 
 // ... Render the chartToRender somewhere
 </code></pre>
-<h2 id="-scalesvg-"><code>ScaleSVG</code></h2>
+<h2 id="scalesvg"><code>ScaleSVG</code></h2>
 <p>You can also create a responsive chart with a specific viewBox with the <code>ScaleSVG</code> component.</p>
 <h3 id="example-">Example:</h3>
 <pre><code class="lang-js">import { ScaleSVG } from &#39;@vx/responsive&#39;;

diff --git a/packages/vx-demo/static/docs/vx-tooltip.html b/packages/vx-demo/static/docs/vx-tooltip.html
@@ -60,7 +60,7 @@ <h3 id="example-">Example:</h3>
     } = this.props;
 
     return (
-      // note React.Frament is only available in &gt;= react@16.2
+      // note React.Fragment is only available in &gt;= react@16.2
       &lt;React.Fragment&gt;
         &lt;svg width={...} height={...}&gt;
           // Chart here...
@@ -139,7 +139,7 @@ <h4 id="withtooltip-basecomponent-containerprops-">withTooltip(BaseComponent [,
 </tbody>
 </table>
 <h3 id="components">Components</h3>
-<h4 id="-tooltip-"><Tooltip /></h4>
+<h4 id="tooltip">Tooltip</h4>
 <p>This is a simple Tooltip container component meant to be used to actually render a Tooltip. It accepts the following props, and will spread any additional props on the tooltip container div (i.e., ...restProps):</p>
 <table>
 <thead>
@@ -233,7 +233,7 @@ <h4 id="tooltipwithbounds">TooltipWithBounds</h4>
 </tr>
 </tbody>
 </table>
-<p>Note that this component is positioned using a <code>tranform</code>, so overriding <code>left</code> and <code>top</code> via styles may have no effect.</p>
+<p>Note that this component is positioned using a <code>transform</code>, so overriding <code>left</code> and <code>top</code> via styles may have no effect.</p>
 
       </div>
     </div>

diff --git a/packages/vx-geo/Readme.md b/packages/vx-geo/Readme.md
@@ -18,6 +18,7 @@ npm install --save @vx/geo
 
   - [Graticule](#graticule-)
   - [Albers](#albers-)
+  - [EqualEarth](#equalearth-)
   - [Mercator](#mercator-)
   - [NaturalEarth](#naturalearth-)
   - [Orthographic](#orthographic-)
@@ -44,6 +45,11 @@ npm install --save @vx/geo
 All props pass through to `<Projection projection="albers" {...props} />`
 
 
+<h3 id="equalearth-">&lt;EqualEarth /&gt;</h3>
+
+All props pass through to `<Projection projection="equalEarth" {...props} />`
+
+
 <h3 id="mercator-">&lt;Mercator /&gt;</h3>
 
 All props pass through to `<Projection projection="mercator" {...props} />`

diff --git a/packages/vx-geo/docs/api.md b/packages/vx-geo/docs/api.md
@@ -15,6 +15,11 @@
 All props pass through to `<Projection projection="albers" {...props} />`
 
 
+<h3 id="equalearth-">&lt;EqualEarth /&gt;</h3>
+
+All props pass through to `<Projection projection="equalEarth" {...props} />`
+
+
 <h3 id="mercator-">&lt;Mercator /&gt;</h3>
 
 All props pass through to `<Projection projection="mercator" {...props} />`

diff --git a/packages/vx-geo/docs/docs.md b/packages/vx-geo/docs/docs.md
@@ -18,6 +18,7 @@ npm install --save @vx/geo
 
   - [Graticule](#graticule-)
   - [Albers](#albers-)
+  - [EqualEarth](#equalearth-)
   - [Mercator](#mercator-)
   - [NaturalEarth](#naturalearth-)
   - [Orthographic](#orthographic-)
@@ -44,6 +45,11 @@ npm install --save @vx/geo
 All props pass through to `<Projection projection="albers" {...props} />`
 
 
+<h3 id="equalearth-">&lt;EqualEarth /&gt;</h3>
+
+All props pass through to `<Projection projection="equalEarth" {...props} />`
+
+
 <h3 id="mercator-">&lt;Mercator /&gt;</h3>
 
 All props pass through to `<Projection projection="mercator" {...props} />`

diff --git a/packages/vx-geo/package.json b/packages/vx-geo/package.json
@@ -38,7 +38,7 @@
   "dependencies": {
     "@vx/group": "0.0.183",
     "classnames": "^2.2.5",
-    "d3-geo": "^1.6.4",
+    "d3-geo": "^1.11.3",
     "prop-types": "^15.5.10"
   },
   "devDependencies": {

diff --git a/packages/vx-geo/src/index.js b/packages/vx-geo/src/index.js
@@ -2,4 +2,5 @@ export { default as Albers } from './projections/Albers';
 export { default as Mercator } from './projections/Mercator';
 export { default as Orthographic } from './projections/Orthographic';
 export { default as NaturalEarth } from './projections/NaturalEarth';
+export { default as EqualEarth } from './projections/EqualEarth';
 export { default as Graticule } from './graticule/Graticule';
diff --git a/packages/vx-geo/src/projections/EqualEarth.js b/packages/vx-geo/src/projections/EqualEarth.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import Projection from './Projection';
+
+/**
+ * All props pass through to `<Projection projection="equalEarth" {...props} />`
+ */
+export default function EqualEarth(props) {
+  return <Projection projection="equalEarth" {...props} />;
+}
diff --git a/packages/vx-geo/src/projections/Projection.js b/packages/vx-geo/src/projections/Projection.js
@@ -3,14 +3,22 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Group } from '@vx/group';
 import Graticule from '../graticule/Graticule';
-import { geoOrthographic, geoAlbers, geoMercator, geoNaturalEarth1, geoPath } from 'd3-geo';
+import {
+  geoOrthographic,
+  geoAlbers,
+  geoMercator,
+  geoNaturalEarth1,
+  geoEqualEarth,
+  geoPath
+} from 'd3-geo';
 
 // TODO: Implement all projections of d3-geo
 const projectionMapping = {
   orthographic: () => geoOrthographic(),
   albers: () => geoAlbers(),
   mercator: () => geoMercator(),
-  naturalEarth: () => geoNaturalEarth1()
+  naturalEarth: () => geoNaturalEarth1(),
+  equalEarth: () => geoEqualEarth()
 };
 
 Projection.propTypes = {
@@ -89,10 +97,12 @@ export default function Projection({
   return (
     <Group className="vx-geo">
       {graticule && !graticule.foreground && <Graticule graticule={g => path(g)} {...graticule} />}
-      {graticuleLines &&
-        !graticuleLines.foreground && <Graticule lines={g => path(g)} {...graticuleLines} />}
-      {graticuleOutline &&
-        !graticuleOutline.foreground && <Graticule outline={g => path(g)} {...graticuleOutline} />}
+      {graticuleLines && !graticuleLines.foreground && (
+        <Graticule lines={g => path(g)} {...graticuleLines} />
+      )}
+      {graticuleOutline && !graticuleOutline.foreground && (
+        <Graticule outline={g => path(g)} {...graticuleOutline} />
+      )}
 
       {features.map((feature, i) => {
         return (
@@ -111,10 +121,12 @@ export default function Projection({
       {projectionFunc && projectionFunc(currProjection)}
 
       {graticule && graticule.foreground && <Graticule graticule={g => path(g)} {...graticule} />}
-      {graticuleLines &&
-        graticuleLines.foreground && <Graticule lines={g => path(g)} {...graticuleLines} />}
-      {graticuleOutline &&
-        graticuleOutline.foreground && <Graticule outline={g => path(g)} {...graticuleOutline} />}
+      {graticuleLines && graticuleLines.foreground && (
+        <Graticule lines={g => path(g)} {...graticuleLines} />
+      )}
+      {graticuleOutline && graticuleOutline.foreground && (
+        <Graticule outline={g => path(g)} {...graticuleOutline} />
+      )}
     </Group>
   );
 }
diff --git a/packages/vx-geo/test/EqualEarth.test.js b/packages/vx-geo/test/EqualEarth.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { EqualEarth } from '../src';
+
+describe('<EqualEarth />', () => {
+  test('it should be defined', () => {
+    expect(EqualEarth).toBeDefined();
+  });
+});