rhysg-ps

@rhysg-ps·6 public vizzes

Fork of React + D3 Viz Starter

This example demonstrates a minimal React and D3.js starter template for building SVG visualizations. It shows how to render an SVG canvas with a configurable margin layout and placeholder data structure containing four categorical values. The `VizContainer` component abstracts the SVG and group elements, following a margin convention that can be visually highlighted via a `showMargins` prop. The code uses ReactDOM for rendering, D3 v6 for data handling and selection, and references the ResponsiveWaffleHtml component from the @nivo/waffle library, though the actual chart is not rendered in the visible boilerplate output.

Mar 21, 2022

Loading thumbnail…

Waffle

This example renders a static HTML page titled “Waffle” that displays the text “Hello HTML!” in a large, centered font. It uses plain CSS for styling (a 13em font size and text alignment) and includes no JavaScript functionality. The page is a bare-bones demonstration of basic HTML structure and CSS, with no data sources or visualization libraries involved. The content is purely textual and does not generate any charts, graphs, or interactive elements.

Mar 21, 2022

Loading thumbnail…

Fork of Multiple Views with Brushing

A map of global migrant deaths and disappearances shows circles scaled by monthly totals, with a linked time-series histogram below. Brushing the histogram filters the map to show only incidents within the selected date range. Built with React and D3 v5, the visualization uses `geoNaturalEarth1` for the map projection, `d3.brushX` for the interactive filter, and `d3.bin` to aggregate data by month. The data comes from a CSV of Missing Migrants records, while country boundaries use TopoJSON from the World Atlas.

Mar 11, 2022

Loading thumbnail…

Fork of Missing Migrants Multiple Views

This visualization combines a natural Earth projection map with a time-series histogram to display migrant deaths and disappearances. D3.geoPath renders world landmasses and graticules, while scaled circles using d3.scaleSqrt represent casualty counts by location. The accompanying d3.histogram bins reported dates into monthly intervals, with bar heights reflecting aggregated totals. Both views share React-managed data from a Missing Migrants CSV, updating simultaneously through a single interactive SVG.

Mar 11, 2022

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each point representing a single event. The x-axis maps the reported date using a time scale, while the y-axis shows the total number of dead and missing. Circles are rendered as SVG marks, and hovering reveals the exact date via a tooltip. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, and `extent` for scales and domains.

Feb 18, 2022

Loading thumbnail…

Fork of Axes with React & D3

This example renders a horizontal bar chart of the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. Using React hooks (useState, useEffect) to load and manage data, it creates an SVG with D3’s scaleBand, scaleLinear, and max. Axes are manually drawn by mapping xScale.ticks() to lines and text, while y-axis labels are generated from the domain. React and D3 are combined, with D3 handling scales and data parsing, and React managing the component lifecycle and SVG output.

Feb 18, 2022