Sven Wanner

@svenwanner·2 public vizzes

Let's make a face

A yellow circle with a black outline forms a face, featuring two black eyes and an arc-shaped mouth drawn using d3.arc. The animation uses D3 transitions to make the left eyebrow move up and down repeatedly, while the right eyebrow remains static. Built with D3 v6, the visualization manipulates SVG elements like circle, rect, and path, with all positioning centered via SVG coordinate transforms.

Oct 30, 2020

Loading thumbnail…

React Starter

This React Starter example displays a static SVG scene containing a blue circle, a rectangle, and a gray polyline path, all scaled up by a 13em font-size in the surrounding app. The visualization renders directly in the browser using React and ReactDOM, with the SVG markup defined inline in the HTML and styled through CSS classes for stroke properties. The code imports React components and uses the `render()` method to output a "Hello World" message, while the SVG elements remain hardcoded in the page structure.

Oct 30, 2020