diff --git a/conf/base.yaml b/conf/base.yaml
index e056cf1ad5..b937fb6576 100644
--- a/conf/base.yaml
+++ b/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
diff --git a/website/src/assets/captures/home/area-bump.png b/website/src/assets/captures/home/area-bump.png
new file mode 100644
index 0000000000..a75309ded2
Binary files /dev/null and b/website/src/assets/captures/home/area-bump.png differ
diff --git a/website/src/assets/captures/home/bar-horizontal.png b/website/src/assets/captures/home/bar-horizontal.png
index df7733d424..98f3276c9f 100644
Binary files a/website/src/assets/captures/home/bar-horizontal.png and b/website/src/assets/captures/home/bar-horizontal.png differ
diff --git a/website/src/assets/captures/home/bar-vertical.png b/website/src/assets/captures/home/bar-vertical.png
index a630afc00b..54ae35a5ad 100644
Binary files a/website/src/assets/captures/home/bar-vertical.png and b/website/src/assets/captures/home/bar-vertical.png differ
diff --git a/website/src/assets/captures/home/bump.png b/website/src/assets/captures/home/bump.png
new file mode 100644
index 0000000000..a377ea93c3
Binary files /dev/null and b/website/src/assets/captures/home/bump.png differ
diff --git a/website/src/assets/captures/home/calendar.png b/website/src/assets/captures/home/calendar.png
index d4caca5f44..f8376369e2 100644
Binary files a/website/src/assets/captures/home/calendar.png and b/website/src/assets/captures/home/calendar.png differ
diff --git a/website/src/assets/captures/home/chord.png b/website/src/assets/captures/home/chord.png
index a5ca5f78a2..d0a001cc97 100644
Binary files a/website/src/assets/captures/home/chord.png and b/website/src/assets/captures/home/chord.png differ
diff --git a/website/src/assets/captures/home/choropleth.png b/website/src/assets/captures/home/choropleth.png
new file mode 100644
index 0000000000..e271a72a3c
Binary files /dev/null and b/website/src/assets/captures/home/choropleth.png differ
diff --git a/website/src/assets/captures/home/circle-packing.png b/website/src/assets/captures/home/circle-packing.png
index 8c45e39648..3c64c139ff 100644
Binary files a/website/src/assets/captures/home/circle-packing.png and b/website/src/assets/captures/home/circle-packing.png differ
diff --git a/website/src/assets/captures/home/line.png b/website/src/assets/captures/home/line.png
index b3b91a7558..76af0505f1 100644
Binary files a/website/src/assets/captures/home/line.png and b/website/src/assets/captures/home/line.png differ
diff --git a/website/src/assets/captures/home/marimekko.png b/website/src/assets/captures/home/marimekko.png
new file mode 100644
index 0000000000..2040f42cce
Binary files /dev/null and b/website/src/assets/captures/home/marimekko.png differ
diff --git a/website/src/assets/captures/home/pie.png b/website/src/assets/captures/home/pie.png
index d72b2a0a0c..3a227b4aac 100644
Binary files a/website/src/assets/captures/home/pie.png and b/website/src/assets/captures/home/pie.png differ
diff --git a/website/src/assets/captures/home/radar.png b/website/src/assets/captures/home/radar.png
index 39db0ffce7..aac90e9068 100644
Binary files a/website/src/assets/captures/home/radar.png and b/website/src/assets/captures/home/radar.png differ
diff --git a/website/src/assets/captures/home/radial-bar.png b/website/src/assets/captures/home/radial-bar.png
new file mode 100644
index 0000000000..87dbf3e459
Binary files /dev/null and b/website/src/assets/captures/home/radial-bar.png differ
diff --git a/website/src/assets/captures/home/sankey.png b/website/src/assets/captures/home/sankey.png
index 76b0b2a772..00991fc301 100644
Binary files a/website/src/assets/captures/home/sankey.png and b/website/src/assets/captures/home/sankey.png differ
diff --git a/website/src/assets/captures/home/stream.png b/website/src/assets/captures/home/stream.png
index 3ca66e7f45..ce556eae70 100644
Binary files a/website/src/assets/captures/home/stream.png and b/website/src/assets/captures/home/stream.png differ
diff --git a/website/src/assets/captures/home/sunburst.png b/website/src/assets/captures/home/sunburst.png
index 73148a8ff4..4e64373a6d 100644
Binary files a/website/src/assets/captures/home/sunburst.png and b/website/src/assets/captures/home/sunburst.png differ
diff --git a/website/src/assets/captures/home/swarmplot.png b/website/src/assets/captures/home/swarmplot.png
index 12c088fd94..d2ac818dc1 100644
Binary files a/website/src/assets/captures/home/swarmplot.png and b/website/src/assets/captures/home/swarmplot.png differ
diff --git a/website/src/assets/captures/home/treemap.png b/website/src/assets/captures/home/treemap.png
index a5cb987ab2..588dfa0556 100644
Binary files a/website/src/assets/captures/home/treemap.png and b/website/src/assets/captures/home/treemap.png differ
diff --git a/website/src/assets/captures/home/voronoi.png b/website/src/assets/captures/home/voronoi.png
index 6c7861d5ac..5c7fe9fe34 100644
Binary files a/website/src/assets/captures/home/voronoi.png and b/website/src/assets/captures/home/voronoi.png differ
diff --git a/website/src/components/home/Home.tsx b/website/src/components/home/Home.tsx
index e4a0937b5f..a82c840f64 100644
--- a/website/src/components/home/Home.tsx
+++ b/website/src/components/home/Home.tsx
@@ -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>
     )
 }
diff --git a/website/src/components/home/HomeAreaBumpDemo.tsx b/website/src/components/home/HomeAreaBumpDemo.tsx
new file mode 100644
index 0000000000..e470929471
--- /dev/null
+++ b/website/src/components/home/HomeAreaBumpDemo.tsx
@@ -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>
+    )
+}
diff --git a/website/src/components/home/HomeBumpDemo.tsx b/website/src/components/home/HomeBumpDemo.tsx
new file mode 100644
index 0000000000..2027208282
--- /dev/null
+++ b/website/src/components/home/HomeBumpDemo.tsx
@@ -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>
+    )
+}
diff --git a/website/src/components/home/HomeChoroplethDemo.tsx b/website/src/components/home/HomeChoroplethDemo.tsx
new file mode 100644
index 0000000000..1b957e5fcd
--- /dev/null
+++ b/website/src/components/home/HomeChoroplethDemo.tsx
@@ -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>
+    )
+}
diff --git a/website/src/components/home/HomeLineDemo.tsx b/website/src/components/home/HomeLineDemo.tsx
index 2129019109..3085f0d872 100644
--- a/website/src/components/home/HomeLineDemo.tsx
+++ b/website/src/components/home/HomeLineDemo.tsx
@@ -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}
             />
diff --git a/website/src/components/home/HomeMarimekkoDemo.tsx b/website/src/components/home/HomeMarimekkoDemo.tsx
index 97d5e61dbc..6ada24547a 100644
--- a/website/src/components/home/HomeMarimekkoDemo.tsx
+++ b/website/src/components/home/HomeMarimekkoDemo.tsx
@@ -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>
diff --git a/website/src/components/home/HomeRadarDemo.tsx b/website/src/components/home/HomeRadarDemo.tsx
index ee14317624..ff2bf657ee 100644
--- a/website/src/components/home/HomeRadarDemo.tsx
+++ b/website/src/components/home/HomeRadarDemo.tsx
@@ -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}
diff --git a/website/src/components/home/HomeRadialBarDemo.tsx b/website/src/components/home/HomeRadialBarDemo.tsx
new file mode 100644
index 0000000000..e2a2c6da45
--- /dev/null
+++ b/website/src/components/home/HomeRadialBarDemo.tsx
@@ -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>
+    )
+}
diff --git a/website/src/components/home/dimensions.ts b/website/src/components/home/dimensions.ts
index 3d44aa6af7..1b83844ee5 100644
--- a/website/src/components/home/dimensions.ts
+++ b/website/src/components/home/dimensions.ts
@@ -7,4 +7,6 @@ export const dimensions = {
         bottom: 20,
         left: 20,
     },
+    lineWidth: 6,
+    pointSize: 18,
 }
diff --git a/website/src/components/home/index.ts b/website/src/components/home/index.ts
index aae2db1455..13dafeff04 100644
--- a/website/src/components/home/index.ts
+++ b/website/src/components/home/index.ts
@@ -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'
diff --git a/website/src/pages/choropleth/canvas.js b/website/src/pages/choropleth/canvas.tsx
similarity index 100%
rename from website/src/pages/choropleth/canvas.js
rename to website/src/pages/choropleth/canvas.tsx
diff --git a/website/src/pages/choropleth/index.js b/website/src/pages/choropleth/index.tsx
similarity index 100%
rename from website/src/pages/choropleth/index.js
rename to website/src/pages/choropleth/index.tsx
diff --git a/website/src/pages/internal/home-demos.tsx b/website/src/pages/internal/home-demos.tsx
index f729242264..966f266f2b 100644
--- a/website/src/pages/internal/home-demos.tsx
+++ b/website/src/pages/internal/home-demos.tsx
@@ -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;
 
     & > * {
diff --git a/website/src/pages/marimekko/index.js b/website/src/pages/marimekko/index.tsx
similarity index 100%
rename from website/src/pages/marimekko/index.js
rename to website/src/pages/marimekko/index.tsx