feat(geo): add charts' icons

conf/base.yaml

@@ -1,5 +1,5 @@
 capture:
-    baseUrl: http://localhost:5678
+    baseUrl: http://localhost:3000
     pages:
       # capture illustrations for readme
       - path: /bar
@@ -202,3 +202,19 @@ capture:
       - path: /icons
         selector: '#parallel-coordinates-red'
         output: ./website/src/assets/icons/parallel-coordinates-red.png
+
+      - path: /icons
+        selector: '#geomap-grey'
+        output: ./website/src/assets/icons/geomap-grey.png
+
+      - path: /icons
+        selector: '#geomap-red'
+        output: ./website/src/assets/icons/geomap-red.png
+
+      - path: /icons
+        selector: '#choropleth-grey'
+        output: ./website/src/assets/icons/choropleth-grey.png
+
+      - path: /icons
+        selector: '#choropleth-red'
+        output: ./website/src/assets/icons/choropleth-red.png

packages/geo/src/GeoMapFeature.js

@@ -60,6 +60,7 @@ class GeoMapFeature extends Component {
                 fill={fillColor}
                 strokeWidth={borderWidth}
                 stroke={borderColor}
+                strokeLinejoin="bevel"
                 d={pathHelper(feature)}
                 onMouseEnter={this.handleMouseEnter}
                 onMouseMove={this.handleMouseMove}

website/package.json

@@ -30,6 +30,7 @@
     "@nivo/voronoi": "0.54.0",
     "@nivo/waffle": "0.54.0",
     "classnames": "2.2.4",
+    "d3-geo": "^1.11.3",
     "d3-scale": "^2.1.2",
     "d3-scale-chromatic": "^1.3.3",
     "d3-time": "^1.0.10",

website/src/SiteMap.js

@@ -257,7 +257,7 @@ const SITEMAP = [
                 ],
             },
             {
-                className: 'geo',
+                className: 'geomap',
                 path: '/geomap',
                 label: 'GeoMap',
                 component: GeoPage,

website/src/components/ChartTabs.js

@@ -51,6 +51,11 @@ export default class ChartTabs extends Component {
         } = this.props
         const { tab: currentTab, hoverTab } = this.state
 
+        let availableTabs = tabs
+        if (data === undefined) {
+            availableTabs = availableTabs.filter(t => t !== 'data')
+        }
+
         let content
         if (currentTab === 'chart') {
             content = <div className="chart-tabs__content">{children}</div>
@@ -60,7 +65,7 @@ export default class ChartTabs extends Component {
                     <pre>{code}</pre>
                 </div>
             )
-        } else if (currentTab === 'data') {
+        } else if (availableTabs.includes('data') && currentTab === 'data') {
             content = (
                 <div className="json-data_json code-snippet">
                     <pre>{JSON.stringify(data, null, '  ')}</pre>
@@ -71,7 +76,7 @@ export default class ChartTabs extends Component {
         return (
             <div className={`chart-tabs chart-tabs--${currentTab}`}>
                 <div className="chart-tabs__menu">
-                    {tabs.map(tab => {
+                    {availableTabs.map(tab => {
                         const isCurrent = tab === currentTab
                         const icon = tab === 'chart' ? chartClass : tab
                         const iconColor = isCurrent || hoverTab === tab ? 'red' : 'grey'

website/src/components/charts/geo/GeoMap.js

@@ -40,8 +40,6 @@ const initialSettings = {
     graticuleLineColor: '#666666',
 
     isInteractive: true,
-    'custom tooltip example': false,
-    tooltip: null,
 
     theme: {
         ...nivoTheme,
@@ -52,7 +50,11 @@ const initialSettings = {
 const GeoMap = () => {
     const [settings, setSettings] = useState(initialSettings)
     const onClick = useCallback((feature, event) => {
-        alert(`${feature.properties.name}\nclicked at x: ${event.clientX}, y: ${event.clientY}`)
+        alert(
+            `${feature.properties.name} (${feature.id})\nclicked at x: ${event.clientX}, y: ${
+                event.clientY
+            }`
+        )
     })
 
     // const mappedSettings = propsMapper(settings)

website/src/components/charts/geo/GeoMapCanvas.js

@@ -42,8 +42,6 @@ const initialSettings = {
     graticuleLineColor: '#666666',
 
     isInteractive: true,
-    'custom tooltip example': false,
-    tooltip: null,
 
     theme: {
         ...nivoTheme,
@@ -92,7 +90,7 @@ const GeoMapCanvas = () => {
                     {header}
                     {description}
                 </MediaQuery>
-                <ChartTabs chartClass="geomap" code={code} data={[]}>
+                <ChartTabs chartClass="geomap" code={code}>
                     <ResponsiveGeoMapCanvas
                         features={countries.features}
                         onClick={onClick}

website/src/components/icons/ChoroplethIcon.js

@@ -0,0 +1,98 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Fragment } from 'react'
+import { Choropleth } from '@nivo/geo'
+import choroplethGreyImg from '../../assets/icons/choropleth-grey.png'
+import choroplethRedImg from '../../assets/icons/choropleth-red.png'
+import { ICON_SIZE, Icon } from './styled'
+import world from '../charts/geo/world_countries'
+
+const includeCountries = ['DZA', 'NER', 'BFA', 'MLI', 'MRT']
+const features = world.features.filter(f => includeCountries.includes(f.id))
+
+const data = [
+    { id: 'DZA', value: 3 },
+    { id: 'NER', value: 6 },
+    { id: 'BFA', value: 1 },
+    { id: 'MLI', value: 12 },
+    { id: 'MRT', value: 7 },
+    { id: 'COD', value: 9 },
+]
+
+const chartProps = {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    features,
+    data,
+    projectionScale: 166,
+    projectionTranslation: [0.8, 1.2],
+    isInteractive: false,
+    borderWidth: 1,
+}
+
+const ChoroplethIcon = () => (
+    <Fragment>
+        <Icon
+            id="choropleth-grey"
+            style={{
+                position: 'relative',
+            }}
+        >
+            <Choropleth {...chartProps} borderColor="#686868" borderWidth={6} />
+            <div
+                style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    zIndex: 10,
+                }}
+            >
+                <Choropleth
+                    {...chartProps}
+                    borderWidth={0}
+                    colors={['#ddd', '#bbb', '#999', '#777']}
+                />
+            </div>
+        </Icon>
+        <Icon
+            style={{
+                backgroundImage: `url(${choroplethGreyImg})`,
+            }}
+        />
+        <Icon
+            id="choropleth-red"
+            style={{
+                position: 'relative',
+            }}
+        >
+            <Choropleth {...chartProps} borderColor="#d45036" borderWidth={6} />
+            <div
+                style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    zIndex: 10,
+                }}
+            >
+                <Choropleth
+                    {...chartProps}
+                    borderWidth={0}
+                    colors={['#ffb8b4', '#ff8b7d', '#ff5c3e']}
+                />
+            </div>
+        </Icon>
+        <Icon
+            style={{
+                backgroundImage: `url(${choroplethRedImg})`,
+            }}
+        />
+    </Fragment>
+)
+
+export default ChoroplethIcon

website/src/components/icons/GeoMapIcon.js

@@ -0,0 +1,81 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Fragment } from 'react'
+import { GeoMap } from '@nivo/geo'
+import {} from 'd3-geo'
+import geomapGreyImg from '../../assets/icons/geomap-grey.png'
+import geomapRedImg from '../../assets/icons/geomap-red.png'
+import { ICON_SIZE, Icon } from './styled'
+import world from '../charts/geo/world_countries'
+
+const includeCountries = ['DZA', 'NER', 'BFA', 'MLI', 'MRT']
+const features = world.features.filter(f => includeCountries.includes(f.id))
+
+const chartProps = {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    features,
+    projectionScale: 166,
+    projectionTranslation: [0.8, 1.2],
+    isInteractive: false,
+    borderWidth: 1,
+}
+
+const GeoMapIcon = () => (
+    <Fragment>
+        <Icon
+            id="geomap-grey"
+            style={{
+                position: 'relative',
+            }}
+        >
+            <GeoMap {...chartProps} borderWidth={6} borderColor="#686868" />
+            <div
+                style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    zIndex: 10,
+                }}
+            >
+                <GeoMap {...chartProps} fillColor="#e2e2e2" borderColor="#686868" />
+            </div>
+        </Icon>
+        <Icon
+            style={{
+                backgroundImage: `url(${geomapGreyImg})`,
+            }}
+        />
+        <Icon
+            id="geomap-red"
+            style={{
+                position: 'relative',
+            }}
+        >
+            <GeoMap {...chartProps} borderWidth={6} borderColor="#d45036" />
+            <div
+                style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    zIndex: 10,
+                }}
+            >
+                <GeoMap {...chartProps} fillColor="#ffc6c5" borderColor="#d45036" />
+            </div>
+        </Icon>
+        <Icon
+            style={{
+                backgroundImage: `url(${geomapRedImg})`,
+            }}
+        />
+    </Fragment>
+)
+
+export default GeoMapIcon

website/src/components/icons/Icons.js

@@ -10,7 +10,9 @@ import React from 'react'
 import { Container } from './styled'
 import BarIcon from './BarIcon'
 import BulletIcon from './BulletIcon'
+import ChoroplethIcon from './ChoroplethIcon'
 import CirclePackingIcon from './CirclePackingIcon'
+import GeoMapIcon from './GeoMapIcon'
 import HeatMapIcon from './HeatMapIcon'
 import LineIcon from './LineIcon'
 import PieIcon from './PieIcon'
@@ -22,6 +24,7 @@ import ParallelCoordinatesIcon from './ParallelCoordinatesIcon'
 
 const Icons = () => (
     <Container>
+        <ChoroplethIcon />
         <ParallelCoordinatesIcon />
         <ScatterPlotIcon />
         <StreamIcon />
@@ -33,6 +36,7 @@ const Icons = () => (
         <BarIcon />
         <HeatMapIcon />
         <WaffleIcon />
+        <GeoMapIcon />
     </Container>
 )