feat(website): add more chart types to the homepage

Author: plouc

conf/base.yaml

@@ -1,14 +1,19 @@
 baseUrl: http://localhost:8000
 capture:
     home:
+      - id: area-bump
       - id: bar-horizontal
       - id: bar-vertical
+      - id: bump
       - id: calendar
       - id: chord
+      - id: choropleth
       - id: circle-packing
       - id: line
+      - id: marimekko
       - id: pie
       - id: radar
+      - id: radial-bar
       - id: sankey
       - id: stream
       - id: sunburst

website/src/assets/captures/home/area-bump.png

@@ -3,20 +3,25 @@ import { Link } from 'gatsby'
 import styled from 'styled-components'
 import { FiArrowRight } from 'react-icons/fi'
 import media from '../../theming/mediaQueries'
+import areaBump from '../../assets/captures/home/area-bump.png'
 import barHorizontal from '../../assets/captures/home/bar-horizontal.png'
 import barVertical from '../../assets/captures/home/bar-vertical.png'
+import bump from '../../assets/captures/home/bump.png'
 import chord from '../../assets/captures/home/chord.png'
+import choropleth from '../../assets/captures/home/choropleth.png'
 import line from '../../assets/captures/home/line.png'
 import circlePacking from '../../assets/captures/home/circle-packing.png'
 import stream from '../../assets/captures/home/stream.png'
 import pie from '../../assets/captures/home/pie.png'
 import calendar from '../../assets/captures/home/calendar.png'
 import radar from '../../assets/captures/home/radar.png'
+import radialBar from '../../assets/captures/home/radial-bar.png'
 import voronoi from '../../assets/captures/home/voronoi.png'
 import treemap from '../../assets/captures/home/treemap.png'
 import sunburst from '../../assets/captures/home/sunburst.png'
 import sankey from '../../assets/captures/home/sankey.png'
 import swarmplot from '../../assets/captures/home/swarmplot.png'
+import marimekko from '../../assets/captures/home/marimekko.png'
 import logoImg from '../../assets/nivo-logo.png'
 
 const Home = () => {
@@ -25,7 +30,7 @@ const Home = () => {
             <Item name="Chord Diagram" to="/chord/" image={chord} />
             <Item name="Line Chart" to="/line/" image={line} />
             <Item name="Circle Packing Layout" to="/circle-packing/" image={circlePacking} />
-            <Item name="Bar Chart" to="/bar/" image={barVertical} />
+            <Item name="Area Bump Chart" to="/area-bump/" image={areaBump} />
             <Item name="Bar Chart" to="/bar/" image={barHorizontal} />
             <Item name="Stream Chart" to="/stream/" image={stream} />
             <Item name="Pie Chart" to="/pie/" image={pie} />
@@ -45,13 +50,13 @@ const Home = () => {
             <Item name="Sunburst Chart" to="/sunburst/" image={sunburst} />
             <Item name="Sankey" to="/sankey/" image={sankey} />
             <Item name="Swarm Plot" to="/swarmplot/" image={swarmplot} />
-            <Item name="Chord Diagram" to="/chord/" image={chord} />
-            <Item name="Line Chart" to="/line/" image={line} />
-            <Item name="Circle Packing Layout" to="/circle-packing/" image={circlePacking} />
+            <Item name="Marimekko Chart" to="/marimekko/" image={marimekko} />
+            <Item name="Bump Chart" to="/bump/" image={bump} />
+            <Item name="Radial Bar Chart" to="/radial-bar/" image={radialBar} />
+            <Item name="Choropleth Map" to="/choropleth/" image={choropleth} />
             <Item name="Bar Chart" to="/bar/" image={barVertical} />
-            <Item name="Bar Chart" to="/bar/" image={barHorizontal} />
-            <Item name="Stream Chart" to="/stream/" image={stream} />
-            <Item name="Pie Chart" to="/pie/" image={pie} />
+            <Item name="Tree Map" to="/treemap/" image={treemap} />
+            <Item name="Chord Diagram" to="/chord/" image={chord} />
         </Container>
     )
 }

website/src/assets/captures/home/bar-horizontal.png

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react'
+import random from 'lodash/random'
+import { AreaBump } from '@nivo/bump'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+import range from 'lodash/range'
+
+const serieIds = ['JavaScript', 'ReasonML', 'TypeScript', 'Elm']
+const generateData = () => {
+    const years = range(2000, 2005)
+
+    return serieIds.map(id => ({
+        id,
+        data: years.map(year => ({
+            x: year,
+            y: random(5, 40),
+        })),
+    }))
+}
+
+export const HomeAreaBumpDemo = () => {
+    const data = useMemo(() => generateData(), [])
+    const { colors, nivoTheme } = useHomeTheme()
+
+    return (
+        <div id="area-bump">
+            <AreaBump
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={dimensions.margin}
+                data={data}
+                colors={colors}
+                borderWidth={1}
+                spacing={12}
+                borderColor={colors[3]}
+                blendMode="normal"
+                enableGridX={true}
+                axisTop={null}
+                axisBottom={null}
+                startLabel={false}
+                endLabel={false}
+                isInteractive={false}
+                animate={false}
+                theme={nivoTheme}
+            />
+        </div>
+    )
+}

website/src/assets/captures/home/bar-vertical.png

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react'
+import { Bump } from '@nivo/bump'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+import range from 'lodash/range'
+import shuffle from 'lodash/shuffle'
+
+interface Datum {
+    x: number
+    y: number
+}
+
+const generateData = () => {
+    const years = range(2000, 2005)
+    const ranks = range(1, 6)
+
+    const series: {
+        id: string
+        data: Datum[]
+    }[] = ranks.map(rank => {
+        return {
+            id: `Serie ${rank}`,
+            data: [],
+        }
+    })
+
+    years.forEach(year => {
+        shuffle(ranks).forEach((rank, i) => {
+            series[i].data.push({
+                x: year,
+                y: rank,
+            })
+        })
+    })
+
+    return series
+}
+
+export const HomeBumpDemo = () => {
+    const data = useMemo(() => generateData(), [])
+    const { colors, nivoTheme } = useHomeTheme()
+
+    return (
+        <div id="bump">
+            <Bump
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={dimensions.margin}
+                data={data}
+                colors={colors}
+                lineWidth={dimensions.lineWidth}
+                pointSize={dimensions.pointSize}
+                endLabel={false}
+                startLabel={false}
+                enableGridX={true}
+                axisTop={null}
+                axisRight={null}
+                axisBottom={null}
+                axisLeft={null}
+                isInteractive={false}
+                animate={false}
+                theme={nivoTheme}
+            />
+        </div>
+    )
+}

website/src/assets/captures/home/bump.png

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react'
+import { Choropleth } from '@nivo/geo'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+import { generateChoroplethData } from '../../data/components/geo/generator'
+import countries from '../../data/components/geo/world_countries'
+
+export const HomeChoroplethDemo = () => {
+    const data = useMemo(() => generateChoroplethData(), [])
+    const { colors, nivoTheme } = useHomeTheme()
+
+    return (
+        <div id="choropleth">
+            <Choropleth
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={dimensions.margin}
+                data={data}
+                features={countries.features}
+                colors={colors}
+                domain={[0, 1000000]}
+                unknownColor={`${colors[0]}44`}
+                borderWidth={1}
+                borderColor={colors[3]}
+                isInteractive={false}
+                animate={false}
+                theme={nivoTheme}
+                projectionType="mercator"
+                projectionScale={100}
+                projectionTranslation={[0.5, 0.6]}
+                projectionRotation={[0, 0, 0]}
+            />
+        </div>
+    )
+}

website/src/assets/captures/home/calendar.png

@@ -15,13 +15,13 @@ export const HomeLineDemo = () => {
                 margin={dimensions.margin}
                 data={generateDrinkStats(12)}
                 yScale={{ type: 'linear', stacked: true }}
-                lineWidth={4}
+                lineWidth={dimensions.lineWidth}
                 curve="monotoneX"
                 theme={nivoTheme}
                 colors={colors}
                 animate={false}
                 isInteractive={false}
-                pointSize={16}
+                pointSize={dimensions.pointSize}
                 axisLeft={null}
                 axisBottom={null}
             />

website/src/assets/captures/home/chord.png

@@ -1,31 +1,86 @@
 import React, { useMemo } from 'react'
-import { generateChordData } from '@nivo/generators'
-import { ChordCanvas } from '@nivo/chord'
+import random from 'lodash/random'
+import { Marimekko } from '@nivo/marimekko'
 import { useHomeTheme } from './theme'
 import { dimensions } from './dimensions'
 
+const getRandomValue = () => random(0, 32)
+
+const generateData = () =>
+    [`it's good`, `it's sweet`, `it's spicy`, 'worth eating', 'worth buying'].map(statement => ({
+        statement,
+        participation: getRandomValue(),
+        stronglyAgree: getRandomValue(),
+        agree: getRandomValue(),
+        disagree: getRandomValue(),
+        stronglyDisagree: getRandomValue(),
+    }))
+
 export const HomeMarimekkoDemo = () => {
+    const data = useMemo(() => generateData(), [])
     const { colors, nivoTheme } = useHomeTheme()
-    const { matrix, keys } = useMemo(() => generateChordData({ size: 7 }), [])
 
     return (
-        <div id="chord">
-            <ChordCanvas
+        <div id="marimekko">
+            <Marimekko
                 width={dimensions.width}
                 height={dimensions.height}
                 margin={dimensions.margin}
-                data={matrix}
-                keys={keys}
+                data={data}
+                id="statement"
+                value="participation"
+                dimensions={[
+                    {
+                        id: 'disagree strongly',
+                        value: 'stronglyDisagree',
+                    },
+                    {
+                        id: 'disagree',
+                        value: 'disagree',
+                    },
+                    {
+                        id: 'agree',
+                        value: 'agree',
+                    },
+                    {
+                        id: 'agree strongly',
+                        value: 'stronglyAgree',
+                    },
+                ]}
                 colors={colors}
-                padAngle={0.04}
-                innerRadiusRatio={0.9}
-                enableLabel={false}
+                defs={[
+                    {
+                        id: 'lines',
+                        type: 'patternLines',
+                        background: 'rgba(0, 0, 0, 0)',
+                        color: 'inherit',
+                        rotation: -45,
+                        lineWidth: 6,
+                        spacing: 10,
+                    },
+                ]}
+                fill={[
+                    {
+                        match: {
+                            id: 'agree strongly',
+                        },
+                        id: 'lines',
+                    },
+                    {
+                        match: {
+                            id: 'disagree strongly',
+                        },
+                        id: 'lines',
+                    },
+                ]}
+                borderWidth={1}
+                borderColor={colors[3]}
+                innerPadding={6}
+                offset="expand"
+                enableGridX={false}
+                enableGridY={false}
                 isInteractive={false}
                 animate={false}
-                arcBorderWidth={1}
-                arcBorderColor={colors[3]}
-                ribbonBorderWidth={1}
-                ribbonBorderColor={colors[3]}
                 theme={nivoTheme}
             />
         </div>

website/src/assets/captures/home/choropleth.png

@@ -20,7 +20,8 @@ export const HomeRadarDemo = () => {
                 theme={nivoTheme}
                 colors={colors}
                 curve="linearClosed"
-                dotSize={7}
+                dotSize={dimensions.pointSize}
+                borderWidth={dimensions.lineWidth}
                 dotBorderWidth={1}
                 dotBorderColor={colors[1]}
                 enableDotLabel={false}

website/src/assets/captures/home/circle-packing.png

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react'
+import { RadialBar } from '@nivo/radial-bar'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+const generateData = () => {
+    const ids = ['Supermarket', 'Combini', 'Online', 'Marché']
+    const categories = ['Vegetables', 'Fruits', 'Meat']
+
+    return ids.map(id => ({
+        id,
+        data: categories.map(category => ({
+            x: category,
+            y: Math.round(Math.random() * 300),
+        })),
+    }))
+}
+
+export const HomeRadialBarDemo = () => {
+    const data = useMemo(() => generateData(), [])
+    const { colors, nivoTheme } = useHomeTheme()
+
+    return (
+        <div id="radial-bar">
+            <RadialBar
+                width={dimensions.width}
+                height={dimensions.height}
+                margin={dimensions.margin}
+                data={data}
+                tracksColor={`${colors[0]}44`}
+                colors={colors.slice(1)}
+                endAngle={315}
+                borderWidth={1}
+                borderColor={colors[3]}
+                padding={0.3}
+                isInteractive={false}
+                animate={false}
+                theme={nivoTheme}
+                enableLabels={false}
+                radialAxisStart={null}
+                circularAxisOuter={null}
+            />
+        </div>
+    )
+}

website/src/assets/captures/home/line.png

@@ -7,4 +7,6 @@ export const dimensions = {
         bottom: 20,
         left: 20,
     },
+    lineWidth: 6,
+    pointSize: 18,
 }

website/src/assets/captures/home/marimekko.png

@@ -1,13 +1,18 @@
+export * from './HomeAreaBumpDemo'
 export * from './HomeBarDemo'
+export * from './HomeBumpDemo'
 export * from './HomeCalendarDemo'
 export * from './HomeChordDemo'
+export * from './HomeChoroplethDemo'
 export * from './HomeCirclePackingDemo'
 export * from './HomeLineDemo'
 export * from './HomePieDemo'
 export * from './HomeRadarDemo'
+export * from './HomeRadialBarDemo'
 export * from './HomeSankeyDemo'
 export * from './HomeStreamDemo'
 export * from './HomeSunburstDemo'
 export * from './HomeSwarmPlotDemo'
 export * from './HomeTreeMapDemo'
 export * from './HomeVoronoiDemo'
+export * from './HomeMarimekkoDemo'

website/src/assets/captures/home/pie.png

@@ -1,13 +1,18 @@
 import React from 'react'
 import styled from 'styled-components'
 import {
+    HomeAreaBumpDemo,
     HomeBarDemo,
+    HomeBumpDemo,
     HomeCalendarDemo,
     HomeChordDemo,
+    HomeChoroplethDemo,
     HomeCirclePackingDemo,
     HomeLineDemo,
+    HomeMarimekkoDemo,
     HomePieDemo,
     HomeRadarDemo,
+    HomeRadialBarDemo,
     HomeSankeyDemo,
     HomeStreamDemo,
     HomeSunburstDemo,
@@ -18,8 +23,13 @@ import {
 
 const HomeDemosPage = () => (
     <Container>
+        <HomeChoroplethDemo />
+        <HomeRadialBarDemo />
+        <HomeAreaBumpDemo />
         <HomeBarDemo isHorizontal={false} />
         <HomeBarDemo isHorizontal={true} />
+        <HomeBumpDemo />
+        <HomeMarimekkoDemo />
         <HomeCalendarDemo />
         <HomeChordDemo />
         <HomeCirclePackingDemo />
@@ -37,11 +47,11 @@ const HomeDemosPage = () => (
 
 const Container = styled.div`
     background: ${({ theme }) => theme.colors.coloredRange[2]};
-    // background: transparent;
+    background: transparent;
     display: flex;
     flex-wrap: wrap;
     transform-origin: top left;
-    transform: scale3d(0.5, 0.5, 1);
+    // transform: scale3d(0.5, 0.5, 1);
     width: 1800px;
 
     & > * {