alexislanz

@alexislanz·5 public vizzes

World Map

This example displays a world map with countries rendered as interactive SVG paths that turn grey on hover. It loads GeoJSON data from the World Atlas TopoJSON file using d3.json, converts it to features with topojson.feature, and projects the map with d3.geoEqualEarth and d3.geoPath. The React component uses d3.fitSize to fit the map to a 960×500 viewport, while the useData hook asynchronously fetches and transforms the data.

Aug 7, 2021

Loading thumbnail…

World Population Bar Chart

This bar chart visualizes world total population by year, drawn as a series of vertical bars in an SVG. The visualization maps years to the x-axis and population counts to the y-axis using D3’s `scaleLinear`, with each yearly value rendered as a `<rect>` element. Data is loaded asynchronously from a CSV file via D3’s `csv` function, while the React app manages state through `useState` and `useEffect`. Axes are generated with `axisBottom` and `axisLeft` from D3 v7.

Aug 6, 2021

Loading thumbnail…

Smiley Face Follower - using hooks

A smiling face follows the mouse cursor across an SVG canvas, updating its position in real time. The example uses React hooks, specifically `useState`, to track mouse coordinates via an `onMouseMove` event handler on the `<svg>` element, and re-renders the face accordingly. The face is composed of reusable React components—`FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`—where the mouth shape is generated using the `d3.arc()` function from D3 v7. All rendering is done declaratively in SVG.

Aug 3, 2021

Loading thumbnail…

Smiley Face Follower

A smiley face rendered with React and SVG components follows the mouse cursor across a 960×480 canvas. The face is composed of reusable subcomponents: `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth drawn using the D3 `arc` generator. Mouse movement updates React state via `onMouseMove`, repositioning the face through a `<g>` transform in `FaceContainer`. The example demonstrates combining React's declarative component structure with D3's geometric utilities for interactive SVG visualization.

Aug 2, 2021

Loading thumbnail…

My Smiley Faces

The visualization shows a grid of eighteen smiley faces, each generated with randomized facial proportions derived from a shared base width and stroke width. A React app maps over a range of indices, rendering each face as an SVG composed of a yellow background circle, two black eyes, and a mouth arc. The code uses D3's `arc` API to define the mouth path, while React components structure the reusable face parts. Each face’s eye offset, eye height, eye radius, mouth radius, and mouth width vary randomly, producing a playful collection of distinct expressions.

Aug 2, 2021