Interactive Plots for Jekyll Blog

This directory contains interactive Plotly HTML plots that can be embedded in Jekyll blog posts.

Available Plots

• orthogonal_projection_3d.html - 3D visualization of orthogonal projection in linear regression
• orthogonal_projection_2d.html - 2D vector decomposition visualization

How to Use

In Jekyll Blog Posts

Use the interactive_plot.html include to embed plots:

<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;">
      Your caption here
    </p>
  
</div> 

Parameters

• plot_file: Path to the HTML plot file (relative to site root)
• width: Width of the iframe (default: 800)
• height: Height of the iframe (default: 600)
• caption: Optional caption text below the plot

Creating New Interactive Plots

1. Create a Python script using Plotly
2. Generate HTML output using fig.write_html("filename.html")
3. Place the HTML file in this directory
4. Use the include tag in your blog post

Example Usage in Blog Post

Here's an interactive visualization of the orthogonal projection:



<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 orthogonal projection in linear regression.
    </p>
  
</div> 

Features

• Interactive: Users can rotate, zoom, and hover over elements
• Responsive: Plots adapt to different screen sizes
• Embedded: Plots are embedded as iframes for better performance
• Customizable: Width, height, and captions can be customized