diff --git a/packages/network/package.json b/packages/network/package.json
index f1cfc45cb8..47664db540 100644
--- a/packages/network/package.json
+++ b/packages/network/package.json
@@ -35,8 +35,7 @@
     "@nivo/colors": "0.76.0",
     "@nivo/tooltip": "0.76.0",
     "@react-spring/web": "9.3.1",
-    "d3-force": "^2.0.1",
-    "lodash": "^4.17.21"
+    "d3-force": "^2.0.1"
   },
   "devDependencies": {
     "@nivo/core": "0.76.0"
diff --git a/packages/network/src/Network.tsx b/packages/network/src/Network.tsx
index b7a9b9d31f..3a96706322 100644
--- a/packages/network/src/Network.tsx
+++ b/packages/network/src/Network.tsx
@@ -6,15 +6,14 @@ import { useNetwork } from './hooks'
 import { NetworkLinks } from './NetworkLinks'
 import { NetworkNodes } from './NetworkNodes'
 import { NetworkNodeAnnotations } from './NetworkNodeAnnotations'
+import { InputNode, LayerId, NodeTooltip, NetworkSvgProps, ComputedNode, InputLink } from './types'
 
-import { InputNode, LayerId, NodeTooltip, NetworkSvgProps, ComputedNode } from './types'
-
-type InnerNetworkProps<Node extends InputNode> = Omit<
-    NetworkSvgProps<Node>,
+type InnerNetworkProps<Node extends InputNode, Link extends InputLink> = Omit<
+    NetworkSvgProps<Node, Link>,
     'animate' | 'motionConfig' | 'renderWrapper' | 'theme'
 >
 
-const InnerNetwork = <Node extends InputNode>({
+const InnerNetwork = <Node extends InputNode, Link extends InputLink>({
     width,
     height,
     margin: partialMargin,
@@ -30,7 +29,7 @@ const InnerNetwork = <Node extends InputNode>({
     layers = svgDefaultProps.layers,
 
     nodeComponent = svgDefaultProps.nodeComponent as NonNullable<
-        NetworkSvgProps<Node>['nodeComponent']
+        NetworkSvgProps<Node, Link>['nodeComponent']
     >,
     nodeSize = svgDefaultProps.nodeSize,
     activeNodeSize = svgDefaultProps.activeNodeSize,
@@ -41,13 +40,15 @@ const InnerNetwork = <Node extends InputNode>({
     nodeBorderColor = svgDefaultProps.nodeBorderColor,
 
     linkComponent = svgDefaultProps.linkComponent as NonNullable<
-        NetworkSvgProps<Node>['linkComponent']
+        NetworkSvgProps<Node, Link>['linkComponent']
     >,
     linkThickness = svgDefaultProps.linkThickness,
     linkColor = svgDefaultProps.linkColor,
     linkBlendMode = svgDefaultProps.linkBlendMode,
 
-    annotations = svgDefaultProps.annotations as NonNullable<NetworkSvgProps<Node>['annotations']>,
+    annotations = svgDefaultProps.annotations as NonNullable<
+        NetworkSvgProps<Node, Link>['annotations']
+    >,
 
     isInteractive = svgDefaultProps.isInteractive,
     nodeTooltip = svgDefaultProps.nodeTooltip as NodeTooltip<Node>,
@@ -57,14 +58,14 @@ const InnerNetwork = <Node extends InputNode>({
     ariaLabel,
     ariaLabelledBy,
     ariaDescribedBy,
-}: InnerNetworkProps<Node>) => {
+}: InnerNetworkProps<Node, Link>) => {
     const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
         width,
         height,
         partialMargin
     )
 
-    const { nodes, links, setActiveNodeIds } = useNetwork<Node>({
+    const { nodes, links, setActiveNodeIds } = useNetwork<Node, Link>({
         center: [innerWidth / 2, innerHeight / 2],
         nodes: rawNodes,
         links: rawLinks,
@@ -106,7 +107,7 @@ const InnerNetwork = <Node extends InputNode>({
 
     if (layers.includes('links') && links !== null) {
         layerById.links = (
-            <NetworkLinks<Node>
+            <NetworkLinks<Node, Link>
                 key="links"
                 links={links}
                 linkComponent={linkComponent}
@@ -117,7 +118,7 @@ const InnerNetwork = <Node extends InputNode>({
 
     if (layers.includes('nodes') && nodes !== null) {
         layerById.nodes = (
-            <NetworkNodes<Node>
+            <NetworkNodes<Node, Link>
                 key="nodes"
                 nodes={nodes}
                 nodeComponent={nodeComponent}
@@ -132,7 +133,7 @@ const InnerNetwork = <Node extends InputNode>({
 
     if (layers.includes('annotations') && nodes !== null) {
         layerById.annotations = (
-            <NetworkNodeAnnotations<Node>
+            <NetworkNodeAnnotations<Node, Link>
                 key="annotations"
                 nodes={nodes}
                 annotations={annotations}
@@ -171,14 +172,14 @@ const InnerNetwork = <Node extends InputNode>({
     )
 }
 
-export const Network = <Node extends InputNode = InputNode>({
+export const Network = <Node extends InputNode = InputNode, Link extends InputLink = InputLink>({
     isInteractive = svgDefaultProps.isInteractive,
     animate = svgDefaultProps.animate,
     motionConfig = svgDefaultProps.motionConfig,
     theme,
     renderWrapper,
     ...otherProps
-}: NetworkSvgProps<Node>) => (
+}: NetworkSvgProps<Node, Link>) => (
     <Container
         {...{
             animate,
@@ -188,6 +189,6 @@ export const Network = <Node extends InputNode = InputNode>({
             theme,
         }}
     >
-        <InnerNetwork<Node> isInteractive={isInteractive} {...otherProps} />
+        <InnerNetwork<Node, Link> isInteractive={isInteractive} {...otherProps} />
     </Container>
 )
diff --git a/packages/network/src/NetworkCanvas.tsx b/packages/network/src/NetworkCanvas.tsx
index dd9d224989..371d3b5f4a 100644
--- a/packages/network/src/NetworkCanvas.tsx
+++ b/packages/network/src/NetworkCanvas.tsx
@@ -3,14 +3,14 @@ import { getDistance, getRelativeCursor, Container, useDimensions, useTheme } fr
 import { useTooltip } from '@nivo/tooltip'
 import { canvasDefaultProps } from './defaults'
 import { useNetwork } from './hooks'
-import { NetworkCanvasProps, InputNode, NodeTooltip } from './types'
+import { NetworkCanvasProps, InputNode, NodeTooltip, InputLink } from './types'
 
-type InnerNetworkCanvasProps<Node extends InputNode> = Omit<
-    NetworkCanvasProps<Node>,
+type InnerNetworkCanvasProps<Node extends InputNode, Link extends InputLink> = Omit<
+    NetworkCanvasProps<Node, Link>,
     'renderWrapper' | 'theme'
 >
 
-const InnerNetworkCanvas = <Node extends InputNode>({
+const InnerNetworkCanvas = <Node extends InputNode, Link extends InputLink>({
     width,
     height,
     margin: partialMargin,
@@ -28,6 +28,8 @@ const InnerNetworkCanvas = <Node extends InputNode>({
 
     renderNode = canvasDefaultProps.renderNode,
     nodeSize = canvasDefaultProps.nodeSize,
+    activeNodeSize = canvasDefaultProps.activeNodeSize,
+    inactiveNodeSize = canvasDefaultProps.inactiveNodeSize,
     nodeColor = canvasDefaultProps.nodeColor,
     nodeBorderWidth = canvasDefaultProps.nodeBorderWidth,
     nodeBorderColor = canvasDefaultProps.nodeBorderColor,
@@ -39,7 +41,7 @@ const InnerNetworkCanvas = <Node extends InputNode>({
     isInteractive = canvasDefaultProps.isInteractive,
     nodeTooltip = canvasDefaultProps.nodeTooltip as NodeTooltip<Node>,
     onClick,
-}: InnerNetworkCanvasProps<Node>) => {
+}: InnerNetworkCanvasProps<Node, Link>) => {
     const canvasEl = useRef<HTMLCanvasElement | null>(null)
     const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
         width,
@@ -47,7 +49,7 @@ const InnerNetworkCanvas = <Node extends InputNode>({
         partialMargin
     )
 
-    const { nodes, links, setActiveNodeIds } = useNetwork<Node>({
+    const { nodes, links, setActiveNodeIds } = useNetwork<Node, Link>({
         center: [innerWidth / 2, innerHeight / 2],
         nodes: rawNodes,
         links: rawLinks,
@@ -57,6 +59,8 @@ const InnerNetworkCanvas = <Node extends InputNode>({
         distanceMax,
         iterations,
         nodeSize,
+        activeNodeSize,
+        inactiveNodeSize,
         nodeColor,
         nodeBorderWidth,
         nodeBorderColor,
@@ -178,15 +182,18 @@ const InnerNetworkCanvas = <Node extends InputNode>({
     )
 }
 
-export const NetworkCanvas = <Node extends InputNode = InputNode>({
+export const NetworkCanvas = <
+    Node extends InputNode = InputNode,
+    Link extends InputLink = InputLink
+>({
     theme,
     isInteractive = canvasDefaultProps.isInteractive,
     animate = canvasDefaultProps.animate,
     motionConfig = canvasDefaultProps.motionConfig,
     renderWrapper,
     ...otherProps
-}: NetworkCanvasProps<Node>) => (
+}: NetworkCanvasProps<Node, Link>) => (
     <Container {...{ isInteractive, animate, motionConfig, theme, renderWrapper }}>
-        <InnerNetworkCanvas<Node> isInteractive={isInteractive} {...otherProps} />
+        <InnerNetworkCanvas<Node, Link> isInteractive={isInteractive} {...otherProps} />
     </Container>
 )
diff --git a/packages/network/src/NetworkLink.tsx b/packages/network/src/NetworkLink.tsx
index 0e0bab84b5..4ad40fd6ad 100644
--- a/packages/network/src/NetworkLink.tsx
+++ b/packages/network/src/NetworkLink.tsx
@@ -1,12 +1,12 @@
 import { animated } from '@react-spring/web'
-import { InputNode, LinkProps } from './types'
+import { InputLink, InputNode, LinkProps } from './types'
 import { memo } from 'react'
 
-const NonMemoizedNetworkLink = <Node extends InputNode>({
+const NonMemoizedNetworkLink = <Node extends InputNode, Link extends InputLink>({
     link,
     animated: animatedProps,
     blendMode,
-}: LinkProps<Node>) => (
+}: LinkProps<Node, Link>) => (
     <animated.line
         data-testid={`link.${link.id}`}
         stroke={animatedProps.color}
diff --git a/packages/network/src/NetworkLinks.tsx b/packages/network/src/NetworkLinks.tsx
index 39ac2a4ecc..dc4c8c1baf 100644
--- a/packages/network/src/NetworkLinks.tsx
+++ b/packages/network/src/NetworkLinks.tsx
@@ -1,17 +1,17 @@
 import { createElement, useMemo } from 'react'
 import { useTransition } from '@react-spring/web'
 import { useMotionConfig } from '@nivo/core'
-import { ComputedLink, InputNode, LinkComponent, NetworkSvgProps } from './types'
+import { ComputedLink, InputLink, InputNode, LinkComponent, NetworkSvgProps } from './types'
 
-interface NetworkLinksProps<Node extends InputNode> {
-    links: ComputedLink<Node>[]
-    linkComponent: LinkComponent<Node>
-    blendMode: NonNullable<NetworkSvgProps<Node>['linkBlendMode']>
+interface NetworkLinksProps<Node extends InputNode, Link extends InputLink> {
+    links: ComputedLink<Node, Link>[]
+    linkComponent: LinkComponent<Node, Link>
+    blendMode: NonNullable<NetworkSvgProps<Node, Link>['linkBlendMode']>
 }
 
 const getEnterTransition =
-    <Node extends InputNode>() =>
-    (link: ComputedLink<Node>) => ({
+    <Node extends InputNode, Link extends InputLink>() =>
+    (link: ComputedLink<Node, Link>) => ({
         x1: link.source.x,
         y1: link.source.y,
         x2: link.source.x,
@@ -21,8 +21,8 @@ const getEnterTransition =
     })
 
 const getRegularTransition =
-    <Node extends InputNode>() =>
-    (link: ComputedLink<Node>) => ({
+    <Node extends InputNode, Link extends InputLink>() =>
+    (link: ComputedLink<Node, Link>) => ({
         x1: link.source.x,
         y1: link.source.y,
         x2: link.target.x,
@@ -31,20 +31,20 @@ const getRegularTransition =
         opacity: 1,
     })
 
-export const NetworkLinks = <Node extends InputNode>({
+export const NetworkLinks = <Node extends InputNode, Link extends InputLink>({
     links,
     linkComponent,
     blendMode,
-}: NetworkLinksProps<Node>) => {
+}: NetworkLinksProps<Node, Link>) => {
     const { animate, config: springConfig } = useMotionConfig()
 
     const [enterTransition, regularTransition] = useMemo(
-        () => [getEnterTransition<Node>(), getRegularTransition<Node>()],
+        () => [getEnterTransition<Node, Link>(), getRegularTransition<Node, Link>()],
         []
     )
 
     const transition = useTransition<
-        ComputedLink<Node>,
+        ComputedLink<Node, Link>,
         {
             x1: number
             y1: number
diff --git a/packages/network/src/NetworkNode.tsx b/packages/network/src/NetworkNode.tsx
index 29645da463..b25285e1a6 100644
--- a/packages/network/src/NetworkNode.tsx
+++ b/packages/network/src/NetworkNode.tsx
@@ -1,8 +1,8 @@
 import { memo } from 'react'
 import { animated, to } from '@react-spring/web'
-import { InputNode, NodeProps } from './types'
+import { InputLink, InputNode, NodeProps } from './types'
 
-const NonMemoizedNetworkNode = <Node extends InputNode>({
+const NonMemoizedNetworkNode = <Node extends InputNode, Link extends InputLink>({
     node,
     animated: animatedProps,
     blendMode,
@@ -10,7 +10,7 @@ const NonMemoizedNetworkNode = <Node extends InputNode>({
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
-}: NodeProps<Node>) => (
+}: NodeProps<Node, Link>) => (
     <animated.circle
         data-testid={`node.${node.id}`}
         transform={to([animatedProps.x, animatedProps.y, animatedProps.scale], (x, y, scale) => {
@@ -21,6 +21,7 @@ const NonMemoizedNetworkNode = <Node extends InputNode>({
         style={{ mixBlendMode: blendMode }}
         strokeWidth={animatedProps.borderWidth}
         stroke={animatedProps.borderColor}
+        opacity={animatedProps.opacity}
         onClick={onClick ? event => onClick(node, event) : undefined}
         onMouseEnter={onMouseEnter ? event => onMouseEnter(node, event) : undefined}
         onMouseMove={onMouseMove ? event => onMouseMove(node, event) : undefined}
diff --git a/packages/network/src/NetworkNodeAnnotations.tsx b/packages/network/src/NetworkNodeAnnotations.tsx
index 07601ab8d0..69882a1bff 100644
--- a/packages/network/src/NetworkNodeAnnotations.tsx
+++ b/packages/network/src/NetworkNodeAnnotations.tsx
@@ -1,16 +1,16 @@
 import { Annotation } from '@nivo/annotations'
-import { ComputedNode, InputNode, NetworkSvgProps } from './types'
+import { ComputedNode, InputLink, InputNode, NetworkSvgProps } from './types'
 import { useNodeAnnotations } from './hooks'
 
-interface NetworkNodeAnnotationsProps<Node extends InputNode> {
+interface NetworkNodeAnnotationsProps<Node extends InputNode, Link extends InputLink> {
     nodes: ComputedNode<Node>[]
-    annotations: NonNullable<NetworkSvgProps<Node>['annotations']>
+    annotations: NonNullable<NetworkSvgProps<Node, Link>['annotations']>
 }
 
-export const NetworkNodeAnnotations = <Node extends InputNode>({
+export const NetworkNodeAnnotations = <Node extends InputNode, Link extends InputLink>({
     nodes,
     annotations,
-}: NetworkNodeAnnotationsProps<Node>) => {
+}: NetworkNodeAnnotationsProps<Node, Link>) => {
     const boundAnnotations = useNodeAnnotations<Node>(nodes, annotations)
 
     return (
diff --git a/packages/network/src/NetworkNodes.tsx b/packages/network/src/NetworkNodes.tsx
index 43f7eb1fc8..ade6ddc46b 100644
--- a/packages/network/src/NetworkNodes.tsx
+++ b/packages/network/src/NetworkNodes.tsx
@@ -1,12 +1,19 @@
 import { createElement, MouseEvent, useMemo } from 'react'
 import { useTransition } from '@react-spring/web'
 import { useMotionConfig } from '@nivo/core'
-import { InputNode, ComputedNode, NodeAnimatedProps, NodeComponent, NetworkSvgProps } from './types'
+import {
+    InputNode,
+    ComputedNode,
+    NodeAnimatedProps,
+    NodeComponent,
+    NetworkSvgProps,
+    InputLink,
+} from './types'
 
-interface NetworkNodesProps<Node extends InputNode> {
+interface NetworkNodesProps<Node extends InputNode, Link extends InputLink> {
     nodes: ComputedNode<Node>[]
-    nodeComponent: NodeComponent<Node>
-    blendMode: NonNullable<NetworkSvgProps<Node>['nodeBlendMode']>
+    nodeComponent: NodeComponent<Node, Link>
+    blendMode: NonNullable<NetworkSvgProps<Node, Link>['nodeBlendMode']>
     onClick?: (node: ComputedNode<Node>, event: MouseEvent) => void
     onMouseEnter?: (node: ComputedNode<Node>, event: MouseEvent) => void
     onMouseMove?: (node: ComputedNode<Node>, event: MouseEvent) => void
@@ -23,6 +30,7 @@ const getEnterTransition =
         borderWidth: node.borderWidth,
         borderColor: node.borderColor,
         scale: 0,
+        opacity: 0,
     })
 
 const getRegularTransition =
@@ -35,6 +43,7 @@ const getRegularTransition =
         borderWidth: node.borderWidth,
         borderColor: node.borderColor,
         scale: 1,
+        opacity: 1,
     })
 
 const getExitTransition =
@@ -47,9 +56,10 @@ const getExitTransition =
         borderWidth: node.borderWidth,
         borderColor: node.borderColor,
         scale: 0,
+        opacity: 0,
     })
 
-export const NetworkNodes = <Node extends InputNode>({
+export const NetworkNodes = <Node extends InputNode, Link extends InputLink>({
     nodes,
     nodeComponent,
     blendMode,
@@ -57,7 +67,7 @@ export const NetworkNodes = <Node extends InputNode>({
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
-}: NetworkNodesProps<Node>) => {
+}: NetworkNodesProps<Node, Link>) => {
     const { animate, config: springConfig } = useMotionConfig()
 
     const [enterTransition, regularTransition, exitTransition] = useMemo(
diff --git a/packages/network/src/ResponsiveNetwork.tsx b/packages/network/src/ResponsiveNetwork.tsx
index e5693e8de6..69f4cbe5e6 100644
--- a/packages/network/src/ResponsiveNetwork.tsx
+++ b/packages/network/src/ResponsiveNetwork.tsx
@@ -1,11 +1,14 @@
 import { ResponsiveWrapper } from '@nivo/core'
-import { InputNode, NetworkSvgProps } from './types'
+import { InputLink, InputNode, NetworkSvgProps } from './types'
 import { Network } from './Network'
 
-export const ResponsiveNetwork = <Node extends InputNode = InputNode>(
-    props: Omit<NetworkSvgProps<Node>, 'height' | 'width'>
+export const ResponsiveNetwork = <
+    Node extends InputNode = InputNode,
+    Link extends InputLink = InputLink
+>(
+    props: Omit<NetworkSvgProps<Node, Link>, 'height' | 'width'>
 ) => (
     <ResponsiveWrapper>
-        {({ width, height }) => <Network<Node> width={width} height={height} {...props} />}
+        {({ width, height }) => <Network<Node, Link> width={width} height={height} {...props} />}
     </ResponsiveWrapper>
 )
diff --git a/packages/network/src/ResponsiveNetworkCanvas.tsx b/packages/network/src/ResponsiveNetworkCanvas.tsx
index 53a651cb11..ccbd5e65d1 100644
--- a/packages/network/src/ResponsiveNetworkCanvas.tsx
+++ b/packages/network/src/ResponsiveNetworkCanvas.tsx
@@ -1,11 +1,16 @@
 import { ResponsiveWrapper } from '@nivo/core'
-import { NetworkCanvasProps, InputNode } from './types'
+import { NetworkCanvasProps, InputNode, InputLink } from './types'
 import { NetworkCanvas } from './NetworkCanvas'
 
-export const ResponsiveNetworkCanvas = <Node extends InputNode = InputNode>(
-    props: Omit<NetworkCanvasProps<Node>, 'height' | 'width'>
+export const ResponsiveNetworkCanvas = <
+    Node extends InputNode = InputNode,
+    Link extends InputLink = InputLink
+>(
+    props: Omit<NetworkCanvasProps<Node, Link>, 'height' | 'width'>
 ) => (
     <ResponsiveWrapper>
-        {({ width, height }) => <NetworkCanvas<Node> width={width} height={height} {...props} />}
+        {({ width, height }) => (
+            <NetworkCanvas<Node, Link> width={width} height={height} {...props} />
+        )}
     </ResponsiveWrapper>
 )
diff --git a/packages/network/src/defaults.ts b/packages/network/src/defaults.ts
index a93b3fbee3..fc966d3d8f 100644
--- a/packages/network/src/defaults.ts
+++ b/packages/network/src/defaults.ts
@@ -1,4 +1,4 @@
-import { NetworkCommonProps, InputNode, LayerId, NetworkSvgProps } from './types'
+import { NetworkCommonProps, InputNode, LayerId, NetworkSvgProps, InputLink } from './types'
 import { NetworkNode } from './NetworkNode'
 import { renderCanvasNode } from './renderCanvasNode'
 import { NetworkLink } from './NetworkLink'
@@ -6,7 +6,7 @@ import { renderCanvasLink } from './renderCanvasLink'
 import { NetworkNodeTooltip } from './NetworkNodeTooltip'
 
 export const commonDefaultProps: Omit<
-    NetworkCommonProps<InputNode>,
+    NetworkCommonProps<InputNode, InputLink>,
     | 'margin'
     | 'theme'
     | 'activeLinkThickness'
@@ -22,10 +22,10 @@ export const commonDefaultProps: Omit<
     layers: ['links', 'nodes', 'annotations'],
 
     linkDistance: 30,
-    repulsivity: 10,
+    repulsivity: 3,
     distanceMin: 1,
     distanceMax: Infinity,
-    iterations: 90,
+    iterations: 160,
 
     nodeSize: 12,
     activeNodeSize: 18,
@@ -50,10 +50,14 @@ export const commonDefaultProps: Omit<
 
 export const svgDefaultProps = {
     ...commonDefaultProps,
-    nodeComponent: NetworkNode as NonNullable<NetworkSvgProps<InputNode>['nodeComponent']>,
-    nodeBlendMode: 'normal' as NonNullable<NetworkSvgProps<InputNode>['nodeBlendMode']>,
-    linkComponent: NetworkLink as NonNullable<NetworkSvgProps<InputNode>['linkComponent']>,
-    linkBlendMode: 'normal' as NonNullable<NetworkSvgProps<InputNode>['linkBlendMode']>,
+    nodeComponent: NetworkNode as NonNullable<
+        NetworkSvgProps<InputNode, InputLink>['nodeComponent']
+    >,
+    nodeBlendMode: 'normal' as NonNullable<NetworkSvgProps<InputNode, InputLink>['nodeBlendMode']>,
+    linkComponent: NetworkLink as NonNullable<
+        NetworkSvgProps<InputNode, InputLink>['linkComponent']
+    >,
+    linkBlendMode: 'normal' as NonNullable<NetworkSvgProps<InputNode, InputLink>['linkBlendMode']>,
 }
 
 export const canvasDefaultProps = {
diff --git a/packages/network/src/hooks.ts b/packages/network/src/hooks.ts
index 10eb9d19c2..b3450fdb53 100644
--- a/packages/network/src/hooks.ts
+++ b/packages/network/src/hooks.ts
@@ -1,7 +1,4 @@
 import { useState, useEffect, useMemo, useCallback } from 'react'
-import get from 'lodash/get'
-import isString from 'lodash/isString'
-import isNumber from 'lodash/isNumber'
 import { forceSimulation, forceManyBody, forceCenter, forceLink } from 'd3-force'
 import { useTheme } from '@nivo/core'
 import { useInheritedColor } from '@nivo/colors'
@@ -14,53 +11,53 @@ import {
     DerivedProp,
     ComputedNode,
     ComputedLink,
+    TransientNode,
+    TransientLink,
 } from './types'
 
-const computeForces = <Node extends InputNode>({
+const useDerivedProp = <Target, Output extends string | number>(
+    instruction: DerivedProp<Target, Output>
+) =>
+    useMemo(() => {
+        if (typeof instruction === 'function') return instruction
+        return () => instruction
+    }, [instruction])
+
+const useComputeForces = <Node extends InputNode, Link extends InputLink>({
     linkDistance,
     repulsivity,
     distanceMin,
     distanceMax,
     center,
 }: {
-    linkDistance: NetworkCommonProps<Node>['linkDistance']
-    repulsivity: NetworkCommonProps<Node>['repulsivity']
-    distanceMin: NetworkCommonProps<Node>['distanceMin']
-    distanceMax: NetworkCommonProps<Node>['distanceMax']
+    linkDistance: NetworkCommonProps<Node, Link>['linkDistance']
+    repulsivity: NetworkCommonProps<Node, Link>['repulsivity']
+    distanceMin: NetworkCommonProps<Node, Link>['distanceMin']
+    distanceMax: NetworkCommonProps<Node, Link>['distanceMax']
     center: [number, number]
 }) => {
-    let getLinkDistance
-    if (typeof linkDistance === 'function') {
-        getLinkDistance = linkDistance
-    } else if (isNumber(linkDistance)) {
-        getLinkDistance = linkDistance
-    } else if (isString(linkDistance)) {
-        getLinkDistance = (link: InputLink) => get(link, linkDistance)
-    }
+    const getLinkDistance = useDerivedProp<Link, number>(linkDistance)
 
-    const linkForce = forceLink()
-        .id((d: any) => d.id)
-        .distance(getLinkDistance as any)
+    const centerX = center[0]
+    const centerY = center[1]
 
-    const chargeForce = forceManyBody()
-        .strength(-repulsivity)
-        .distanceMin(distanceMin)
-        .distanceMax(distanceMax)
+    return useMemo(() => {
+        const linkForce = forceLink<TransientNode<Node>, TransientLink<Node, Link>>().distance(
+            link => getLinkDistance(link.data)
+        )
 
-    const centerForce = forceCenter(center[0], center[1])
+        const chargeForce = forceManyBody()
+            .strength(-repulsivity)
+            .distanceMin(distanceMin)
+            .distanceMax(distanceMax)
 
-    return { link: linkForce, charge: chargeForce, center: centerForce }
-}
+        const centerForce = forceCenter(centerX, centerY)
 
-const useDerivedProp = <Target, Output extends string | number>(
-    instruction: DerivedProp<Target, Output>
-) =>
-    useMemo(() => {
-        if (typeof instruction === 'function') return instruction
-        return () => instruction
-    }, [instruction])
+        return { link: linkForce, charge: chargeForce, center: centerForce }
+    }, [getLinkDistance, repulsivity, distanceMin, distanceMax, centerX, centerY])
+}
 
-const useNodeStyle = <Node extends InputNode>({
+const useNodeStyle = <Node extends InputNode, Link extends InputLink>({
     size,
     activeSize,
     inactiveSize,
@@ -70,17 +67,15 @@ const useNodeStyle = <Node extends InputNode>({
     isInteractive,
     activeNodeIds,
 }: {
-    size: NetworkCommonProps<Node>['nodeSize']
-    activeSize: NetworkCommonProps<Node>['activeNodeSize']
-    inactiveSize: NetworkCommonProps<Node>['inactiveNodeSize']
-    color: NetworkCommonProps<Node>['nodeColor']
-    borderWidth: NetworkCommonProps<Node>['nodeBorderWidth']
-    borderColor: NetworkCommonProps<Node>['nodeBorderColor']
-    isInteractive: NetworkCommonProps<Node>['isInteractive']
+    size: NetworkCommonProps<Node, Link>['nodeSize']
+    activeSize: NetworkCommonProps<Node, Link>['activeNodeSize']
+    inactiveSize: NetworkCommonProps<Node, Link>['inactiveNodeSize']
+    color: NetworkCommonProps<Node, Link>['nodeColor']
+    borderWidth: NetworkCommonProps<Node, Link>['nodeBorderWidth']
+    borderColor: NetworkCommonProps<Node, Link>['nodeBorderColor']
+    isInteractive: NetworkCommonProps<Node, Link>['isInteractive']
     activeNodeIds: string[]
 }) => {
-    type IntermediateNode = Pick<ComputedNode<Node>, 'id' | 'data' | 'index' | 'x' | 'y'>
-
     const theme = useTheme()
 
     const getSize = useDerivedProp(size)
@@ -88,7 +83,7 @@ const useNodeStyle = <Node extends InputNode>({
     const getBorderWidth = useDerivedProp(borderWidth)
     const getBorderColor = useInheritedColor(borderColor, theme)
     const getNormalStyle = useCallback(
-        (node: IntermediateNode) => {
+        (node: TransientNode<Node>) => {
             const color = getColor(node.data)
 
             return {
@@ -103,7 +98,7 @@ const useNodeStyle = <Node extends InputNode>({
 
     const getActiveSize = useDerivedProp(activeSize)
     const getActiveStyle = useCallback(
-        (node: IntermediateNode) => {
+        (node: TransientNode<Node>) => {
             const color = getColor(node.data)
 
             return {
@@ -118,7 +113,7 @@ const useNodeStyle = <Node extends InputNode>({
 
     const getInactiveSize = useDerivedProp(inactiveSize)
     const getInactiveStyle = useCallback(
-        (node: IntermediateNode) => {
+        (node: TransientNode<Node>) => {
             const color = getColor(node.data)
 
             return {
@@ -132,7 +127,7 @@ const useNodeStyle = <Node extends InputNode>({
     )
 
     return useCallback(
-        (node: IntermediateNode) => {
+        (node: TransientNode<Node>) => {
             if (!isInteractive || activeNodeIds.length === 0) return getNormalStyle(node)
             if (activeNodeIds.includes(node.id)) return getActiveStyle(node)
             return getInactiveStyle(node)
@@ -141,7 +136,7 @@ const useNodeStyle = <Node extends InputNode>({
     )
 }
 
-export const useNetwork = <Node extends InputNode = InputNode>({
+export const useNetwork = <Node extends InputNode = InputNode, Link extends InputLink = InputLink>({
     center,
     nodes,
     links,
@@ -162,87 +157,78 @@ export const useNetwork = <Node extends InputNode = InputNode>({
 }: {
     center: [number, number]
     nodes: Node[]
-    links: InputLink[]
-    linkDistance?: NetworkCommonProps<Node>['linkDistance']
-    repulsivity?: NetworkCommonProps<Node>['repulsivity']
-    distanceMin?: NetworkCommonProps<Node>['distanceMin']
-    distanceMax?: NetworkCommonProps<Node>['distanceMax']
-    iterations?: NetworkCommonProps<Node>['iterations']
-    nodeSize?: NetworkCommonProps<Node>['nodeSize']
-    activeNodeSize?: NetworkCommonProps<Node>['activeNodeSize']
-    inactiveNodeSize?: NetworkCommonProps<Node>['inactiveNodeSize']
-    nodeColor?: NetworkCommonProps<Node>['nodeColor']
-    nodeBorderWidth?: NetworkCommonProps<Node>['nodeBorderWidth']
-    nodeBorderColor?: NetworkCommonProps<Node>['nodeBorderColor']
-    linkThickness?: NetworkCommonProps<Node>['linkThickness']
-    linkColor?: NetworkCommonProps<Node>['linkColor']
-    isInteractive?: NetworkCommonProps<Node>['isInteractive']
+    links: Link[]
+    linkDistance?: NetworkCommonProps<Node, Link>['linkDistance']
+    repulsivity?: NetworkCommonProps<Node, Link>['repulsivity']
+    distanceMin?: NetworkCommonProps<Node, Link>['distanceMin']
+    distanceMax?: NetworkCommonProps<Node, Link>['distanceMax']
+    iterations?: NetworkCommonProps<Node, Link>['iterations']
+    nodeSize?: NetworkCommonProps<Node, Link>['nodeSize']
+    activeNodeSize?: NetworkCommonProps<Node, Link>['activeNodeSize']
+    inactiveNodeSize?: NetworkCommonProps<Node, Link>['inactiveNodeSize']
+    nodeColor?: NetworkCommonProps<Node, Link>['nodeColor']
+    nodeBorderWidth?: NetworkCommonProps<Node, Link>['nodeBorderWidth']
+    nodeBorderColor?: NetworkCommonProps<Node, Link>['nodeBorderColor']
+    linkThickness?: NetworkCommonProps<Node, Link>['linkThickness']
+    linkColor?: NetworkCommonProps<Node, Link>['linkColor']
+    isInteractive?: NetworkCommonProps<Node, Link>['isInteractive']
 }) => {
     // we're using `null` instead of empty array so that we can dissociate
     // initial rendering from updates when using transitions.
-    const [currentNodes, setCurrentNodes] = useState<
-        null | Pick<ComputedNode<Node>, 'id' | 'data' | 'index' | 'x' | 'y'>[]
-    >(null)
-    const [currentLinks, setCurrentLinks] = useState<null | ComputedLink<Node>[]>(null)
+    const [transientNodes, setTransientNodes] = useState<null | TransientNode<Node>[]>(null)
+    const [transientLinks, setTransientLinks] = useState<null | TransientLink<Node, Link>[]>(null)
 
-    const centerX = center[0]
-    const centerY = center[1]
+    const forces = useComputeForces<Node, Link>({
+        linkDistance,
+        repulsivity,
+        distanceMin,
+        distanceMax,
+        center,
+    })
 
     useEffect(() => {
-        const forces = computeForces<Node>({
-            linkDistance,
-            repulsivity,
-            distanceMin,
-            distanceMax,
-            center: [centerX, centerY],
-        })
-
-        const nodesCopy: Pick<ComputedNode<Node>, 'id' | 'data' | 'index' | 'x' | 'y'>[] =
-            nodes.map(node => ({
-                id: node.id,
-                data: { ...node },
-                // populated later by D3, mutation
-                index: 0,
-                x: 0,
-                y: 0,
-            }))
-        const linksCopy: InputLink[] = links.map(link => ({
-            // generate a unique id for each link
-            id: `${link.source}.${link.target}`,
-            ...link,
+        // copy the nodes & links to avoid mutating the original ones.
+        const _transientNodes: TransientNode<Node>[] = nodes.map(node => ({
+            id: node.id,
+            data: { ...node },
+            // the properties below are populated by D3, via mutations
+            index: 0,
+            x: 0,
+            y: 0,
+            vx: 0,
+            vy: 0,
+        }))
+        const _transientLinks: TransientLink<Node, Link>[] = links.map(link => ({
+            data: { ...link },
+            // populated by D3, via mutation
+            index: 0,
+            // replace ids with objects, otherwise D3 does this automatically
+            // which is a bit annoying with typings because then `source` & `target`
+            // can be either strings (before the simulation) or an objects (after).
+            source: _transientNodes.find(node => node.id === link.source)!,
+            target: _transientNodes.find(node => node.id === link.target)!,
         }))
 
-        const simulation = forceSimulation(nodesCopy as any[])
-            .force('link', forces.link.links(linksCopy))
+        const simulation = forceSimulation(_transientNodes)
+            .force('link', forces.link.links(_transientLinks))
             .force('charge', forces.charge)
             .force('center', forces.center)
             .stop()
 
+        // this will set `index`, `x`, `y`, `vx`, `vy` for each node.
         simulation.tick(iterations)
 
-        // d3 mutates data, hence the castings
-        setCurrentNodes(nodesCopy)
-        setCurrentLinks(linksCopy as unknown as ComputedLink<Node>[])
+        setTransientNodes(_transientNodes)
+        setTransientLinks(_transientLinks)
 
         return () => {
-            // prevent the simulation from continuing in case the data is updated.
             simulation.stop()
         }
-    }, [
-        centerX,
-        centerY,
-        nodes,
-        links,
-        linkDistance,
-        repulsivity,
-        distanceMin,
-        distanceMax,
-        iterations,
-    ])
+    }, [nodes, links, forces, iterations, setTransientNodes, setTransientLinks])
 
     const [activeNodeIds, setActiveNodeIds] = useState<string[]>([])
 
-    const getNodeStyle = useNodeStyle<Node>({
+    const getNodeStyle = useNodeStyle<Node, Link>({
         size: nodeSize,
         activeSize: activeNodeSize,
         inactiveSize: inactiveNodeSize,
@@ -252,39 +238,42 @@ export const useNetwork = <Node extends InputNode = InputNode>({
         isInteractive,
         activeNodeIds,
     })
-    const enhancedNodes: ComputedNode<Node>[] | null = useMemo(() => {
-        if (currentNodes === null) return null
+    const computedNodes: ComputedNode<Node>[] | null = useMemo(() => {
+        if (transientNodes === null) return null
 
-        return currentNodes.map(node => ({
+        return transientNodes.map(node => ({
             ...node,
             ...getNodeStyle(node),
         }))
-    }, [currentNodes, getNodeStyle])
+    }, [transientNodes, getNodeStyle])
 
     const theme = useTheme()
     const getLinkThickness = useDerivedProp(linkThickness)
     const getLinkColor = useInheritedColor(linkColor, theme)
-    const enhancedLinks: ComputedLink<Node>[] | null = useMemo(() => {
-        if (currentLinks === null || enhancedNodes === null) return null
-
-        return currentLinks.map(link => {
-            const linkWithEnhancedNodes = {
-                ...link,
-                source: enhancedNodes.find(node => node.id === link.source.id)!,
-                target: enhancedNodes.find(node => node.id === link.target.id)!,
+
+    const computedLinks: ComputedLink<Node, Link>[] | null = useMemo(() => {
+        if (transientLinks === null || computedNodes === null) return null
+
+        return transientLinks.map(({ index, ...link }) => {
+            const linkWithComputedNodes: Omit<ComputedLink<Node, Link>, 'color' | 'thickness'> = {
+                id: `${link.source.id}.${link.target.id}`,
+                data: link.data,
+                index,
+                source: computedNodes.find(node => node.id === link.source.id)!,
+                target: computedNodes.find(node => node.id === link.target.id)!,
             }
 
             return {
-                ...linkWithEnhancedNodes,
-                thickness: getLinkThickness(linkWithEnhancedNodes),
-                color: getLinkColor(linkWithEnhancedNodes),
+                ...linkWithComputedNodes,
+                thickness: getLinkThickness(linkWithComputedNodes),
+                color: getLinkColor(linkWithComputedNodes),
             }
         })
-    }, [currentLinks, getLinkThickness, getLinkColor, enhancedNodes])
+    }, [transientLinks, computedNodes, getLinkThickness, getLinkColor])
 
     return {
-        nodes: enhancedNodes,
-        links: enhancedLinks,
+        nodes: computedNodes,
+        links: computedLinks,
         setActiveNodeIds,
     }
 }
diff --git a/packages/network/src/renderCanvasLink.ts b/packages/network/src/renderCanvasLink.ts
index 3f019632a8..940a378dcd 100644
--- a/packages/network/src/renderCanvasLink.ts
+++ b/packages/network/src/renderCanvasLink.ts
@@ -1,8 +1,8 @@
-import { InputNode, ComputedLink } from './types'
+import { InputNode, ComputedLink, InputLink } from './types'
 
-export const renderCanvasLink = <Node extends InputNode>(
+export const renderCanvasLink = <Node extends InputNode, Link extends InputLink>(
     ctx: CanvasRenderingContext2D,
-    link: ComputedLink<Node>
+    link: ComputedLink<Node, Link>
 ) => {
     ctx.strokeStyle = link.color
     ctx.lineWidth = link.thickness
diff --git a/packages/network/src/types.ts b/packages/network/src/types.ts
index a3de758b81..16aac38a44 100644
--- a/packages/network/src/types.ts
+++ b/packages/network/src/types.ts
@@ -4,6 +4,7 @@ import { Box, Theme, Dimensions, ModernMotionProps, CssMixBlendMode } from '@niv
 import { InheritedColorConfig } from '@nivo/colors'
 import { AnnotationMatcher } from '@nivo/annotations'
 
+// minimal node data
 export interface InputNode {
     id: string
 }
@@ -11,15 +12,26 @@ export interface InputNode {
 export interface ComputedNode<Node extends InputNode> {
     id: string
     data: Node
+    // computed by D3
+    index: number
     x: number
     y: number
-    index: number
+    vx: number
+    vy: number
+    // styles computed by nivo
     size: number
     color: string
     borderWidth: number
     borderColor: string
 }
 
+// intermediate type for D3 as it mutates nodes,
+// `ComputedNode` is used for the final data structure.
+export type TransientNode<Node extends InputNode> = Omit<
+    ComputedNode<Node>,
+    'size' | 'color' | 'borderWidth' | 'borderColor'
+>
+
 export interface NodeAnimatedProps {
     x: number
     y: number
@@ -31,16 +43,18 @@ export interface NodeAnimatedProps {
     scale: number
 }
 
-export interface NodeProps<Node extends InputNode> {
+export interface NodeProps<Node extends InputNode, Link extends InputLink> {
     node: ComputedNode<Node>
     animated: AnimatedProps<NodeAnimatedProps>
-    blendMode: NonNullable<NetworkSvgProps<Node>['nodeBlendMode']>
+    blendMode: NonNullable<NetworkSvgProps<Node, Link>['nodeBlendMode']>
     onClick?: (node: ComputedNode<Node>, event: MouseEvent) => void
     onMouseEnter?: (node: ComputedNode<Node>, event: MouseEvent) => void
     onMouseMove?: (node: ComputedNode<Node>, event: MouseEvent) => void
     onMouseLeave?: (node: ComputedNode<Node>, event: MouseEvent) => void
 }
-export type NodeComponent<Node extends InputNode> = FunctionComponent<NodeProps<Node>>
+export type NodeComponent<Node extends InputNode, Link extends InputLink> = FunctionComponent<
+    NodeProps<Node, Link>
+>
 export type NodeCanvasRenderer<Node extends InputNode> = (
     ctx: CanvasRenderingContext2D,
     node: ComputedNode<Node>
@@ -51,16 +65,25 @@ export interface InputLink {
     target: string
 }
 
-export interface ComputedLink<Node extends InputNode> {
+export interface ComputedLink<Node extends InputNode, Link extends InputLink> {
     id: string
+    data: Link
+    index: number
     source: ComputedNode<Node>
-    previousSource?: ComputedNode<Node>
     target: ComputedNode<Node>
-    previousTarget?: ComputedNode<Node>
     thickness: number
     color: string
 }
 
+// intermediate type for D3 as it mutates links,
+// `ComputedLink` is used for the final data structure.
+export interface TransientLink<Node extends InputNode, Link extends InputLink> {
+    data: Link
+    index: number
+    source: TransientNode<Node>
+    target: TransientNode<Node>
+}
+
 export interface LinkAnimatedProps {
     x1: number
     y1: number
@@ -70,33 +93,37 @@ export interface LinkAnimatedProps {
     opacity: number
 }
 
-export interface LinkProps<Node extends InputNode> {
-    link: ComputedLink<Node>
+export interface LinkProps<Node extends InputNode, Link extends InputLink> {
+    link: ComputedLink<Node, Link>
     animated: AnimatedProps<LinkAnimatedProps>
-    blendMode: NonNullable<NetworkSvgProps<Node>['linkBlendMode']>
+    blendMode: NonNullable<NetworkSvgProps<Node, Link>['linkBlendMode']>
 }
-export type LinkComponent<Node extends InputNode> = FunctionComponent<LinkProps<Node>>
-export type LinkCanvasRenderer<Node extends InputNode> = (
+export type LinkComponent<Node extends InputNode, Link extends InputLink> = FunctionComponent<
+    LinkProps<Node, Link>
+>
+export type LinkCanvasRenderer<Node extends InputNode, Link extends InputLink> = (
     ctx: CanvasRenderingContext2D,
-    node: ComputedLink<Node>
+    node: ComputedLink<Node, Link>
 ) => void
 
-export interface NetworkDataProps<Node extends InputNode> {
+export interface NetworkDataProps<Node extends InputNode, Link extends InputLink> {
     data: {
         nodes: Node[]
-        links: InputLink[]
+        links: Link[]
     }
 }
 
 export type LayerId = 'links' | 'nodes' | 'annotations'
-export interface CustomLayerProps<Node extends InputNode> {
+export interface CustomLayerProps<Node extends InputNode, Link extends InputLink> {
     nodes: ComputedNode<Node>[]
-    links: ComputedLink<Node>[]
+    links: ComputedLink<Node, Link>[]
 }
-export type CustomLayer<Node extends InputNode> = FunctionComponent<CustomLayerProps<Node>>
-export type CustomCanvasLayer<Node extends InputNode> = (
+export type CustomLayer<Node extends InputNode, Link extends InputLink> = FunctionComponent<
+    CustomLayerProps<Node, Link>
+>
+export type CustomCanvasLayer<Node extends InputNode, Link extends InputLink> = (
     ctx: CanvasRenderingContext2D,
-    props: CustomLayerProps<Node>
+    props: CustomLayerProps<Node, Link>
 ) => void
 
 export interface NodeTooltipProps<Node extends InputNode> {
@@ -108,10 +135,10 @@ export type DerivedProp<Target, Output extends number | string> =
     | Output
     | ((target: Target) => Output)
 
-export type NetworkCommonProps<Node extends InputNode> = {
+export type NetworkCommonProps<Node extends InputNode, Link extends InputLink> = {
     margin: Box
 
-    linkDistance: DerivedProp<ComputedLink<Node>, number>
+    linkDistance: DerivedProp<Link, number>
     repulsivity: number
     distanceMin: number
     distanceMax: number
@@ -128,9 +155,9 @@ export type NetworkCommonProps<Node extends InputNode> = {
         Omit<ComputedNode<Node>, 'size' | 'borderWidth' | 'borderColor'>
     >
 
-    linkThickness: DerivedProp<ComputedLink<Node>, number>
-    activeLinkThickness: DerivedProp<ComputedLink<Node>, number>
-    linkColor: InheritedColorConfig<ComputedLink<Node>>
+    linkThickness: DerivedProp<Omit<ComputedLink<Node, Link>, 'color' | 'thickness'>, number>
+    activeLinkThickness: DerivedProp<Omit<ComputedLink<Node, Link>, 'color' | 'thickness'>, number>
+    linkColor: InheritedColorConfig<Omit<ComputedLink<Node, Link>, 'color' | 'thickness'>>
 
     annotations: AnnotationMatcher<ComputedNode<Node>>[]
 
@@ -147,21 +174,25 @@ export type NetworkCommonProps<Node extends InputNode> = {
     ariaDescribedBy: AriaAttributes['aria-describedby']
 } & Required<ModernMotionProps>
 
-export type NetworkSvgProps<Node extends InputNode> = Partial<NetworkCommonProps<Node>> &
-    NetworkDataProps<Node> &
+export type NetworkSvgProps<Node extends InputNode, Link extends InputLink> = Partial<
+    NetworkCommonProps<Node, Link>
+> &
+    NetworkDataProps<Node, Link> &
     Dimensions & {
-        layers?: (LayerId | CustomLayer<Node>)[]
-        nodeComponent?: NodeComponent<Node>
+        layers?: (LayerId | CustomLayer<Node, Link>)[]
+        nodeComponent?: NodeComponent<Node, Link>
         nodeBlendMode?: CssMixBlendMode
-        linkComponent?: LinkComponent<Node>
+        linkComponent?: LinkComponent<Node, Link>
         linkBlendMode?: CssMixBlendMode
     }
 
-export type NetworkCanvasProps<Node extends InputNode> = Partial<NetworkCommonProps<Node>> &
-    NetworkDataProps<Node> &
+export type NetworkCanvasProps<Node extends InputNode, Link extends InputLink> = Partial<
+    NetworkCommonProps<Node, Link>
+> &
+    NetworkDataProps<Node, Link> &
     Dimensions & {
-        layers?: (LayerId | CustomCanvasLayer<Node>)[]
+        layers?: (LayerId | CustomCanvasLayer<Node, Link>)[]
         renderNode?: NodeCanvasRenderer<Node>
-        renderLink?: LinkCanvasRenderer<Node>
+        renderLink?: LinkCanvasRenderer<Node, Link>
         pixelRatio?: number
     }
diff --git a/website/src/pages/network/index.tsx b/website/src/pages/network/index.tsx
index 1832cc9903..cd1a881f2c 100644
--- a/website/src/pages/network/index.tsx
+++ b/website/src/pages/network/index.tsx
@@ -11,6 +11,9 @@ import mapper, {
 } from '../../data/components/network/mapper'
 import { groups } from '../../data/components/network/props'
 
+type Node = ReturnType<typeof generateData>['nodes'][number]
+type Link = ReturnType<typeof generateData>['links'][number]
+
 const initialProperties = Object.freeze({
     margin: {
         top: 0,
@@ -19,9 +22,10 @@ const initialProperties = Object.freeze({
         left: 0,
     },
 
-    linkDistance: 30,
-    repulsivity: 3,
-    iterations: 60,
+    linkDistance: (link: Link) => link.distance,
+    distanceMax: 50,
+    repulsivity: defaults.repulsivity,
+    iterations: defaults.iterations,
 
     nodeSize: dynamicNodeSizeValue,
     activeNodeSize: dynamicActiveNodeSizeValue,
@@ -80,7 +84,7 @@ const Network = () => {
         >
             {(properties, data, theme, logAction) => {
                 return (
-                    <ResponsiveNetwork
+                    <ResponsiveNetwork<Node, Link>
                         data={data}
                         {...properties}
                         theme={theme}