Chinedu Ozodi

@ChineduOzodi·9 public vizzes

Scatter Plot with Menus and Colors

This interactive scatter plot visualizes the Iris dataset, with dropdown menus to select which flower measurements appear on the X and Y axes. Data points are colored by species, and hovering reveals a tooltip with the X-axis value. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for color mapping, and custom React components for the axes and marks.

Oct 15, 2021

Loading thumbnail…

Iris Data With React and D3

A scatter plot of the Iris dataset, rendered as SVG circles, displays relationships between selected measurements such as petal length and sepal width. Dropdown menus let users choose which numeric attribute appears on each axis. The React app uses `useState` and `useEffect` to manage selection and load CSV data via D3’s `csv` function. Scales created with `scaleLinear` and `extent` map data to coordinates, while custom React components render axes and marks.

Oct 15, 2021

Loading thumbnail…

Working With Time

A line chart displays temperature readings over one week in San Francisco, with time on the horizontal axis and temperature on the vertical axis. The chart uses D3 v7 scales, including `scaleTime` for the time axis and `scaleLinear` for temperature, while React components render the SVG axes and marks. The data is loaded via `d3.csv` from a remote CSV file, and the line path uses `d3.line` with `curveNatural` for smooth interpolation, with circles overlaid for each data point and tooltips showing the day of the week.

Oct 14, 2021

Loading thumbnail…

Rendering Population Data With React and D3

This bar chart displays the population of the top 15 countries in 2020, using a horizontal layout with a logarithmic scale. The visualization is built with React components that render SVG elements, while D3 v7 handles data loading via `csv()`, scales, and tick formatting. Data is sourced from the UN Population 2019 dataset, and each bar includes a tooltip showing the formatted population value using D3’s `format` function.

Oct 10, 2021

Loading thumbnail…

Vega-Lite API Part I

This example visualizes CSS named colors as an arc diagram, where each color name is mapped to a radial segment and its hue determines the stroke color. A tooltip reveals the color name on hover, and the chart fills the entire browser window with a dark, high-contrast theme. The visualization is built using the Vega-Lite API, which composes a single `markArc` encoding with `fieldN` mappings for position, color, and tooltip. Data is loaded asynchronously from a CSV file via `d3.csv`, while the view is rendered as SVG using Vega, Vega-Lite, and the vega-tooltip handler.

Oct 8, 2021

Loading thumbnail…

Rendering Data With React and D3

A donut chart displays all CSS named colors from a CSV dataset, with each color represented as a slice. React manages the component state and renders SVG paths, while D3’s `csv` loads the data and the `pie` and `arc` generators compute the angular and radial geometry. The chart positions itself at the center of a 960×500 viewport, filling each path with the color’s hex value from the data.

Oct 8, 2021

Loading thumbnail…

Visualizing Data Part I

A circle follows the mouse; its radius grows with mouse speed. The visualization uses React state to track pointer position and velocity, rendering an SVG circle. The `d3` library supplies the `range` function, though it is not used in the visible logic. React's `useState` and `useCallback` manage events, and `ReactDOM` mounts the app into the HTML root element.

Oct 7, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the basic workflow of loading and parsing CSV data with D3. It fetches a CSV file containing CSS named colors from a GitHub gist and displays summary statistics—file size in kilobytes, row count, and column count—in a large text element. The code uses `d3.csv` and the Promise-based `.then()` method to handle asynchronous loading. An alternative commented-out section shows the same process using the Fetch API with `async`/`await` and `d3.csvParse`. The final output presents three lines of calculated metrics derived from the parsed dataset.

Oct 7, 2021

Loading thumbnail…

Smiley Face Part II

The visualization displays a grid of procedurally generated smiley faces, each with randomized facial features including eye size, eye offset, stroke thickness, and mouth dimensions. Built with React and D3 v7, the code uses reusable SVG components like `BackgroundCircle`, `Eye`, and `Mouth` within a `FaceContainer` that translates the coordinate system. The `Mouth` component leverages D3's `arc` generator to create varying smile shapes, while React's `range` and `Math.random` produce 18 distinct face variations.

Oct 6, 2021