tomideadeoye

@tomideadeoye·5 public vizzes

Modelling

This example models population trends by displaying the top 10 most populous countries as horizontal bars, ordered by rank. Using React for component state and D3 v5 for scales and SVG rendering, it loads United Nations World Population Prospects 2019 data via `d3.csv`. The code explicitly renders x-axis ticks with `scaleLinear.ticks()` and grid lines, while `scaleBand` positions each country’s bar, showing population values without a title or y-axis labels.

Jan 3, 2022

Loading thumbnail…

VegaLite 1

This interactive scatterplot uses the Vega-Lite API to explore the UCI Auto MPG dataset, plotting car origin against cylinders. Points are colored by origin, sized by weight, and display the car name on hover via a tooltip. The visualization is built with `vega-lite-api` and `vega-lite`, rendering to SVG with a customized dark theme and responsive sizing to fill the browser window.

Jan 3, 2022

Loading thumbnail…

SMILEY1

A smiling face is drawn with SVG circles and an arc, centered within a 960-by-500 viewport. The yellow background circle, black-outlined face, and dark eyes are positioned using React components, while the mouth is generated with the d3.arc() function from D3 v5. The example demonstrates composing React functional components with D3 shape generators to produce static, geometric visualizations without data binding or interactivity.

Nov 28, 2021

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This example shows a simple yellow circle face with two black eyes, drawn as a static SVG smiley face without a mouth. The visualization uses plain SVG circle elements with explicit cx, cy, and r attributes to position the face and eyes at fixed coordinates relative to the 960×500 canvas. The code sets a yellow fill and black stroke for the main face, while the eyes use default black fill, and the body margin is hidden to maximize the drawing space. It demonstrates basic SVG shape rendering without any interactive or data-driven behavior.

Nov 27, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of the “Let’s Make a Face” tutorial shows a simple smiley face rendered directly in SVG, with a yellow circular head and two black eye circles on a blank background. The code uses inline SVG elements—`<circle>` for the face and eyes, with fixed coordinates and stroke properties—inside an HTML page. It sets the body margin to zero and hides overflow to make the drawing fill the viewport, though no animation or interaction is present. The face is a static, geometric composition built from basic shapes.

Nov 27, 2021