interactive graphs and visualizations - examples

interactive components

mdx allows you to embed fully interactive react components. here are some examples:

counters

basic interactive counter:

counter

counter with custom settings:

custom counter

data visualization

this svg-based visualizer lets you add points, generate waves, and animate:

click the buttons to interact

points: 0

chart.js integration

using chart.js with react-chartjs-2 for professional charts:

line charts

performance comparison

build time analysis

technical implementation

these interactive components demonstrate several advanced concepts:

client-side hydration

components use the client:load directive to hydrate on the client:

<Counter client:load />

other hydration strategies available:

client:idle - hydrate when browser becomes idle
client:visible - hydrate when component becomes visible
client:media={QUERY} - hydrate when media query matches

typescript integration

all components are written in typescript with proper interfaces:

interface CounterProps {
  initialValue?: number;
  step?: number;
  label?: string;
}

state management

react hooks work normally within mdx:

const [count, setCount] = useState(initialValue);
const [points, setPoints] = useState<DataPoint[]>([]);

svg and canvas

custom visualizations using svg elements and mathematical functions:

const generateWave = () => {
  const wavePoints: DataPoint[] = [];
  for (let i = 0; i < width; i += 5) {
    wavePoints.push({
      x: i,
      y: height / 2 + Math.sin(i * 0.02) * 50,
    });
  }
  setPoints(wavePoints);
};

styling integration

components use tailwind classes that match the site design:

consistent color palette
proper spacing and typography
hover states and transitions
responsive design patterns

performance considerations

bundle size

interactive components are only loaded when needed using client directives.

optimization

chart.js registers only required components
svg elements are lightweight
react state updates are batched

this demonstrates how mdx can create rich, interactive documentation and blog posts that go far beyond traditional markdown capabilities.