S

seanowh

@seanowh·26 public vizzes

Loading thumbnail…

2 graphs migrants on a map

This visualization combines a bubble map and a date histogram to display migrant deaths and missing persons incidents. The map uses D3’s `geoNaturalEarth1` projection with `geoPath` to render world landmasses, graticules, and country interiors, while circles sized by `scaleSqrt` represent the total dead and missing at each coordinate. The histogram, built with `scaleTime` and `bin` from D3, aggregates incidents by month. Both charts render as SVG within a React component, pulling data from a CSV of global migrant incidents and world atlas TopoJSON.

Loading thumbnail…

missing migrants on a map

This visualization plots missing migrants on a world map using a natural Earth projection. Each incident location appears as a semi-transparent teal circle, with its radius scaled by the square root of the recorded total dead and missing count. The map includes graticules, country borders, and a light sphere background. Built with React and D3 v7, the code uses `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, and TopoJSON to merge geographic features with CSV data on migrant disappearances.

Loading thumbnail…

missing migrants project

This histogram displays the total number of dead and missing migrants over time, aggregated by month. Built with React and SVG, it uses d3’s scaleTime, scaleLinear, and histogram functions to bin incident counts by reported date. Each bar’s height corresponds to the monthly sum of deaths, with axis ticks styled via CSS. The data comes from the Missing Migrants Global 2019 subset CSV, loaded asynchronously.

Loading thumbnail…

points on a map

This example visualizes the world's most populous cities as circles on a natural Earth projection, with circle size encoding population via a square-root scale. The map displays land masses, country borders, graticules, and a sphere outline, rendered as SVG using React components. The code loads world atlas TopoJSON data for geographic features and city data from a CSV file, employing d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule for map generation, while React hooks (useState, useEffect) manage asynchronous data loading.

Loading thumbnail…

interactive scatterplot with menu and color and legend

This interactive scatterplot visualizes the Iris flower dataset, allowing users to select which measurements to display on the x and y axes via dropdown menus. The plot uses color encoding to distinguish the three Iris species, with a legend that filters and fades points on hover. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG rendering with custom axis and legend components.

Loading thumbnail…

scatterplot with menu and color and legend

An interactive scatterplot of the Iris dataset lets users explore relationships between four numeric flower measurements by selecting which attributes map to the X and Y axes via two dropdown menus. Circles represent individual flowers, colored by species through a categorical ordinal scale, with a legend identifying the three classes and tooltips showing values on hover. The visualization uses React state to manage axis selections and renders SVG marks with D3 scales, including `scaleLinear` for axes and `scaleOrdinal` for colors, while axis ticks are drawn with custom components.

Loading thumbnail…

scatterplot with menu and color

An interactive scatterplot of the Iris flower dataset visualizes correlations between sepal and petal measurements, with species distinguished by color. The visualization uses React state management in the main `App` component to control dropdown menus for selecting which measurement attributes appear on the x and y axes. D3 v7 utilities like `scaleLinear`, `scaleOrdinal`, and `extent` compute scales for the SVG rendering, while the data loads via the `csv` parser. The dropdown component allows users to switch between four numeric attributes, updating the axes and tick labels dynamically through React's `useState` hook.

Loading thumbnail…

polished scatterplot with menu

This interactive scatterplot demonstrates relationships among Iris flower measurements, with dropdown menus that let users choose which attributes appear on the x and y axes. Two React Dropdown components update React state to trigger re-renders. The visualization uses D3’s `scaleLinear` and `extent` functions to map data to SVG coordinates, with custom `AxisBottom` and `AxisLeft` components rendering tick marks and labels. Circle marks include tooltips showing formatted values, while axis labels rotate and reposition dynamically. Data loads from a CSV URL using `useEffect` and `d3.csv`.

Loading thumbnail…

scatterplot with menu

A scatterplot of the Iris flower dataset renders sepal and petal measurements as circles, with dropdown menus above the chart to select which numerical attribute appears on the x- and y-axes. The React app manages the selected attributes in state, and D3’s `scaleLinear`, `extent`, and `nice` compute the axes from the CSV data loaded via `d3.csv`. SVG circles and axis ticks are generated by React components, with hover tooltips supplied by SVG `<title>` elements.

Loading thumbnail…

menus with react

This example shows a pet-selection dropdown menu built with React and the ReactDOM renderer. The app displays a label and a `<select>` element, and its value is managed through the `useState` hook, updating on change. The reusable `Dropdown` component maps over an array of pet options, assigning each a value and label. The page loads React 16.9.0 from a UMD bundle and renders the interface into the `#root` div, with basic CSS styling applied to the body and select elements.

Loading thumbnail…

react starter

This example shows a minimal React application rendering the text “hello man” inside a full-screen page. It uses React 16.9 and ReactDOM to mount a single functional component, `App`, into the `#root` div. The implementation relies on production builds from unpkg and a separate `bundle.js`, with no data loading or visualization logic present. The page hides the default margin and overflow, focusing only on the static text output.

Loading thumbnail…

world map

This example displays a world map with landmasses, graticules, and country interiors using D3’s `geoNaturalEarth1` projection. The visualization loads country boundaries from the `world-atlas` package via `topojson`’s `feature` and `mesh` functions, rendering areawithin an SVG using React. The map’s sphere is light gray, land is teal, and interior boundaries are drawn in a lighter teal, while the graticule appears as thin grey lines. The code relies on `geoPath` to project geographic data and `geoGraticule` to generate the grid.

Loading thumbnail…

stylised line chart

A stylised line chart built with React and D3 v7 visualizes the daily high temperature changes in San Francisco over a week, with time on the x-axis and degrees on the y-axis. Using D3 utilities like `scaleLinear`, `scaleTime`, and `curveNatural`, it renders a smooth path through points and circles with tooltips showing exact time and temperature. The chart loads data from a CSV file via `csv` from D3, and uses a Raleway font with customized tick marks and axis labels for a clean, modern aesthetic.

Loading thumbnail…

iris scatterplot chart

This scatterplot visualizes the Iris flower dataset, plotting sepal length on the x-axis against sepal width on the y-axis. The D3.js v7 scaleLinear and extent functions compute the axis scales, while React components render the SVG axes and circular marks. The data is loaded asynchronously from a remote CSV file using D3's csv utility and parsed into numeric values. The chart includes styled tick marks, axis labels, and hover tooltips showing the sepal length value.

Loading thumbnail…

stylised bar chart

This stylised bar chart displays the population of ten countries from a UN dataset, using horizontal bars scaled by population value. Built with React and D3 v7 in SVG, it employs `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. The chart features a clean, minimalist design with Raleway typography, custom tick styling, and tooltips showing formatted values via `d3.format`. Data is loaded asynchronously using `d3.csv` and rendered through a React state hook.

Loading thumbnail…

axis with react and D3

This example shows a horizontal bar chart of population estimates for the top 10 countries, rendered as SVG via React. It uses D3’s `csv` loader to fetch data from a UN population CSV and stores it in React state. The chart draws axes manually with `scaleBand` and `scaleLinear`, maps ticks to grid lines and labels, and renders bars with `rect` elements. The code demonstrates a hybrid approach where React manages the DOM while D3 provides scales, data parsing, and tick generation.

Loading thumbnail…

refactored bar chart

This visualization displays the populations of ten countries as horizontal blue bars, with a y-axis of country names and an x-axis of population values. The chart is built with React components that render SVG elements, using D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv` to load UN population estimates from a remote file. Bar heights are set to two-thirds of the band width, and opacity is applied to the rectangles for a semi-transparent effect.

Loading thumbnail…

the margin convensiion

This example displays a horizontal bar chart of the top 10 countries by population in 2020. The view encodes population values as bar lengths using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical country labels on the y-axis. Data loads asynchronously from a CSV via `d3.csv`, with React’s `useState` and `useEffect` managing the fetching and rendering cycle. The SVG output respects a fixed margin convention by translating a `<g>` element to offset the chart area.

Loading thumbnail…

rendering Data with React & D3

A bar chart displays the top ten countries by 2020 population, loaded from a CSV file using D3’s `csv` utility. React state manages the fetched data, rendering a static SVG with `rect` elements scaled by `scaleLinear` and `scaleBand`. The visualization demonstrates a minimal integration where React handles component updates and D3 computes scales and data parsing, with a loading indicator shown before data arrives.

Loading thumbnail…

rendering Data with React & D3 with mouse over

This example renders CSS named color data as a donut chart using React and D3. It loads the dataset with `d3.csv` and stores it in React state, then uses a `pie` layout and `arc` generator to draw SVG paths. Mouse over and move handlers on the SVG update a tooltip via `d3.select` and `d3.pointer`, though the tooltip text and visibility behavior are only partially implemented. The chart positions each slice by its color’s hexadecimal value, with all slices given equal weight.

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and engine power (horsepower) for a set of automobiles, with each point color-coded by the vehicle’s country of origin. Built on the Vega-Lite API, it loads the Auto MPG dataset from the UCI Machine Learning Repository via a CSV fetched with d3.csv. The visualization uses `vl.markCircle`, `vl.x`, `vl.y`, `vl.color`, and `vl.tooltip` to encode the data, while custom config axis rules and a tooltip handler improve readability and interactivity.

Loading thumbnail…

Fork of loading data with react and d3

This example demonstrates a React and D3 integration that loads a CSV dataset of CSS named colors and displays the first data entry. The SVG rendering shows a simple smiley face composed of yellow and black circles. The code uses `React.useState` and `React.useEffect` to manage asynchronous data loading, while `d3.csv` fetches the remote color data. The visualization itself is minimal, focusing on the interaction between React's component lifecycle and D3's data-loading utilities.

Loading thumbnail…

loading data with react and d3

This example demonstrates how to load and display CSV data in a React application using D3. It shows a simple text report of the dataset’s size, including the number of rows, columns, and file size in kilobytes. The code uses React hooks (`useState`, `useEffect`) to fetch data via D3’s `csv` function, then renders the result through a custom `message` function that calculates the statistics. The visualization renders as SVG-free plain text within a `<pre>` element, sourced from a GitHub gist containing named CSS colors.

Loading thumbnail…

loading and parsing CSV Data

This example demonstrates how to load and parse CSV data using D3’s `d3.csv` method, fetching a remote dataset of named CSS colors and summarizing its size in terms of row count, column count, and formatted kilobyte size. The page displays these statistics in a large `<pre>` element. The code also includes an alternative commented approach using `fetch` and `d3.csvParse`, highlighting both asynchronous parsing strategies available in D3 v7.

Loading thumbnail…

mouse follower

A mouse follower demonstrates a simple interactive visualization using React and D3. A single black circle tracks the user's cursor as it moves across an SVG canvas, updating its position in real time. The application uses React's `useState` and `useCallback` hooks to manage the mouse coordinates, while the `onMouseMove` event handler captures the clientX and clientY values. D3 v5 is loaded but only used for its `arc` import, which is not actually called in the visible code. The SVG rendering approach is handled entirely through React's JSX syntax.

Loading thumbnail…

Untitled

This example generates a grid of 32 smiley faces using React and SVG. Each face is composed of a yellow circle, two black eyes, and a mouth drawn with a d3 arc path. The eyes and mouth are positioned and sized with randomized radii, producing subtle variations across the grid. The code builds each face from composable React components (BackgroundCircle, Eyes, Mouth) and renders them within an SVG container using d3's arc API for the mouth shape.