Dylan Doucet

@ProSweeper·3 public vizzes

Fork of React Starter

A cartoon face composed of SVG shapes sits at the center of a yellow canvas, built with React components for the background circle, eyes, and mouth. The mouth uses D3's `arc()` generator to create a crescent path from specified radii and angles, while the face is assembled from modular components (`FaceContainer`, `BackgroundCircle`, `Eyes`, `Mouth`) and positioned via SVG transforms. The example demonstrates how React and D3 v7 can be combined, with all rendering handled through declarative SVG elements.

Jan 3, 2023

Loading thumbnail…

Fork of React & D3 Starter

This starter demonstrates a decoupled React & D3 integration pattern for scalable projects. It visualizes the Iris dataset as a scatterplot of sepal length against petal length, using React to manage component state and the SVG container, while D3 handles the scales, axes, and circle elements. The code uses `useData` with `d3.csv` to load data, `scaleLinear` and `extent` for scales, and `axisLeft`/`axisBottom` for axes. This example shows a clean separation of concerns for growing complexity.

Jan 2, 2023

Loading thumbnail…

Smiley Face Part 1

This example renders a simple smiley face using SVG primitives. The code directly creates three circle shapes, a large yellow face with a black stroke, and two smaller black circles for eyes, all positioned on a static 960 by 500 canvas. The implementation relies on raw SVG elements embedded in an HTML document, with the overall styling controlled by a small CSS block that removes margin and hides overflow. There is no interactivity or data source; the visualization is solely composed of hard-coded coordinates and attributes. This demonstrates the fundamental use of SVG shapes and basic styling without any JavaScript or charting libraries.

Jan 2, 2023