feat(website): add swarmplot icon

conf/base.yaml

@@ -402,4 +402,17 @@ capture:
         output: ./website/src/assets/icons/sunburst-dark-neutral.png
       - path: /internal/icons
         selector: '#sunburst-darkColored'
-        output: ./website/src/assets/icons/sunburst-dark-colored.png
+        output: ./website/src/assets/icons/sunburst-dark-colored.png
+
+      - path: /internal/icons
+        selector: '#swarmplot-lightNeutral'
+        output: ./website/src/assets/icons/swarmplot-light-neutral.png
+      - path: /internal/icons
+        selector: '#swarmplot-lightColored'
+        output: ./website/src/assets/icons/swarmplot-light-colored.png
+      - path: /internal/icons
+        selector: '#swarmplot-darkNeutral'
+        output: ./website/src/assets/icons/swarmplot-dark-neutral.png
+      - path: /internal/icons
+        selector: '#swarmplot-darkColored'
+        output: ./website/src/assets/icons/swarmplot-dark-colored.png

website/src/components/icons/CirclePackingIcon.js

@@ -47,7 +47,7 @@ const chartProps = colors => ({
             { id: 'm', value: 0.2, color: colors[0] },
         ],
     },
-    colorBy: d => d.color,
+    colors: { datum: 'color' },
     padding: 2,
     enableLabel: false,
     leavesOnly: true,

website/src/components/icons/Icons.js

@@ -25,6 +25,7 @@ import SankeyIcon from './SankeyIcon'
 import ScatterPlotIcon from './ScatterPlotIcon'
 import StreamIcon from './StreamIcon'
 import SunburstIcon from './SunburstIcon'
+import SwarmPlotIcon from './SwarmPlotIcon'
 import TreeMapIcon from './TreeMapIcon'
 import WaffleIcon from './WaffleIcon'
 import ParallelCoordinatesIcon from './ParallelCoordinatesIcon'
@@ -80,6 +81,7 @@ const Icons = () => (
         <ScatterPlotIcon />
         <StreamIcon />
         <SunburstIcon />
+        <SwarmPlotIcon />
         <TreeMapIcon />
         <VoronoiIcon />
         <WaffleIcon />

website/src/components/icons/SwarmPlotIcon.js

@@ -0,0 +1,106 @@
+/*
+ * 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 { SwarmPlot } from '@nivo/swarmplot'
+import swarmplotLightNeutralImg from '../../assets/icons/swarmplot-light-neutral.png'
+import swarmplotLightColoredImg from '../../assets/icons/swarmplot-light-colored.png'
+import swarmplotDarkNeutralImg from '../../assets/icons/swarmplot-dark-neutral.png'
+import swarmplotDarkColoredImg from '../../assets/icons/swarmplot-dark-colored.png'
+import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+
+const values = [
+    1,
+    1,
+    2,
+    2,
+    2,
+    2,
+    2,
+    3,
+    3,
+    3,
+    3,
+    3,
+    3,
+    3,
+    3,
+    4,
+    4,
+    4,
+    5,
+    5,
+    6,
+    6,
+    6,
+    6,
+    6,
+    7,
+    7,
+    8,
+    9,
+]
+
+const chartProps = {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    scale: {
+        type: 'linear',
+        min: 1,
+        max: 9,
+    },
+    forceStrength: 6,
+    simulationIterations: 400,
+    data: [
+        {
+            id: 'A',
+            data: values.map((v, i) => ({
+                id: i,
+                value: v,
+            })),
+        },
+    ],
+    margin: {
+        top: 6,
+        right: 6,
+        bottom: 6,
+        left: 6,
+    },
+    layout: 'vertical',
+    enableGridX: false,
+    enableGridY: false,
+    axisTop: null,
+    axisRight: null,
+    axisBottom: null,
+    axisLeft: null,
+    nodeSize: 10,
+    nodePadding: 1,
+    isInteractive: false,
+    animate: true,
+}
+
+const SwarmPlotIconItem = ({ type }) => (
+    <Icon id={`swarmplot-${type}`} type={type}>
+        <SwarmPlot {...chartProps} colors={[colors[type].colors[3]]} />
+    </Icon>
+)
+
+const SwarmPlotIcon = () => (
+    <>
+        <SwarmPlotIconItem type="lightNeutral" />
+        <IconImg url={swarmplotLightNeutralImg} />
+        <SwarmPlotIconItem type="lightColored" />
+        <IconImg url={swarmplotLightColoredImg} />
+        <SwarmPlotIconItem type="darkNeutral" />
+        <IconImg url={swarmplotDarkNeutralImg} />
+        <SwarmPlotIconItem type="darkColored" />
+        <IconImg url={swarmplotDarkColoredImg} />
+    </>
+)
+
+export default SwarmPlotIcon