Samuel Oseh

@samie-hash·13 public vizzes

Crime Viz

This bar chart visualizes crime statistics across Nigeria’s 20 most dangerous states in 2016, with horizontal bars sorted by total reported cases. The visualization uses React and D3 v5, leveraging `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously via `d3.csv` from a GitHub gist, formatted with custom tick formatting that abbreviates large numbers. SVG rectangles render the marks, with native `<title>` elements providing hover tooltips. The chart includes labeled axes, a title, subtitle, and source attribution.

Jul 11, 2022

Loading thumbnail…

Top Populous countries

This bar chart displays the top 10 most populous countries in 2020, sorted by population, with a left-aligned y-axis listing country names and an x-axis measuring population in billions. It uses React with D3 v5, leveraging `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `<rect>` elements for bars. Data is loaded asynchronously from a CSV via `d3.csv`, then sliced and rendered with custom `AxisBottom`, `AxisLeft`, and `Marks` components, with native SVG `<title>` tooltips.

Jul 11, 2022

Loading thumbnail…

Points on World Map

This example displays global city populations as semi-transparent circles overlaid on a world map. The map uses a natural Earth projection rendered with D3’s `geoNaturalEarth1` and `geoPath`, with graticule and land/interior outlines. The `topojson` library processes world-atlas boundaries. City coordinates and populations come from a CSV, scaled by a square-root scale to a maximum radius of 10 pixels. The visualization is built in React, using hooks to asynchronously fetch data and render the SVG scene.

Jul 11, 2022

Loading thumbnail…

Beautiful Scatterplot of Iris

This interactive scatterplot displays the Iris flower dataset, plotting petal length against sepal width. Each flower is represented by a circle colored by species, with a legend allowing users to hover and highlight a specific species while fading the others. Built with React and D3 v5, the visualization uses `d3.scaleLinear` and `d3.scaleOrdinal` for scales, and renders as SVG. Hovering over a legend item triggers a filter (`data.filter`) to emphasize the selected species, while tooltips via `<title>` show precise values.

Jul 11, 2022

Loading thumbnail…

World Map

This example shows a basic vector world map rendered in SVG using a Natural Earth projection. It displays continents and country boundaries in a muted teal palette, with graticule lines and a sphere outline for geographic context. The code combines React with D3 utilities, using `geoNaturalEarth1` and `geoPath` for map geometry, while TopoJSON’s `feature` and `mesh` methods extract land shapes and interior borders from the world-atlas dataset.

Jul 11, 2022

Loading thumbnail…

Time analyis

This interactive line chart displays temperature readings over the course of a week, using a smooth natural curve to connect data points. The visualization uses React with D3.js version 5, specifically leveraging the d3 scaleTime and scaleLinear APIs for axis scaling, and the line and curveNatural functions from D3 to render the path. The SVG-based chart includes formatted time labels on the x-axis and temperature values on the y-axis, with data loaded from an external CSV file.

Jul 11, 2022

Loading thumbnail…

Scatterplot of Iris

This scatterplot of the Iris dataset displays the relationship between petal length and sepal width using a D3 linear scale for each axis. The visualization uses React with D3’s `scaleLinear` and `d3.extent` to map the data from the CSV file loaded via `useData`. SVG circles render each data point with a native `<title>` element for basic tooltips, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels. The chart applies a teal fill for marks and gray axis styling from the Poppins-font CSS.

Jul 10, 2022

Loading thumbnail…

Color Viz

This example visualizes the CSS named colors as a vertical stack of horizontal swatches, one per color, ordered as they appear in the source CSV. The React app asynchronously loads the dataset using `d3.csv`, then renders each row as a 20-pixel-tall, 960-pixel-wide `<div>` with a background color set from the `RGB hex value` column. The visualization relies on React’s `useState` and `useEffect` hooks to manage the data-fetching lifecycle, with a “Loading…” fallback presented before the data arrives.

Jul 9, 2022

Loading thumbnail…

React Loader

This example demonstrates a minimal React application that loads a CSV dataset of CSS named colors from a GitHub gist and displays a summary message. The code uses React hooks (`useState` and `useEffect`) to fetch the data with `d3.csv` and then computes three statistics: the number of rows, columns, and the file size in kilobytes using `d3.csvFormat`. While loading, the interface shows the text "Loading...", and after the data arrives, it renders the summary in a large `<pre>` element. The visualization intentionally focuses on the bare-bones integration of D3 data-loading utilities within a React component lifecycle.

Jul 9, 2022

Loading thumbnail…

Load Data from CSV

This example loads a CSV file of CSS named colors from a GitHub gist and displays its metadata in a large preformatted text element. Using `d3.csv`, it fetches and parses the data, then reports the number of rows, columns, and the approximate file size in kilobytes via `d3.csvFormat` and `data.columns`. The interface updates the text content of an HTML element to show these three statistics, demonstrating basic asynchronous data loading and summary reporting with D3 v7.

Jul 9, 2022

Loading thumbnail…

Circle animation

This example shows a yellow circle with a black outline that follows the user’s cursor across an SVG canvas. The circle is rendered inside a React component tree, with its position updated via React state and mouse event handlers. It uses React hooks like `useState` and `useCallback`, while the circle’s shape is defined as a simple SVG `<circle>` element. The code splits components into separate ES6 modules for the background, eyes, and mouth, though only the background circle is currently visible in the interaction.

Jul 9, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example loads a CSV file of CSS named colors from a GitHub gist and displays the data as plain text in a large font. It uses the D3.js library (version 5) to fetch and parse the CSV via `d3.csv`, then inserts the resulting color names into an HTML `<pre>` element. The visualization is minimal, focusing on demonstrating the data-loading and parsing pipeline without any graphical charting. The page relies on a script tag to include D3 from the unpkg CDN and is built within a React framework context.

Jul 3, 2022

Loading thumbnail…

Smiley Face Part 1

This example shows a simple, stylized smiley face composed of a yellow circular background, two black eyes, and a mouth formed by an arc. The face is centered and scaled within an SVG canvas created with React. The code uses D3's `arc` API to generate the mouth path, while the background and eyes are constructed from basic SVG circle elements, with positioning controlled by offset and radius parameters.

Jul 2, 2022