Saket Anand

@saketanand·3 public vizzes

Let's make a face with D3.js!

A yellow smiley face drawn in SVG shows animated eyebrows that rise and fall over repeated two-second transitions. The example demonstrates fundamental DOM manipulation with D3.js v5, using selections to append circles for the face and eyes, rectangles for the eyebrows, and a path generated with the `arc()` helper for the mouth. Eyebrow motion relies on chained `transition().duration()` calls that alternate the transform attribute.

Mar 25, 2020

Loading thumbnail…

Shapes With SVG

This example displays two basic SVG shapes—a circle and a rectangle—on a 960×500 canvas. The circle is positioned at coordinates (150,200) with a radius of 100, while the rectangle has a width and height of 50, placed at (200,250). The code uses raw SVG elements within an HTML document, with React as the underlying framework and a linked stylesheet defining the page layout. The visualization demonstrates fundamental SVG rendering without additional data or interactive behavior.

Mar 20, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML report of used cars, showing model names and prices in a bulleted list. The page uses a basic document structure with an unordered list, styled through a linked stylesheet. The heading and list items are presented in a large monospace font, with the list items highlighted in red. It relies on standard HTML elements and CSS for layout, with no JavaScript or external libraries beyond the browser’s native rendering.

Mar 20, 2020