Noah Onyejese

@noahonyejese·4 public vizzes

Fork of Vega-Lite API Template

This visualization displays the relationship between a vehicle's origin and its horsepower using a scatter plot with semi-transparent circular marks. The data comes from a CSV file fetched via `d3.csv`, with points sized and slightly transparent to reveal density. Built with the Vega-Lite API, the chart uses `vl.markCircle` and encodes the origin as a nominal field on the x-axis and horsepower as a quantitative field on the y-axis. The visualization integrates `vega-tooltip` for hover details and customizes axis and label styles through the `config` object.

Aug 27, 2024

Loading thumbnail…

Fork of Mouse Follower

This example displays a loading message that reports the size, row count, and column count of a dataset loaded from a CSV file of CSS named colors. The code integrates React with D3 by using React hooks (`useState`, `useEffect`) to fetch data via `d3.csv`, then formats the summary with `d3.csvFormat`. The rendered text is plain, with no visualization beyond the data statistics.

Aug 27, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and React. It fetches a dataset of CSS named colors and displays the parsed contents in a plain text container. The code uses `d3.csv` to asynchronously retrieve and parse the CSV file, then renders the resulting array of objects. The visualization highlights the data loading pipeline, showing how raw CSV rows transform into structured JavaScript objects that can be inspected or used in downstream React components. The minimal interface focuses entirely on the data parsing workflow rather than any complex visual encoding.

Aug 27, 2024

Loading thumbnail…

Fork of Hello HTML

A smiling face rendered as a static SVG graphic inside an HTML page. Drawn with React and ReactDOM, the code creates a yellow circle with a black outline for the head, two black circles for eyes, and no other facial features or animations. The visualization is a basic example of using React’s component model to declaratively define SVG shapes. The page loads React from a CDN and renders the graphic directly into a div, demonstrating a minimal setup for SVG drawing.

Aug 27, 2024