Deriv

calc-backend/graph-gen/graph-deriv.py

@@ -77,29 +77,29 @@ def derivative(func, x, h=1e-5):
 
 # Create a slider to control the animation.
 sliders = [dict(
+    active=0,
     currentvalue={"visible": False},
+    ticklen=0,               # Hides the line ticks (not enough alone)
+    len=1.0,
+    y=-0.05,
     steps=[
         dict(
             method='animate',
             args=[
                 [frame.name],
                 dict(mode='immediate',
-                     frame=dict(duration=50, redraw=True),
+                     frame=dict(duration=40, redraw=True),
                      transition=dict(duration=0))
             ],
-            label=str(int(round(float(frame.name)))) 
-                  if abs(float(frame.name) - round(float(frame.name))) < 1e-6 
-                  else ""
+            label="",         # Hides numbers
         )
         for frame in frames
     ],
-    transition=dict(duration=0),
-    y=-0.05,
-    len=1.0
+    tickcolor='rgba(0,0,0,0)',
 )]
 
 # Adjust padding and final layout settings.
-pad = max(np.abs(np.min(f_vals)), np.abs(np.max(f_vals))) // 10
+pad =  min(np.abs(np.min(f_vals)), np.abs(np.max(f_vals))) + (max(np.abs(np.min(f_vals)), np.abs(np.max(f_vals))) // 20)
 fig.update_layout(
     xaxis_title='x-axis',
     yaxis_title='y-axis',

calc-backend/graph-gen/graph-limits.py

@@ -0,0 +1,92 @@
+import plotly.graph_objects as go
+import numpy as np
+
+# === USER DEFINES ONLY THESE TWO ===
+func    = lambda x: x**3  # ← your function
+limit_x = 0                   # ← point to approach
+
+# === Slider & sampling settings (fixed) ===
+num_steps = 50
+dx        = 1e-3
+
+# === Estimate y(limit) and local slope to pick a sensible x‑window ===
+try:
+    y_limit = func(limit_x)
+    slope   = abs(func(limit_x + dx) - func(limit_x - dx)) / (2*dx)
+except:
+    y_limit = 0
+    slope   = 1
+
+# domain_width based on function value & slope (at least 1, cap at 100)
+domain_width = max(1, abs(y_limit), slope * 2)
+domain_width = min(domain_width, 100)
+
+# === Sample curve around limit_x ===
+x_vals = np.linspace(limit_x - domain_width,
+                     limit_x + domain_width,
+                     300)
+y_vals = func(x_vals)
+
+# === Helper to get “approach” segments at step i ===
+x0, x1 = x_vals[0], x_vals[-1]
+def segment(i):
+    t       = i / (num_steps - 1)
+    left_x  = np.interp(t, [0,1], [x0, limit_x])
+    right_x = np.interp(t, [0,1], [x1, limit_x])
+    left_mask   = x_vals <= left_x
+    right_mask  = x_vals >= right_x
+    return (x_vals[left_mask],  y_vals[left_mask],
+            x_vals[right_mask], y_vals[right_mask])
+
+# === Build figure ===
+fig = go.Figure()
+
+# full curve
+fig.add_trace(go.Scatter(
+    x=x_vals, y=y_vals,
+    mode="lines",
+    line=dict(color="lightgray", width=2),
+    name="f(x)"
+))
+
+# approaching segments
+xL0, yL0, xR0, yR0 = segment(0)
+fig.add_trace(go.Scatter(x=xL0, y=yL0, mode="lines",
+                         line=dict(color="black", width=4),
+                         name="From Left"))
+fig.add_trace(go.Scatter(x=xR0, y=yR0, mode="lines",
+                         line=dict(color="#FFCC00", width=4),
+                         name="From Right"))
+
+# limit‑point marker
+fig.add_trace(go.Scatter(
+    x=[limit_x], y=[y_limit],
+    mode="markers+text",
+    marker=dict(color="red", size=10),
+    text=[f"Limit (x={limit_x})"],
+    textposition="top center",
+    showlegend=False
+))
+
+# slider steps
+steps = []
+for i in range(num_steps):
+    xL, yL, xR, yR = segment(i)
+    steps.append(dict(
+        method="restyle",
+        args=[{"x": [xL.tolist(), xR.tolist()],
+               "y": [yL.tolist(), yR.tolist()]},
+              [1, 2]],
+        label=""
+    ))
+
+fig.update_layout(
+    sliders=[dict(active=0, steps=steps,
+                  currentvalue={"visible": False},
+                  pad={"t": 50}, ticklen=0)],
+    xaxis=dict(autorange=True,  fixedrange=True, title="x-axis"),
+    yaxis=dict(autorange=True,  fixedrange=True, title="y-axis"),
+    showlegend=True
+)
+
+fig.show()

calc-frontend/src/App/RoutesList.tsx

@@ -29,8 +29,6 @@ import EulerDeriv from "../components/Euler/EulerDeriv";
 import EulerInt from "../components/Euler/EulerInt";
 import ErrorPage from "../pages/ErrorPage";
 
-import LimitDef from "../components/Limits/LimitDef";
-
 import CustomInt from "../pages/CustomIntegral";
 import CustomDeriv from "../pages/CustomDerivative";
 
@@ -68,8 +66,6 @@ const RoutesList =
     <Route path='/integrals/sine' element={<SineInt />} />
     <Route path='/integrals/cosine' element={<CosineInt />} />
     <Route path='/integrals/tangent' element={<TangentInt />} />
-
-    <Route path='/limits/limitdef' element={<LimitDef />} />
 
 
     <Route path='*' element={<ErrorPage />} />

calc-frontend/src/components/Cosine/CosineDeriv.tsx

@@ -1,37 +1,24 @@
 import { useLayoutEffect, useRef } from "react";
+import CosineDerivGraph from "./CosineDerivGraph"
 
 function CosineDeriv() {
 
-  const heading = useRef(null);
   const container = useRef(null);
 
   useLayoutEffect(() =>{
     //@ts-ignore
     let MQ = MathQuill.getInterface(2);
-    MQ.StaticMath(heading.current, { })
     MQ.StaticMath(container.current, { })
 
   }, []);
 
   return (
-    <div>
-      <div>
-        <h2 className="center-header" style={{marginBottom:'0.5rem'}}>Derivative of <span ref={heading}>y = cos(x)</span></h2>
-      </div>
-
-      <div className="graph-outer-box">
-        <iframe className="graph-frame" src="https://www.desmos.com/calculator/t9zizgbgrv?embed"
-          style={{ border: "1px solid #ccc" }} >
-        </iframe>
-
-        <p className="big-p side-text">
-          The cosine function starts with a value of 1 and ends with a value of 1 on the 
-          interval <span ref={container}>[0, \quad 2\pi]</span>
-        </p>
+
 
+      <div className="graph-outer-box" >
+        <CosineDerivGraph />
       </div>
 
-    </div>
   )
 }
 

calc-frontend/src/components/Cosine/CosineDerivGraph.tsx

@@ -0,0 +1,15 @@
+import { useLayoutEffect } from "react";
+
+function CosineGraph() {
+   useLayoutEffect(() =>{
+
+  }, []);
+
+  return (
+  <div className="plotly-graph-div graph-frame" id="">
+  </div>
+  )
+
+}
+
+export default CosineGraph

calc-frontend/src/components/Cubic/CubicDeriv.tsx

@@ -1,35 +1,24 @@
 import { useLayoutEffect, useRef } from "react";
+import CubicDerivGraph from "./CubicDerivGraph"
 
 function CubicDeriv() {
 
-  const heading = useRef(null);
+  const container = useRef(null);
 
   useLayoutEffect(() =>{
     //@ts-ignore
     let MQ = MathQuill.getInterface(2);
-
-    MQ.StaticMath(heading.current, { })
+    MQ.StaticMath(container.current, { })
 
   }, []);
 
   return (
-    <div>
-      <div>
-        <h2 className="center-header" style={{marginBottom:'0.5rem'}}>Derivative of <span ref={heading}>y = x^&#123;3&#125;</span> </h2>
-      </div>
+
 
-      <div className="graph-outer-box">
-        <iframe className="graph-frame" src="https://www.desmos.com/calculator/wzc7pioeji?embed"
-          style={{ border: "1px solid #ccc" }} >
-        </iframe>
-
-        <p className="big-p side-text">
-          The cubic function cubes each input value, raising it to the third power
-        </p>
+      <div className="graph-outer-box" >
+        <CubicDerivGraph />
       </div>
 
-    </div>
-
   )
 }
 

calc-frontend/src/components/Cubic/CubicDerivGraph.tsx

@@ -0,0 +1,15 @@
+import { useLayoutEffect } from "react";
+
+function CubicGraph() {
+   useLayoutEffect(() =>{
+
+  }, []);
+
+  return (
+  <div className="plotly-graph-div graph-frame" id="">
+  </div>
+  )
+
+}
+
+export default CubicGraph

calc-frontend/src/components/Euler/EulerDeriv.tsx

@@ -1,44 +1,24 @@
 import { useLayoutEffect, useRef } from "react";
+import EulerDerivGraph from "./EulerDerivGraph"
 
-function EulerDeriv()
-{
+function EulerDeriv() {
 
-  const heading = useRef(null);
   const container = useRef(null);
-  const con2 = useRef(null);
-  const con3 = useRef(null);
 
   useLayoutEffect(() =>{
     //@ts-ignore
     let MQ = MathQuill.getInterface(2);
-
-    MQ.StaticMath(heading.current, { })
     MQ.StaticMath(container.current, { })
-    MQ.StaticMath(con2.current, { })
-    MQ.StaticMath(con3.current, { })
 
   }, []);
 
   return (
-    <div>
-      <div>
-        <h2 className="center-header" style={{marginBottom:'0.5rem'}}>Derivative of <span ref={heading}>y = e^&#123;x&#125;</span></h2>
-      </div>
+
 
-      <div className="graph-outer-box">
-        <iframe className = "graph-frame" src="https://www.desmos.com/calculator/apkv8zj85n?embed"
-                style={{border: "1px solid #ccc"}} >
-        </iframe>
-
-        <p className="big-p side-text">
-          The exponential function grows the fastest. It has a horizontal asymptote 
-          at <span ref={container}>y = 0</span>. 
-          The <span ref={con2}>e</span> in <span ref={con3}>e^&#123;x&#125;</span> is 
-          called Euler's number, and it is equal to 2.718... (the digits go on forever)
-        </p>
+      <div className="graph-outer-box" >
+        <EulerDerivGraph />
       </div>
-
-    </div>
+
   )
 }
 

calc-frontend/src/components/Euler/EulerDerivGraph.tsx

@@ -0,0 +1,15 @@
+import { useLayoutEffect } from "react";
+
+function EulerDerivGraph() {
+   useLayoutEffect(() =>{
+
+  }, []);
+
+  return (
+  <div className="plotly-graph-div graph-frame" id="">
+  </div>
+  )
+
+}
+
+export default EulerDerivGraph