GenpinZ

@GenpinZ·7 public vizzes

Pathetic Bar Chart

This example displays the ten most populous countries as a set of horizontal bars, with no axes, scales, or labels to orient the viewer. Each bar’s length corresponds to the country’s 2020 population, and the bars are stacked vertically in descending order of population. The visualization is rendered as an SVG using React and D3 v5, leveraging `scaleBand` for the y-axis positioning and `scaleLinear` for the x-axis scaling. The data is loaded from the United Nations World Population Prospects 2019 CSV file via `d3.csv`.

Mar 18, 2022

Loading thumbnail…

Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color occupying an equal-sized slice arranged in a full circle. The visualization loads color data from a CSV file using D3’s `csv` utility, then renders the data as SVG paths with React components. D3’s `arc` and `pie` functions compute the slice geometry, while React manages the component state and lifecycle through `useState` and `useEffect`. The result is a simple, colorful wheel that demonstrates the integration of D3’s data manipulation with React’s declarative rendering.

Mar 18, 2022

Loading thumbnail…

Vega-Lite API Template

This visualization displays a scatter plot of vehicle fuel efficiency data from the UCI Auto MPG dataset, with horsepower on the y-axis, miles per gallon on the x-axis, and points colored by origin while sized by weight. It is built using the Vega-Lite API, which programmatically constructs Vega-Lite specifications, and renders through the Vega and Vega-Lite libraries. The code loads CSV data with d3.csv, applies custom axis and label styling from a config object, and renders an interactive SVG view with tooltips via vega-tooltip.

Mar 18, 2022

Loading thumbnail…

loading Data with React & D3

This example demonstrates how to load and summarize CSS named color data using D3 utilities within a React application. The code fetches a CSV file from a GitHub gist using d3.csv and stores the resulting parsed data in React state via the useState and useEffect hooks. While the data loads, the interface displays “Loading...”; once ready, it renders a text summary showing the formatted data size in kilobytes, row count, and column count using d3.csvFormat. The visualization is minimal, presenting only this numerical information rather than a graphical chart.

Mar 18, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size, row count, and column count in a large text block. The visualization uses `d3.csv` with a Promise to fetch and parse CSS Named Colors data from a GitHub Gist, then reports the results using `d3.csvFormat` to calculate data size. Alternate commented approaches show `fetch` with `async`/`await` and `d3.csvParse`, alongside a nested Promise “pyramid of doom” pattern. The page relies on D3 v5 and raw HTML/CSS for output.

Mar 18, 2022

Loading thumbnail…

Mouse Follower

This example uses React to render an SVG circle that follows the mouse cursor across the screen. The `index.js` file initializes a React state hook with the circle’s coordinates, then updates that state on every `onMouseMove` event triggered on the SVG element. The circle’s position is bound directly to the current mouse coordinates via the `cx` and `cy` attributes, with a fixed radius of 30 pixels. The visualization relies on React’s `useState` and `useCallback` hooks, along with `ReactDOM.render` to mount the component.

Mar 18, 2022

Loading thumbnail…

Smile Face 1

This gallery piece displays a grid of 36 variations of the classic smiley face, each rendered in an SVG. The primary visual is determined by the `Face` component, which calculates its parameters using JavaScript's `Math.random()`, resulting in faces with varying stroke widths, eye offsets, eye radii, and mouth dimensions. Built with React and D3, the code specifically uses `d3.arc` to create the mouth shape and `range` from D3 to generate the array of faces.

Mar 10, 2022