I

iblub

@iblub1·25 public vizzes

Loading thumbnail…

Parallel Coordinates Template in React

A parallel coordinates chart displays the Iris flower dataset across four quantitative dimensions—petal length, petal width, sepal length, and sepal width—with each species colored via a `d3.scaleOrdinal` and the `schemeDark2` palette. The React component builds per-dimension linear scales with `d3.scaleLinear` and a common point scale for axis positioning, then renders natural curves through each row using the `d3.line` generator with `curveNatural` within an SVG. Data is loaded asynchronously from a CSV using `d3.csv` inside a custom `useData` hook.

Loading thumbnail…

Line Chart (time)

This line chart visualizes temperature readings over the course of a week for San Francisco, using a time-based x-axis and a linear y-axis for temperature values. The chart is built with React, rendering an SVG composed of a smooth natural curve (via d3.curveNatural) connecting circular data points, along with gridlines and axis labels. The code leverages D3 v5 APIs including `scaleTime`, `scaleLinear`, `extent`, `timeFormat`, and `csv` for data loading. Hovering over any point reveals its timestamp through an SVG `<title>` tooltip, and the dark teal styling comes from applied CSS classes on marks and tick elements.

Loading thumbnail…

Multiple Views with Brushing

A choropleth-style bubble map and a time-series histogram show global migrant deaths, with brushing the histogram filtering the map’s city markers. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with world-atlas TopoJSON data, while the histogram applies `d3.bin`, `d3.scaleTime`, and `d3.brushX`. React manages state and rendering, with SVG output.

Loading thumbnail…

Missing Migrants Scatter Plot

This scatter plot visualizes monthly totals of dead and missing migrants, using D3 v5 to bin the data by reported date into monthly intervals. The visualization is built with React and renders as an SVG, combining a time-scaled x-axis and linear y-axis through `scaleTime`, `scaleLinear`, and histogram binning. Aggregated sums are plotted as circles, with the data sourced from a 2019 Missing Migrants Project CSV. Hovering over any circle reveals its exact value via a D3 tooltip.

Loading thumbnail…

Bar Chart

This bar chart displays the population of ten countries (from the UN Population 2019 dataset) using horizontal bars, with the x-axis representing population and the y-axis listing country names. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data to the SVG coordinate system. Custom `AxisBottom` and `AxisLeft` components render tick marks and labels, while `Marks` creates rectangular bars with a `<title>` element providing tooltip text. Axis tick values are formatted using D3's `format` function, converting large numbers into readable abbreviations like "1.2B".

Loading thumbnail…

Missing Migrants Line Chart

This line chart visualizes the total number of dead and missing migrants over time, with data sourced from a CSV file of global migration incidents. The chart aggregates reported dates into monthly bins using d3.bin and d3.timeMonths, then sums the fatalities per bin. The visualization uses SVG rendering with React components for the axes and marks, scaling time with d3.scaleTime and linear values with d3.scaleLinear. Data loading is handled via d3.csv within a custom React hook, and the chart includes labeled axes and interactive circle markers for each data point.

Loading thumbnail…

Time series Vega Liste

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, encoding vehicle weight as point size, origin as color, and miles per gallon against horsepower on the axes. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and the Vega Tooltip handler to render an SVG view. Circle marks use configurable sizing, opacity, and zero-suppressed scales, with hover tooltips displaying car names.

Loading thumbnail…

Treemap Template in React

This treemap displays hierarchical data with three group leaders and fourteen employees, using color to distinguish parent categories and labels to show names and values. Built with React and D3 v5, the visualization constructs the layout using `d3.hierarchy` and `d3.treemap`, while `d3.scaleOrdinal` assigns colors. The chart renders as SVG, with React’s `.map()` method generating rectangles and text elements instead of traditional D3 joins. Data is fetched asynchronously from a remote JSON file using `d3.json` within a React hook.

Loading thumbnail…

Interactive Streamgraph Template in React

This example shows a streamgraph of baby name frequencies over time, recreated from a d3-graph-gallery template using React instead of pure D3. The chart uses stacked areas with a silhouette offset and inside-out ordering, where hovering a stream highlights it in the tooltip. The code uses `d3.stack`, `area`, `curveBasis`, `scaleLinear`, and `scaleOrdinal` with the `schemeDark2` palette, while React manages the interactive state. Data comes from a CSV loaded via `d3.csv`.

Loading thumbnail…

Scatter Plot with menu

This interactive scatter plot uses the classic Iris dataset to explore relationships between four flower measurements (sepal length, sepal width, petal length, and petal width). Dropdown menus allow users to select which measurement appears on the x- and y-axes, with the data points colored by species. A color legend on the right highlights points from a single species on mouseover, dimming the others. The visualization is built with React, rendering to SVG, using d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.extent for domain computation, with data loaded via d3.csv.

Loading thumbnail…

Streamgraph with Brushing

A choropleth-style bubble map of global migrant deaths and disappearances sits above a brushing-linked date histogram. The map projects circles scaled by death counts using `d3.geoNaturalEarth1` and `d3.geoPath`, drawing land, graticules, and interior borders from TopoJSON. Brushing the histogram’s `d3.brushX` filters the map’s circles in real time. The histogram aggregates reported dates into monthly bins via `d3.bin` and `d3.timeMonths`, with axes built from `d3.scaleTime` and `d3.scaleLinear`.

Loading thumbnail…

Choropleth Map

This choropleth map visualizes the global prevalence of HIV/AIDS among adults aged 15-49 in 2017. Countries are colored on a yellow-orange-red sequential scale using d3.scaleSequential with interpolateYlOrRd, with gray indicating missing data. The map uses d3.geoNaturalEarth1 projection, d3.geoPath, topojson features for country boundaries, and a geoGraticule overlay. Data comes from IHME prevalence statistics loaded via d3.csv, rendered as SVG paths in a React framework.

Loading thumbnail…

Missing Migrants

This chart displays the number of dead and missing migrants over time, aggregated into monthly bins. The visualization uses a bar chart where the height of each bar corresponds to the total count for that month. The code leverages React for the UI, D3’s `scaleTime`, `scaleLinear`, `histogram`, and `csv` modules for data fetching and processing, and renders SVG rectangles. The data comes from a CSV file of global migration incidents, with bars colored teal against a light gray grid.

Loading thumbnail…

Missing Migrants on a Map

This visualization shows the global distribution of missing migrants, with circles sized by the total number of dead and missing individuals at each recorded location. The map uses a natural Earth projection rendered as SVG paths via d3.geoPath, with graticules and country borders from TopoJSON world-atlas data. Migrant locations are loaded from a CSV file, projected through d3.geoNaturalEarth1, and plotted as semi-transparent circles scaled by d3.scaleSqrt. React manages the component state and rendering, while d3's max function determines the domain for the size scale.

Loading thumbnail…

World Map

This example displays a natural Earth projection world map with graticule lines, country borders, and interior boundaries. City populations are plotted as semitransparent circles with radii scaled by the square root of population using `d3.scaleSqrt`. The visualization uses React hooks to load world atlas TopoJSON data and a CSV of global cities, converting them into GeoJSON features via `topojson.feature` and `topojson.mesh`. D3’s `geoNaturalEarth1` projection and `geoPath` render the SVG shapes.

Loading thumbnail…

Menus with React

A React example demonstrates a simple pet-selection menu with two dropdown options, Dog and Cat. It shows how user selections are managed through React state, with the current choice displayed in the console. The implementation uses React's `useState` hook for state management and a custom `Dropdown` component that handles `onChange` events. Options are mapped into `<option>` elements within a `<select>` tag, with `ReactDOM.render` mounting the app to the root div.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis against sepal width on the y-axis for individual flower specimens. The visualization uses React with d3.scaleLinear scales and SVG rendering, with axes generated by custom React components. Data is loaded asynchronously from a CSV file using d3.csv, with string values parsed into numbers. The plot includes formatted tick labels, axis titles, and tooltips on each circle via SVG title elements, all styled with Poppins font and subtle gray colors.

Loading thumbnail…

Rendering data with React

This example demonstrates how to render a pie chart of CSS named colors using React and D3. The code loads color data from a CSV file and displays each color as a slice of a circle. It uses React hooks like `useState` and `useEffect` to fetch data asynchronously with `d3.csv`, then maps the data points to `<path>` elements. The `d3.arc` function computes the shape of each slice based on computed start and end angles. The visualization is rendered as an SVG inside a React component.

Loading thumbnail…

Visualizing Data with React & D3

This example displays metadata about a CSS Named Colors dataset loaded from a CSV file, showing the file size in kilobytes, row count, and column count as plain text. Using D3 v5 and React, the code demonstrates two equivalent approaches: `d3.csv` with promises, and the Fetch API combined with `async`/`await` and `d3.csvParse`. The rendering updates a `<pre>` element’s text content, highlighting different methods for asynchronous data loading and parsing.

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for classic automobiles, with point size encoding weight and color indicating country of origin. The visualization is built using the Vega-Lite API, which wraps Vega-Lite specifications in JavaScript methods. Data is loaded asynchronously from a CSV file via d3.csv, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The code configures axis labels, tooltips, and a fixed-point rendering style, and renders the chart to SVG using the Vega renderer.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a plain-text summary of a CSV dataset’s size, row count, and column count in a large font. It loads CSS Named Colors data from a GitHub Gist using D3 v5’s `d3.csv` method, which returns a promise. The code then uses `d3.csvFormat` to measure the data’s size in kilobytes and accesses the parsed array’s `length` and `columns` properties to populate the message. The result is a minimal demonstration of CSV parsing and promise-based data loading without any graphical visualization.

Loading thumbnail…

Interaction with React

A smiling face drawn in SVG follows the mouse pointer across a 960 by 500 canvas. The React application uses the `useState` and `useCallback` hooks to track cursor coordinates from the `onMouseMove` event, updating a single yellow circle with a black stroke to mirror the pointer's position. The visualization demonstrates real-time interaction within a React component rendered via `ReactDOM.render`.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the asynchronous loading of a CSV file in D3 version 7, using the `fetch` API to retrieve named color data from a GitHub Gist. The code defines an `async` function that awaits the network response and text parsing, then logs the raw CSV content to the console. The page itself displays the static text "Hello D3 version 6" set via `d3.select`, contrasting the simple DOM manipulation with the more complex data-fetching pipeline. The approach highlights modern promise-based syntax over older nested callback patterns.

Loading thumbnail…

Test dashboard

This dashboard combines a React-rendered cartoon face with a D3.js streamgraph. The Face component uses SVG circles and an arc path to draw eyes, a mouth, and a yellow background circle, with randomized eye size on each render. The Streamgraph builds a stacked area chart from a CSV dataset, using `d3.stack` with `stackOffsetSilhouette` and `d3.area` to create overlapping series. The graph includes axis labels, a color scale via `d3.scaleOrdinal`, and an interactive tooltip that highlights areas on hover.

Loading thumbnail…

Fork of Hello HTML

This example shows five identical cartoon faces arranged in a row, each rendered as a static SVG graphic. The faces are drawn using React components that compose a yellow circular background, two black eyes, and a smiling arc for a mouth. The code relies on the D3.js `arc` API to generate the mouth path, while D3's `range` function creates the array of five faces. Each face is placed inside an SVG container, with randomized eye radii adding subtle variation to the otherwise uniform composition.