D

Deborah Ong

@Debiday·32 public vizzes

Loading thumbnail…

Missing Migrants on a map

This map visualizes the locations of missing migrants, using circles overlaid on a world atlas to represent incidents, with circle size scaled by the reported number of individuals. The visualization projects geographic coordinates onto a 2D SVG canvas using D3's `geoNaturalEarth1` and `geoPath` APIs, while rendering country boundaries and graticule lines from a TopoJSON world atlas. Circle radii are mapped from the data's count field using D3's `scaleSqrt`. Data is loaded from a remote CSV, and the React component structure separates data fetching from the pure SVG mark rendering.

Loading thumbnail…

TLC on a map

This map shows global incidents of missing and dead migrants, with circles sized by the reported death toll at each location. The visualization uses a natural Earth projection rendered with D3’s geoNaturalEarth1 and geoPath, overlaid with graticules and country borders from the World Atlas TopoJSON. Circle radii are scaled with d3.scaleSqrt based on the Total Dead and Missing field from the Missing Migrants dataset, with a maximum radius of 15 pixels. React manages the SVG elements, while the marks component fetches the CSV data and map topology through custom hooks.

Loading thumbnail…

TLC Fork of Missing Migrants on a map

This map visualization displays the global distribution of missing migrants, with circle sizes scaled proportionally to the number of missing individuals at each location. The visualization uses D3 v5’s `geoAlbers` projection and `geoPath` to render world landmasses, graticules, and interiors, while React manages the component state and rendering. Data is loaded from a CSV file containing migrant incident locations and counts, with circle radius determined by a square root scale. The map highlights geographical patterns in migrant disappearances across continents, with semi-transparent blue circles overlapping to indicate density.

Loading thumbnail…

Fork of Fork of Working with Time

This example visualizes the number of reported missing persons over time, aggregated into monthly bins from a dataset of missing persons reports. The bar chart uses a time scale for the x-axis (showing years) and a linear scale for the y-axis (showing total counts per month). Built with React and D3 v5, it uses `d3.bin` with `timeMonths` thresholds and `d3.sum` to aggregate the data, while custom React components render the SVG axes and marks. The data loads from a CSV file via `d3.csv`.

Loading thumbnail…

Fork of Working with Time

This interactive bar chart visualizes the total number of dead and missing migrants over time, aggregated by month from the Missing Migrants Global 2019 subset of the Data Canvas Sense Your City dataset. Built with React and rendered as SVG, the visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `histogram` (binning), and `timeMonths` APIs to bin reported dates into monthly intervals and sum corresponding death counts. Hovering over a bar reveals the exact value through an SVG `<title>` tooltip.

Loading thumbnail…

Points on a World Map

A world map displays population data for cities as scaled circles, with marker size proportional to population using a square-root scale. The visualization uses D3’s geoNaturalEarth1 projection, geoPath, and geoGraticule to render land masses, country borders, and graticules, while React manages state and renders SVG circles. City coordinates and populations come from a CSV file, with world geography from a TopoJSON dataset. Circles are semi-transparent blue, overlaid on gray land and sphere outlines.

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes missing persons cases in California, plotting age against the year reported missing and coloring each point by gender. Built with React and D3 v5, it renders SVG circles using custom `Marks` components and scales from `d3.scaleLinear` and `d3.scaleOrdinal`. Hovering over a legend item in the `ColorLegend` component highlights matching data points while fading others, using React state to track the selection. The visualization loads CSV data from a GitHub gist through `d3.csv`.

Loading thumbnail…

Stylized scatter plot

This stylized scatter plot visualizes the ages and missing dates of children from The Lost Children dataset. It uses React to render an SVG with d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, alongside custom AxisBottom, AxisLeft, and Marks components. Each circle represents a missing child, with a native tooltip via the `<title>` element. The chart is styled with the Poppins font and muted tick colors, and data is loaded asynchronously using d3.csv.

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, with dropdown menus controlling which flower attributes appear on the X and Y axes. Hovering over a color legend entry highlights the points for that species while fading all others to 20% opacity. The visualization uses React state management with D3 scales for positioning and color, rendering SVG circles that respond to mouse events on the legend.

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris Dataset, showing petal length on the x-axis and sepal width on the y-axis, with points colored by species. Built with React and D3 v5, it uses d3.scaleLinear for both axes and d3.scaleOrdinal for the categorical color mapping. The SVG rendering includes custom axis components, a color legend, and tooltips via SVG title elements. The data is loaded through d3.csv from a GitHub Gist.

Loading thumbnail…

Fork of Trial of Interactive Color Legend

This interactive scatter plot visualizes California missing persons data, allowing users to explore relationships between attributes like age, county, and gender. A color legend for gender is interactive, highlighting points of a selected category while fading others via React state management and hover events. The visualization uses React components, D3 scales for positioning, and renders as SVG. The data is loaded using D3’s `csv` parser from a GitHub gist, with dropdown menus controlling the X and Y axis attributes.

Loading thumbnail…

Trial of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, using the D3.js version 5 library within a React framework to render SVG elements. Users can select which attributes to display on the X and Y axes via dropdown menus, with the initial setup showing species data colored by unique categories. The visualization includes an interactive color legend that allows users to hover over categorical labels to highlight specific data points while fading the others, implemented through custom React components that manage hover state and opacity transitions.

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three species. Droplists control which attribute appears on each axis, while circles colored by species include a legend showing the categorical color scale. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and React state to manage selected attributes. Data loads asynchronously from a CSV via the `csv` function, with SVG rendering for all marks and axes.

Loading thumbnail…

Scatter Plot with Color

A scatter plot of the Iris dataset displays the relationship between two selected attributes, with each of the three species represented by a distinct color. Interactive dropdown menus allow the user to change which numerical attributes are plotted on the x- and y-axes. The visualization is built with React and D3 version 5, using `scaleLinear`, `scaleOrdinal`, and `extent` to compute scales, and renders circles as SVG elements with tooltips showing the x-axis value.

Loading thumbnail…

Polished Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris Dataset, allowing users to dynamically select which four numerical attributes to plot on the x- and y-axes via two dropdown menus built with ReactDropdown. The visualization updates the axes and data points in real time based on the chosen attributes. The chart is rendered using SVG within a React framework, with axes generated by custom React components using d3.scaleLinear for scales and d3.extent for domains. Data loading relies on d3.csv, and hover tooltips display formatted values via native SVG title elements.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus control which attributes are plotted on the x- and y-axes, with axis labels and scales updating accordingly. The visualization uses React with D3’s `scaleLinear`, `extent`, and `format` for scaling and tick formatting, rendering SVG circles for data points. Each point includes a tooltip showing its exact x-value, and the data is loaded via D3’s `csv` from a remote URL.

Loading thumbnail…

Scatterplot with Menus

This example demonstrates a simple user interface for selecting a pet from a dropdown menu. The React application renders a labeled `<select>` element, populated with options for a dog, cat, hamster, parrot, spider, and goldfish. The selected value is managed through React's `useState` hook and logged to the console. The code uses the `Dropdown` component to handle the menu's options and change events, and leverages the React DOM library to render the application into the page's root element.

Loading thumbnail…

React Starter

This example demonstrates the minimal setup for a React application that renders a static “Hello React!” message inside a web page. It uses the React and ReactDOM libraries loaded from a CDN, with an `index.html` file that includes the root `<div>` and a compiled `bundle.js` script. The `index.js` file defines a simple functional component and calls `ReactDOM.render` to mount it into the `#root` element, showing how to wire React’s declarative components into an HTML page.

Loading thumbnail…

World Map

This world map visualization presents global landmasses and country boundaries using a natural Earth projection. It displays the sphere, graticule grid, land areas in teal, and interior borders distinguishing countries. The code uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render geographic features from TopoJSON data sourced from the world-atlas package. React manages the component structure, while SVG paths draw each geographic element with distinct CSS styling.

Loading thumbnail…

Working with Time

This example visualizes temperature changes over time as a smooth line chart. The data is fetched from a CSV file containing weekly temperature readings from San Francisco. The chart uses a time-scaled x-axis with day-of-week labels and a linear y-axis for temperature values. Built with React and D3 v5, it employs `scaleTime`, `scaleLinear`, `extent`, and `curveNatural` to generate the curved path, with reusable `AxisBottom`, `AxisLeft`, and `Marks` components rendering in SVG.

Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot of California crash data uses Vega-Lite's API to map vehicle makes and models against crash characteristics, with points colored by gender and sized by an unlabeled field. The visualization renders via SVG, with tooltips exposing first and last names of involved individuals. Data is fetched as CSV using d3.csv, while the Vega-Lite API specification, registered with vega and vega-lite, controls encoding channels, scales, and styling. The dark theme, configured in config.js, customizes axis tick colors and label fonts.

Loading thumbnail…

Stylized bar chart

This example displays a horizontal bar chart ranking the ten most populous countries in 2020, with bars extending rightward from labeled country names. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` handling layout and the `format` function abbreviating population values on the x-axis. Data is loaded via D3’s `csv` utility from a UN population dataset, and each bar includes a native SVG `<title>` element for tooltips.

Loading thumbnail…

Refactored bar chart

This bar chart displays the top 10 countries by population from the UN Population 2019 dataset. React components render the SVG, with d3-scale’s `scaleBand` and `scaleLinear` handling axes and bar positions, while d3.csv fetches the data. The chart separates axes and marks into reusable components, making the visualization dataset-agnostic.

Loading thumbnail…

Axis with React and D3

This example displays a horizontal bar chart ranking the ten most populous countries in 2020, sourced from a UN population CSV fetched via D3’s `csv` utility. D3’s `scaleBand` and `scaleLinear` compute the bar positions and lengths, while its `max` and `ticks` generate the axis tick marks. React manages the data loading state and renders the SVG markup, including the axes and bars, using the imported ReactDOM to mount the component.

Loading thumbnail…

The margin convention

A horizontal bar chart displays the top ten countries by 2020 population, ranked by name along the y-axis and population count along the x-axis. The example demonstrates the margin convention by defining equal twenty-pixel margins on all sides and translating a group element accordingly. React manages the component state, while D3 utilities load the CSV data and construct the band and linear scales. The SVG renders each bar as a rect element sized through the scales.

Loading thumbnail…

Fork of Fork of Rendering Data with React and D3

This visualization uses React to render a bar chart of the top 10 countries by population in 2020, sourced from UN population data loaded via `d3.csv`. The `App` component fetches the data asynchronously and displays a loading message until ready. D3 utilities `scaleBand`, `scaleLinear`, and `max` compute the chart’s scales and domain, while React maps the data array to SVG `rect` elements, positioning and sizing each bar according to the country name and population value.

Loading thumbnail…

Fork of Rendering Data with React and D3

This visualization loads CSS named color data from a CSV file using `d3.csv` and renders a radial burst of colored arcs with React and SVG. Each arc corresponds to one color, with its fill set directly from the `RGB hex value` field, and the layout is generated using D3’s `pie()` and `arc()` functions. The React component manages the asynchronous data fetch with `useEffect` and `useState`, displaying a loading state until the data arrives, then drawing the full circle in a single SVG group.

Loading thumbnail…

Rendering Data with React

This example displays CSS named colors as a vertical stack of horizontal stripes, one per color, using React components to render each row. The data is loaded from a CSV file via D3’s `csv` utility, which fetches the dataset and passes it to the React app through a state hook. Each stripe’s background color is set from the `RGB hex value` field, and the layout uses inline styles for width and height. The visualization demonstrates how D3 can handle data loading while React manages the SVG-free DOM rendering.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays metadata about a CSV file containing CSS named colors, showing its size in kilobytes, row count, and column count in large text. The code uses D3 v5’s `d3.csv` function to fetch and parse the remote CSV data asynchronously, then formats the result with `d3.csvFormat` to compute the byte size. It also demonstrates alternative approaches with `fetch` and `d3.csvParse` in commented-out sections, highlighting different methods for loading tabular data.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data using the Fetch API and async/await, displaying the raw text output in the browser console. A React-based application fetches a local CSV file containing CSS named colors from a GitHub gist, then logs the parsed text to the console for inspection. The code uses the native `fetch` function with `response.text()` to retrieve the file, and shows a commented-out alternative using promise chaining. The visualization itself is minimal, focusing on the data-loading workflow rather than graphical rendering.

Loading thumbnail…

Fork of Smiley Face Part 1

A grid of small, randomized smiley faces appears, each with a yellow circular head, black outline, eyes, and a mouth rendered as a curved arc. The example demonstrates modular React components and D3’s `arc` generator to build SVG shapes. `range` creates eighteen faces, while `Math.random` varies eye and mouth size per face.

Loading thumbnail…

Smiley Face Part 1

This example builds the first stage of a smiley face using React components in an SVG, with D3’s `arc` generator shaping the mouth. It renders a yellow background circle, two eyes positioned via offsets, and a curved mouth path, all centered in a fixed 960×500 viewport. The code relies on D3 v6 for the arc’s inner and outer radii and angle extents, while React handles the componentized structure with named exports. The data flow is purely parametic, with radii and offsets passed as props, and no external dataset is used.