diff --git a/website/src/components/home/HomeBarDemo.tsx b/website/src/components/home/HomeBarDemo.tsx
new file mode 100644
index 0000000000..a39bc0d30d
--- /dev/null
+++ b/website/src/components/home/HomeBarDemo.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { Bar } from '@nivo/bar'
+import { generateCountriesData } from '@nivo/generators'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeBarDemo = ({ isHorizontal = false }: { isHorizontal: boolean }) => {
+ const { colors, nivoTheme } = useHomeTheme()
+ const data = isHorizontal
+ ? generateCountriesData(['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut'], {
+ size: 9,
+ })
+ : generateCountriesData(['hot dogs', 'burgers', 'sandwich'], {
+ size: 11,
+ })
+
+ const keys = isHorizontal
+ ? ['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut']
+ : ['hot dogs', 'burgers', 'sandwich']
+
+ return (
+
+
+
+ )
+}
diff --git a/website/src/components/home/HomeCalendarDemo.tsx b/website/src/components/home/HomeCalendarDemo.tsx
new file mode 100644
index 0000000000..68257036b1
--- /dev/null
+++ b/website/src/components/home/HomeCalendarDemo.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import styled from 'styled-components'
+import { generateDayCounts } from '@nivo/generators'
+import { Calendar } from '@nivo/calendar'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+const calendarFrom = new Date(2015, 3, 1)
+const calendarTo = new Date(2017, 5, 1)
+const calendarData = generateDayCounts(calendarFrom, calendarTo)
+
+export const HomeCalendarDemo = () => {
+ const { colors, nivoTheme } = useHomeTheme()
+
+ return (
+
+
+
+ )
+}
+
+const Container = styled.div`
+ svg text {
+ display: none;
+ }
+`
diff --git a/website/src/components/home/HomeChordDemo.tsx b/website/src/components/home/HomeChordDemo.tsx
new file mode 100644
index 0000000000..bbada95aa6
--- /dev/null
+++ b/website/src/components/home/HomeChordDemo.tsx
@@ -0,0 +1,33 @@
+import React, { useMemo } from 'react'
+import { generateChordData } from '@nivo/generators'
+import { ChordCanvas } from '@nivo/chord'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeChordDemo = () => {
+ const { colors, nivoTheme } = useHomeTheme()
+ const { matrix, keys } = useMemo(() => generateChordData({ size: 7 }), [])
+
+ return (
+
+
+
+ )
+}
diff --git a/website/src/components/home/HomeCirclePackingDemo.tsx b/website/src/components/home/HomeCirclePackingDemo.tsx
new file mode 100644
index 0000000000..250e3764ac
--- /dev/null
+++ b/website/src/components/home/HomeCirclePackingDemo.tsx
@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react'
+import { generateLibTree } from '@nivo/generators'
+import { CirclePacking } from '@nivo/circle-packing'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeCirclePackingDemo = () => {
+ const { reversedColors, nivoTheme } = useHomeTheme()
+ const data = useMemo(() => generateLibTree(), [])
+
+ return (
+
+
+
+ )
+}
diff --git a/website/src/components/home/HomeLineDemo.tsx b/website/src/components/home/HomeLineDemo.tsx
new file mode 100644
index 0000000000..b4007739a7
--- /dev/null
+++ b/website/src/components/home/HomeLineDemo.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { generateDrinkStats } from '@nivo/generators'
+import { Line } from '@nivo/line'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeLineDemo = () => {
+ const { colors, nivoTheme } = useHomeTheme()
+
+ return (
+
+
+
+ )
+}
diff --git a/website/src/components/home/HomePieDemo.tsx b/website/src/components/home/HomePieDemo.tsx
new file mode 100644
index 0000000000..eb1a9bb692
--- /dev/null
+++ b/website/src/components/home/HomePieDemo.tsx
@@ -0,0 +1,37 @@
+import React, { useMemo } from 'react'
+import { generateProgrammingLanguageStats } from '@nivo/generators'
+import { Pie } from '@nivo/pie'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomePieDemo = () => {
+ const { colors, nivoTheme } = useHomeTheme()
+ const data = useMemo(
+ () =>
+ generateProgrammingLanguageStats(true, 12).map(d => ({
+ id: d.label,
+ ...d,
+ })),
+ []
+ )
+
+ return (
+
+ )
+}
diff --git a/website/src/components/home/HomeRadarDemo.tsx b/website/src/components/home/HomeRadarDemo.tsx
new file mode 100644
index 0000000000..ee14317624
--- /dev/null
+++ b/website/src/components/home/HomeRadarDemo.tsx
@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react'
+import styled from 'styled-components'
+import { generateWinesTastes } from '@nivo/generators'
+import { Radar } from '@nivo/radar'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeRadarDemo = () => {
+ const { colors, nivoTheme } = useHomeTheme()
+ const data = useMemo(() => generateWinesTastes(), [])
+
+ return (
+
+
+
+ )
+}
+
+const Container = styled.div`
+ svg text {
+ display: none;
+ }
+`
diff --git a/website/src/components/home/HomeSankeyDemo.tsx b/website/src/components/home/HomeSankeyDemo.tsx
new file mode 100644
index 0000000000..2d457e323f
--- /dev/null
+++ b/website/src/components/home/HomeSankeyDemo.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { generateSankeyData } from '@nivo/generators'
+import { Sankey } from '@nivo/sankey'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeSankeyDemo = () => {
+ const { colors, nivoTheme } = useHomeTheme()
+
+ return (
+
+
+
+ )
+}
diff --git a/website/src/components/home/HomeStreamDemo.tsx b/website/src/components/home/HomeStreamDemo.tsx
new file mode 100644
index 0000000000..0e51c3afda
--- /dev/null
+++ b/website/src/components/home/HomeStreamDemo.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import range from 'lodash/range'
+import random from 'lodash/random'
+import { Stream } from '@nivo/stream'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+const streamDataLayerCount = 5
+const generateStreamData = () =>
+ range(16).map(() =>
+ range(streamDataLayerCount).reduce((acc, i) => {
+ acc[i] = random(10, 200)
+ return acc
+ }, {})
+ )
+
+export const HomeStreamDemo = () => {
+ const { reversedColors, nivoTheme } = useHomeTheme()
+
+ return (
+
+
+
+ )
+}
diff --git a/website/src/components/home/HomeSunburstDemo.tsx b/website/src/components/home/HomeSunburstDemo.tsx
new file mode 100644
index 0000000000..2808cefd60
--- /dev/null
+++ b/website/src/components/home/HomeSunburstDemo.tsx
@@ -0,0 +1,28 @@
+import React, { useMemo } from 'react'
+import { generateLibTree } from '@nivo/generators'
+import { Sunburst } from '@nivo/sunburst'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeSunburstDemo = () => {
+ const { colors, nivoTheme } = useHomeTheme()
+ const data = useMemo(() => generateLibTree(), [])
+
+ return (
+
+
+
+ )
+}
diff --git a/website/src/components/home/HomeSwarmPlotDemo.tsx b/website/src/components/home/HomeSwarmPlotDemo.tsx
new file mode 100644
index 0000000000..f1f825cd36
--- /dev/null
+++ b/website/src/components/home/HomeSwarmPlotDemo.tsx
@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react'
+import { generateSwarmPlotData } from '@nivo/generators'
+import { SwarmPlot } from '@nivo/swarmplot'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeSwarmPlotDemo = () => {
+ const { colors, reversedColors, nivoTheme } = useHomeTheme()
+ const data = useMemo(() => generateSwarmPlotData(['thing'], { min: 50, max: 50 }), [])
+
+ return (
+
+
+
+ )
+}
diff --git a/website/src/components/home/HomeTreeMapDemo.tsx b/website/src/components/home/HomeTreeMapDemo.tsx
new file mode 100644
index 0000000000..9484b81a10
--- /dev/null
+++ b/website/src/components/home/HomeTreeMapDemo.tsx
@@ -0,0 +1,37 @@
+import React, { useMemo } from 'react'
+import { generateLibTree } from '@nivo/generators'
+import { TreeMap } from '@nivo/treemap'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+export const HomeTreeMapDemo = () => {
+ const { colors, nivoTheme } = useHomeTheme()
+ const data = useMemo(() => generateLibTree(), [])
+
+ return (
+
+
+
+ )
+}
diff --git a/website/src/components/home/HomeVoronoiDemo.tsx b/website/src/components/home/HomeVoronoiDemo.tsx
new file mode 100644
index 0000000000..92af68d21d
--- /dev/null
+++ b/website/src/components/home/HomeVoronoiDemo.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import range from 'lodash/range'
+import { Voronoi } from '@nivo/voronoi'
+import { useHomeTheme } from './theme'
+import { dimensions } from './dimensions'
+
+const voronoi = {
+ xDomain: [0, 400],
+ yDomain: [0, 300],
+}
+voronoi.data = range(80).map(id => ({
+ id,
+ x: Math.random() * voronoi.xDomain[1],
+ y: Math.random() * voronoi.yDomain[1],
+}))
+
+export const HomeVoronoiDemo = () => {
+ const { colors, nivoTheme } = useHomeTheme()
+
+ return (
+
+
+
+ )
+}
diff --git a/website/src/components/home/dimensions.ts b/website/src/components/home/dimensions.ts
new file mode 100644
index 0000000000..3d44aa6af7
--- /dev/null
+++ b/website/src/components/home/dimensions.ts
@@ -0,0 +1,10 @@
+export const dimensions = {
+ width: 600,
+ height: 400,
+ margin: {
+ top: 20,
+ right: 20,
+ bottom: 20,
+ left: 20,
+ },
+}
diff --git a/website/src/components/home/index.ts b/website/src/components/home/index.ts
new file mode 100644
index 0000000000..aae2db1455
--- /dev/null
+++ b/website/src/components/home/index.ts
@@ -0,0 +1,13 @@
+export * from './HomeBarDemo'
+export * from './HomeCalendarDemo'
+export * from './HomeChordDemo'
+export * from './HomeCirclePackingDemo'
+export * from './HomeLineDemo'
+export * from './HomePieDemo'
+export * from './HomeRadarDemo'
+export * from './HomeSankeyDemo'
+export * from './HomeStreamDemo'
+export * from './HomeSunburstDemo'
+export * from './HomeSwarmPlotDemo'
+export * from './HomeTreeMapDemo'
+export * from './HomeVoronoiDemo'
diff --git a/website/src/components/home/settings.js b/website/src/components/home/settings.ts
similarity index 100%
rename from website/src/components/home/settings.js
rename to website/src/components/home/settings.ts
diff --git a/website/src/components/home/theme.ts b/website/src/components/home/theme.ts
new file mode 100644
index 0000000000..3a0032b4a5
--- /dev/null
+++ b/website/src/components/home/theme.ts
@@ -0,0 +1,47 @@
+import { useMemo } from 'react'
+import { useTheme } from 'styled-components'
+
+export const useHomeTheme = () => {
+ const theme = useTheme()
+
+ const { colors, reversedColors } = useMemo(() => {
+ const _colors: string[] = theme.colors.coloredRange.slice(1)
+ const _reversedColors = [..._colors].reverse()
+
+ return { colors: _colors, reversedColors: _reversedColors }
+ }, [theme])
+
+ const nivoTheme = useMemo(() => {
+ return {
+ axis: {
+ ticks: {
+ line: {
+ stroke: theme.colors.coloredRange[4],
+ },
+ text: {
+ fill: theme.colors.coloredRange[4],
+ fontSize: 9,
+ },
+ },
+ },
+ grid: {
+ line: {
+ stroke: theme.colors.coloredRange[4],
+ strokeWidth: 2,
+ strokeDasharray: '5,8',
+ },
+ },
+ labels: {
+ text: {
+ fill: theme.colors.coloredRange[4],
+ },
+ },
+ }
+ }, [theme])
+
+ return {
+ colors,
+ reversedColors,
+ nivoTheme,
+ }
+}
diff --git a/website/src/pages/internal/homepage-demos.tsx b/website/src/pages/internal/homepage-demos.tsx
new file mode 100644
index 0000000000..e672dacc69
--- /dev/null
+++ b/website/src/pages/internal/homepage-demos.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import styled from 'styled-components'
+import {
+ HomeBarDemo,
+ HomeCalendarDemo,
+ HomeChordDemo,
+ HomeCirclePackingDemo,
+ HomeLineDemo,
+ HomePieDemo,
+ HomeRadarDemo,
+ HomeSankeyDemo,
+ HomeStreamDemo,
+ HomeSunburstDemo,
+ HomeSwarmPlotDemo,
+ HomeTreeMapDemo,
+ HomeVoronoiDemo,
+} from '../../components/home'
+
+const HomepageDemosPage = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+)
+
+const Container = styled.div`
+ background: ${({ theme }) => theme.colors.coloredRange[2]};
+ // background: transparent;
+ display: flex;
+ flex-wrap: wrap;
+
+ & > * {
+ width: 300px;
+ height: 200px;
+ }
+
+ & > * > * {
+ transform-origin: top left;
+ transform: scale3d(0.5, 0.5, 1);
+ }
+`
+
+export default HomepageDemosPage