StarkerRegen

@StarkerRegen·5 public vizzes

Stylized Scatter Plot

A stylized scatter plot of the Iris Dataset displays petal length on the x-axis and sepal width on the y-axis, encoding each flower as a fixed-size circle. Built with React and D3 v5, it uses `csv` for data loading, `scaleLinear` for axes, and SVG `circle` elements for marks. The rendering includes custom axis components that draw lines and text ticks, along with CSS-styled fonts and colors for a polished appearance.

Jan 25, 2022

Loading thumbnail…

Bar Chart

This bar chart visualizes the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, using horizontal bars to encode population size. The chart omits axes by design, instead relying on interactive tooltips to display values. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the x-axis, rendering as an SVG. D3’s `format` function converts large numbers into abbreviated forms like "1.4B" for the tooltips.

Jan 20, 2022

Loading thumbnail…

Pie

This example shows a radial burst of colored arcs, each representing a CSS named color from a dataset loaded via `d3.csv`. The visualization renders a full circle of pie slices with no gaps, using React to manage state and render SVG paths. It leverages `d3.pie` to compute arc angles and `d3.arc` to generate the path geometry, with each slice filled using the color’s hexadecimal value from the data. The code demonstrates a hybrid approach where D3 handles data loading and calculations while React handles the DOM updates.

Jan 20, 2022

Loading thumbnail…

Viz with Vega

This example uses the Vega-Lite API to render a scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. It maps miles per gallon on the x-axis, horsepower on the y-axis, color to country of origin, and size to vehicle weight, with tooltips showing model names. The visualization is built programmatically via `vl.markCircle`, `vl.x().fieldQ()`, and related encodings, then rendered with Vega-Lite’s API and a custom `config` for styling. Data loading relies on d3’s `csv` function, while the final output uses Vega’s SVG renderer with an interactive tooltip handler.

Jan 19, 2022

Loading thumbnail…

Smiley Face

Eighteen identical smiley faces are rendered in a grid, each with randomly sized eyes and mouths, creating subtle variation across the composition. Every face consists of a yellow circle with a black stroke, two black eye circles, and an arc-based mouth. The visualization is built with React components that compose reusable SVG elements, while D3's `arc` generator creates the mouth path. A mouse-tracking circle follows the cursor, updating its position via React state and event handlers.

Jan 19, 2022