U

uplusv

@uplusv·16 public vizzes

Loading thumbnail…

Fork of D3 Git History Streamgraph

This visualization shows the development history of the D3.js ecosystem as a streamgraph, where each colored layer represents a D3 package repository and its thickness reflects the smoothed number of weekly commits. The layer order from bottom to top corresponds to when each repository was first introduced, revealing the shift from the monolithic `d3` repository to numerous packages after the 4.0 release. The implementation uses D3 modules including `d3.stackOffsetWiggle`, `d3.stackOrderAppearance`, `d3.area`, `d3.scaleTime`, and `d3.scaleLinear`, with `d3-area-label` for layer labels and `array-blur` for data smoothing, rendering as an SVG from a JSON dataset of commits.

Loading thumbnail…

Organization Graph Diagram

This example shows a small, three-node organization graph rendered as an SVG with circular nodes linked by straight black lines. Users can drag any node to reposition it, and the layout updates dynamically. The force-directed simulation uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter`. Dragging is handled by `d3.drag`, which sets fixed positions and restarts the simulation. The tick event updates circle and line coordinates. Data is defined inline as three nodes and two links, built with D3 v7 and rendered to SVG.

Loading thumbnail…

Covid-19 with Axis and labels

This interactive line chart visualizes global COVID-19 cumulative deaths over time, with each country represented by a gray line. Hovering over a point highlights the corresponding country’s full trajectory and displays a tooltip with the country name, death count, and date. The visualization uses React for state management, d3.scaleLog and d3.scaleTime for axes, d3.line for path generation, and d3.Delaunay-based Voronoi overlay for hover detection. Data comes from the CSSE COVID-19 time series CSV, rendered as SVG with custom axis labels and tick marks.

Loading thumbnail…

Covid-19 with Marker Lines

This example visualizes global COVID-19 death counts over time as a line chart, with marker lines highlighting the latest date on the x-axis and the 500 million death threshold on the y-axis. The chart is built using React and renders SVG elements directly. It loads data from a CSV file using `d3.csv` and applies `d3.scaleTime` and `d3.scaleLinear` for scaling. Custom `XMarkerLine` and `YMarkerLine` components, using `d3.timeFormat` and `d3.format`, add annotated guide lines, while the x-axis uses `d3.axisBottom` for ticks and grid lines.

Loading thumbnail…

Choropleth Map

This choropleth map visualizes the global share of the population infected with HIV/AIDS in 2017, sourced from IHME data. The map uses a sequential yellow-orange-red color scale to encode prevalence rates across countries, with gray representing missing data. Built with React and D3 v5, it renders a Natural Earth projection using `geoNaturalEarth1` and `geoPath`, with country boundaries from the world-atlas TopoJSON. The data is loaded via D3’s `csv` and joined to map features using ISO alpha-3 codes.

Loading thumbnail…

Missing Migrants on World Map

This interactive visualization maps migrant deaths and disappearances worldwide using a proportional bubble map, where circle size reflects the total number of dead and missing per location. A linked time-series histogram below the map allows brushing over months to filter the displayed bubbles. Built with React and D3 v5, the project uses `geoNaturalEarth1` projection with `geoPath` for map rendering, `scaleSqrt` for bubble sizing, and `brushX` for time filtering. Data comes from the Missing Migrants Project CSV, loaded via `d3.csv`, and rendered as SVG.

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This visualization shows monthly totals of dead and missing migrants from the Missing Migrants Dataset, displayed as a bar chart over time. The dataset is loaded via `d3.csv` and processed with `d3.bin` and `d3.timeMonths` to aggregate individual events. React components render SVG axes and marks, with scales created via `d3.scaleTime` and `d3.scaleLinear`. A tooltip using SVG `<title>` elements reveals exact values on hover.

Loading thumbnail…

World Map

A world map visualization displays global cities as semi-transparent circles sized by population, overlaid on a natural Earth projection. The map renders landmasses, country interiors, and graticules using `d3.geoNaturalEarth1` and `d3.geoPath`. City coordinates and population data load via `d3.csv` from a world cities dataset, while geographic boundaries come from TopoJSON world-atlas data. React manages the asynchronous data loading and SVG rendering, with a square-root scale mapping population values to circle radii.

Loading thumbnail…

Scatter Plot with Menu

A scatter plot of the Iris dataset, implemented in React with D3.js for scales and rendering to SVG, allows exploration of relationships between sepal and petal measurements. Two dropdown menus select the attributes mapped to the x and y axes, while species determines point color. Hovering over a species in the color legend highlights only its points by filtering the data, with non-hovered points dimmed. The code uses D3's `scaleLinear`, `scaleOrdinal`, and `extent` for scales and data ranges.

Loading thumbnail…

react menu

This example demonstrates a simple React dropdown menu for selecting a pet, with the chosen option displayed as the selected value. The app uses `useState` to manage the selected pet’s value and passes it to a reusable `Dropdown` component, which renders a native `<select>` element. The component receives `options`, `idName`, `selectedValue`, and an `onValueChange` callback, updating the state when the user changes the selection. Built with React 18 and `createRoot`, the menu lists five pets, defaulting to “cat,” and highlights the active option in the dropdown.

Loading thumbnail…

Line Chart

This example visualizes temperature over time with a line chart. The SVG rendering plots a line and points connecting daily temperature readings, with axes and tick labels generated from the data. Built with React and D3 v5, it uses `scaleLinear` for scaling, `line` from D3 for the path, and `timeFormat` for tick labels. The data is loaded as CSV from a remote URL using D3's `csv` utility, and React state manages the asynchronous data fetching.

Loading thumbnail…

Fork of Pathetic Bar Chart

This fork of the “Pathetic Bar Chart” renders the top 10 most populous countries from United Nations World Population Prospects 2019 data as a minimal SVG bar chart with no axes. The React app loads the CSV via the `d3.csv` function, filters the first ten rows by the 2020 population column, and maps each country to a rectangle using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis width. The chart displays only the bars, with no labels or gridlines, leaving the visual comparison to the raw rectangle sizes.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS named colors, then displaying summary statistics about the dataset. Using React hooks (useState and useEffect) alongside d3.csv, it fetches data from a GitHub gist URL and presents the file size in kilobytes, row count, and column count. The application integrates D3 v5 for CSV parsing and formatting within a React 16.9 component, showing a loading state while data is being fetched.

Loading thumbnail…

Fork of Smiley Face Part II

A React component renders a single SVG circle that tracks the user's mouse position across the full browser window. The circle updates its `cx` and `cy` attributes in response to `mousemove` events, using React's `useState` and `useCallback` hooks to manage state. The SVG viewport dimensions are set to the window's inner width and height, and the circle has a fixed radius of 20 pixels.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using the browser’s built-in Fetch API, retrieving a list of CSS named colors from a GitHub Gist. The code uses an asynchronous function with `fetch` and `response.text()` to read the raw CSV content, which is then logged to the console. While it does not render any visualization, it serves as a foundational step for handling tabular data in a React or vanilla JavaScript context. The implementation relies solely on native web APIs without additional libraries.

Loading thumbnail…

Fork of Hello HTML

This example renders a grid of eighteen identical cartoon faces, each built from SVG circles and an arc. The faces are generated using React components, with D3’s `arc` generator defining the mouth and `d3.range` creating the array. Each face receives randomized smile angles, while all other facial features remain fixed. The visualization demonstrates component reuse in React combined with D3’s geometric helpers, outputting static SVG shapes without interaction.