Enable custom graphs to display axes and fix visual overlap bug

Author: Speedrunyourknowledge

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

@@ -41,20 +41,50 @@ def derivative(func, x, h=1e-5):
 x_vals = np.linspace(x_range[0], x_range[1], num=51)
 f_vals = f(x_vals)
 
-# Initialize the Plotly figure and plot the original function.
+# Initialize the Plotly figure
 fig = go.Figure()
-fig.add_trace(go.Scatter(x=x_vals, y=f_vals, mode='lines', name='Function'))
+
+# Adjust padding for final layout
+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)
+
+# Set the final y-axis range with padding
+y_min = np.min(f_vals) - pad
+y_max = np.max(f_vals) + pad
+
+# Vertical line at x=0 (y-axis)
+if x_range[0] < 0 < x_range[1]:
+  fig.add_trace(go.Scatter(
+      x=[0, 0],
+      y=[y_min, y_max],
+      mode='lines',
+      line=dict(color='silver', width=2),
+      showlegend=False
+  ))
+
+# Horizontal line at y=0 (x-axis)
+if y_min < 0 < y_max:
+  fig.add_trace(go.Scatter(
+      x=[x_range[0], x_range[1]],
+      y=[0, 0],
+      mode='lines',
+      line=dict(color='silver', width=2),
+      showlegend=False
+  ))
+
+# Plot the original function
+fig.add_trace(go.Scatter(x=x_vals, y=f_vals, mode='lines', name='Function', line=dict(color='#6570f9', width=2)))
 
 # Calculate the tangent line at the starting point x_range[0].
 x0 = x_range[0]
 tangent_y = derivative(f, x0) * (x_vals - x0) + f(x0)
-fig.add_trace(go.Scatter(x=x_vals, y=tangent_y, mode='lines', name='Tangent'))
+fig.add_trace(go.Scatter(x=x_vals, y=tangent_y, mode='lines', name='Tangent', line=dict(color='#eb553d', width=2)))
 
 # Add a marker for the point of tangency.
 fig.add_trace(go.Scatter(x=[x0], y=[f(x0)],
-                         mode='markers',
-                         marker=dict(size=12, color='green'),
-                         name='Point'))
+                mode='markers',
+                marker=dict(size=12, color='green'),
+                name='Point')
+              )
 
 # Set the initial layout title with the slope at the starting point.
 fig.update_layout(title=(f'Slope Value = {derivative(f, x0):.4f}'), title_font_size=16)
@@ -65,18 +95,30 @@ def derivative(func, x, h=1e-5):
 # Create frames for the animation slider.
 frames = []
 for slider_val in x_vals:
-    # Compute the tangent line at each slider value using our numerical derivative.
-    save_deriv = derivative(f, slider_val)
-    tan_y = save_deriv * (x_vals - slider_val) + f(slider_val)
-    frames.append(go.Frame(
-        data=[
-            go.Scatter(),  # Placeholder for the function trace (remains unchanged).
-            go.Scatter(x=x_vals, y=tan_y),  # Tangent line.
-            go.Scatter(x=[slider_val], y=[f(slider_val)])  # Point of tangency.
-        ],
-        layout=go.Layout(title=(f'Slope Value = {save_deriv:.4f}'), yaxis_range= initial_yaxis, yaxis={'autorange':False}),
-        name=str(slider_val)
-    ))
+  # Compute the tangent line at each slider value using our numerical derivative.
+  save_deriv = derivative(f, slider_val)
+  tan_y = save_deriv * (x_vals - slider_val) + f(slider_val)
+  frame_data=[]
+
+  # Conditionally add vertical line at x=0
+  if x_range[0] < 0 < x_range[1]:
+    frame_data.append(go.Scatter(x=[0, 0], y=[y_min, y_max]))
+
+  # Conditionally add horizontal line at y=0
+  if y_min < 0 < y_max:
+    frame_data.append(go.Scatter(x=[x_range[0], x_range[1]]))
+
+  # Placeholder for the function trace (remains unchanged)
+  frame_data.append(go.Scatter()) 
+  frame_data.append(go.Scatter(x=x_vals, y=tan_y))  # Tangent line
+  frame_data.append(go.Scatter(x=[slider_val], y=[f(slider_val)]))  # Point of tangency
+
+  frames.append(go.Frame(
+      data=frame_data,
+      layout=go.Layout(title=(f'Slope Value = {save_deriv:.4f}'), yaxis_range= initial_yaxis, yaxis={'autorange':False}),
+      name=str(slider_val)
+  ))
+
 fig.frames = frames
 
 # Create a slider to control the animation.
@@ -104,13 +146,11 @@ def derivative(func, x, h=1e-5):
     pad={"t": 10, "b": 10},
 )]
 
-# Adjust padding and final layout settings.
-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',
-    xaxis=dict(range=[x_range[0], x_range[1]], fixedrange=True, linewidth=2, linecolor='silver'),
-    yaxis=dict(range=[np.min(f_vals) - pad, np.max(f_vals) + pad], fixedrange=True, linewidth=2, linecolor='silver'),
+    xaxis=dict(range=[x_range[0], x_range[1]], fixedrange=True),
+    yaxis=dict(range=[y_min, y_max], fixedrange=True),
     sliders=sliders,
     uirevision='static',
     margin=dict(t=50, r=0,l=60),

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

@@ -55,14 +55,29 @@ def generate_bars(n_bars):
 initial_bars = 10
 x_bar, y_bar, width = generate_bars(initial_bars)
 
-fig = px.line(x=x_line, y=y_line)
-
-# adds a line at x = 0 if the lower bound is negative
-if a < 0:
-  fig.add_vline(x=0, line_width=2, line_color='silver')
+# Function graph
+fig = px.line(x=x_line, y=y_line, color_discrete_sequence=['#6570f9'])
 
 fig.update_traces(hovertemplate="(%{x:.2f}, %{y:.2f})", name="Function", showlegend=False)
 
+# Adjust padding for final layout
+pad =  min(np.abs(np.min(y_line)), np.abs(np.max(y_line))) + (max(np.abs(np.min(y_line)), np.abs(np.max(y_line))) // 20)
+
+# Set the final y-axis range with padding
+y_min = np.min(y_line) - pad
+y_max = np.max(y_line) + pad
+
+# Vertical line at x=0 (y-axis)
+if a < 0 < b:
+  fig.add_trace(go.Scatter(
+      x=[0, 0],
+      y=[y_min, y_max],
+      mode='lines',
+      line=dict(color='silver', width=2),
+      showlegend=False
+  ))
+
+# Bar graph
 bar_trace = go.Bar(
     x=x_bar,
     y=y_bar,
@@ -105,28 +120,59 @@ def generate_bars(n_bars):
         f'Approx. Area = {np.round(midpoint_integrate(func, a, b, initial_bars), 9)}'
         f'<br>     True Area = {np.round(area, 9)}'), title_font_size=14, title_pad_b=2)
 
+# Create steps for the slider
 steps = []
 for n_bars in range(initial_bars, 101, 5):
-    x_bar, y_bar, width = generate_bars(n_bars)
-    step = dict(
-        method="update",
-        args=[
-            {"x": [x_line, x_bar], "y": [y_line, y_bar], "width": [None, [width] * len(x_bar)], 
-             "marker": dict(color=['#31b500' if value > 0 else '#ff3c00' for value in y_bar],
-              line=dict(color='black', width=1))},
-             {"title.text":  f'Approx. Area = {np.round(midpoint_integrate(func, a, b, n_bars), 9)}' 
-             f'<br>     True Area = {np.round(area, 9)}'}
-        ],
-        label=f"{n_bars}"
-    )
-    steps.append(step)
+  x_bar, y_bar, width = generate_bars(n_bars)
+  x_args=[]
+  y_args=[]
+  width_args = []
+  marker_args = []
+  line_args = []
+
+  # Conditionally add axis line trace args
+  if a < 0 < b:
+    x_args.append([0, 0])
+    y_args.append([y_min, y_max])
+    width_args.append(None)
+    line_args.append(dict(color='silver', width=2))
+
+  # Function trace args
+  x_args.append(x_line)
+  y_args.append(y_line)
+  width_args.append(None)
+  line_args.append(dict(color='#6570f9', width=2))
+
+  # Bar trace args
+  x_args.append(x_bar)
+  y_args.append(y_bar)
+  width_args.append([width] * len(x_bar))
+  marker_args.append(dict(
+    color=['#31b500' if value > 0 else '#ff3c00' for value in y_bar],
+    line=dict(color='black', width=1)
+  ))
+
+  step = dict(
+      method="update",
+      args=[
+            { 
+              "x": x_args, "y": y_args, "width": width_args, "marker": marker_args, "line": line_args
+            },
+            {
+              "title.text":  f'Approx. Area = {np.round(midpoint_integrate(func, a, b, n_bars), 9)}' 
+                f'<br>     True Area = {np.round(area, 9)}'
+            }
+          ],
+      label=f"{n_bars}"
+  )
+  steps.append(step)
 
 sliders = [dict(
-    active=0,
-    currentvalue={"prefix": "n = ", "font":{'size':14}},
-    pad={"t": 30},
-    bordercolor='#949fb3',
-    steps=steps
+  active=0,
+  currentvalue={"prefix": "n = ", "font":{'size':14}},
+  pad={"t": 30},
+  bordercolor='#949fb3',
+  steps=steps
 )]
 
 fig.update_layout(
@@ -136,7 +182,7 @@ def generate_bars(n_bars):
     xaxis_title="x-axis",
     yaxis_title="y-axis",
     xaxis=dict(range=[a, b], fixedrange=True, showgrid=True), 
-    yaxis=dict(fixedrange=True),
+    yaxis=dict(range=[y_min, y_max], fixedrange=True),
 )
 
 fig_json = fig.to_json(pretty=True)