C

cynichole

@cynichole·40 public vizzes

Loading thumbnail…

organizational graph

This example visualizes an organizational network of arts and social impact organizations, with main nodes (large colored circles) representing umbrella groups and child nodes representing affiliated projects. Force-directed layout in d3.v7, using `forceSimulation`, `forceManyBody`, and `forceLink`, positions nodes based on link distances, while `forceCenter` pulls them toward the canvas center. The SVG rendering shows colored links and node labels. Users can drag nodes via the `drag` interaction, which restarts the simulation. Data is defined procedurally in `data.js` with a palette from `colors.js`.

Loading thumbnail…

D3 Force Layout

Three circles represent nodes labeled Alice, Bob, and Carol, connected by two lines in a small network graph. The layout uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position the nodes dynamically. As the simulation ticks, the code updates circle cx/cy attributes and line endpoints, producing an animated SVG visualization. The example demonstrates a basic force-directed graph rendered in a React-friendly setup with d3.v7.

Loading thumbnail…

Voronoi with labels

An interactive line chart displays cumulative COVID-19 death counts over time for multiple countries, using a logarithmic y-axis. A Voronoi overlay, built with `d3.Delaunay` and `d3.delaunay.voronoi`, captures mouse hover events across the entire chart area, highlighting the nearest data point and its corresponding country line while displaying a tooltip with the country name, date, and death total. The visualization uses React state for active selection, SVG for rendering, and data sourced from the CSSE COVID-19 time series dataset.

Loading thumbnail…

Coronavirus Log scale Live Data Voronoi

A multi-country line chart displays cumulative COVID-19 deaths over time on a logarithmic y-axis, with each country’s trajectory shown in gray. Hovering activates a Voronoi overlay, built with `d3.Delaunay`, to highlight the nearest data point and redraw that country’s path in black. The chart uses React with `d3.scaleTime`, `d3.scaleLog`, and `d3.line` to generate SVG paths, pulling live data from the CSSE COVID-19 GitHub repository. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, while the Voronoi cells themselves are faintly visible in pink.

Loading thumbnail…

Coronavirus Log scale Live Data

This live dashboard displays cumulative COVID-19 death counts for countries over time on a logarithmic scale, a choice that makes early exponential growth and later plateaus equally visible. Built with React and D3 v7, it renders an SVG containing one colored line per country, loaded from CSV data and parsed into time series. The chart uses `d3.scaleLog` for the y-axis, `d3.scaleTime` for the x-axis, and `d3.line` to generate the paths, with axes generated via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Coronavirus Log scale

This example shows global cumulative COVID-19 deaths over time using a logarithmic y-axis scale, making early exponential growth visible as a nearly straight line. The chart uses React with D3 v7 APIs including `scaleLog`, `scaleTime`, and a `line` generator to render an SVG path. Axis components are built with `axisBottom` and `axisLeft`, pulling data from a public Johns Hopkins CSSE CSV file. Gridlines, axis labels, and a title accompany the thick black trend line.

Loading thumbnail…

Corona virus Linear Y axis

This line chart visualizes the cumulative global COVID-19 death toll over time, using a linear Y-axis to show the raw magnitude of growth. The chart is rendered as an SVG in React, with D3’s `scaleTime` and `scaleLinear` mapping dates and death counts, while `axisBottom` and `axisLeft` generate the gridlines. Data comes from a JHU CSSE CSV file, parsed with `timeParse` and aggregated by summing daily country totals. A single black path, drawn with `d3.line`, traces the steep upward trajectory.

Loading thumbnail…

React + d3 Axes

This example shows a React-based line chart of global COVID-19 death totals over time, rendered as an SVG. The chart displays a black trend line with dashed marker lines for the 10,000-death threshold and the most recent date, using d3.scaleTime and d3.scaleLinear for axes. d3.axisBottom generates the x-axis with grid lines, while custom React components (XMarkerLine and YMarkerLine) annotate key values. Data comes from a CSSE COVID-19 time-series CSV, loaded with d3.csv and processed in a custom useData hook.

Loading thumbnail…

Line chart Margin convention

A line chart plots cumulative COVID-19 deaths over time, drawn with d3.line, d3.scaleTime, and d3.scaleLinear in SVG. Marker lines at 10,000 deaths and the latest date use custom React components. The margin convention isolates the plot area, and the chart triggers a bounding-box transition on load. Data comes from a JHU CSSE CSV.

Loading thumbnail…

Coronavirus Line Chart

The chart displays the cumulative global death toll from COVID-19 over time as a single black line, with a horizontal marker line indicating the 10,000-death threshold. Built with React and D3 v7, it uses `scaleTime` and `scaleLinear` to map dates and totals, while a `line` generator produces the SVG path. The data is fetched from the CSSE COVID-19 time series CSV, aggregated daily by summing deaths across all countries.

Loading thumbnail…

Summarising coronavirus data

This visualization summarizes COVID-19 death data from the John Hopkins coronavirus dataset by displaying the total number of deaths and the latest date as large red text. It loads a CSV file with `d3.csv`, extracts the last date column, and sums all death values using `Array.reduce`. The result is formatted with `d3.format` and injected into an HTML `<pre>` element via `textContent`, updating the page with a single, stark numeric summary.

Loading thumbnail…

Loading and Parsing coronavirus data

This example demonstrates how to load and parse the Johns Hopkins coronavirus time-series dataset using D3 v7's `d3.csv` method. It displays essential metadata about the fetched data in a large preformatted text block, including the number of rows, column count, and file size in kilobytes. The code computes these values by accessing `data.length`, `data.columns`, and measuring the length of the formatted CSV string via `d3.csvFormat`. The visualization serves as a practical demonstration of remote CSV loading and basic data inspection.

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map displays the global prevalence of HIV/AIDS among adults aged 15–49 for the year 2017, using a sequential yellow-orange-red color scale to indicate infection rates. Countries with missing data appear in grey. The visualization renders world countries as SVG paths using d3.geoPath with a geoNaturalEarth1 projection, overlaid with graticule and interior boundaries. Data from the IHME CSV is joined to country geometries via ISO numeric codes, while React manages the application state.

Loading thumbnail…

Log Scale

This chart visualizes the monthly cumulative total of dead and missing migrants from the Data Canvas Sense Your City dataset. It uses a log-scale y-axis to display the data range, with time represented on the x-axis. The visualization is rendered as an SVG using React, with D3.js handling scales, binning, and axis generation. Histogram bins aggregate the data by month, and each bar's height reflects the sum of the metric, with hover tooltips providing exact values.

Loading thumbnail…

Missing Migrants

This bar chart visualizes the monthly totals of dead and missing migrants from the Data Canvas Sense Your City dataset. Each bar aggregates the sum of per-incident counts within calendar months, displayed on a time-based x-axis and a linear y-axis. Built with React and D3 v5, the visualization uses `d3.bin` and `d3.timeMonths` to create monthly bins, `d3.scaleTime` and `d3.scaleLinear` for scales, and renders SVG rectangles for the marks with native tooltips showing exact values.

Loading thumbnail…

Brushing

This example links a bubble map and a date histogram to explore missing migrant incidents. The map projects circles sized by the total dead and missing using d3.geoNaturalEarth1 and d3.geoPath, while the histogram bins monthly counts with d3.bin and d3.scaleTime. Users can brush the histogram with d3.brushX, which dynamically filters the map's circles to show only incidents within the selected date range. Data comes from a CSV of reported migrant deaths, and the visualization is built with React and rendered as SVG.

Loading thumbnail…

Missing Migrants Date Histogram

This visualization combines a geographic bubble map with a time-series histogram to examine the global distribution and monthly totals of missing migrants. The map uses a D3 geoNaturalEarth1 projection with graticule and country borders, while circle size encodes the total dead and missing per location. The histogram below aggregates the same data into monthly bins using D3's histogram and scaleTime utilities. The project is built with React and D3 v5, rendering to SVG via geoPath and scaleSqrt for the proportional bubble radii. Data comes from a CSV of the Missing Migrants Global dataset.

Loading thumbnail…

Missing Migrants on a map

This map visualizes the global locations of missing migrants, with circles sized proportionally to the total number of dead and missing individuals at each coordinate. Built with React and D3 v5, it uses a geographic natural Earth projection via `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and interiors from TopoJSON world-atlas data. Circle radii are scaled using `scaleSqrt` based on the dataset’s values, with data loaded from a CSV via `csv`. The SVG output is styled with custom CSS for land, sphere, and city elements.

Loading thumbnail…

Points on a map

This example displays a world map with city points scaled by population using a square-root scale. The map is rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, showing land masses, interiors, graticule, and sphere outlines. City circles are positioned via the projection and styled with opacity, while the component structure uses React with custom hooks to load TopoJSON world data and CSV city data. The visualization clearly communicates population distribution across the globe.

Loading thumbnail…

Interactive Color Legend

An interactive scatterplot of the Iris flower dataset, where users can select which attributes to plot on the X and Y axes via React dropdowns. Hovering over the color legend highlights points of a specific species, dimming all others. The visualization uses React with D3 v5 for scales and SVG rendering, with axes and marks built from reusable components. Data is loaded via `d3.csv` from a remote gist.

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, plotting sepal and petal measurements against each other. Users select X and Y axes from dropdown menus, with points colored by species and a color legend identifying the three categories. The visualization uses D3 v5 scales and axes (scaleLinear, AxisBottom, AxisLeft) within a React framework, rendering SVG circles via the Marks component. Data is loaded asynchronously from a CSV file using d3.csv, with ordinal color encoding via d3.scaleOrdinal and react-dropdown handling user selections.

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus switch which numeric attribute appears on the x- and y-axes, while a categorical color scale distinguishes the three iris species. Powered by React and D3 v5, the SVG visualization uses `scaleLinear`, `scaleOrdinal`, and `csv` to load and render data from a GitHub gist, with axis and mark components built from reusable React functions.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that control the X and Y axes. The visualization uses React for state management and dynamic UI updates, with D3.js scaleLinear and extent functions for scaling data to SVG coordinates. Custom AxisBottom and AxisLeft components render ticks and labels, while Marks components draw the circles representing individual iris flowers. The code also incorporates the react-dropdown library for the menu interface and CSS styling with the Poppins font.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between measurements by selecting which attributes appear on the x- and y-axes via dropdown menus. The visualization uses React with D3 v5 to render SVG circles, with scales and axes built through d3.scaleLinear and d3.axis components. Data is loaded asynchronously from a CSV file using d3.csv, and axis labels update dynamically based on menu selections.

Loading thumbnail…

Dropdown Menu

This example demonstrates a dropdown menu for selecting a pet from a list of six options (dog, cat, hamster, parrot, spider, goldfish). It uses React’s `useState` hook to manage the selected value, with the `Dropdown` component rendering a `<select>` element and handling changes via `onSelectedValueChange`. The menu is styled with large fonts, and the current selection is logged to the console. The code relies on React 16.9.0 and ReactDOM to render the interface.

Loading thumbnail…

React Starter Code

This example demonstrates a minimal React setup where the message "Hello React!" is rendered directly into the page. The code imports React and ReactDOM, defines a simple functional component named `App`, and mounts it to the `#root` element using `ReactDOM.render`. It relies on the production builds of React 16.9.0 loaded via CDN, with the main application logic contained in a separate bundled JavaScript file. No data visualization or external libraries are used beyond the core React framework.

Loading thumbnail…

Map of the World

This example visualizes the world using a Natural Earth projection, displaying landmasses, country borders, a graticule, and the spherical outline of the globe. The map renders as SVG, with land filled in yellow and interiors drawn as gray mesh lines. It loads geographic data from the World Atlas TopoJSON via `d3.json` and converts it into GeoJSON features using `topojson.feature` and `topojson.mesh`. The visual marks are generated with `d3.geoNaturalEarth1` and `d3.geoPath`, while React manages the component structure.

Loading thumbnail…

Working with Time

A line chart displays temperature readings over the course of a week in San Francisco, using a smooth curved path to emphasize trends. The visualization employs React to render SVG elements, with D3 v5 scales (scaleTime and scaleLinear) mapping timestamps and temperatures, while reusable axis components generate tick marks. Data is loaded asynchronously via d3.csv from an external URL, and the brush-free chart includes hover tooltips on circles for precise time values.

Loading thumbnail…

Scatter Plot

A scatter plot visualizes the relationship between sepal length and sepal width in the Iris dataset. Each circle represents a flower sample, with a tooltip revealing its exact sepal length. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes, `extent` for domain calculation, and SVG for rendering. The code handles CSV data loading through a custom `useData` hook, with axis components and marks created via React components.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of the top ten countries in 2020 using horizontal bars. The visualization uses React state to load and manage data from a UN Population CSV file, with D3 v5 utilities like `csv()`, `scaleBand()`, and `scaleLinear()` to map values. SVG rectangles render the bars, colored orange with a Poppins font, while axes include formatted tick labels using `format('.2s')`. Tooltips appear via SVG `<title>` elements, and the chart is fully responsive to its 960x500 frame.

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart ranking the top 10 countries by population for 2020, using SVG rectangles to encode population values along the x-axis and country names along the y-axis. The visualization is built with React for component management and d3.v5 utilities, including `scaleBand`, `scaleLinear`, `csv`, and `max` for data loading and scaling. The data originates from a UN Population 2019 CSV file, fetched via d3's `csv` method and stored in React state with the `useState` and `useEffect` hooks. Custom React components for axes and marks handle the SVG rendering, with the chart embedded in a full-viewport body and production builds of React and D3 loaded via CDN.

Loading thumbnail…

Axes with React and D3

This example shows a horizontal bar chart of the top 10 countries by population, using React to manage the loading state and D3 utilities for data parsing and scale construction. The code loads UN population data from a CSV file via `d3.csv`, converts the population column to numbers, and slices the first ten rows. React's `useState` and `useEffect` hooks handle asynchronous data fetching, while D3's `scaleBand` and `scaleLinear` position bars and ticks. The SVG output renders custom axis lines and labels manually, without using `d3.axis`.

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 using 2020 UN population data loaded via `d3.csv`. The chart uses `d3.scaleBand` and `d3.scaleLinear` to map country names and population values to SVG `rect` elements within a translated `<g>` group, with explicit margins separating the inner plot area from the SVG edges. React state and the `useEffect` hook manage asynchronous data loading, while the entire visualization is rendered as SVG inside a React component.

Loading thumbnail…

Bar Chart D3

This example displays a horizontal bar chart of the top ten countries by 2020 population, using bars that scale in length according to each country's population value. The visualization loads data from a CSV file via D3's `csv` utility and manages the data with React's `useState` and `useEffect` hooks. It renders SVG rectangles positioned using D3's `scaleBand` for the y-axis and `scaleLinear` for the x-axis, all within a fixed 960 by 500 pixel canvas.

Loading thumbnail…

Fork of Redndering data with React

A React application renders a pie chart of CSS named colors as SVG paths, using D3 to load the CSV data and compute the arc geometry. The code employs the React `useState` and `useEffect` hooks to fetch the data asynchronously and update the chart once loaded, while `d3.arc` and `d3.pie` handle the circular layout. Each slice is filled with its corresponding color hex value from the dataset, demonstrating a simple integration of D3 utilities within a React component.

Loading thumbnail…

Redndering data with React

This example demonstrates how to render a dataset of CSS named colors as horizontal color swatches using React’s state management. The app loads CSV data from a GitHub gist via `d3.csv`, then uses React’s `useState` and `useEffect` hooks to fetch and store the data asynchronously. Once loaded, each row’s `Hex rgb` value is mapped to a div element with a corresponding background color, producing a stacked visual list. The interface also displays a “Loading...” message while the data is pending.

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a circle-marked visualization of religious populations by country, with circle size encoding population and both axes using categorical fields. The chart is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification, and renders to an SVG via Vega. The underlying data is loaded from a CSV using d3.csv, and the visualization includes tooltips through the vega-tooltip Handler. The code applies custom axis and label styling, and sets the chart to fit the full browser window.

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load and parse a CSV file using D3 v7 and display basic statistics about the dataset in a large-text HTML element. It fetches a remote CSV file containing CSS named colors, then uses `d3.csv` to parse the data and reports the number of rows, number of columns, and file size in kilobytes via `d3.csvFormat`. The code also includes a commented-out alternative approach using the Fetch API with `async/await` and `d3.csvParse`.

Loading thumbnail…

Mouse Follower

A React-based SVG visualization tracks the mouse cursor with a single orange circle, updating its position in real time as the user moves across the viewport. The app uses React’s `useState` and `useCallback` hooks to manage the cursor coordinates, while D3’s `arc` import is included but unused. The circle renders via SVG inside a fixed 960×500 canvas, with the initial position centered before any mouse movement. The `onMouseMove` event handler on the `<svg>` element captures client coordinates and triggers a state update, seamlessly animating the follower through React’s rendering lifecycle.

Loading thumbnail…

Smiley Face Part I

A gallery of random smiley faces, each rendered as an SVG, demonstrates the use of React components for modular visualization. The code uses d3's `arc` function to draw the mouth shape and the `range` utility to generate an array of faces. Each face varies randomly in stroke width, eye offset and radius, and mouth dimensions, creating a playful assortment of expressions. The rendering is done through React's `ReactDOM.render`, composing reusable subcomponents like `BackgroundCircle`, `Eyes`, and `Mouth` within an SVG container.