W

windwaver

@windwaver·47 public vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—rendered directly in an HTML document. It shows how SVG elements create basic visual marks with varying fill and stroke properties, including a filled circle, an outlined circle with a blue stroke, a yellow rectangle with a thick navy border, and a simple polyline path. The code uses plain SVG markup with attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `d` for the path, with no external libraries or data sources. The rendering approach is static inline SVG within a 960×500 viewport.

Loading thumbnail…

Organization Graph Diagram

This example renders a small organizational hierarchy as a force-directed graph. Three nodes—Arts Web, Community Vision, and Silicon Valley Creates—are drawn as circles and connected by links, with node labels positioned directly on top of the circles. The layout is computed live using d3.forceSimulation with forceManyBody, forceLink, and forceCenter forces, updating SVG positions on each tick. The data comes from a static JavaScript module, and all rendering uses SVG elements.

Loading thumbnail…

Organization Network Graph

This example renders a tiny organizational network graph with three nodes (Alice, Bob, and Carol) and two directed links. It shows a force-directed layout simulation, where the nodes are drawn as circles inside an SVG container. The implementation uses the D3 v6 API via `d3.forceSimulation`, combining `forceManyBody` for repulsion, `forceLink` for connection constraints, and `forceCenter` to keep the graph centered. A tick handler logs each simulation step, though no visual updating logic is present.

Loading thumbnail…

Coronavirus Deaths by Country over Time (with Voronoi Hover)

This chart displays cumulative COVID-19 deaths over time for each country, with a log-scaled y-axis to accommodate wide variation in totals. A Voronoi overlay built with `d3.Delaunay` and `d3.voronoi` enables hovering anywhere near a data point to highlight that country’s entire line and show its latest death count, date, and name in a tooltip. Data comes from the Johns Hopkins Coronavirus dataset, rendered as SVG paths using React and D3’s `scaleTime`, `scaleLog`, and `line` generators.

Loading thumbnail…

Voronoi Overlay with Labels

A line chart displays global coronavirus deaths over time for multiple countries on a logarithmic y-scale, with a Voronoi overlay enabling mouse-based highlighting of the nearest data point and its corresponding country line. The chart uses React with D3 v5 scales and line generators, while the overlay leverages `d3.Delaunay` and `d3.voronoi` to compute cell regions for hover detection. Data comes from the Johns Hopkins Coronavirus dataset, rendered as SVG paths with axes and gridlines.

Loading thumbnail…

Coronavirus Deaths Over Time by Country With Labels

This chart displays cumulative COVID-19 death counts over time for multiple countries, using a logarithmic y-axis to accommodate wide ranges in magnitude. The data comes from the Johns Hopkins Coronavirus Dataset, loaded via D3’s `csv` function. React renders each country’s timeseries as an SVG path generated by `d3.line`, with scales from `d3.scaleTime` and `d3.scaleLog`. Axes are built using `d3.axisBottom` and `d3.axisLeft`, while tick lines create a grid for readability.

Loading thumbnail…

Coronavirus Deaths Over Time by Country

A multi-line chart tracks cumulative COVID-19 deaths over time for individual countries, using a logarithmic y-axis to compare widely varying magnitudes. Each country’s time series is drawn as a separate SVG path with a randomly generated color. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLog`, and `line` to generate the geometry, while `axisBottom` and `axisLeft` render the axes. Data comes from the Johns Hopkins Coronavirus dataset, fetched as CSV and parsed with `d3.csv` and `timeParse`.

Loading thumbnail…

Pulling Live Coronavirus Data

This example shows the global cumulative death toll from COVID-19 over time as a single line chart with a logarithmic y-axis. It loads live data from the Johns Hopkins Coronavirus dataset via `d3.csv` and computes daily totals by summing country values. The chart is built with React and D3 v5, using `scaleTime` and `scaleLog` for axes, while `line` generates the path. SVG rendering with axis labels and gridlines is used, and the chart updates automatically when new data is fetched.

Loading thumbnail…

Visualization Labels

A line chart shows global cumulative coronavirus deaths over time, using a logarithmic scale for the y-axis. Data comes from the Johns Hopkins COVID-19 time-series dataset. Built with React and D3 v5, the visualization uses `d3.scaleTime`, `d3.scaleLog`, and `d3.line` to generate an SVG path, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. The code also includes reusable marker-line components for highlighting specific values.

Loading thumbnail…

Coronavirus Log Y Axis

The chart depicts the global cumulative death toll from COVID-19 over time using a logarithmic y-axis, which compresses the exponential growth into a more readable curve. The line graph, rendered as an SVG via React, pulls data from the Johns Hopkins Coronavirus time-series dataset. It uses D3 v5’s `scaleLog` for the y-axis, `scaleTime` for the x-axis, and `line()` to generate the path. Axis ticks are styled with gridlines, and a horizontal marker labels the 10,000-death threshold.

Loading thumbnail…

Coronavirus Linear Y Axis

A line chart tracks the cumulative global death toll from COVID-19 over time, using a linear y-axis scale so the growth in fatalities is directly proportional to height. The chart reads data from the Johns Hopkins Coronavirus Dataset, with daily global totals aggregated from country-level rows. Built with React and D3 v5, it uses `d3.scaleTime` and `d3.scaleLinear` to map dates and death counts, while `d3.line` generates the SVG path. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, and the chart fills the entire browser window.

Loading thumbnail…

React + D3 Axes

This example shows a React line chart tracking cumulative global COVID-19 deaths over time, using data from a CSSE GitHub CSV. Two marker lines highlight the current date and the 3,000,000 death threshold, with the axes rendered via D3’s `axisBottom` and React refs. The chart uses `scaleTime`, `scaleLinear`, and `line` generators to compute the path, while SVG elements handle the visualization. Loading is handled asynchronously with `useData` and `csv`, and the grid lines use custom tick styling.

Loading thumbnail…

Coronavirus Line Chart With 3,000,000 Marker Line

The chart displays global COVID-19 death totals over time as a black line, with horizontal and vertical dashed markers indicating the 3,000,000 death threshold and the current date. Built with React and d3.scaleTime, d3.scaleLinear, and d3.line, it renders an SVG path from data fetched via d3.csv from the Johns Hopkins CSSE repository. The YMarkerLine and XMarkerLine components draw labeled annotations, while the text elements use SVG alignment attributes to position labels. The visualization updates dynamically as new data becomes available in the source CSV.

Loading thumbnail…

Summarizing Coronavirus Data

This example summarizes global coronavirus mortality data by displaying a single large number: the total reported deaths. It retrieves a CSV file from the Johns Hopkins CSSE GitHub repository, identifies the most recent date column, and sums all values across countries and regions. The result, formatted with commas using `d3.format`, appears in a `<pre>` element styled with dark red text. The code relies on D3 v5’s `d3.csv` promise-based loader to fetch and parse the remote data asynchronously.

Loading thumbnail…

Loading and Parsing Coronavirus Data

This example demonstrates loading a global COVID-19 death time-series dataset using D3 v5. It fetches a CSV file from the Johns Hopkins CSSE GitHub repository and parses it with `d3.csv`. The visualization displays a large-text summary showing the data’s size in kilobytes, the number of rows, and the number of columns, computed via `d3.csvFormat` and the parsed array’s properties. It relies on the native `fetch` API and a promise handler, with commented alternatives using `async`/`await` and nested callbacks.

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes the share of the population aged 15-49 infected with HIV/AIDS in 2017, using a yellow-orange-red sequential color scale. Country boundaries and graticules are rendered with d3.geoPath and a geoNaturalEarth1 projection, while missing data is shown in gray. The visualization is built with React and D3 v5, pulling country shapes from World Atlas TopoJSON and HIV prevalence data from the IHME via CSV.

Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, with each point representing a single migration event. The x-axis shows the reported date using a time scale, while the y-axis uses a logarithmic scale to display the total dead and missing count, ranging from 1 to the maximum value. The visualization is built with React and D3 v5, using SVG rendering. The code defines custom axis components (AxisBottom and AxisLeft) and a Marks component that renders circles with tooltips showing the exact date. The data is loaded from a CSV file using D3's csv parser.

Loading thumbnail…

Multiple Views with Brushing

A world map displays circles sized by the total number of dead and missing migrants, with a linked time-series histogram below showing monthly totals. Brushing a date range on the histogram filters the map circles to only those incidents within that period. The visualization uses React with D3 v5, employing `d3.geoNaturalEarth1` for the map projection, `d3.brushX` for interactive selection, and `d3.bin` with `d3.timeMonths` for histogram binning. Data comes from a CSV of global missing migrants, rendered as SVG.

Loading thumbnail…

Missing Migrants multiple views

This visualization presents data on missing migrants through two coordinated views. A world map uses circles scaled by the square root of the count of dead and missing individuals, projecting geographic coordinates with `d3.geoNaturalEarth1` and `d3.geoPath`. A time-series histogram below displays the monthly sum of deaths, binned using `d3.histogram` with `d3.timeMonths` thresholds, using `d3.scaleTime` and `d3.scaleLinear` for axes. The data comes from the Missing Migrants Project, and the React-based build relies on `d3.json` and `topojson` features.

Loading thumbnail…

Missing Migrants on a Map

A world map with semi-transparent blue circles marks the total dead and missing migrants at their recorded coordinates. The visualization uses a natural Earth projection via `d3.geoPath` to render landmasses and graticules, with each circle’s radius scaled by `d3.scaleSqrt` based on the data values. Data comes from the Missing Migrants Project CSV, loaded with `d3.csv`, while the map uses TopoJSON from world-atlas. React manages the component state, and SVG renders the final output.

Loading thumbnail…

Missing Migrants

This interactive bar chart visualizes the cumulative monthly count of dead and missing migrants from the Missing Migrants Global dataset. The chart displays time on the x-axis and the total number of dead and missing individuals on the y-axis, with each bar representing a monthly total. Built with React and D3 v5, the visualization uses d3’s `scaleTime`, `scaleLinear`, and `histogram` functions to bin data into monthly intervals. It renders as an SVG and includes axes generated by custom `AxisBottom` and `AxisLeft` components, along with tooltips showing exact counts.

Loading thumbnail…

Points on a Map

A world map populated with semi-transparent circles representing the populations of cities from a cleaned World Cities dataset. The visualization uses a Natural Earth projection rendered with `d3.geoPath`, layering graticules, land masses, and country borders beneath the points. Circle radii are scaled with `d3.scaleSqrt` based on population, capped at a maximum radius of 15 pixels. The React component fetches TopoJSON world atlas data and CSV city data, then renders the SVG marks with D3 v5.

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width for three species. A color legend allows users to hover over species names, dimming all other points to highlight the selected group. The visualization uses React with d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and d3.csv for data loading. SVG circles render the marks, while mouse events on the legend trigger state changes that adjust opacity via the fadeOpacity prop.

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three species of iris. The species are encoded by color using a categorical scale mapped to an ordinal color legend. Built with React and D3 v5, the visualization uses `scaleLinear` for the axes, `scaleOrdinal` for colors, and reactive rendering via the `useData` hook to load CSV data. SVG circles represent each data point, with axes and legend components rendered separately.

Loading thumbnail…

Scatter Plot with Color

A scatter plot of the Iris dataset displays petal length against sepal width, with each species represented by a distinct color from an ordinal scale. Built with React and D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color encoding, and SVG circles with tooltips. Data is loaded asynchronously via `d3.csv` from a remote URL, with axes rendered using custom React components that map tick values through `d3.format`.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to compare any two measured attributes by selecting them from dropdown menus for the X and Y axes. Built with React and D3, the plot uses SVG circles to represent individual iris flowers, with tooltips displaying precise values on hover. The chart’s axes are rendered using custom React components (`AxisBottom`, `AxisLeft`) that leverage D3’s scale functions, while the dropdowns are powered by the `react-dropdown` library, enabling dynamic exploration of the dataset’s relationships.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Iris Dataset, allowing users to explore relationships between four numeric flower measurements and species through interactive dropdown menus that control which attributes appear on the x and y axes. The visualization uses React to manage state for selected attributes, while D3.js handles the linear scales, axis generation, and data loading via `csv`. The SVG rendering displays circles colored teal, with axis labels updating dynamically based on menu selections.

Loading thumbnail…

Menus with React

This example demonstrates a simple pet-selection menu built with React, displaying a dropdown list of six animal options and logging each chosen value to the console. It shows how React state manages the selected option through the `useState` hook, with the `Dropdown` component receiving options, an ID, and a change handler as props. The rendering uses ReactDOM to mount the app into the DOM, while the dropdown’s `onChange` event triggers updates to the selected value. The code includes inline HTML styling for large label and select text, and relies on React 16.9 from a CDN.

Loading thumbnail…

React Starter

This React starter demonstrates how to embed a minimal React component into a visualization page. It renders a simple “Hello React!” message inside a HTML div, with React and ReactDOM loaded from unpkg CDN and compiled into a bundle.js file. The example uses `ReactDOM.render` to mount the App component into the `#root` element, showing the basic setup required for combining React with other visualization libraries.

Loading thumbnail…

World Map

This map depicts world landmasses and country borders using a Natural Earth projection. The visualization renders geographic features as SVG paths, with graticules and interior boundaries drawn as styled strokes. It loads GeoJSON and topology data from the World Atlas Topojson collection, processed with `feature` and `mesh`. The code builds paths using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from d3-geo, while React manages the component state and rendering. The sphere, landmasses, and borders are each styled distinctly to clarify spatial relationships.

Loading thumbnail…

Line Chart

This line chart visualizes temperature over time using data from the Data Canvas Sense Your City Dataset. Rendered with React and SVG, it uses D3 v5's `scaleTime`, `scaleLinear`, `extent`, and `line` with `curveNatural` to plot a smoothed path and circular points. The chart includes labeled axes with tick marks formatted via `timeFormat('%a')`, and hovering over a point reveals its timestamp.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual iris flowers. The visualization employs D3.js scaleLinear functions to map the data domain to SVG coordinates, with React components rendering the axes and circle marks. Custom tooltips display formatted values via the D3 format API. The plot features a clean, minimalist design with Poppins typography, muted gray tick marks, and teal data points, showcasing how aesthetic styling can enhance a classic statistical chart.

Loading thumbnail…

Stylized Bar Chart

A stylized horizontal bar chart displays the ten most populous countries in 2020, using CSS named colors and React to render an SVG visualization. The chart loads population data from a CSV source via D3’s `csv` utility and scales it with `scaleBand` and `scaleLinear`. Axes are drawn from custom React components, with formatted tick labels using `format`. Each bar is a simple rectangle with a tooltip, rendered declaratively through React components like `AxisBottom`, `AxisLeft`, and `Marks`.

Loading thumbnail…

Refactored Bar Chart

This example displays the population of the top ten countries from the UN Population 2019 dataset as a horizontal bar chart. React components render the SVG marks and axes, while D3 utilities handle the data loading and scale calculations. The chart uses a `scaleBand` for the categorical y-axis, a `scaleLinear` for the quantitative x-axis, and `csv` for fetching the data. Each component (`AxisBottom`, `AxisLeft`, `Marks`) is modularized and receives the scales and data via props, highlighting a reusable and refactored architecture for visualization.

Loading thumbnail…

Axes with React & D3

This visualization displays the top ten most populous countries as horizontal bars in an SVG, using the United Nations 2019 population estimates. The chart includes both x- and y-axis tick labels, rendered as text elements. React manages the application state and updates the chart asynchronously after loading the CSV data, while D3’s `scaleBand` and `scaleLinear` draw the axes. React handles the SVG rendering, and D3’s `csv` function fetches and parses the external data file.

Loading thumbnail…

The Margin Convention

This example shows a horizontal bar chart displaying the top ten countries by projected 2020 population, using UN population data loaded as CSV. The chart applies the margin convention, reserving space around the plot area through a margin object and translating the SVG group accordingly. React manages the component state and renders SVG rectangles, while D3 utilities handle data loading, scales, and layout. The visualization uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with `csv` fetching the remote dataset.

Loading thumbnail…

Pathetic Bar Chart

This example shows a horizontal bar chart of the top 10 countries by 2020 population, rendered with React and SVG. It loads UN population data from a CSV using the `d3.csv` utility, then maps each country to a `rect` element. The chart uses `d3.scaleBand` for the y-axis country categories and `d3.scaleLinear` for the x-axis population values. The data is fetched inside a `useEffect` hook and stored in state via `useState`, with a loading message displayed before the data arrives.

Loading thumbnail…

Rendering Data with React & D3

This radial burst visualization displays CSS named colors as a pie chart, with each color represented by an equal-sized arc segment filled with its corresponding hex value. The React component fetches data from a CSV file using D3’s `csv` utility, then applies D3’s `pie` layout and `arc` generator to compute the SVG paths. The rendering is dynamic, showing a loading indicator until the data arrives, and uses React’s `useEffect` and `useState` hooks to manage the asynchronous data loading. The final SVG is composed by mapping each pie slice to a `<path>` element with the appropriate fill color, all positioned around the chart’s center.

Loading thumbnail…

Rendering Data with React

This example demonstrates how React can render data as a series of colored horizontal bars, with each bar representing a CSS named color from a dataset loaded via d3.csv from a GitHub gist. The React component uses the useState and useEffect hooks to asynchronously fetch and store the CSV data, then maps over the array to produce a div for each color, setting the hex value from the 'RGB hex value' column as the background and a fixed width and height. The visualization shows all colors stacked vertically, filling the screen without scrolling.

Loading thumbnail…

Fork of Fork of Loading Data with React & D3

This example renders a vertical stack of colored stripes representing CSS named colors. It loads the data from a CSV file using the `csv` function from d3-fetch, then uses React’s `useState` and `useEffect` hooks to fetch and store the data asynchronously. Once loaded, each row is mapped to a `<div>` whose background color is set from the `RGB hex value` column. The visualization demonstrates a simple data-loading pattern combining React state management with D3’s data utilities.

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bubble chart of religious populations by country, with circles sized by population and positioned along country and religion axes. It uses the Vega-Lite API (vl) to construct the visualization declaratively, with d3.csv loading data from a GitHub Gist of top five religions per country. The chart renders via Vega’s SVG renderer, incorporates custom axis and label styling from a config object, and enables tooltips through vega-tooltip. The view is sized to fit the window and updates automatically on resize.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load external data in a React application using D3 utilities while managing the fetched data with React state. It shows a text summary reporting the dataset's size in kilobytes, row count, and column count. The code uses React's `useState`, `useEffect`, and `useCallback` hooks, alongside D3's `csv` function to load a CSS named-colors CSV from a GitHub gist. The `message` module formats the summary using `d3.csvFormat` to calculate the data’s byte length.

Loading thumbnail…

Loading and Parsing CSV Data

A large pre-formatted text element displays statistics about the CSS Named Colors dataset loaded from a raw GitHub URL. The example demonstrates asynchronous CSV loading with D3 v6 by first calling `d3.csv()`, then presenting the computed file size in kilobytes, row count, and column count. The code also includes commented alternative implementations using the Fetch API with async/await and `d3.csvParse()`.

Loading thumbnail…

Mouse Follower

The example displays a single gray circle that tracks the mouse cursor across an SVG canvas. Mouse movement triggers a React state update, repositioning the circle’s center coordinates. The code uses React’s `useState` and `useCallback` hooks within an SVG `onMouseMove` handler, while D3 v5 is loaded but unused. Rendering is handled by ReactDOM, with a fixed viewport of 960 by 500 pixels and a circle radius of 30.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in the browser using the Fetch API. It fetches a remote CSV file containing CSS named colors from a GitHub Gist and logs the raw text response to the console. The code defines an asynchronous `fetchText` function that retrieves the file and returns its contents as a string, then calls it on the CSV URL. No parsing or visualization occurs; the example simply shows the initial step of retrieving CSV data for later processing.

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a minimal HTML page, the most basic building block of web content, showing an empty document with a title. It uses standard HTML with a `<head>` section containing a `<title>` and an empty `<body>` element. The page relies on the browser's built-in HTML parser to render the structure, which includes no styling, scripting, or external libraries—only the raw document skeleton. The iframe embedded in the README references a YouTube video, but the page itself contains no visible content or interactive elements.

Loading thumbnail…

Smiley Face Part I

A reusable React component renders a yellow smiley face with black circular eyes and a curved mouth using SVG. The face is composed of separate components for the background circle, eyes, and mouth, assembled inside a centered SVG group. D3's `arc` generator creates the mouth path, while React props control dimensions like eye offset, radius, and stroke width. The example demonstrates modular component composition with D3 integration in React.