diff --git a/example/app/bar-chart.tsx b/example/app/bar-chart.tsx
index be9dbde2..1dea4de8 100644
--- a/example/app/bar-chart.tsx
+++ b/example/app/bar-chart.tsx
@@ -7,8 +7,20 @@ import {
 } from "@shopify/react-native-skia";
 import React, { useState } from "react";
 import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
-import { Bar, CartesianChart } from "victory-native";
+import {
+  Bar,
+  CartesianChart,
+  getTransformComponents,
+  setScale,
+  setTranslate,
+  useChartTransformState,
+} from "victory-native";
 import { useDarkMode } from "react-native-dark";
+import {
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import inter from "../assets/inter-medium.ttf";
 import { appColors } from "./consts/colors";
 import { InputSwitch } from "../components/InputSwitch";
@@ -37,12 +49,46 @@ export default function BarChartPage(props: { segment: string }) {
   const [labelPosition, setLabelPosition] = useState<
     "top" | "bottom" | "left" | "right"
   >("top");
+  const { state } = useChartTransformState();
+
+  const k = useSharedValue(1);
+  const tx = useSharedValue(0);
+  const ty = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => {
+      return state.panActive.value || state.zoomActive.value;
+    },
+    (cv, pv) => {
+      if (!cv && pv) {
+        const vals = getTransformComponents(state.matrix.value);
+        k.value = vals.scaleX;
+        tx.value = vals.translateX;
+        ty.value = vals.translateY;
+
+        k.value = withTiming(1);
+        tx.value = withTiming(0);
+        ty.value = withTiming(0);
+      }
+    },
+  );
+
+  useAnimatedReaction(
+    () => {
+      return { k: k.value, tx: tx.value, ty: ty.value };
+    },
+    ({ k, tx, ty }) => {
+      const m = setTranslate(state.matrix.value, tx, ty);
+      state.matrix.value = setScale(m, k);
+    },
+  );
 
   return (
     <>
       <SafeAreaView style={styles.safeView}>
         <View style={styles.chart}>
           <CartesianChart
+            transformState={state}
             xKey="month"
             padding={5}
             yKeys={["listenCount"]}
diff --git a/example/app/consts/routes.ts b/example/app/consts/routes.ts
index d130a604..d835f8d7 100644
--- a/example/app/consts/routes.ts
+++ b/example/app/consts/routes.ts
@@ -18,7 +18,7 @@ export const ChartRoutes: {
   {
     title: "Bar Chart",
     description:
-      "This is a single Bar chart in Victory that supports customized spacing between each bar.",
+      "This is a single Bar chart in Victory that supports customized spacing between each bar as well as pan/zoom.",
     path: "/bar-chart",
   },
   {
@@ -103,7 +103,7 @@ export const ChartRoutes: {
   {
     title: "Pie Chart",
     description:
-      "This is a Pie chart in Victory. It has support for customizing each slice and adding insets.",
+      "This is a Pie chart in Victory. It has support for customizing each slice and adding insets as well as pan/zoom",
     path: "/pie-chart",
   },
   {
@@ -123,6 +123,11 @@ export const ChartRoutes: {
     description: "This is an Area chart with dashed X and Y axes.",
     path: "/dashed-axes",
   },
+  {
+    title: "Pan Zoom",
+    description: "This is an example of pan zoom functionality",
+    path: "/pan-zoom",
+  },
 ];
 
 if (__DEV__) {
diff --git a/example/app/multiple-y-axes.tsx b/example/app/multiple-y-axes.tsx
index faf37f2b..bdead611 100644
--- a/example/app/multiple-y-axes.tsx
+++ b/example/app/multiple-y-axes.tsx
@@ -2,10 +2,25 @@ import { useFont } from "@shopify/react-native-skia";
 import * as React from "react";
 import { useState } from "react";
 import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
-import { CartesianChart, Line, Bar, Area } from "victory-native";
+import {
+  CartesianChart,
+  Line,
+  Bar,
+  Area,
+  useChartTransformState,
+  getTransformComponents,
+  setTranslate,
+  setScale,
+} from "victory-native";
+import {
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import inter from "../assets/inter-medium.ttf";
 import { appColors } from "./consts/colors";
 import { InputSlider } from "../components/InputSlider";
+import { InfoCard } from "../components/InfoCard";
 
 const randomNumber = () => Math.floor(Math.random() * (50 - 25 + 1)) + 25;
 const randomNumber2 = () => Math.floor(Math.random() * (50 - 25 + 1)) + 10000;
@@ -40,6 +55,7 @@ export default function MultipleYAxesPage() {
   const [priceYDomain, setPriceYDomain] = useState<[number, number]>([
     100, 200,
   ]);
+  const { state } = useChartTransformState();
 
   const red = "#a04d4d";
   const blue = "#1e1e59";
@@ -47,15 +63,54 @@ export default function MultipleYAxesPage() {
   const green = "#74b567";
   const gray = "#232323";
 
+  const k = useSharedValue(1);
+  const tx = useSharedValue(0);
+  const ty = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => {
+      return state.panActive.value || state.zoomActive.value;
+    },
+    (cv, pv) => {
+      if (!cv && pv) {
+        const vals = getTransformComponents(state.matrix.value);
+        k.value = vals.scaleX;
+        tx.value = vals.translateX;
+        ty.value = vals.translateY;
+
+        k.value = withTiming(1);
+        tx.value = withTiming(0);
+        ty.value = withTiming(0);
+      }
+    },
+  );
+
+  useAnimatedReaction(
+    () => {
+      return { k: k.value, tx: tx.value, ty: ty.value };
+    },
+    ({ k, tx, ty }) => {
+      const m = setTranslate(state.matrix.value, tx, ty);
+      state.matrix.value = setScale(m, k);
+    },
+  );
+
   return (
     <SafeAreaView style={styles.safeView}>
       <ScrollView>
         <View style={styles.chart}>
           <CartesianChart
+            transformState={state}
+            transformConfig={{
+              pan: {
+                activateAfterLongPress: 100,
+              },
+            }}
             xKey="day"
             padding={25}
             yKeys={["sales", "profit"]}
             xAxis={{
+              enableRescaling: true,
               font,
               labelColor: "orange",
               formatXLabel: (value) => {
@@ -76,6 +131,7 @@ export default function MultipleYAxesPage() {
                   return value.toFixed(0);
                 },
                 lineColor: "pink",
+                enableRescaling: true,
               },
               {
                 yKeys: ["profit"],
@@ -107,6 +163,9 @@ export default function MultipleYAxesPage() {
               </>
             )}
           </CartesianChart>
+          <View style={{ paddingHorizontal: 20 }}>
+            <InfoCard>This chart supports pan/zoom</InfoCard>
+          </View>
         </View>
         {/* Multi bar, with negative values */}
         <View style={styles.chart}>
diff --git a/example/app/pan-zoom.tsx b/example/app/pan-zoom.tsx
new file mode 100644
index 00000000..b00825c9
--- /dev/null
+++ b/example/app/pan-zoom.tsx
@@ -0,0 +1,191 @@
+import {
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+export const PanZoom = () => {};
+import * as React from "react";
+import { StyleSheet, View, SafeAreaView, ScrollView } from "react-native";
+import {
+  CartesianChart,
+  getTransformComponents,
+  Line,
+  setScale,
+  setTranslate,
+  useChartTransformState,
+} from "victory-native";
+import {
+  multiply4,
+  scale,
+  translate,
+  useFont,
+} from "@shopify/react-native-skia";
+import { useState } from "react";
+import { appColors } from "./consts/colors";
+import inter from "../assets/inter-medium.ttf";
+
+import { Button } from "../components/Button";
+
+export default function PanZoomPage() {
+  const font = useFont(inter, 12);
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  const { state } = useChartTransformState();
+
+  const k = useSharedValue(1);
+  const tx = useSharedValue(0);
+  const ty = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => {
+      return state.panActive.value || state.zoomActive.value;
+    },
+    (cv, pv) => {
+      if (!cv && pv) {
+        const vals = getTransformComponents(state.matrix.value);
+        k.value = vals.scaleX;
+        tx.value = vals.translateX;
+        ty.value = vals.translateY;
+
+        k.value = withTiming(1);
+        tx.value = withTiming(0);
+        ty.value = withTiming(0);
+      }
+    },
+  );
+
+  useAnimatedReaction(
+    () => {
+      return { k: k.value, tx: tx.value, ty: ty.value };
+    },
+    ({ k, tx, ty }) => {
+      const m = setTranslate(state.matrix.value, tx, ty);
+      state.matrix.value = setScale(m, k);
+    },
+  );
+
+  return (
+    <SafeAreaView style={styles.safeView}>
+      <View style={{ flex: 1, maxHeight: 400, padding: 32 }}>
+        <CartesianChart
+          data={DATA}
+          xKey="day"
+          yKeys={["highTmp"]}
+          yAxis={[
+            {
+              font: font,
+              enableRescaling: true,
+            },
+          ]}
+          xAxis={{
+            enableRescaling: true,
+            font: font,
+          }}
+          transformState={state}
+          onChartBoundsChange={({ top, left, right, bottom }) => {
+            setWidth(right - left);
+            setHeight(bottom - top);
+          }}
+        >
+          {({ points }) => {
+            return (
+              <>
+                <Line points={points.highTmp} color="red" strokeWidth={3} />
+              </>
+            );
+          }}
+        </CartesianChart>
+      </View>
+      <ScrollView
+        contentContainerStyle={{
+          paddingHorizontal: 20,
+        }}
+      >
+        <View style={{ gap: 10 }}>
+          <View style={{ flexDirection: "row", gap: 20 }}>
+            <Button
+              title={"Pan Left"}
+              style={{ flex: 1 }}
+              onPress={() => {
+                state.matrix.value = multiply4(
+                  state.matrix.value,
+                  translate(10, 0),
+                );
+              }}
+            />
+            <Button
+              title={"Pan Right"}
+              style={{ flex: 1 }}
+              onPress={() => {
+                state.matrix.value = multiply4(
+                  state.matrix.value,
+                  translate(-10, 0, 0),
+                );
+              }}
+            />
+          </View>
+          <View style={{ flexDirection: "row", gap: 20 }}>
+            <Button
+              title={"Pan Up"}
+              style={{ flex: 1 }}
+              onPress={() => {
+                state.matrix.value = multiply4(
+                  state.matrix.value,
+                  translate(0, 10),
+                );
+              }}
+            />
+            <Button
+              title={"Pan Down"}
+              style={{ flex: 1 }}
+              onPress={() => {
+                state.matrix.value = multiply4(
+                  state.matrix.value,
+                  translate(0, -10),
+                );
+              }}
+            />
+          </View>
+          <View style={{ flexDirection: "row", gap: 20 }}>
+            <Button
+              title={"Zoom In"}
+              style={{ flex: 1 }}
+              onPress={() => {
+                state.matrix.value = multiply4(
+                  state.matrix.value,
+                  scale(1.25, 1.25, 1, { x: width / 2, y: height / 2 }),
+                );
+              }}
+            />
+            <Button
+              title={"Zoom Out"}
+              style={{ flex: 1 }}
+              onPress={() => {
+                state.matrix.value = multiply4(
+                  state.matrix.value,
+                  scale(0.75, 0.75, 1, { x: width / 2, y: height / 2 }),
+                );
+              }}
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const DATA = Array.from({ length: 31 }, (_, i) => ({
+  day: i,
+  highTmp: 40 + 30 * Math.random(),
+}));
+
+const styles = StyleSheet.create({
+  safeView: {
+    flex: 1,
+    backgroundColor: appColors.viewBackground.light,
+    $dark: {
+      backgroundColor: appColors.viewBackground.dark,
+    },
+  },
+});
diff --git a/example/app/pie-chart.tsx b/example/app/pie-chart.tsx
index 3a09a6dd..93d33ed2 100644
--- a/example/app/pie-chart.tsx
+++ b/example/app/pie-chart.tsx
@@ -1,7 +1,19 @@
 import React, { useState } from "react";
 import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
-import { Pie, PolarChart } from "victory-native";
+import {
+  getTransformComponents,
+  Pie,
+  PolarChart,
+  setScale,
+  setTranslate,
+  useChartTransformState,
+} from "victory-native";
 import { useFont } from "@shopify/react-native-skia";
+import {
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import { InfoCard } from "example/components/InfoCard";
 import { Button } from "example/components/Button";
 import { InputSlider } from "example/components/InputSlider";
@@ -36,6 +48,39 @@ export default function PieChart(props: { segment: string }) {
   const [dataLabelSegment, setDataLabelSegment] = useState<
     "simple" | "custom" | "none"
   >("none");
+  const { state } = useChartTransformState();
+
+  const k = useSharedValue(1);
+  const tx = useSharedValue(0);
+  const ty = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => {
+      return state.panActive.value || state.zoomActive.value;
+    },
+    (cv, pv) => {
+      if (!cv && pv) {
+        const vals = getTransformComponents(state.matrix.value);
+        k.value = vals.scaleX;
+        tx.value = vals.translateX;
+        ty.value = vals.translateY;
+
+        k.value = withTiming(1);
+        tx.value = withTiming(0);
+        ty.value = withTiming(0);
+      }
+    },
+  );
+
+  useAnimatedReaction(
+    () => {
+      return { k: k.value, tx: tx.value, ty: ty.value };
+    },
+    ({ k, tx, ty }) => {
+      const m = setTranslate(state.matrix.value, tx, ty);
+      state.matrix.value = setScale(m, k);
+    },
+  );
 
   return (
     <SafeAreaView style={styles.safeView}>
@@ -46,6 +91,7 @@ export default function PieChart(props: { segment: string }) {
           }}
         >
           <PolarChart
+            transformState={state}
             data={data}
             colorKey={"color"}
             valueKey={"value"}
diff --git a/lib/package.json b/lib/package.json
index 0734fe11..f82273c3 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -35,6 +35,7 @@
   "dependencies": {
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
+    "d3-zoom": "^3.0.0",
     "react-fast-compare": "^3.2.2"
   },
   "peerDependencies": {
@@ -47,6 +48,7 @@
   "devDependencies": {
     "@types/d3-scale": "^4.0.3",
     "@types/d3-shape": "^3.1.1",
+    "@types/d3-zoom": "^3.0.8",
     "@types/react": "~18.2.14",
     "typescript": "^5.1.6",
     "vitest": "^0.34.2"
diff --git a/lib/src/cartesian/CartesianChart.tsx b/lib/src/cartesian/CartesianChart.tsx
index 587763b2..2d21e817 100644
--- a/lib/src/cartesian/CartesianChart.tsx
+++ b/lib/src/cartesian/CartesianChart.tsx
@@ -4,10 +4,11 @@ import { Canvas, Group, rect } from "@shopify/react-native-skia";
 import { useSharedValue } from "react-native-reanimated";
 import {
   Gesture,
-  GestureDetector,
   GestureHandlerRootView,
   type TouchData,
 } from "react-native-gesture-handler";
+
+import { ZoomTransform } from "d3-zoom";
 import type {
   AxisProps,
   CartesianChartRenderArg,
@@ -32,6 +33,18 @@ import { XAxis } from "./components/XAxis";
 import { YAxis } from "./components/YAxis";
 import { Frame } from "./components/Frame";
 import { useBuildChartAxis } from "./hooks/useBuildChartAxis";
+import { type ChartTransformState } from "./hooks/useChartTransformState";
+import {
+  panTransformGesture,
+  type PanTransformGestureConfig,
+  pinchTransformGesture,
+} from "./utils/transformGestures";
+import {
+  CartesianTransformProvider,
+  useCartesianTransformContext,
+} from "./contexts/CartesianTransformContext";
+import { downsampleTicks } from "../utils/tickHelpers";
+import { GestureHandler } from "../shared/GestureHandler";
 
 type CartesianChartProps<
   RawData extends Record<string, unknown>,
@@ -58,12 +71,30 @@ type CartesianChartProps<
   xAxis?: XAxisInputProps<RawData, XK>;
   yAxis?: YAxisInputProps<RawData, YK>[];
   frame?: FrameInputProps;
+  transformState?: ChartTransformState;
+  transformConfig?: {
+    pan?: PanTransformGestureConfig;
+  };
 };
 
 export function CartesianChart<
   RawData extends Record<string, unknown>,
   XK extends keyof InputFields<RawData>,
   YK extends keyof NumericalFields<RawData>,
+>({ transformState, children, ...rest }: CartesianChartProps<RawData, XK, YK>) {
+  return (
+    <CartesianTransformProvider transformState={transformState}>
+      <CartesianChartContent {...{ ...rest, transformState }}>
+        {children}
+      </CartesianChartContent>
+    </CartesianTransformProvider>
+  );
+}
+
+function CartesianChartContent<
+  RawData extends Record<string, unknown>,
+  XK extends keyof InputFields<RawData>,
+  YK extends keyof NumericalFields<RawData>,
 >({
   data,
   xKey,
@@ -80,6 +111,8 @@ export function CartesianChart<
   xAxis,
   yAxis,
   frame,
+  transformState,
+  transformConfig,
 }: CartesianChartProps<RawData, XK, YK>) {
   const [size, setSize] = React.useState({ width: 0, height: 0 });
   const [hasMeasuredLayoutSize, setHasMeasuredLayoutSize] =
@@ -98,6 +131,8 @@ export function CartesianChart<
     yKeys,
     axisOptions,
   });
+  const transform = useCartesianTransformContext();
+  const zoom = new ZoomTransform(transform.k, transform.tx, transform.ty);
 
   const tData = useSharedValue<TransformedData<RawData, XK, YK>>({
     ix: [],
@@ -423,22 +458,37 @@ export function CartesianChart<
       ? normalizedAxisProps.yAxes?.map((axis, index) => {
           const yAxis = yAxes[index];
           if (!yAxis) return null;
+
+          const primaryAxisProps = normalizedAxisProps.yAxes[0]!;
+          const primaryRescaled = zoom.rescaleY(primaryYScale);
+
+          const rescaled = zoom.rescaleY(yAxis.yScale);
+
+          const primaryTicksRescaled = primaryAxisProps.tickValues
+            ? downsampleTicks(
+                primaryAxisProps.tickValues,
+                primaryAxisProps.tickCount,
+              )
+            : primaryAxisProps.enableRescaling
+              ? primaryRescaled.ticks(primaryAxisProps.tickCount)
+              : primaryYScale.ticks(primaryAxisProps.tickCount);
           return (
             <YAxis
               key={index}
               {...axis}
-              xScale={xScale}
-              yScale={yAxis.yScale}
+              xScale={zoom.rescaleX(xScale)}
+              yScale={rescaled}
               yTicksNormalized={
                 // Since we treat the first yAxis as the primary yAxis, we normalize the other Y ticks against it so the ticks line up nicely
                 index > 0
                   ? normalizeYAxisTicks(
-                      primaryYAxis.yTicksNormalized,
-                      primaryYScale,
-                      yAxis.yScale,
+                      primaryTicksRescaled,
+                      primaryRescaled,
+                      rescaled,
                     )
-                  : yAxis.yTicksNormalized
+                  : primaryTicksRescaled
               }
+              chartBounds={clipRect}
             />
           );
         })
@@ -448,9 +498,11 @@ export function CartesianChart<
       <XAxis
         {...normalizedAxisProps.xAxis}
         xScale={xScale}
-        yScale={primaryYScale}
+        yScale={zoom.rescaleY(primaryYScale)}
         ix={_tData.ix}
         isNumericalData={isNumericalData}
+        chartBounds={clipRect}
+        zoom={zoom}
       />
     ) : null;
 
@@ -471,19 +523,35 @@ export function CartesianChart<
       {FrameComponent}
       <CartesianChartProvider yScale={primaryYScale} xScale={xScale}>
         <Group clip={clipRect}>
-          {hasMeasuredLayoutSize && children(renderArg)}
+          <Group matrix={transformState?.matrix}>
+            {hasMeasuredLayoutSize && children(renderArg)}
+          </Group>
         </Group>
       </CartesianChartProvider>
       {hasMeasuredLayoutSize && renderOutside?.(renderArg)}
     </Canvas>
   );
 
-  // Conditionally wrap the body in gesture handler based on activePressSharedValue
-  return chartPressState ? (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <GestureDetector gesture={panGesture}>{body}</GestureDetector>
+  let composed = Gesture.Race();
+  if (transformState) {
+    composed = Gesture.Race(
+      composed,
+      pinchTransformGesture(transformState),
+      panTransformGesture(transformState, transformConfig?.pan),
+    );
+  }
+  if (chartPressState) {
+    composed = Gesture.Race(composed, panGesture);
+  }
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1, overflow: "hidden" }}>
+      {body}
+      <GestureHandler
+        gesture={composed}
+        transformState={transformState}
+        dimensions={{ x: 0, y: 0, width: size.width, height: size.height }}
+      />
     </GestureHandlerRootView>
-  ) : (
-    body
   );
 }
diff --git a/lib/src/cartesian/components/XAxis.tsx b/lib/src/cartesian/components/XAxis.tsx
index 57f54157..9dc65aa3 100644
--- a/lib/src/cartesian/components/XAxis.tsx
+++ b/lib/src/cartesian/components/XAxis.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleSheet } from "react-native";
-import { Line, Text, vec } from "@shopify/react-native-skia";
+import { Group, Line, Text, vec } from "@shopify/react-native-skia";
 import { DEFAULT_TICK_COUNT, downsampleTicks } from "../../utils/tickHelpers";
 import type {
   InputDatum,
@@ -14,7 +14,7 @@ export const XAxis = <
   RawData extends Record<string, unknown>,
   XK extends keyof InputFields<RawData>,
 >({
-  xScale,
+  xScale: xScaleProp,
   yScale,
   axisSide = "bottom",
   yAxisSide = "left",
@@ -30,13 +30,19 @@ export const XAxis = <
   ix = [],
   isNumericalData,
   linePathEffect,
+  chartBounds,
+  enableRescaling,
+  zoom,
 }: XAxisProps<RawData, XK>) => {
+  const xScale = zoom ? zoom.rescaleX(xScaleProp) : xScaleProp;
   const [y1 = 0, y2 = 0] = yScale.domain();
   const [x1r = 0, x2r = 0] = xScale.range();
   const fontSize = font?.getSize() ?? 0;
   const xTicksNormalized = tickValues
     ? downsampleTicks(tickValues, tickCount)
-    : xScale.ticks(tickCount);
+    : enableRescaling
+      ? xScale.ticks(tickCount)
+      : xScaleProp.ticks(tickCount);
 
   const xAxisNodes = xTicksNormalized.map((tick) => {
     const val = isNumericalData ? tick : ix[tick];
@@ -48,7 +54,9 @@ export const XAxis = <
         .reduce((sum, value) => sum + value, 0) ?? 0;
     const labelX = xScale(tick) - (labelWidth ?? 0) / 2;
     const canFitLabelContent =
-      yAxisSide === "left" ? labelX + labelWidth < x2r : x1r < labelX;
+      xScale(tick) >= x1r &&
+      xScale(tick) <= x2r &&
+      (yAxisSide === "left" ? labelX + labelWidth < x2r : x1r < labelX);
 
     const labelY = (() => {
       // bottom, outset
@@ -70,14 +78,16 @@ export const XAxis = <
     return (
       <React.Fragment key={`x-tick-${tick}`}>
         {lineWidth > 0 ? (
-          <Line
-            p1={vec(xScale(tick), yScale(y2))}
-            p2={vec(xScale(tick), yScale(y1))}
-            color={lineColor}
-            strokeWidth={lineWidth}
-          >
-            {linePathEffect ? linePathEffect : null}
-          </Line>
+          <Group clip={chartBounds}>
+            <Line
+              p1={vec(xScale(tick), yScale(y2))}
+              p2={vec(xScale(tick), yScale(y1))}
+              color={lineColor}
+              strokeWidth={lineWidth}
+            >
+              {linePathEffect ? linePathEffect : null}
+            </Line>
+          </Group>
         ) : null}
         {font && labelWidth && canFitLabelContent ? (
           <Text
diff --git a/lib/src/cartesian/components/YAxis.tsx b/lib/src/cartesian/components/YAxis.tsx
index 828d5981..fccc7436 100644
--- a/lib/src/cartesian/components/YAxis.tsx
+++ b/lib/src/cartesian/components/YAxis.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleSheet } from "react-native";
-import { Line, Text, vec } from "@shopify/react-native-skia";
+import { Group, Line, Text, vec } from "@shopify/react-native-skia";
 import type {
   InputDatum,
   NumericalFields,
@@ -25,6 +25,7 @@ export const YAxis = <
   font,
   formatYLabel = (label: ValueOf<InputDatum>) => String(label),
   linePathEffect,
+  chartBounds,
 }: YAxisProps<RawData, YK>) => {
   const [x1 = 0, x2 = 0] = xScale.domain();
   const [_ = 0, y2 = 0] = yScale.domain();
@@ -58,14 +59,16 @@ export const YAxis = <
     return (
       <React.Fragment key={`y-tick-${tick}`}>
         {lineWidth > 0 ? (
-          <Line
-            p1={vec(xScale(x1), yScale(tick))}
-            p2={vec(xScale(x2), yScale(tick))}
-            color={lineColor}
-            strokeWidth={lineWidth}
-          >
-            {linePathEffect ? linePathEffect : null}
-          </Line>
+          <Group clip={chartBounds}>
+            <Line
+              p1={vec(xScale(x1), yScale(tick))}
+              p2={vec(xScale(x2), yScale(tick))}
+              color={lineColor}
+              strokeWidth={lineWidth}
+            >
+              {linePathEffect ? linePathEffect : null}
+            </Line>
+          </Group>
         ) : null}
         {font
           ? canFitLabelContent && (
diff --git a/lib/src/cartesian/contexts/CartesianTransformContext.tsx b/lib/src/cartesian/contexts/CartesianTransformContext.tsx
new file mode 100644
index 00000000..bb73c9a6
--- /dev/null
+++ b/lib/src/cartesian/contexts/CartesianTransformContext.tsx
@@ -0,0 +1,71 @@
+import React, {
+  createContext,
+  type PropsWithChildren,
+  useContext,
+  useState,
+} from "react";
+import { runOnJS, useAnimatedReaction } from "react-native-reanimated";
+import type { ChartTransformState } from "../hooks/useChartTransformState";
+
+interface CartesianTransformContext {
+  k: number;
+  tx: number;
+  ty: number;
+}
+
+const CartesianTransformContext = createContext<
+  CartesianTransformContext | undefined
+>(undefined);
+
+type CartesianTransformProviderProps = PropsWithChildren<{
+  transformState?: ChartTransformState;
+}>;
+export const CartesianTransformProvider = ({
+  transformState,
+  children,
+}: CartesianTransformProviderProps) => {
+  const getTransformComponents = (
+    transformState: ChartTransformState | undefined,
+  ) => {
+    "worklet";
+    return {
+      k: transformState?.matrix.value[0] || 1,
+      tx: transformState?.matrix.value[3] || 0,
+      ty: transformState?.matrix.value[7] || 0,
+    };
+  };
+  const [transform, setTransform] = useState<{
+    k: number;
+    tx: number;
+    ty: number;
+  }>(getTransformComponents(transformState));
+
+  useAnimatedReaction(
+    () => {
+      return getTransformComponents(transformState);
+    },
+    (cv, pv) => {
+      if (cv.k != pv?.k || cv.tx != pv.tx || cv.ty !== pv.ty) {
+        runOnJS(setTransform)(cv);
+      }
+    },
+  );
+
+  return (
+    <CartesianTransformContext.Provider value={{ ...transform }}>
+      {children}
+    </CartesianTransformContext.Provider>
+  );
+};
+
+export const useCartesianTransformContext = () => {
+  const context = useContext(CartesianTransformContext);
+
+  if (context === undefined) {
+    throw new Error(
+      "useCartesianTransformContext must be used within a CartesianTransformProvider",
+    );
+  }
+
+  return context;
+};
diff --git a/lib/src/cartesian/hooks/useChartTransformState.ts b/lib/src/cartesian/hooks/useChartTransformState.ts
new file mode 100644
index 00000000..b6c73cf9
--- /dev/null
+++ b/lib/src/cartesian/hooks/useChartTransformState.ts
@@ -0,0 +1,33 @@
+import {
+  makeMutable,
+  type SharedValue,
+  useSharedValue,
+} from "react-native-reanimated";
+import { type Matrix4 } from "@shopify/react-native-skia";
+import { identity4 } from "../../utils/transform";
+
+export type ChartTransformState = {
+  panActive: SharedValue<boolean>;
+  zoomActive: SharedValue<boolean>;
+  origin: SharedValue<{ x: number; y: number }>;
+  matrix: SharedValue<Matrix4>;
+  offset: SharedValue<Matrix4>;
+};
+
+export const useChartTransformState = (): {
+  state: ChartTransformState;
+} => {
+  const origin = useSharedValue({ x: 0, y: 0 });
+  const matrix = useSharedValue(identity4);
+  const offset = useSharedValue(identity4);
+
+  return {
+    state: {
+      panActive: makeMutable(false),
+      zoomActive: makeMutable(false),
+      origin,
+      matrix,
+      offset,
+    },
+  };
+};
diff --git a/lib/src/cartesian/utils/transformGestures.ts b/lib/src/cartesian/utils/transformGestures.ts
new file mode 100644
index 00000000..2248c30c
--- /dev/null
+++ b/lib/src/cartesian/utils/transformGestures.ts
@@ -0,0 +1,64 @@
+import {
+  Gesture,
+  type PanGesture,
+  type PinchGesture,
+} from "react-native-gesture-handler";
+import { multiply4, scale, translate } from "@shopify/react-native-skia";
+import type { PanGestureConfig } from "react-native-gesture-handler/lib/typescript/handlers/PanGestureHandler";
+import { type ChartTransformState } from "../hooks/useChartTransformState";
+
+export const pinchTransformGesture = (
+  state: ChartTransformState,
+): PinchGesture => {
+  const pinch = Gesture.Pinch()
+    .onBegin((e) => {
+      state.offset.value = state.matrix.value;
+      state.origin.value = {
+        x: e.focalX,
+        y: e.focalY,
+      };
+    })
+    .onStart(() => {
+      state.zoomActive.value = true;
+    })
+    .onChange((e) => {
+      state.matrix.value = multiply4(
+        state.offset.value,
+        scale(e.scale, e.scale, 1, state.origin.value),
+      );
+    })
+    .onEnd(() => {
+      state.zoomActive.value = false;
+    });
+
+  return pinch;
+};
+
+export type PanTransformGestureConfig = Pick<
+  PanGestureConfig,
+  "activateAfterLongPress"
+>;
+export const panTransformGesture = (
+  state: ChartTransformState,
+  config: PanTransformGestureConfig = {},
+): PanGesture => {
+  const pan = Gesture.Pan()
+    .onStart(() => {
+      state.panActive.value = true;
+    })
+    .onChange((e) => {
+      state.matrix.value = multiply4(
+        translate(e.changeX, e.changeY, 0),
+        state.matrix.value,
+      );
+    })
+    .onEnd(() => {
+      state.panActive.value = false;
+    });
+
+  if (config.activateAfterLongPress !== undefined) {
+    pan.activateAfterLongPress(config.activateAfterLongPress);
+  }
+
+  return pan;
+};
diff --git a/lib/src/index.ts b/lib/src/index.ts
index c8ee882f..06c254c5 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -24,6 +24,13 @@ export {
   type ChartPressState,
 } from "./cartesian/hooks/useChartPressState";
 
+export { useChartTransformState } from "./cartesian/hooks/useChartTransformState";
+export {
+  getTransformComponents,
+  setScale,
+  setTranslate,
+} from "./utils/transform";
+
 // Line
 export { useLinePath } from "./cartesian/hooks/useLinePath";
 export { Line } from "./cartesian/components/Line";
diff --git a/lib/src/polar/PolarChart.tsx b/lib/src/polar/PolarChart.tsx
index 1d1f1a7b..7387691e 100644
--- a/lib/src/polar/PolarChart.tsx
+++ b/lib/src/polar/PolarChart.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Canvas } from "@shopify/react-native-skia";
+import { Canvas, Group } from "@shopify/react-native-skia";
 import {
   StyleSheet,
   View,
@@ -7,6 +7,7 @@ import {
   type LayoutChangeEvent,
   type StyleProp,
 } from "react-native";
+import { Gesture, GestureHandlerRootView } from "react-native-gesture-handler";
 import {
   PolarChartProvider,
   usePolarChartContext,
@@ -17,6 +18,12 @@ import type {
   NumericalFields,
   StringKeyOf,
 } from "../types";
+import { type ChartTransformState } from "../cartesian/hooks/useChartTransformState";
+import {
+  panTransformGesture,
+  pinchTransformGesture,
+} from "../cartesian/utils/transformGestures";
+import { GestureHandler } from "../shared/GestureHandler";
 
 type PolarChartBaseProps = {
   onLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
@@ -24,6 +31,7 @@ type PolarChartBaseProps = {
   canvasSize: { width: number; height: number };
   containerStyle?: StyleProp<ViewStyle>;
   canvasStyle?: StyleProp<ViewStyle>;
+  transformState?: ChartTransformState;
 };
 
 const PolarChartBase = (
@@ -36,28 +44,44 @@ const PolarChartBase = (
     onLayout,
     hasMeasuredLayoutSize,
     canvasSize,
+    transformState,
   } = props;
   const { width, height } = canvasSize;
 
   const ctx = usePolarChartContext();
 
+  let composed = Gesture.Race();
+  if (transformState) {
+    composed = Gesture.Race(
+      composed,
+      pinchTransformGesture(transformState),
+      panTransformGesture(transformState),
+    );
+  }
+
   return (
     <View style={[styles.baseContainer, containerStyle]}>
-      <Canvas
-        onLayout={onLayout}
-        style={StyleSheet.flatten([
-          styles.canvasContainer,
-          hasMeasuredLayoutSize ? { width, height } : null,
-          canvasStyle,
-        ])}
-      >
-        {/* https://shopify.github.io/react-native-skia/docs/canvas/contexts/
+      <GestureHandlerRootView style={{ flex: 1, overflow: "hidden" }}>
+        <Canvas
+          onLayout={onLayout}
+          style={StyleSheet.flatten([
+            styles.canvasContainer,
+            hasMeasuredLayoutSize ? { width, height } : null,
+            canvasStyle,
+          ])}
+        >
+          {/* https://shopify.github.io/react-native-skia/docs/canvas/contexts/
             we have to re-inject our context to make it available in the skia renderer
          */}
-        <PolarChartProvider {...ctx} canvasSize={canvasSize}>
-          {children}
-        </PolarChartProvider>
-      </Canvas>
+          <PolarChartProvider {...ctx} canvasSize={canvasSize}>
+            <Group matrix={transformState?.matrix}>{children}</Group>
+          </PolarChartProvider>
+        </Canvas>
+        <GestureHandler
+          gesture={composed}
+          dimensions={{ x: 0, y: 0, width: width, height: height }}
+        />
+      </GestureHandlerRootView>
     </View>
   );
 };
diff --git a/lib/src/shared/GestureHandler.tsx b/lib/src/shared/GestureHandler.tsx
new file mode 100644
index 00000000..8b8e0541
--- /dev/null
+++ b/lib/src/shared/GestureHandler.tsx
@@ -0,0 +1,63 @@
+import {
+  type ComposedGesture,
+  GestureDetector,
+  type GestureType,
+} from "react-native-gesture-handler";
+import {
+  convertToAffineMatrix,
+  convertToColumnMajor,
+  type Matrix4,
+  type SkRect,
+} from "@shopify/react-native-skia";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { Platform } from "react-native";
+import * as React from "react";
+import { type ChartTransformState } from "../cartesian/hooks/useChartTransformState";
+import { identity4 } from "../utils/transform";
+
+type GestureHandlerProps = {
+  gesture: ComposedGesture | GestureType;
+  dimensions: SkRect;
+  transformState?: ChartTransformState;
+  debug?: boolean;
+};
+export const GestureHandler = ({
+  gesture,
+  dimensions,
+  transformState,
+  debug = false,
+}: GestureHandlerProps) => {
+  const { x, y, width, height } = dimensions;
+  const style = useAnimatedStyle(() => {
+    let m4: Matrix4 = identity4;
+    if (transformState?.matrix.value) {
+      m4 = convertToColumnMajor(transformState.matrix.value);
+    }
+    return {
+      position: "absolute",
+      backgroundColor: debug ? "rgba(100, 200, 300, 0.4)" : "transparent",
+      x,
+      y,
+      width,
+      height,
+      transform: [
+        { translateX: -width / 2 },
+        { translateY: -height / 2 },
+        {
+          matrix: m4
+            ? Platform.OS === "web"
+              ? convertToAffineMatrix(m4)
+              : (m4 as unknown as number[])
+            : [],
+        },
+        { translateX: width / 2 },
+        { translateY: height / 2 },
+      ],
+    };
+  });
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={style} />
+    </GestureDetector>
+  );
+};
diff --git a/lib/src/types.ts b/lib/src/types.ts
index 69595417..1bd6f3f9 100644
--- a/lib/src/types.ts
+++ b/lib/src/types.ts
@@ -1,10 +1,12 @@
 import { type SharedValue } from "react-native-reanimated";
 import { type ScaleLinear } from "d3-scale";
 import {
+  type ClipDef,
   type Color,
   type DashPathEffect,
   type SkFont,
 } from "@shopify/react-native-skia";
+import type { ZoomTransform } from "d3-zoom";
 
 export type PrimitiveViewWindow = {
   xMin: number;
@@ -177,16 +179,23 @@ export type XAxisInputProps<
   tickValues?: number[];
   yAxisSide?: YAxisSide;
   linePathEffect?: DashPathEffectComponent;
+  enableRescaling?: boolean;
 };
 
 export type XAxisPropsWithDefaults<
   RawData extends Record<string, unknown>,
   XK extends keyof InputFields<RawData>,
 > = Required<
-  Omit<XAxisInputProps<RawData, XK>, "font" | "tickValues" | "linePathEffect">
+  Omit<
+    XAxisInputProps<RawData, XK>,
+    "font" | "tickValues" | "linePathEffect" | "enableRescaling"
+  >
 > &
   Partial<
-    Pick<XAxisInputProps<RawData, XK>, "font" | "tickValues" | "linePathEffect">
+    Pick<
+      XAxisInputProps<RawData, XK>,
+      "font" | "tickValues" | "linePathEffect" | "enableRescaling"
+    >
   >;
 
 export type XAxisProps<
@@ -197,6 +206,8 @@ export type XAxisProps<
   yScale: Scale;
   isNumericalData: boolean;
   ix: InputFields<RawData>[XK][];
+  chartBounds: ClipDef;
+  zoom?: ZoomTransform;
 };
 
 export type YAxisInputProps<
@@ -216,16 +227,23 @@ export type YAxisInputProps<
   yKeys?: YK[];
   domain?: YAxisDomain;
   linePathEffect?: DashPathEffectComponent;
+  enableRescaling?: boolean;
 };
 
 export type YAxisPropsWithDefaults<
   RawData extends Record<string, unknown>,
   YK extends keyof NumericalFields<RawData>,
 > = Required<
-  Omit<YAxisInputProps<RawData, YK>, "font" | "tickValues" | "linePathEffect">
+  Omit<
+    YAxisInputProps<RawData, YK>,
+    "font" | "tickValues" | "linePathEffect" | "enableRescaling"
+  >
 > &
   Partial<
-    Pick<YAxisInputProps<RawData, YK>, "font" | "tickValues" | "linePathEffect">
+    Pick<
+      YAxisInputProps<RawData, YK>,
+      "font" | "tickValues" | "linePathEffect" | "enableRescaling"
+    >
   >;
 
 export type YAxisProps<
@@ -236,6 +254,7 @@ export type YAxisProps<
   yScale: Scale;
   yTicksNormalized: number[];
   yKeys: YK[];
+  chartBounds: ClipDef;
 };
 
 export type FrameInputProps = {
diff --git a/lib/src/utils/transform.ts b/lib/src/utils/transform.ts
new file mode 100644
index 00000000..bf1a467b
--- /dev/null
+++ b/lib/src/utils/transform.ts
@@ -0,0 +1,47 @@
+import type { Matrix4 } from "@shopify/react-native-skia";
+
+export const identity4: Matrix4 = [
+  1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+];
+
+enum MatrixValues {
+  ScaleX = 0,
+  ScaleY = 5,
+  TranslateX = 3,
+  TranslateY = 7,
+}
+
+export const getTransformComponents = (m: Matrix4) => {
+  "worklet";
+
+  return {
+    scaleX: m[MatrixValues.ScaleX],
+    scaleY: m[MatrixValues.ScaleY],
+    translateX: m[MatrixValues.TranslateX],
+    translateY: m[MatrixValues.TranslateY],
+  };
+};
+
+export const setScale = (matrix: Matrix4, kx: number, ky?: number): Matrix4 => {
+  "worklet";
+
+  const m = matrix.slice(0);
+  m[MatrixValues.ScaleX] = kx;
+  m[MatrixValues.ScaleY] = ky ?? kx;
+
+  return m as unknown as Matrix4;
+};
+
+export const setTranslate = (
+  matrix: Matrix4,
+  tx: number,
+  ty: number,
+): Matrix4 => {
+  "worklet";
+
+  const m = matrix.slice(0);
+  m[MatrixValues.TranslateX] = tx;
+  m[MatrixValues.TranslateY] = ty;
+
+  return m as unknown as Matrix4;
+};
diff --git a/yarn.lock b/yarn.lock
index ada461f2..0a7a2cf6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2394,6 +2394,18 @@
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.6.0.tgz#eac397f28bf1d6ae0ae081363eca2f425bedf0d5"
   integrity sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==
 
+"@types/d3-color@*":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.3.tgz#368c961a18de721da8200e80bf3943fb53136af2"
+  integrity sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==
+
+"@types/d3-interpolate@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz#412b90e84870285f2ff8a846c6eb60344f12a41c"
+  integrity sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==
+  dependencies:
+    "@types/d3-color" "*"
+
 "@types/d3-path@*":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.1.0.tgz#2b907adce762a78e98828f0b438eaca339ae410a"
@@ -2406,6 +2418,11 @@
   dependencies:
     "@types/d3-time" "*"
 
+"@types/d3-selection@*":
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.11.tgz#bd7a45fc0a8c3167a631675e61bc2ca2b058d4a3"
+  integrity sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==
+
 "@types/d3-shape@^3.1.1":
   version "3.1.6"
   resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.6.tgz#65d40d5a548f0a023821773e39012805e6e31a72"
@@ -2418,6 +2435,14 @@
   resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.3.tgz#3c186bbd9d12b9d84253b6be6487ca56b54f88be"
   integrity sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==
 
+"@types/d3-zoom@^3.0.8":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.8.tgz#dccb32d1c56b1e1c6e0f1180d994896f038bc40b"
+  integrity sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==
+  dependencies:
+    "@types/d3-interpolate" "*"
+    "@types/d3-selection" "*"
+
 "@types/estree@1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -3716,12 +3741,30 @@ csv-parser@^3.0.0:
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
   integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
 
+"d3-dispatch@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e"
+  integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
+
+"d3-drag@2 - 3":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-3.0.0.tgz#994aae9cd23c719f53b5e10e3a0a6108c69607ba"
+  integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-selection "3"
+
+"d3-ease@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
 "d3-format@1 - 3":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
   integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
 
-"d3-interpolate@1.2.0 - 3":
+"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
   integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
@@ -3744,6 +3787,11 @@ d3-scale@^4.0.2:
     d3-time "2.1.1 - 3"
     d3-time-format "2 - 4"
 
+"d3-selection@2 - 3", d3-selection@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
+  integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
+
 d3-shape@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
@@ -3765,6 +3813,33 @@ d3-shape@^3.2.0:
   dependencies:
     d3-array "2 - 3"
 
+"d3-timer@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
+"d3-transition@2 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-3.0.1.tgz#6869fdde1448868077fdd5989200cb61b2a1645f"
+  integrity sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==
+  dependencies:
+    d3-color "1 - 3"
+    d3-dispatch "1 - 3"
+    d3-ease "1 - 3"
+    d3-interpolate "1 - 3"
+    d3-timer "1 - 3"
+
+d3-zoom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3"
+  integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "2 - 3"
+    d3-transition "2 - 3"
+
 dag-map@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/dag-map/-/dag-map-1.0.2.tgz#e8379f041000ed561fc515475c1ed2c85eece8d7"