L

lefat92

@lefat92·36 public vizzes

Loading thumbnail…

D3 Page Template

This example demonstrates a minimal blank canvas for D3.js visualization development, showing an empty page ready for custom code. The page loads the D3 library from a local file path and includes a placeholder script tag where a user would insert their visualization logic. It uses vanilla HTML structure with embedded JavaScript, referencing the D3 API directly in the browser without any React-specific components or data bindings. No chart, data, or interactive elements are present, making it a starting template rather than a functional visualization.

Loading thumbnail…

52) Coronavirus with Log Y Scale and Labels

This example visualizes cumulative global coronavirus deaths over time using a logarithmic y-axis to accommodate the data’s exponential growth. The line chart, rendered as an SVG path via React and d3.v5, labels the axes and includes a marker line at 10,000 deaths. The code uses `d3.scaleLog`, `d3.scaleTime`, `d3.line`, and `d3.axisLeft` with tick formatting, pulling data from the Johns Hopkins Coronavirus Dataset.

Loading thumbnail…

51) React + D3 Axes

This example shows the global cumulative death toll from the early COVID-19 pandemic as a time-series line chart, with horizontal and vertical marker lines highlighting the 10,000-death threshold and the most recent date. Built with React and D3 v5, it uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to generate an SVG path, while custom React components render the marker lines. D3’s `axisBottom` and `select` handle the gridlines and tick labels. Data is loaded as CSV from a Johns Hopkins repository and transformed with `d3.csv` and `timeParse`.

Loading thumbnail…

50) Coronavirus Line Chart with 10,000 Marker Line

A line chart tracks the cumulative global count of COVID-19 deaths over time, with a prominent horizontal marker line at 10,000 deaths and a vertical “Now” marker at the most recent date. React components use D3’s `scaleTime`, `scaleLinear`, `extent`, and `line` to generate the SVG path, pulling data from a raw GitHub CSV via `d3.csv`. Custom `YMarkerLine` and `XMarkerLine` components draw the reference lines and labels.

Loading thumbnail…

49) Coronavirus Line Chart with 10,000 Marker Line

A line chart tracks daily cumulative COVID-19 deaths worldwide, with a horizontal marker line fixed at 10,000 deaths. The React component uses `d3.scaleTime` and `d3.scaleLinear` to map dates and death totals, while `d3.line` generates the SVG path. Data comes from a JHU CSSE time-series CSV, aggregated by summing country-level deaths per day. The black stroke emphasizes the trend, and the marker line offers a fixed reference threshold.

Loading thumbnail…

49) Coronavirus Data Part II

This example displays the total number of COVID-19 deaths worldwide as of the most recent date in the dataset, rendered as a single large text element on a red-tinted background. It loads death counts from a Johns Hopkins University time-series CSV file via `d3.csv`, sums the latest column’s values using `Array.reduce`, and formats the result with `d3.format`. The page updates the text content of an HTML `<pre>` element to show the comma-separated total and the corresponding date.

Loading thumbnail…

48) HIV/AIDS Choropleth Map

This choropleth map visualizes the share of the population infected with HIV/AIDS per 100 people in 2017, using a sequential yellow-to-red color scale to indicate infection rates across countries. The visualization loads world geometry from a TopoJSON file, joins it with HIV data from a CSV file, and maps country codes to numeric identifiers for accurate matching. Built with React and D3 v5, the map uses geoNaturalEarth1 and geoPath for geographic projections, while countries lacking data appear in gray. The color scale is created with interpolateYlOrRd and scaleSequential.

Loading thumbnail…

47) Log Scale

A scatterplot displays reported dates against total dead and missing migrants, using a logarithmic scale for the y-axis to accommodate a wide range of values. React components render SVG circles for each data point, with d3.scaleLog and d3.scaleTime mapping the data, while custom axes use d3’s tick formatting. The dataset comes from a CSV of Missing Migrants Global incidents, and tooltips show the reported date via SVG titles.

Loading thumbnail…

46) Choropleth Map

This interactive visualization displays global migrant deaths and missing persons using a natural Earth projection map overlaid with proportional circles, sized by the square-root scale of the "Total Dead and Missing" count. A linked time-series histogram below uses d3.brush to filter the map by reported date. The map renders world land and interior boundaries via d3.geoPath and topojson mesh, while the histogram aggregates monthly sums using d3.histogram and scaleTime. Data comes from an external CSV of migrant incidents.

Loading thumbnail…

45) React Performance Optimization

This interactive visualization combines a bubble map and a time-series histogram to explore missing migrant incidents. The map projects circles scaled by the square root of the total dead and missing, while brushing the histogram filters the map's displayed data. The code uses React with d3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` for the map, and `scaleSqrt`, `scaleTime`, `bin`, and `brushX` for the histogram. Data is loaded via d3's `csv` function.

Loading thumbnail…

44) Multiple Views with Brushing

This visualization combines a geographic bubble map with a time-series histogram to explore migrant deaths and disappearances. The map displays circles sized by the square-root-scaled count of total dead and missing, using D3’s `geoNaturalEarth1` projection and `geoPath` for the world atlas. The histogram aggregates the same data by month, using D3’s `bin` and `scaleTime`. Brushing on the histogram, implemented with `brushX`, filters the map’s data points. The map and histogram are linked, with the map updating dynamically to show only records within the brushed date range.

Loading thumbnail…

37) Sized Points on Maps

This example displays city populations as scaled, semi-transparent circles over a natural Earth projection map. The visualization layers geographic context using d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render land masses, country borders, and graticules. Population data from a CSV file is loaded via d3.csv and mapped through a d3.scaleSqrt to determine circle radii. The React component structure, leveraging hooks for data fetching, renders the map and points as SVG elements, with world atlas topology processed through topojson.feature and topojson.mesh.

Loading thumbnail…

40) Missing Migrants on a Map

This example visualizes missing migrants worldwide, with proportional circles indicating the total dead and missing at each incident location. The map uses an equirectangular projection rendered with d3.geoNaturalEarth1 and d3.geoPath, layered with graticules, land masses, and country interiors. React manages the component lifecycle, while d3.scaleSqrt maps the migrant counts to circle radii. Data comes from a CSV of missing migrant incidents, and world geography is loaded from the world-atlas TopoJSON dataset.

Loading thumbnail…

39) Missing Migrants II

This interactive bar chart visualizes the total number of dead and missing migrants over time, aggregated by month using d3.bin and d3.timeMonths. The x-axis displays dates with d3.scaleTime while the y-axis shows cumulative counts via d3.scaleLinear. Built with React and d3.v5, the SVG renders axis components and marks from separate modules, pulling data from a CSV of global migration incidents. Hovering over each rectangular bar reveals a tooltip with the exact date range.

Loading thumbnail…

38) Missing Migrants Scatter Plot

This scatter plot visualizes missing migrant incidents over time, with the reported date on the x-axis and the total dead and missing count on the y-axis. The visualization uses React with D3 v5’s `scaleTime` and `scaleLinear` functions to map data points, rendered as SVG circles with tooltips displaying the formatted date via `timeFormat`. Data is loaded asynchronously from a CSV file using the `csv` function, and axes are generated through custom components that leverage D3’s tick rendering.

Loading thumbnail…

35) Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset’s petal length and sepal width, colored by species. A hoverable color legend lets users highlight points of a single species while fading others. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles, with mouse events on legend items updating state to toggle point opacity via the `Marks` and `ColorLegend` components.

Loading thumbnail…

Color Legends

This scatterplot displays the Iris dataset, plotting petal length against sepal width. Each flower is represented by a circle colored according to species, with a categorical color legend indicating the mapping. The visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, rendered as SVG via React. Axes, tick formatting, and interactive tooltips are implemented using reusable React components that call d3 APIs like extent, format, and scale functions.

Loading thumbnail…

Scatter Plots with Color

This interactive scatter plot visualizes the Iris flower dataset, showing petal length against sepal width. Each point is colored by species using a categorical color scale, and hovering reveals a tooltip with the formatted petal length. Built with React and D3 v5, the visualization uses React components for axes and marks, with D3's `scaleLinear` and `scaleOrdinal` for positioning and coloring. SVG rendering handles the circles, while a custom tick formatter appends units to axis labels.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between sepal and petal measurements through dropdown menus that control the x and y axes. Built with React and D3 v5, it renders an SVG with axes generated using scaleLinear, extent, and custom AxisBottom and AxisLeft components. The Marks component displays each flower as a circle with tooltip support, while value labels update dynamically based on user selections.

Loading thumbnail…

Menus with React

This example shows a React-based pet selection interface with a dropdown menu displaying six animal options (dog, cat, hamster, parrot, spider, goldfish) and a large, prominent label. The code uses React’s `useState` hook to track the currently selected value, initially set to hamster, and passes it to a reusable `Dropdown` component. The `Dropdown` component renders a native `<select>` element, mapping each option object to an `<option>` tag while maintaining the controlled value through the `onSelectedValueChange` callback. The visualization relies on plain HTML form controls rather than a charting library, demonstrating React’s declarative state management.

Loading thumbnail…

React Starter Code

This example presents a minimal React application that renders SVG content. The code uses React and ReactDOM to mount an `App` component into a `#root` div, which draws a simple SVG element containing the text "Hello React!" on a blank canvas. The example demonstrates the foundational pattern of creating interactive or visual React applications with SVG output.

Loading thumbnail…

World Map

This example visualizes a world map using a natural Earth projection. It displays continents in teal, graticules as light gray lines, and a sphere background, with interior country boundaries emphasized in a darker stroke. The visualization loads GeoJSON world-atlas data and uses React for rendering with D3 v5 APIs such as `geoNaturalEarth1`, `geoPath`, and `geoGraticule`. TopoJSON processes the source data to extract land and interior meshes, all output as SVG paths.

Loading thumbnail…

Line Chart

This line chart visualizes weekly temperature data for San Francisco, mapping timestamps to the x-axis and temperature values to the y-axis. Built with React and D3 v5, it uses d3.scaleTime and d3.scaleLinear for scales, d3.line with curveNatural for the path, and d3.extent to set domains. SVG rendering includes custom axis components with timeFormat for weekday tick labels, while circle marks provide tooltips via the title element. The dataset is loaded from a CSV URL using d3.csv.

Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperatures in San Francisco over a week, rendered as circles on an SVG canvas using React and D3 v5. The code loads CSV data via `d3.csv`, then builds scales with `scaleTime` and `scaleLinear`. Axes are custom React components with formatted tick labels using `timeFormat`, and each data point includes a tooltip via a `<title>` element. The Poppins font and muted color palette give the visualization a modern, clean aesthetic.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. Built with React and D3 v5, it uses `scaleLinear` to create axes and renders circles as SVG marks. The `axisBottom` component formats tick labels with D3's `format` function, while tooltips display values via SVG `<title>` elements. The data loads asynchronously from a CSV using D3's `csv` parser.

Loading thumbnail…

Styling the Bar Chart

This example uses React with D3 utilities to render a horizontal bar chart of UN population data from 2019. It shows the ten most populous countries, with the x-axis formatted using D3’s `format` function to abbreviate large numbers (e.g., converting G to B). The chart is styled with Poppins font, custom tick and axis colors, and tooltips that display the same formatted value on hover. The code builds the SVG via React components, with axes and marks generated from D3’s `scaleBand` and `scaleLinear`.

Loading thumbnail…

Refactoring a Bar Chart

This example refactors a bar chart into modular React components, displaying the populations of the top ten countries from UN Population 2019 data. The visualization uses SVG rendering, with separate components for the bottom and left axes, and marks for the bars. D3’s `scaleBand` and `scaleLinear` handle the axis scales, while React hooks (`useState`, `useEffect`) manage the asynchronous loading of the CSV data via D3’s `csv` utility.

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements and D3 utilities—`csv` for data loading, `scaleBand` and `scaleLinear` for axis scaling, and `max` for domain calculation. It draws grid lines, tick labels, and bars positioned via the scales. The data comes from a GitHub-hosted CSV file.

Loading thumbnail…

The Margin Convention

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of the top 10 most populous countries from a UN population dataset (2020 estimates). The code uses D3’s `csv` loader, `scaleBand`, and `scaleLinear` to position and size the bars within an inner plotting area defined by explicit margins, while React’s `useState` and `useEffect` manage data fetching and component state. All SVG elements are generated declaratively through React, with the root group translated by the margin values to align the chart inside the fixed 960×500 viewport.

Loading thumbnail…

Making a Bar Chart

This example presents a horizontal bar chart of the top 10 countries by population in 2020, using data loaded from a CSV file. The visualization is built with React, which renders SVG elements, while D3 utilities handle data processing and scales. The code uses `scaleBand` for the categorical country axis and `scaleLinear` for the population value axis, mapping data to rectangle dimensions. The chart loads data via `csv` and updates reactively once the data arrives, displaying "Loading..." until then.

Loading thumbnail…

Rendering Data with React & D3

This gallery example displays the 148 named CSS colors as a donut-shaped pie chart using a combination of React and D3.js. The application fetches color data from a CSV file using D3’s `csv` utility, then leverages React’s `useEffect` and `useState` hooks to manage the asynchronous data loading. Each color is rendered as an SVG `path` element, with its slice geometry computed by D3’s `arc` function applied to the data array, and the transformation centers the wheel in the viewport.

Loading thumbnail…

Vega Lite API

This example visualizes temperature fluctuations over time using a Vega-Lite area chart, with data sourced from a CSV of weekly San Francisco temperatures. The visualization loads data via D3’s `csv` method and constructs the chart programmatically using the `vega-lite-api` library, registering it with Vega and Vega-Lite. The chart encodes time on the x-axis and quantitative temperature values on the y-axis, with a tooltip displaying the temperature. Custom styling through a `config` object adjusts axis labels, titles, and colors, while the rendering is handled as an SVG via Vega’s view renderer.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset using React and D3. It fetches CSS named colors data from a GitHub gist and displays a text summary showing the file size in kilobytes, row count, and column count. The code uses React hooks (useState, useEffect, useCallback) to manage state and trigger the data loading, while D3's csv function handles parsing. The result renders as an SVG-compatible pre element that updates from a loading message to the formatted data statistics once the fetch completes.

Loading thumbnail…

Loading and Parsing CSV - Colors

This example demonstrates how to load and parse a CSV file using D3 v7, displaying summary statistics about the dataset. It fetches a remote CSV containing named CSS colors, parses it with `d3.csv`, and shows the file size in kilobytes, the number of rows, and the number of columns. The text is rendered in a large `<pre>` element using the Fetch API’s `response.text()` method. The code relies on `d3.csv`, `d3.csvFormat`, and the built-in `fetch` function for data retrieval.

Loading thumbnail…

Mouse Follower

This example demonstrates how React state can drive an interactive SVG visualization: a single circle follows the mouse cursor across a 960x500 viewport. On every mousemove event on the SVG, the `handleMouseMove` callback updates the `mousePosition` state with the cursor’s client coordinates, and React re-renders the circle’s `cx` and `cy` attributes accordingly. It uses React 16.9 with hooks (`useState`, `useCallback`) and renders directly to SVG via `ReactDOM.render`.

Loading thumbnail…

Smiley Face Part III

A grid of randomly generated smiley faces, each with unique eye and mouth sizes, fills the viewport. The faces are drawn as SVG circles with yellow fills and black strokes, composed from reusable React components for the background, eyes, and mouth. The mouth uses a D3 arc generator to create a curved path, while the faces are rendered via React's DOM binding.