diff --git a/packages/network/stories/network.stories.tsx b/packages/network/stories/network.stories.tsx
index 3a2b871b6d..4b64da532a 100644
--- a/packages/network/stories/network.stories.tsx
+++ b/packages/network/stories/network.stories.tsx
@@ -4,11 +4,10 @@ import { withKnobs } from '@storybook/addon-knobs'
 import { generateNetworkData } from '@nivo/generators'
 import {
     Network,
-    NetworkNodeProps,
-    NetworkLinkProps,
-    NetworkNodeTooltipProps,
+    NodeProps,
+    LinkProps,
+    NodeTooltipProps,
     NetworkSvgProps,
-    svgDefaultProps,
     // @ts-ignore
 } from '../src'
 
@@ -20,21 +19,22 @@ export default {
 
 const data = generateNetworkData()
 
-type NodeType = typeof data['nodes'][0]
+type Node = typeof data['nodes'][number]
+type Link = typeof data['links'][number]
 
-const commonProperties: NetworkSvgProps<NodeType> = {
-    ...svgDefaultProps,
+const commonProperties: NetworkSvgProps<Node, Link> = {
     data,
-    width: 900,
-    height: 400,
+    width: 600,
+    height: 600,
     nodeColor: node => node.color,
-    repulsivity: 6,
+    repulsivity: 10,
     iterations: 60,
+    linkDistance: link => link.distance * 1.3,
 }
 
-export const Default = () => <Network<NodeType> {...commonProperties} />
+export const Default = () => <Network<Node, Link> {...commonProperties} />
 
-const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NodeType>) => (
+const CustomNodeTooltipComponent = ({ node }: NodeTooltipProps<Node>) => (
     <div
         style={{
             background: node.color,
@@ -46,43 +46,46 @@ const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NodeType>)
     >
         <strong>ID: {node.id}</strong>
         <br />
-        depth: {node.depth}
-        <br />
-        radius: {node.radius}
+        size: {node.size}
     </div>
 )
 
 export const CustomNodeTooltip = () => (
-    <Network<NodeType> {...commonProperties} nodeTooltip={CustomNodeTooltipComponent} />
+    <Network<Node, Link> {...commonProperties} nodeTooltip={CustomNodeTooltipComponent} />
 )
 
-const CustomNodeComponent = ({ node }: NetworkNodeProps<NodeType>) => (
-    <g transform={`translate(${node.x - 6},${node.y - 8}) scale(${0.5})`}>
-        <circle cx="12" cy="8" r="5" />
-        <path d="M3,21 h18 C 21,12 3,12 3,21" />
+const CustomNodeComponent = ({ node }: NodeProps<Node>) => (
+    <g transform={`translate(${node.x - 12},${node.y - 18})`}>
+        <circle cx="12" cy="8" r="5" fill={node.color} stroke="#ffffff" />
+        <path d="M3,21 h18 C 21,12 3,12 3,21" fill={node.color} stroke="#ffffff" />
     </g>
 )
 
 export const CustomNode = () => (
-    <Network<NodeType> {...commonProperties} nodeComponent={CustomNodeComponent} />
+    <Network<Node, Link> {...commonProperties} nodeComponent={CustomNodeComponent} />
 )
 
-const CustomLinkComponent = ({ link }: NetworkLinkProps<NodeType>) => (
+const CustomLinkComponent = ({ link }: LinkProps<Node, Link>) => (
     <line
         x1={link.source.x}
         y1={link.source.y}
         x2={link.target.x}
         y2={link.target.y}
         stroke={link.color}
-        strokeWidth={1}
+        strokeWidth={link.thickness}
         strokeDasharray="5 7"
+        strokeLinecap="round"
     />
 )
 
 export const CustomLink = () => (
-    <Network<NodeType> {...commonProperties} linkComponent={CustomLinkComponent} />
+    <Network<Node, Link>
+        {...commonProperties}
+        linkThickness={link => 2 + link.target.data.height * 2}
+        linkComponent={CustomLinkComponent}
+    />
 )
 
 export const OnClickHandler = () => (
-    <Network<NodeType> {...commonProperties} onClick={action('onClick')} />
+    <Network<Node, Link> {...commonProperties} onClick={action('onClick')} />
 )
diff --git a/packages/network/stories/networkCanvas.stories.tsx b/packages/network/stories/networkCanvas.stories.tsx
index 0d03b4d77b..8cca846a48 100644
--- a/packages/network/stories/networkCanvas.stories.tsx
+++ b/packages/network/stories/networkCanvas.stories.tsx
@@ -4,10 +4,9 @@ import { withKnobs } from '@storybook/addon-knobs'
 import { generateNetworkData } from '@nivo/generators'
 import {
     NetworkCanvas,
-    canvasDefaultProps,
     NetworkCanvasProps,
-    NetworkComputedNode,
-    NetworkNodeTooltipProps,
+    ComputedNode,
+    NodeTooltipProps,
     // @ts-ignore
 } from '../src'
 
@@ -19,21 +18,22 @@ export default {
 
 const data = generateNetworkData()
 
-type NodeType = typeof data['nodes'][0]
+type Node = typeof data['nodes'][number]
+type Link = typeof data['links'][number]
 
-const commonProperties: NetworkCanvasProps<NodeType> = {
-    ...canvasDefaultProps,
+const commonProperties: NetworkCanvasProps<Node, Link> = {
     data,
-    width: 900,
-    height: 400,
+    width: 600,
+    height: 600,
     nodeColor: node => node.color,
-    repulsivity: 6,
+    repulsivity: 10,
     iterations: 60,
+    linkDistance: link => link.distance * 1.3,
 }
 
-export const Default = () => <NetworkCanvas<NodeType> {...commonProperties} />
+export const Default = () => <NetworkCanvas<Node, Link> {...commonProperties} />
 
-const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NodeType>) => (
+const CustomNodeTooltipComponent = ({ node }: NodeTooltipProps<Node>) => (
     <div
         style={{
             background: node.color,
@@ -45,30 +45,28 @@ const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NodeType>)
     >
         <strong>ID: {node.id}</strong>
         <br />
-        depth: {node.depth}
-        <br />
-        radius: {node.radius}
+        size: {node.size}
     </div>
 )
 
 export const CustomNodeTooltip = () => (
-    <NetworkCanvas<NodeType> {...commonProperties} nodeTooltip={CustomNodeTooltipComponent} />
+    <NetworkCanvas<Node, Link> {...commonProperties} nodeTooltip={CustomNodeTooltipComponent} />
 )
 
-const customNodeRenderer = (ctx: CanvasRenderingContext2D, node: NetworkComputedNode<NodeType>) => {
+const customNodeRenderer = (ctx: CanvasRenderingContext2D, node: ComputedNode<Node>) => {
     ctx.fillStyle = node.color
 
     ctx.beginPath()
-    ctx.moveTo(node.x, node.y - node.radius)
-    ctx.lineTo(node.x + node.radius, node.y + node.radius)
-    ctx.lineTo(node.x - node.radius, node.y + node.radius)
+    ctx.moveTo(node.x, node.y - node.size / 2)
+    ctx.lineTo(node.x + node.size / 2, node.y + node.size / 2)
+    ctx.lineTo(node.x - node.size / 2, node.y + node.size / 2)
     ctx.fill()
 }
 
 export const CustomNodeRenderer = () => (
-    <NetworkCanvas<NodeType> {...commonProperties} renderNode={customNodeRenderer} />
+    <NetworkCanvas<Node, Link> {...commonProperties} renderNode={customNodeRenderer} />
 )
 
 export const OnClickHandler = () => (
-    <NetworkCanvas<NodeType> {...commonProperties} onClick={action('onClick')} />
+    <NetworkCanvas<Node, Link> {...commonProperties} onClick={action('onClick')} />
 )
diff --git a/website/src/data/config.ts b/website/src/data/config.ts
index 82be3bca6d..37f85a174e 100644
--- a/website/src/data/config.ts
+++ b/website/src/data/config.ts
@@ -1,9 +1,9 @@
 export default {
     // local
     // nivoApiUrl: 'http://localhost:3030/nivo',
-    // storybookUrl: 'http://localhost:6006/',
+    storybookUrl: 'http://localhost:6006/',
 
     // production
     nivoApiUrl: 'https://nivo-api.herokuapp.com/nivo',
-    storybookUrl: 'https://nivo.rocks/storybook/',
+    // storybookUrl: 'https://nivo.rocks/storybook/',
 }