Embedding Maps and Graphs

In modern web design, static images often aren’t enough. We need interactive, dynamic, and visually appealing ways to present data, whether it’s a geographical location or a mathematical concept.

This post demonstrates two new components we’ve added to our design system: MapEmbed for locations and EquationGraph for math.

1. Cinematic Maps

Standard Google Maps embeds can look jarring. We’ve wrapped them in a MapEmbed component that adds:

• Rounded corners and a subtle “cinematic” border.
• A smooth slide-up animation on scroll.
• Dark mode support.

Example: IIT Madras Campus

2. Mathematical Graphs

For our data science courses, we often need to visualize functions. Instead of using static images, we can use SVG to draw them dynamically. The EquationGraph component:

• Generates SVG paths from mathematical functions.
• Animates the drawing of the line.
• Includes a responsive grid.

Sine Wave

The classic sine wave, fundamental to signal processing.

Quadratic Function

A parabola, representing $y = x^2$.

Custom Expression

We can even plot custom expressions like a damped sine wave: $y = \sin(x) \cdot e^{-0.1x}$.

Implementation Details

These components are built using Astro and Vanilla CSS.

• Maps: Use an iframe wrapped in a styled div. An IntersectionObserver triggers the entry animation.
• Graphs: Use an SVG <path> element. The d attribute is calculated in the component script. The drawing animation is achieved using stroke-dasharray and stroke-dashoffset.

This approach keeps our site fast (no heavy charting libraries for simple plots) and beautiful.