embed-graph

A minimal, ultra-lightweight LaTeX mathematical graph renderer designed specifically to be embedded into dashboards and workspaces like Notion via iframes. Powered by Evaluatex, Function Plot, and D3.js.

---

🚀 Features

• URL-Driven Rendering: No UI or backend setup required. Pass your mathematical equations directly into the URL query string (?expr=).
• Native LaTeX Support: Handles complex LaTeX formatting including fractions, absolute values (\left|...\right|), exponents, and trigonometric functions out of the box.
• Multi-Line Plotting: Graph multiple functions simultaneously by separating equations with a comma.
• Built-in Constants: Full native support for Euler's constant (e) and Pi (\pi).
• Notion-Adaptive Themes: Includes high-fidelity color matching for both Notion Light and Dark modes (?theme=light or ?theme=dark) to seamlessly blend into your workspace canvas.
• Responsive: Automatically recalibrates and re-renders sharp vector graphs when the parent container or iframe bounds are resized.

---

🛠️ URL Syntax & Usage

To render a graph, use the following base URL structure:

https://embed-graph.netlify.app/?theme=[light|dark]&expr=[your_url_encoded_latex]

URL Encoding Tip

Because symbols like \, +, and {} have special meanings in URLs, always ensure your mathematical expression is URL Encoded.

Examples

1. Multi-inflection Absolute Value Function

• Raw LaTeX: \left|x+2\right|+\left|2x-1\right|-\left|x-1\right|
• Notion Dark Mode Link:

https://embed-graph.netlify.app/?theme=dark&expr=%5Cleft%7Cx%2B2%5Cright%7C%2B%5Cleft%7C2x-1%5Cright%7C-%5Cleft%7Cx-1%5Cright%7C

2. Exponential Curve with Euler's Constant

• Raw LaTeX: e^x (Default fallback if no expression is provided)
• Notion Light Mode Link:

https://embed-graph.netlify.app/?theme=light&expr=e%5Ex

3. Trigonometric Functions with Pi

• Raw LaTeX: \sin(\pi x), \cos(x)
• Notion Dark Mode Link:

https://embed-graph.netlify.app/?theme=dark&expr=%5Csin(%5Cpi%20x)%2C%20%5Ccos(x)

---

📦 How to Embed in Notion

1. Copy your generated and URL-encoded link from the examples above.
2. Open your Notion page and type /embed.
3. Paste your custom link into the Embed link input box and click Embed link.
4. Resize the visual block to fit your dashboard layout.

💡 Pro-Tip: Match the URL theme parameter (light or dark) to your current Notion appearance setting so the grid lines, text labels, and axes are perfectly visible.

---

👨‍💻 Local Development

To run or tweak the renderer locally:

1. Clone or download the repository containing index.html.
2. Open index.html using a local development server (such as the VS Code Live Server extension).
3. Append query parameters to your local host URL to test expressions:

http://127.0.0.1:5500/index.html?theme=dark&expr=x^2

---

📄 License

This project is open-source and available under the MIT License.