Tal van Dijk

@talvandijk·3 public vizzes

SVG Fundamentals

Three circles of different colors and sizes on a blank SVG canvas demonstrate the basics of SVG markup. The example shows how to draw and position shapes directly in HTML without any JavaScript interaction. The page uses D3 version 6 and includes inline SVG elements: two red circles and one black circle, each with explicit `cx`, `cy`, and `r` attributes. The accompanying `index.js` imports the `select` function from D3 and writes text to the page body.

May 27, 2023

Loading thumbnail…

Smiley Face Part III

A yellow smiley face rendered as static SVG via React and D3. The face includes black-outlined circular head, two eyes, a red nose, blue eyebrows as polylines, and a mouth drawn with D3's `arc` path generator. Uses React's declarative JSX for SVG elements and D3 v5's `arc` API to compute the mouth path, with ReactDOM rendering the component into the root div.

Aug 8, 2020

Loading thumbnail…

Smiley Face Part 1

A smiling face is drawn on a yellow circular head with a black outline, two solid black eyes, and an open mouth formed by a thick arc. The visualization uses React to render the SVG and D3's `arc()` function to generate the mouth path. The head, eyes, and mouth are positioned relative to the center of a 960x500 coordinate space, with the face built from basic SVG shapes. The example demonstrates combining React's DOM rendering with D3's geometry utilities to create a simple yet effective data-driven graphic.

Aug 4, 2020