M

Mark Lam

@Emceelamb·90 public vizzes

Loading thumbnail…

Fork of Force Network

This network diagram visualizes film-related relationships between actors, directors, and movies using a force-directed layout. Nodes represent people and films, while links indicate actions like acting or directing. The simulation uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position elements. Data comes from a local JSON file, rendered as SVG circles and lines with drag interactions via d3.drag. Color scaling uses a custom array, and marker arrows are defined for link endpoints, though text labels for relationships are attempted but not fully finished.

Loading thumbnail…

sparkline

A sparkline-style line chart displays the daily count of news articles associated with a specific cryptocurrency event, "The Golden Crypto Bullrun." The visualization uses a time-scaled x-axis and a linear y-axis to plot the article frequency over a two-day period, with the line rendered as an SVG path. Built with React and D3 v5, it leverages `scaleTime`, `scaleLinear`, `extent`, and `line` from the d3 library, alongside custom axis components. The data is embedded directly in the App component, showing a simple, focused example of trend visualization.

Loading thumbnail…

Fork of Line Chart

This line chart displays weekly temperature data for San Francisco, plotted over time with a linear y-axis and time-based x-axis. The visualization uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear mapping data points to coordinates. The line path and individual circles are generated using d3.line and curveLinear, while custom React components (AxisBottom, AxisLeft, Marks) handle axis tick rendering and data marks. The chart includes labeled axes, gridlines, and a dataset loaded via d3.csv from a remote CSV source.

Loading thumbnail…

Price

This visualization shows the historical percentage net change in price for a single item, plotted over time as a sparkline. The data is fetched from a JSON file hosted on GitHub and rendered as an SVG path using React and D3 v7. The code uses d3.scaleTime and d3.scaleLinear to map dates and percentage values to the chart’s 500-by-200 pixel layout, while d3.line generates the path geometry. The x-axis is time-scaled and the y-axis is linear, with the path styled as a transparent fill and black stroke.

Loading thumbnail…

Line Chart

A line chart displays weekly temperature trends over time, using a smooth curved path generated with D3’s `line()` and `curveNatural` to connect data points from a CSV file. The chart includes circular markers for each observation, with axes and labels rendered as SVG elements. D3 scales (`scaleTime`, `scaleLinear`) map timestamps and temperature values to pixel coordinates, while custom `AxisBottom` and `AxisLeft` components draw ticks and gridlines. The React app loads the data via D3’s `csv()` and renders the interactive visualization on an SVG canvas.

Loading thumbnail…

Fork

This example visualizes a dataset of news themes and their associated article counts as a treemap. The React application parses a hardcoded object of themes, each containing news items, and uses D3 v7 to build a hierarchy with the `d3.hierarchy` and `d3.treemap` functions. Each theme is represented as a rectangle, sized by `news_count`, and colored via a `d3.scaleOrdinal` scheme. SVG rendering occurs through a selected `svgRef` element, with rectangles colored by category, though the display is incomplete as only a placeholder text is appended.

Loading thumbnail…

vxv tree

This treemap visualization displays stock symbols grouped by their market industry, with each rectangle’s area proportional to the stock’s relative score. The SVG renders industry categories as colored regions, using a categorical color scale to distinguish sectors. Built with React and D3 v7, the code constructs a hierarchy via `d3.hierarchy` and `.sum()`, then applies `d3.treemap()` to compute layout. Stock tickers appear as text labels within each tile. Data comes from a JSON file containing company metadata, including industry classification and performance metrics.

Loading thumbnail…

Grids

This example demonstrates two CSS layout approaches for arranging rectangular blocks in a web page: a three-column grid and a flexible row distribution. The grid uses Tailwind CSS classes such as `grid grid-cols-3` to create a fixed three-column structure, while the flex layout employs `flex gap-x-4` to distribute four blocks evenly across the space. React manages the component rendering through functional components and hooks, with the App component composing both the Grid and Flex layouts within a full-width container. The page is rendered using ReactDOM and styled entirely through Tailwind's utility classes.

Loading thumbnail…

format

This example demonstrates how to display a list of newsletter articles grouped by their publication date. The code organizes the data into a dictionary keyed by date, though the actual visualization is not implemented in the provided files. It uses React’s `useState` and `useEffect` hooks to process the data, and relies on React Context and the `createContext` API to pass user information between components. The rendering output shows only a text element, with the data-processing logic visible in the `App` component.

Loading thumbnail…

Context

This example demonstrates the React Context API for sharing a user name across components. It shows a large, centered text message ("Joe") rendered by a `UserProfile` component, which consumes the context value. The code defines a `UserContext` with `Provider` and `Consumer` exports, and uses `UserProvider` to supply the value. The rendering relies on React's `createContext` and `useContext` hooks, with the `UserConsumer` passing the context to a paragraph element. The tight coupling between `App.js` and `User.js` overrides the provider value, resulting in the displayed name.

Loading thumbnail…

Fork of vxv tree

This visualization displays a treemap of companies grouped by industry, with each cell sized by relative score and color-coded to show either relationship scores or percentage net change. The treemap is built using `d3.treemap` and `d3.hierarchy` with hierarchical data parsed from a JSON source. Cells contain clipped text labels, and a React interface toggles between the two color scales (`d3.scaleLinear`). The SVG rendering uses React with D3 v7 and updates colors via a `useEffect` hook.

Loading thumbnail…

vxv tree

This interactive treemap visualizes companies organized by industry, with each cell’s size reflecting a relative score and its color mapping to the parent industry category. Users can toggle between summing by count or size, triggering animated transitions that smoothly reposition cells via d3.treemap and transition.attr. Built with React and d3.v7, the SVG rendering includes tooltips showing company names and values, using d3.hierarchy, scaleOrdinal, and clipPath to fit multi-line symbols within cells.

Loading thumbnail…

Fork of Styled Bar Chart

This fork of a styled bar chart visualizes the top 10 most populous countries in 2020, using data fetched from a GitHub-hosted UN Population CSV. The horizontal bars are rendered as SVG rectangles within a React component, with population values displayed on the x-axis using a custom tick formatter that converts units to billions. The chart leverages D3’s `scaleBand` and `scaleLinear` for layout, while tooltips show the exact population on hover. Styling is applied via CSS classes, including Inter font and distinct axis and mark colors.

Loading thumbnail…

React D3 Starter

This example demonstrates a minimal integration of React and D3, rendering the text "React + d3" on a blank page. The code uses React 16.13.1 via `ReactDOM.render` to mount the `App` component, while D3 v7 is loaded as a global dependency but is not actively invoked. The page shows only static text with large centered typography, serving as a starter template for combining the two libraries in a VizHub project. The rendering approach relies on plain JSX without any D3 data joins or charting functions.

Loading thumbnail…

vxv

This example displays a placeholder screen with the text “hi” in large type, centered via a CSS style rule. The React app imports a `useData` hook that logs the imported `json` function from the D3 library to the console, but does not yet fetch or render any data. It uses React 16.13.1 through the UMD builds and the ReactDOM API to mount the component into the root element. The visualization remains static, showing only the hardcoded message without any chart, interaction, or data-driven rendering.

Loading thumbnail…

vxv

This example loads a JSON dataset of thematic baskets and extracts the unique Morgan Stanley industry classifications from its symbols. The visualization does not yet render any graphical output; instead, it logs both the full data object and the resulting industries array to the browser console. The code uses d3.json from D3 v7 to fetch the remote data in an asynchronous async/await function, then applies standard array methods such as map and includes to process the response. The page itself displays only the large title “vxv” with no interactive elements.

Loading thumbnail…

Fork of API Heatmap - brand colors round 20 steps

This example uses a linked dataset of company descriptions and relative scores to create a 20-step heatmap grid. Rendering as a flexible HTML/CSS grid, each of the 20 cells is colored by a three-color gradient from light gray to dark teal, based on the company's relative score rounded to the nearest half. The visualization includes interactive tooltips, a mouse-following indicator, and a details panel that appears on click, showing company information like industry and a link to its Nasdaq page. The chart uses D3's `scaleLinear` for color mapping and `json()` for data loading.

Loading thumbnail…

API Heatmap - brand colors round 20 steps

This visualization displays an API heatmap of 20 companies, each represented by a tile showing a ticker symbol and relevance score. The code uses a d3.scaleLinear color scale with a three-color gradient from gray to teal to dark green, rounded to 0.5 increments. Tiles are rendered as SVG rectangles with mouseover tooltips showing company details, while a legend indicates the vector score range from 0 to 10. The data comes from a remote JSON file containing company symbols and metadata from the ms_industry dataset.

Loading thumbnail…

Styled Bar Chart

This example displays a horizontal bar chart ranking the populations of the ten most populous countries, with formatted tick labels and axis styling. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and SVG rectangles for the bars. Data is loaded from a CSV file of UN population estimates for 2020, and the chart includes custom tick formatting that converts values to billions with the ‘B’ suffix.

Loading thumbnail…

Untitled

This example displays a dynamic 3D force-directed graph of organizational relationships, using nodes and links derived from a remote JSON dataset. The visualization shows parent and child nodes grouped by color, with link thickness representing a score value. Built with React and the `react-force-graph-3d` library, it fetches data asynchronously via a custom `useNetwork` hook and renders the graph with Three.js under the hood. Node dragging is disabled, and the force simulation handles layout automatically.

Loading thumbnail…

Untitled

A React application renders an animated 3D force-directed graph of an organization's network, with nodes and links fetched from a remote JSON file. The visualization uses `react-force-graph-3d` to display hierarchical relationships, grouping source nodes and target nodes into two distinct sets. Data is loaded asynchronously via a custom `useNetwork` hook, and the graph is rendered without node dragging enabled. The code includes commented-out logic for dynamically adding nodes and links every second, though that behavior is not active in the current version.

Loading thumbnail…

Fork of Fork of Directly Labelled lines

This example shows time-series data as directly labeled lines, with each series identified by a colored line and a text label positioned near its end. The chart uses a time-scaled x-axis and a linear y-axis, with data loaded from a Google Sheets CSV. It relies on D3 v7 for scales, axes, and line generation, while the arraygeous library flattens data and geometric computes Voronoi cell areas to determine optimal label placement. The SVG output is rendered in a fixed 1000×600 viewport.

Loading thumbnail…

Fork of Directly Labelled lines

This example demonstrates directly labeled line charts, where each line is identified by a label placed within its corresponding Voronoi cell. It visualizes time-series data across multiple categories, with each line rendered as a distinct colored path and labeled accordingly. The chart uses D3 v7, along with the arraygeous and geometric libraries, to compute Voronoi diagrams and place labels at the largest cell centroid for each line. The data is loaded from a remote CSV file and displayed using SVG rendering.

Loading thumbnail…

Fork of Directly Labelled lines

This example demonstrates directly labeled line charts using D3 v7, displaying three data series (Apples, Blueberries, Carrots) over a three-month time span with a shared y-axis scale from 0 to 20. The visualization uses a Voronoi diagram computed via `d3.Delaunay` to automatically position labels near each line’s end, selecting the largest cell polygon for optimal placement. Data is loaded from an external CSV file, parsed into date-value pairs, and rendered as SVG paths with `d3.line`. The coordinates and angles for label placement are calculated using the geometric library’s `polygonArea` and `polygonCentroid` functions.

Loading thumbnail…

Directly Labelled lines

This example demonstrates directly labeled line charts by placing category names at the end of each line instead of using a legend. The chart shows three food items (Apples, Blueberries, Carrots) plotted over a four-month period, with labels positioned using a Voronoi diagram to find the largest empty cell for each line. The code uses D3 v7 for scales, axes, and line generation, along with the geometric library to calculate polygon areas, centroids, and angles for label placement. Data is loaded from a CSV file and rendered as SVG paths with light-colored lines and matching text labels.

Loading thumbnail…

fetch D3 v5 Zoomable Sunburst

A zoomable sunburst chart visualizes the hierarchical Flare dataset, showing interactive drill-down and zoom-out navigation across nested categories. Built with D3 v5, this SVG-based example uses d3.partition to lay out nodes as concentric rings, with d3.arc generating the path geometry and d3.scaleOrdinal with an interpolateRainbow palette for color encoding. Clicking a node triggers a smooth transition via transition.attrTween, animating the arc angles to focus on the selected subtree while fading labels based on visibility thresholds.

Loading thumbnail…

Fork of sunburst react

This sunburst visualization displays hierarchical data from a CSV file containing publication metadata, showing the relationship between publication years, predicate types, and PMIDs. The visualization uses D3's partition layout and arc generator to create the radial layout, with slices colored according to the d3.scaleOrdinal color scale using schemeTableau10. React manages the component lifecycle through useEffect and useRef hooks, while D3 handles the SVG rendering of paths and labels, with a tooltip appearing on mouseover events to display additional date information.

Loading thumbnail…

sunburst react

This sunburst chart visualizes a hierarchical dataset of research topics, with each ring representing nested categories and slice sizes proportional to data values. The visualization is built with React and D3 v6, using `d3.partition` to compute the layout, `d3.hierarchy` to structure the data, and `d3.arc` to render the SVG paths. Animated tooltips display node names and publication dates on hover, while text labels are rotated to align with their corresponding slices. The data is loaded from a remote CSV file and processed into the hierarchy structure.

Loading thumbnail…

API Heatmap - brand colors round .2 3band rgg - 20

A grid of 20 company symbols forms an API heatmap, with each cell colored by a relatedness score. The visualization uses a three-band red-gray-green linear scale, mapping scores from 0 to 10 with values rounded to the nearest 0.2, creating 50 distinct bins. d3.scaleLinear assigns fill colors, while d3.json loads the data. Tooltips display company details on hover, and a legend shows the color scale's gradient.

Loading thumbnail…

Untitled

This interactive sunburst chart visualizes the hierarchical structure of the Bible, with arcs sized by either the number of books or chapters in each section. Users can click on slices to zoom into subtrees and toggle between linear and grouped modes via radio buttons. The visualization uses D3 v5 APIs including `d3.stratify`, `d3.partition`, `d3.arc`, and `transition.attrTween` to smoothly interpolate arc paths and label positions during updates. It loads its data from a JSON file and renders as an animated SVG.

Loading thumbnail…

React + D3 Viz Starter

This example presents a minimal React and D3.js starter template for building SVG data visualizations. It defines a reusable `VizContainer` component that manages an SVG canvas with configurable dimensions and margins, following the standard margin convention for chart layouts. The component optionally renders background rectangles to visually indicate the plot area and outer canvas. The code imports React, ReactDOM, and D3 v6 via CDN, and the main `App` function constructs a single `VizContainer` with a fixed 960×500 pixel size and equal 30-pixel margins.

Loading thumbnail…

knowledge-graph

This example demonstrates how to use `package.json` in VizHub to declare dependencies and custom mappings from package names to browser globals. The code renders a simple React application that displays the text “Hello package.json” using `ReactDOM.render`. It imports libraries like `react`, `react-dom`, and `d3`, and relies on the `vizhub.libraries` field to specify CDN paths for React and ReactDOM. The visualization is minimal, focusing on configuration rather than data rendering.

Loading thumbnail…

Untitled

A dynamic 3D force-directed graph grows by one node every second, with each new node connecting randomly to an existing one, and clicking a node removes it along with its links. Built with React and the `react-force-graph-3d` component, it uses Three.js for WebGL rendering and d3 for the underlying force simulation. The code manages state through `useState` and `useEffect`, updating node and link arrays on each interval tick.

Loading thumbnail…

CSV process

This example demonstrates how to load and process a CSV file containing correlation data for BERT, transforming each row into a flat list of source-target-value objects. The code uses D3 v7’s `d3.csv` to fetch the data from a GitHub gist URL, then applies custom mapping and flattening functions to restructure the dataset. The processed result is logged to the console, showing a manual approach to data wrangling without any visual rendering or chart output.

Loading thumbnail…

process_csv

This example renders a full-screen “Hello React!” message using React 16.13.1, with the text centered and scaled to 13em via inline CSS. The app component returns a single div, and ReactDOM renders it into the root element. The code imports React and ReactDOM directly from UMD builds, demonstrating a minimal React setup without additional visualization libraries or data processing—despite the title suggesting CSV handling, no CSV parsing or charting occurs.

Loading thumbnail…

Fork of API Heatmap - brand colors round 20 steps

A responsive SVG heatmap displays companies from the GME-20 dataset, each rendered as a colored square labeled with a ticker symbol and a relative score. A three-stop linear color scale (`d3.scaleLinear`) transitions from light gray through teal to dark green, with continuous values rounded to the nearest 0.5 via `Math.ceil`, producing 50 discrete bins. Tooltips show company details on mouseover. The code imports specific functions from D3 v7, including `json`, `scaleLinear`, and `format`, and uses an API-hosted JSON file as the data source, positioning elements with a custom grid layout.

Loading thumbnail…

API Heatmap - brand colors round 10 steps - reusable

This heatmap displays 20 company symbols arranged in a 5-column grid, with each cell colored by a relative score on a continuous d3.scaleLinear gradient from gray-green to dark teal. Scores are rounded to the nearest 0.3 unit using a custom rounding function, and a 10-step color legend is rendered beneath the grid. Built with D3 v7, the visualization reads JSON data from a GitHub gist, uses SVG rectangles and text for rendering, and includes interactive tooltips on mouseover that show company details alongside a fixed information panel.

Loading thumbnail…

Fork of Fork of API Heatmap - brand colors round .2 3band

This heatmap uses a red-to-grey-to-green gradient to visualize relevance scores for companies, with the color scale’s domain rounded to the nearest 0.2 to create 50 discrete color bins. A legend beneath the grid maps scores from 0 to 10, using a neutral grey midpoint for smoother transitions. The visualization renders company symbols and their scores as SVG tiles, generated with D3's `scaleLinear` and `.join()` operators, pulling JSON data from a GitHub gist. Tooltips and click interactions expose additional company details.

Loading thumbnail…

Fork of Fork of API Heatmap - brand colors round 10 steps

A grid of 20 company tiles displays relative VectorScores as a color-coded heatmap, using an SVG rendered with d3.v7. Each tile shows the company symbol and rounded score, colored via a d3.scaleLinear with a three-stop gradient from light gray through mid-gray to dark teal. The legend is rendered as ten discrete steps along the bottom, while interactive tooltips and click handlers expose company details. Data is loaded as JSON, and scores are rounded using a custom helper before being mapped to colors.

Loading thumbnail…

Fork of API Heatmap - brand colors round 30 steps

This example displays a grid of company tiles colored by a relative score, with a gradient legend below. The color scale uses a continuous three-color gradient from gray to teal, rounded to 30 steps. Squares are arranged in five columns, each showing a company symbol and its score. Tooltips reveal company details on hover. The visualization uses d3.scaleLinear for color mapping, d3.json to load the data, and SVG rectangles to render the heatmap cells.

Loading thumbnail…

Fork of Fork of Fork of API Heatmap - brand colors round .2 3band

This exemplar displays a grid of company cells, with each cell labeled by its stock symbol and relevance score, colored according to a three-band diverging color scale (from teal to gray to dark green). The color mapping uses a continuous d3.scaleLinear domain from 0 to 10 with outputs rounded to the nearest 0.5 bin. The visualization includes a discrete color legend constructed from 25 rectangles, and tooltips providing company details. Data is loaded via d3.json from a GitHub gist containing 20 symbols.

Loading thumbnail…

API Heatmap - brand colors floor

A grid of company tiles displays a numerical "VectorScore" as a color, using a D3 linear color scale with domain 0–10 and a teal-to-gray range. The color is applied via `d3.scaleLinear`; the code floors the score to create discrete color steps, so a score of 6.X appears distinct from 7.X. The data (company symbol, name, description, industry, market cap) is fetched as JSON from a GitHub gist, and each tile shows the symbol and its score. Hovering reveals a tooltip, and the company name links to a NASDAQ query.

Loading thumbnail…

API Heatmap - brand colors floor extent rounded

An interactive heatmap displays brand-relation scores for 20 companies in a 5x4 grid, using a diverging color scale to map minimum, midpoint, and maximum scores. The scale floors relation scores into 10 perceptible color steps, enabling easy comparison within the basket. D3 v7 handles SVG rendering, tooltips on hover, and click interactions showing company details. Data comes from a JSON file containing company names, industries, descriptions, and relation scores, with a linear color scale mapping values to muted teal and gray tones.

Loading thumbnail…

API Heatmap - brand colors floor extent

This visualization displays a 5-by-4 grid heatmap of stock symbols, where each cell’s color encodes a relation score between a company and a selected brand. The fill uses d3.scaleLinear with a three-stop domain mapping to a two-color range, while a separate scaleLinear floors scores into ten discrete legend steps. It renders as SVG using d3.v7, with tooltips and a side panel showing company details on hover.

Loading thumbnail…

Fork of API Heatmap - brand colors round .2

This fork of an API heatmap displays stock symbols and their related scores in a 5-column grid of rounded rectangles. The cells are colored using a continuous linear scale from white to black, with the score values rounded to the nearest 0.2 before mapping, creating a deliberate visual discontinuity between scores like 6.X and 7.X. The visualization uses D3 v7 to render SVG elements, fetching data from a local JSON with company names, descriptions, and market data. A tooltip and side panel show company details on hover, while a color legend at the bottom maps the color range to the score domain.

Loading thumbnail…

API Heatmap - brand colors round .2

This heatmap visualizes brand-related data for 20 companies, using a 3-color continuous scale from d3.scaleLinear that pivots at a value of 5 and rounds scores to 0.2 increments, creating 10 distinct color bands. Each SVG rectangle represents a company, colored by its relative score, with the ticker symbol and score overlaid. The code uses d3.json to load data from a NASDAQ-linked gist, d3.scaleLinear for color mapping, and d3.mouse for tooltip interactions. A color legend at the bottom displays the full gradient range from 0 to 10.

Loading thumbnail…

API Heatmap - brand colors

This visualization displays a grid of company squares, each colored by a relevance score using a linear color scale from light gray to dark teal. The heatmap uses D3 v7 to render SVG rectangles and text labels for company symbols and scores. Data is loaded as JSON from a GitHub gist, and interactive tooltips show company details like industry and description on mouseover. A color legend along the bottom maps the VectorScore range from 0 to 10.

Loading thumbnail…

API Heatmap

A grid of colored squares displays companies, each labeled with its ticker symbol and a numeric "rel_score." A red-to-green linear scale maps these scores, and hovering over a square reveals company details like name, industry, and description in a tooltip and a fixed info panel. The visualization is built with d3.v7, using `scaleLinear` for color mapping, `.join()` for SVG element creation, and mouse event handlers for interactivity. Data comes from a JSON file hosted on a GitHub gist.

Loading thumbnail…

Graph Network

This visualization displays a graph network of nodes connected by curved arcs, showing relationships between stock-related entities. Users can hover over nodes to highlight their connections, with linked paths becoming thicker and labels enlarging for the selected element. The implementation uses React and D3 v7, with the arc layout generated through custom path calculations for elliptical curves. Data is loaded as JSON from a GitHub gist and contains parent-child node relationships with correlation scores. SVG circles represent nodes, while paths illustrate links, with node and label positions determined by a D3 point scale.

Loading thumbnail…

Fork of Fork of gme

This visualization displays a grid of company symbols, each colored by a numeric “rel_score” on a red-to-green scale. Clicking a symbol updates a side panel with the company name, industry, score, and description. The code uses D3 v7 with `select`, `scaleLinear`, and `json` to load and render SVG elements, including a gradient legend and tick indicator. Data comes from a remote JSON file fetched from a gist.

Loading thumbnail…

gme correlation

This circular arc diagram visualizes correlations between financial market entities, showing nodes arranged horizontally with curved links of varying thickness representing connection strength. The interactive visualization uses D3 v7 with React, loading JSON data from a GitHub gist. On mouseover, the selected node and its related links are highlighted, while all other elements are dimmed. The implementation combines React state management via useEffect hooks with D3's selection and data joining APIs, including selectAll, join, and scalePoint for positioning.

Loading thumbnail…

Fork of gme correlation

This interactive arc diagram visualizes correlations between financial instruments, with nodes positioned along a horizontal axis and arcs connecting correlated pairs. The visualization uses D3.js v7 within a React framework, rendering as an SVG. It employs custom D3 modules like `d3.arcDiagram` for layout and `d3.scalePoint` for positioning, while user interactions highlight connections and labels. Data is loaded from a JSON file via `d3.json`, and the code builds both a node list from unique parent and child values, and links with source/target references.

Loading thumbnail…

Fork of gme

This visualization displays stock symbols in a 5-column grid of colored squares, where each square's color represents a relative score from red to green. Hovering over a square highlights it and updates a tick indicator on a gradient legend below to show the exact score value. The code uses D3 v7 with `scaleLinear` for color encoding and positioning, `json()` for loading data, and event handlers for mouse interactions. Data comes from a JSON file containing company information, rendered as SVG rectangles and text elements.

Loading thumbnail…

gme

A grid of colored cells shows relative scores for a set of financial symbols from a JSON dataset, with each cell labeled by its ticker symbol and score. A linear color scale maps scores from red to green, and a gradient legend below the grid indicates the mapping. The visualization renders as SVG using d3.v7, with mouseover interactions defined but not detailed, and a tick indicator labeled "HI" marks a reference point. Data is loaded via `d3.json`, and scales are created with `d3.scaleLinear`.

Loading thumbnail…

Reusable Heat map

This reusable heat map, built with D3 v7, visualizes the relative scores of companies as a grid of colored squares. Each square represents a company, displaying its symbol and score, with color transitioning from red to green based on the score value. The visualization includes a linear gradient legend to map scores to colors, and an interactive tick indicator that moves along the color scale on mouseover. Data is loaded from a JSON file via `d3.json`, with layout and scales managed by `d3.scaleLinear` and rendering done in SVG.

Loading thumbnail…

D3v7 starter

This minimal example demonstrates a single text element reading “HI” rendered at the top-left of the page. It uses D3v7’s `select` to append a `text` node to the body and set the `cx` and `cy` attributes. The code runs inside an asynchronous `main` function and loads D3 from the unpkg CDN, with a separate `bundle.js` containing the custom JavaScript. No data source or dynamic visualization is shown; it serves as a starter template for D3 projects.

Loading thumbnail…

setInterval

A 10×10 grid of circles animates smoothly, with each circle’s radius oscillating according to a sine wave that shifts over time. Built with React and D3 v7, the visualization uses `setInterval` to update the frame every 16.6 milliseconds, generating new data via `Math.sin` and binding it through `selectAll` and `.join`. The SVG rendering redraws all circles each tick, with black fills and positions determined by row and column spacing.

Loading thumbnail…

Grid with d3

A 10×10 grid of black circles is rendered in an SVG, with each circle positioned at evenly spaced intervals and sized by its data-defined width. The visualization uses React to manage the component structure and d3-selection to append and bind data to SVG elements. The code generates the grid data programmatically, then applies a nested join pattern with `selectAll` and `.join()` to create rows and columns of circles.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how to render three black rectangles in an SVG canvas using a React component with D3 version 7. The code uses the `select` function from D3 to bind an array of three data objects to appended rectangular elements, positioning them diagonally via `attr("x")` and `attr("y")`. It shows a basic data join pattern where the enter selection creates rectangles, highlighting the integration of React refs (via `useRef`) with D3’s imperative DOM manipulation inside a `useEffect` hook.

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This visualization shows a date histogram of the total dead and missing migrants per month, using the Missing Migrants Dataset. The chart renders SVG rectangles via React components, with axes built from custom `AxisBottom` and `AxisLeft` components that use D3 scales. Data is loaded with D3’s `csv` function, then binned by month using `d3.bin` and aggregated with `d3.sum`. Hovering reveals exact totals through native SVG `<title>` tooltips.

Loading thumbnail…

Missing Migrants Aggregate

This histogram shows the monthly aggregate total of dead and missing migrants worldwide, with bars representing cumulative deaths per month over time. The visualization uses React to manage state and D3 v5's `scaleTime`, `scaleLinear`, `histogram`, and `timeMonths` APIs to bin the data by calendar month and compute the sum of deaths per bin. The data comes from a subset of the Missing Migrants Global dataset, loaded via `d3.csv`, and is rendered as SVG rectangles with tooltips showing exact totals.

Loading thumbnail…

Component Bar Chart

This example shows a horizontal bar chart of the top 10 countries by 2020 population, sourced from a UN population CSV. The bars are rendered as SVG rectangles using React, with the y-axis positioning driven by d3.scaleBand and bar widths mapped through d3.scaleLinear. Axes are custom-built components that generate tick marks and labels using d3’s tick method and scale domain iteration.

Loading thumbnail…

Refactored Missing Migrants multiple views

This interactive visualization presents the global number of missing migrants on a world map using a proportional symbol view, overlaid with a time-series bar chart of monthly totals. The map employs D3’s `geoNaturalEarth1` projection and `geoPath` to render land and graticules, while circle radii are scaled by the square root of recorded deaths. The lower histogram, built with D3’s `scaleTime`, `bin`, and `sum`, aggregates incidents by month. React manages the component structure, and the dataset comes from a subset of the Missing Migrants Project CSV.

Loading thumbnail…

Missing Migrants multiple views

This visualization presents missing migrant data through two linked views: a world map with proportional bubbles and a time-series histogram. The BubbleMap uses d3.geoNaturalEarth1 and d3.geoPath to render country boundaries, with circle sizes scaled by d3.scaleSqrt to show total deaths and missing persons. The DateHistogram bins reports by month and displays aggregate counts as bars, using d3.csv for data loading and React for component rendering with SVG. The data comes from the Missing Migrants Global dataset.

Loading thumbnail…

Missing Migrants Map

A world map visualizes global migration deaths and disappearances, with each incident rendered as a semi-transparent circle scaled by the reported total dead and missing. The map uses the natural Earth projection, country boundaries, and graticules drawn via `d3.geoPath` and `d3.geoNaturalEarth1`. React manages the component state, while D3 loads CSV data and TopoJSON world atlas geometry, with circle radii determined by a `scaleSqrt` function. SVG output displays the geographic context and proportional incident markers.

Loading thumbnail…

Missing Migrants

This visualization plots the number of dead and missing migrants over time, with each circle representing a reported incident. The y-axis shows the total dead and missing, while the x-axis displays dates using `scaleTime` and `timeFormat`. The data comes from a CSV file of Missing Migrants Global records. React manages the component state, while D3 v5 functions like `csv`, `scaleLinear`, and `extent` handle data loading and scaling. The chart renders as an SVG with custom axes and marks components.

Loading thumbnail…

Migrant Months

This scatterplot displays the relationship between reported dates and the total number of dead and missing migrants, with each circle representing an individual incident. The visualization uses React to render SVG circles positioned through D3's `scaleTime` and `scaleLinear` scales, with axes generated by custom components. Data comes from a CSV file containing global migrant incidents, loaded via D3's `csv` parser, and the chart includes tooltips showing exact dates on hover. The minimalist design uses a teal mark color and the Inter font for clear readability.

Loading thumbnail…

Fork of D3 Starter

This example displays the static text “Hello D3 version 6” in the center of the page, using an extremely large font size (13em) to emphasize the message. The visualization serves as a minimal starter template, demonstrating the basic setup required for a D3 project. It imports the `select` function from the D3 library (version 7.0.1, loaded via unpkg) and calls `select('body').text(...)` to set the text content of the `<body>` element. The code also logs “HI” to the browser console, but the visual output is solely the text string rendered through D3’s DOM selection API.

Loading thumbnail…

Migrant

This visualization shows the total number of dead and missing migrants over time in 2019, plotted as a scatterplot of individual data points on an SVG canvas. Each circle represents a reported incident, with its position determined by the reported date on the x-axis and the total dead and missing count on the y-axis. The chart includes labeled axes and tick marks, styled with a custom color palette. Built with React and D3 v5, the code uses `scaleLinear`, `scaleTime`, and `extent` to compute scales, while the data is loaded via `csv` from a URL and processed in the custom `useData` hook.

Loading thumbnail…

Points on Map Size

This example visualizes the world's largest cities as proportional circles on a natural Earth projection, using a square-root size scale to encode population. The map is built with React and D3 v5, employing `geoNaturalEarth1` and `geoPath` to render land masses, graticules, and a sphere, while `geoGraticule` adds reference lines. City data originates from a CSV of world cities, loaded via D3's `csv` function, and the World Atlas TopoJSON supplies country boundaries. The SVG circles, styled with a teal fill and opacity, are positioned using the projection and sized based on population.

Loading thumbnail…

Points on Map

This example displays a world map with city points overlaid, using a Natural Earth projection. The map shows country boundaries, graticules, and a sphere outline, with city locations plotted as circles. It uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render the geographic features, while city data is loaded from a CSV via d3.csv. The visualization is built with React, rendering SVG elements, and uses TopoJSON from the World Atlas for country polygons and interior borders.

Loading thumbnail…

Scatterplot with Color Legend Interactive

This interactive scatterplot displays the Iris flower dataset, allowing the user to select which attributes are mapped to the x- and y-axes via two dropdown menus. A color legend on the right encodes the flower species, and hovering over a legend entry dims points from other species while highlighting the matching ones. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and custom React components for axes and marks, rendering to SVG from parsed CSV data.

Loading thumbnail…

Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris flower dataset, letting users explore relationships between sepal and petal measurements via dropdown menus that select the x and y axes. The chart displays points colored by species through a D3 scaleOrdinal color legend. Built with React and D3 v5, it renders as SVG using d3.scaleLinear for axes, d3.extent for domains, and custom React components for axes, marks, and the color legend.

Loading thumbnail…

Scatterplot Colors

This interactive scatterplot explores the classic Iris flower dataset, allowing users to compare any two measurements by selecting attributes from dropdown menus. Each point represents a flower specimen, colored by species using a d3.scaleOrdinal with a categorical color palette. The visualization is built with React and rendered as SVG, using d3.scaleLinear for axes and d3.extent to compute domains. Mouse hover reveals tooltips with formatted values, while axis labels update dynamically based on the selected attributes.

Loading thumbnail…

Stylized Scatterplot with menu

This interactive scatterplot displays the classic Iris flower dataset, allowing viewers to dynamically select which quantitative attributes appear on the X and Y axes through two dropdown menus. Each circle represents an individual iris flower, positioned according to the chosen variables, with tooltips revealing the precise X-axis value upon hover. Built with React and D3 v5, the visualization uses D3 scales and SVG rendering for the plot, passing data through custom components like `Marks` and `AxisBottom`. The dropdowns use `react-dropdown`, and the data is loaded asynchronously from a CSV file via D3’s `csv` parser.

Loading thumbnail…

World Map

This world map visualization displays global country boundaries using an equal-area natural Earth projection. The map renders as an SVG, with gray graticules, a light sphere background, and red country fills, while interior borders appear as dark outlines. The code loads geographic data from a TopoJSON file using D3’s `json` loader and processes it with `feature` and `mesh` from TopoJSON. D3’s `geoNaturalEarth1` projection and `geoPath` generate the paths, while React manages the component state and rendering.

Loading thumbnail…

Scatterplot with menu

This scatterplot displays the Iris dataset, plotting sepal length, sepal width, petal length, or petal width on either axis. Interactive dropdown menus, implemented with React state, allow the user to select which attribute maps to the X and Y axes. The visualization uses D3 v5 scale functions to compute axis scales and renders all marks, axes, and labels as SVG elements.

Loading thumbnail…

Menus with react

This example demonstrates a simple dropdown menu for selecting a pet, built with React. The visualization shows a single select element populated with static options such as "dog", "cat", and "ant eater", with a preselected value. The App component manages the selection state using hooks like `useState`, while the Dropdown component renders the HTML `<select>` and `<option>` elements. User changes trigger the `onSelectedValueChange` callback to update the displayed choice, showing how React manages controlled form inputs.

Loading thumbnail…

Line Chart

This visualization displays a line chart of weekly temperature data for San Francisco, plotting temperature over time. The chart uses a D3 scaleTime for the x-axis and scaleLinear for the y-axis with nice rounding. React components handle the rendering, drawing SVG circles for data points and custom axis elements with tick marks. The data is loaded async from a CSV URL using the useData hook and D3's csv parser.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis. Each circle represents a flower sample, with axis labels and tick marks rendered using React components that call d3.scaleLinear, d3.extent, and d3.max. The SVG circles include a title element for tooltips, showing the sepal length value on hover. The code uses d3.csv for data loading and d3.format for axis tick formatting.

Loading thumbnail…

Margin Bar Chart

This example visualizes the top 10 most populous countries from a United Nations 2019 dataset using a horizontal bar chart. The bars encode population values on a linear x-axis, arranged by country along a band scale y-axis, with clear axis labels and tick marks. The visualization is built with React, rendering SVG elements, and leverages d3-scale for the `scaleBand` and `scaleLinear` scaling, d3.csv for data loading, and d3.max for domain calculation. Margins are applied to position the plot area within the overall SVG canvas.

Loading thumbnail…

Bar Chart

This bar chart displays the top 10 countries by estimated 2020 population, with horizontal bars whose lengths correspond to population values. The React component loads data from a CSV file using d3.csv, then scales the bars with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. Each bar is rendered as an SVG rectangle, with width mapped from the population field. The chart includes a loading state while data is fetched asynchronously.

Loading thumbnail…

Visualize Color Names

This example visualizes the 148 named CSS colors as a circular fan of arcs emanating from the cursor position. As the mouse moves, the entire color wheel re-centers and re-orients around the pointer, with each arc’s fill set to its corresponding RGB hex value from the loaded CSV. Built with React and D3 v5, it uses `d3.arc` to generate the arc paths and `d3.csv` to fetch the color data, rendering everything as SVG paths within a single group translated to the current mouse coordinates.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile horsepower against cylinder count, with tooltips revealing car names on hover. It uses the Vega-Lite API to construct the chart specification, while d3.csv loads the auto-mpg dataset from a GitHub gist. The rendering pipeline combines Vega, Vega-Lite, and d3.v5, with vega-tooltip providing interactive hover details. Custom configuration adjusts axis styling and label fonts for improved readability across the full-screen SVG output.

Loading thumbnail…

Load data with React/D3

This example demonstrates how to load and summarize a CSV dataset using React and D3. It fetches a color-names dataset from a GitHub gist and displays the data size in kilobytes, row count, and column count within a React component. The code uses React hooks (`useState` and `useEffect`) to manage asynchronous data loading and the `d3.csv` function to parse the remote CSV file, with `d3.csvFormat` computing the data size in the message helper.

Loading thumbnail…

Fetch Data

This example demonstrates how to fetch and log CSV data in the browser console. The page displays the text “Fetch Data” at a massive font size, while the data loading happens behind the scenes. The code uses D3 v5’s `d3.csv` method to retrieve a CSV file of CSS named colors from a GitHub gist, then logs the parsed data array to the console. Alternative approaches using the Fetch API’s `fetch` with nested `.then()` calls or async/await are shown as commented-out examples.

Loading thumbnail…

Mouse Follower

A small circle follows the cursor as it moves over a blank SVG canvas, providing a direct, real-time mapping of pointer position to graphical output. The application uses React's `useState` hook to store the mouse coordinates, which are updated via the SVG `onMouseMove` event handler and passed as `cx` and `cy` attributes of the rendered `<circle>` element. The visualization demonstrates a minimal, single-element interactive scene built with React and rendered as SVG.

Loading thumbnail…

D3 React Face

Ten identical cartoon faces are arranged in a row, each rendered as a yellow SVG circle with black outlines, two eyes, and a mouth. The example demonstrates the composition of reusable React components (`BackgroundCircle`, `Eye`, `Mouth`) assembled into a `Face` element. The `Mouth` uses the D3 v7 `arc` generator to create a curved path, while the `FaceContainer` handles the SVG coordinate translation. The `App` component maps over an array to render the repeated faces.

Loading thumbnail…

React Face

A yellow smiley face is rendered as a static SVG graphic centered on a 960 by 500 canvas, featuring two small black eyes and a thick black outline. Built with React, the `App` component defines a `Smiley` function that returns the SVG elements, using React's JSX syntax to declare circles with specific coordinates and styles. The example is rendered into the DOM using `ReactDOM.render`, and the page is styled with CSS to center the graphic and remove margins.

Loading thumbnail…

HTML Face

This example shows a simple face rendered as a yellow circle with two eyes using SVG elements. The code draws three circles directly in the SVG markup: a large yellow face with a black outline, and two smaller black eyes positioned symmetrically. It uses basic SVG circle elements with attributes for coordinates, radius, fill, and stroke. The page is styled with CSS to center the graphic and remove margins, while the SVG canvas is set to 960 by 500 pixels. JavaScript is present but unused, and React is listed as the framework though the standalone HTML relies solely on native SVG.