feat(website): udpate geo icons

website/src/components/icons/ChoroplethIcon.js

@@ -7,92 +7,66 @@
  * 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,
-}
+import { Icon } from './styled'
+import MapIcon from './MapIcon'
 
 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 id="choropleth-grey">
+            <MapIcon
+                stroke="#686868"
+                fill="#e2e2e2"
+                colors={[
+                    '#b0aeaf',
+                    '#c3c3c3',
+                    '#e2e2e2',
+                    '#909090',
+                    '#e2e2e2',
+                    '#b0aeaf',
+                    '#c3c3c3',
+                    '#adadad',
+                    '#909090',
+                    '#e2e2e2',
+                    '#b0aeaf',
+                    '#c3c3c3',
+                    '#adadad',
+                ]}
+            />
         </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 id="choropleth-red">
+            <MapIcon
+                stroke="#d45036"
+                fill="#ffc6c4"
+                colors={[
+                    '#ff5c3e',
+                    '#ff8c7d',
+                    '#ffc6c4',
+                    '#ff6b5a',
+                    '#ffc6c4',
+                    '#ff5c3e',
+                    '#ff8c7d',
+                    '#ff8c7d',
+                    '#ff6b5a',
+                    '#ffc6c4',
+                    '#ff5c3e',
+                    '#ff8c7d',
+                    '#ff8c7d',
+                ]}
+            />
         </Icon>
         <Icon
             style={{
                 backgroundImage: `url(${choroplethRedImg})`,
             }}
         />
-    </Fragment>
+    </>
 )
 
 export default ChoroplethIcon

website/src/components/icons/GeoMapIcon.js

@@ -6,76 +6,31 @@
  * 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 React from 'react'
 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,
-}
+import { Icon } from './styled'
+import MapIcon from './MapIcon'
 
 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 id="geomap-grey">
+            <MapIcon stroke="#686868" fill="#e2e2e2" />
         </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 id="geomap-red">
+            <MapIcon stroke="#d45036" fill="#ffc6c4" />
         </Icon>
         <Icon
             style={{
                 backgroundImage: `url(${geomapRedImg})`,
             }}
         />
-    </Fragment>
+    </>
 )
 
 export default GeoMapIcon

website/src/components/icons/Icons.js

@@ -24,6 +24,7 @@ import ParallelCoordinatesIcon from './ParallelCoordinatesIcon'
 
 const Icons = () => (
     <Container>
+        <GeoMapIcon />
         <ChoroplethIcon />
         <ParallelCoordinatesIcon />
         <ScatterPlotIcon />
@@ -36,7 +37,6 @@ const Icons = () => (
         <BarIcon />
         <HeatMapIcon />
         <WaffleIcon />
-        <GeoMapIcon />
     </Container>
 )
 

website/src/components/icons/MapIcon.js

@@ -0,0 +1,107 @@
+/*
+ * 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 from 'react'
+import { ICON_SIZE } from './styled'
+
+const size = ICON_SIZE
+const line = 5
+
+const outlinePath = `
+    M${line / 2},${size * 0.2}
+    L${size * 0.33},${size * 0.1}
+    L${size * 0.66},${size * 0.2}
+    L${size - line / 2},${size * 0.1}
+    L${size - line / 2},${size * 0.8}
+    L${size * 0.66},${size * 0.9}
+    L${size * 0.33},${size * 0.8}
+    L${line / 2},${size * 0.9}
+    Z
+`
+
+const rects = [
+    [0, 0, size * 0.5, size * 0.2],
+    [0, size * 0.2, size * 0.5, size * 0.1],
+    [size * 0.5, 0, size * 0.7, size * 0.3],
+    [0, size * 0.3, size * 0.3, size * 0.1],
+    [0, size * 0.4, size * 0.3, size * 0.2],
+    [size * 0.3, size * 0.3, size * 0.4, size * 0.3],
+    [size * 0.7, size * 0.3, size * 0.3, size * 0.3],
+    [0, size * 0.6, size * 0.6, size * 0.2],
+    [0, size * 0.8, size * 0.6, size * 0.2],
+    [size * 0.6, size * 0.6, size * 0.4, size * 0.1],
+    [size * 0.6, size * 0.7, size * 0.4, size * 0.3],
+]
+
+const MapIcon = ({ stroke, fill, colors = [] }) => {
+    return (
+        <svg width={size} height={size}>
+            <mask id="choropleth-icon-mask">
+                <path fill="white" d={outlinePath} />
+            </mask>
+            <path fill={fill} d={outlinePath} />
+            <g mask="url(#choropleth-icon-mask)">
+                <g
+                    transform={`rotate(-45) scale(1.2)`}
+                    style={{
+                        transformOrigin: '50% 50%',
+                    }}
+                >
+                    {rects.map((r, i) => {
+                        return (
+                            <rect
+                                key={i}
+                                fill={colors[i] || fill}
+                                stroke={stroke}
+                                strokeWidth={2}
+                                x={r[0]}
+                                y={r[1]}
+                                width={r[2]}
+                                height={r[3]}
+                            />
+                        )
+                    })}
+                </g>
+            </g>
+            <g
+                style={{
+                    mixBlendMode: 'multiply',
+                }}
+            >
+                <path
+                    fill={fill}
+                    d={`
+                        M${size * 0.33},${size * 0.1}
+                        L${size * 0.66},${size * 0.2}
+                        L${size * 0.66},${size * 0.9}
+                        L${size * 0.33},${size * 0.8}
+                        Z
+                    `}
+                />
+                <circle fill={fill} r={size * 0.13} cx={size * 0.66} cy={size * 0.46} />
+            </g>
+            <path
+                fill="none"
+                stroke={stroke}
+                strokeWidth={line}
+                d={outlinePath}
+                strokeLinejoin="bevel"
+            />
+            <circle
+                fill={fill}
+                stroke={stroke}
+                strokeWidth={line}
+                r={size * 0.1}
+                cx={size * 0.66}
+                cy={size * 0.41}
+            />
+        </svg>
+    )
+}
+
+export default MapIcon

website/src/styles/icons.css

@@ -1,4 +1,4 @@
-/* glue: 0.13 hash: 955823c265 */
+/* glue: 0.13 hash: ff68cfe4da */
 .sprite-icons-waffle-red,
 .sprite-icons-waffle-grey,
 .sprite-icons-voronoi-red,