Interactive Plots Setup for Jekyll Blog

This guide explains how to set up and use interactive Plotly plots in your Jekyll blog.

What We’ve Set Up

Interactive Plot Script (../plots/interactive_plot.py) - Creates Plotly visualizations
Jekyll Include (../_includes/interactive_plot.html) - Embeds plots in blog posts
Assets Directory (../assets/plots/) - Stores HTML plot files
Helper Script (generate_plot.py) - Automates plot generation and placement
Utils Directory (../utils/) - Contains helper scripts and documentation

How It Works

Instead of showing static code blocks, your blog now displays interactive 3D plots that readers can:

Rotate and zoom
Hover over elements for details
Interact with legends
View from different angles

Current Implementation

Your blog post now includes this line:

<div class="interactive-plot-container" style="text-align: center; margin: 20px 0;">
  <iframe 
    src="/assets/plots/orthogonal_projection_3d.html" 
    width="800" 
    height="600"
    frameborder="0"
    scrolling="no"
    style="border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
  </iframe>
  
    <p class="plot-caption" style="margin-top: 10px; font-style: italic; color: #666;">
      Interactive 3D visualization showing the orthogonal projection of vector y onto subspace S spanned by basis functions φ₀(x) = 1 and φ₁(x). The plot demonstrates how the least squares solution corresponds to finding the orthogonal projection.
    </p>
  
</div> 

This will render as an interactive 3D plot showing:

Subspace S (light blue plane) - The 2D subspace spanned by basis functions
Vector y (green arrow) - The true target values
ŷ = Proj_S(y) (orange arrow) - The orthogonal projection (least squares prediction)
Residual (purple arrow) - The difference between y and its projection

Creating New Interactive Plots

Method 1: Using the Helper Script

# Navigate to utils directory
cd utils

# Generate and move plots automatically
python generate_plot.py interactive_plot.py

# With custom output name
python generate_plot.py my_plot_script.py my_custom_plot

Method 2: Manual Process

Create a Python script using Plotly
Generate HTML: fig.write_html("my_plot.html")
Move to assets: mv my_plot.html ../assets/plots/
Include in blog: `

Example: Creating a New Plot

import plotly.graph_objects as go
import numpy as np

def create_my_plot():
    # Your plot code here
    fig = go.Figure()
    # ... add traces, layout, etc.
    return fig

if __name__ == "__main__":
    fig = create_my_plot()
    fig.write_html("my_new_plot.html")

Then run:

cd utils
python generate_plot.py my_plot_script.py

Including in Blog Posts

Basic Usage

<div class="interactive-plot-container" style="text-align: center; margin: 20px 0;">
  <iframe 
    src="/assets/plots/orthogonal_projection_3d.html" 
    width="800" 
    height="600"
    frameborder="0"
    scrolling="no"
    style="border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
  </iframe>
  
</div> 

With Custom Size

<div class="interactive-plot-container" style="text-align: center; margin: 20px 0;">
  <iframe 
    src="/assets/plots/orthogonal_projection_3d.html" 
    width="1000" 
    height="700"
    frameborder="0"
    scrolling="no"
    style="border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
  </iframe>
  
</div> 

With Caption

<div class="interactive-plot-container" style="text-align: center; margin: 20px 0;">
  <iframe 
    src="/assets/plots/orthogonal_projection_3d.html" 
    width="800" 
    height="600"
    frameborder="0"
    scrolling="no"
    style="border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
  </iframe>
  
    <p class="plot-caption" style="margin-top: 10px; font-style: italic; color: #666;">
      This plot shows the geometric interpretation of linear regression.
    </p>
  
</div> 

Available Plots

orthogonal_projection_3d.html - 3D orthogonal projection visualization
orthogonal_projection_2d.html - 2D vector decomposition

Benefits

Interactive: Readers can explore the visualization
Educational: Better understanding of complex concepts
Professional: Modern, engaging blog content
Responsive: Works on different devices
Fast: Plots load quickly as embedded HTML

Troubleshooting

Plot Not Showing

Check that the HTML file exists in ../assets/plots/
Verify the path in the include statement
Ensure Jekyll is building the site correctly

Plot Too Large/Small

Adjust width and height parameters in the include
Consider responsive design for mobile devices

Performance Issues

Keep plot complexity reasonable
Consider lazy loading for multiple plots
Optimize data size in plots

Next Steps

Test the current plot by building your Jekyll site
Create additional plots for other concepts in your blog
Customize the styling in ../_includes/interactive_plot.html
Add more interactive features like animations or sliders

Dependencies

Make sure you have these Python packages installed:

pip install plotly numpy

The plots are now ready to use in your Jekyll blog! 🎉

Elizabeth (Lizzy) White