T

tharuta

@TakumiHaruta·30 public vizzes

Loading thumbnail…

Organization Network Graph

This example shows a simple organization network graph with three nodes—Alice, Bob, and Carol—connected by two directed links. The visualization uses a force-directed layout to position the nodes dynamically, though the rendered circles are only appended without explicit positioning. Built with D3 v6 and React, it employs `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to compute the layout, while rendering occurs via SVG. The data is hardcoded as JavaScript arrays of node and link objects.

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence rates for the year 2017 across countries, with each nation colored on a yellow-orange-red sequential scale according to the percentage of the population aged 15-49 infected. Country boundaries are drawn using d3.geoPath with a geoNaturalEarth1 projection, while graticules and sphere outlines provide geographic context. Data is loaded from the IHME CSV via d3.csv, and country codes are matched to join prevalence values to map features. Gray indicates missing data for countries without reported statistics.

Loading thumbnail…

Multiple Views with Brushing Faster

A world map displays migrant fatalities with scaled circles, while a time-series histogram below shows monthly death counts. Brushing across the histogram filters the map’s circles to the selected date range. The visualization uses React with D3 v5 for `geoNaturalEarth1` projection, `geoPath`, `scaleSqrt`, `brushX`, and `bin` APIs. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Multiple Views with Brushing

A world map displays missing migrant incidents as semi-transparent bubbles, with a linked time-series histogram beneath it showing monthly death tolls. Brushing a time range in the histogram filters the map to show only incidents within that period. The visualization uses React with D3 v5 APIs including `geoNaturalEarth1` and `geoPath` for the map, `brushX` for interactive selection, and `histogram` with `timeMonths` for binning. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Missing Migrants a Map

This visualization combines a bubble map and a date histogram to show the locations and timing of missing migrant incidents. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render world landmasses, graticules, and country borders, with circles scaled by the square root of the total dead and missing per location. The histogram bins the data by month using `d3.bin` and `d3.timeMonths`. Both views use React components and D3 scales, with data from the Missing Migrants Project and country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Fork of Working with Time

This histogram shows the monthly count of dead and missing migrants from the Data Canvas Sense Your City subset, with reported dates on the x-axis and total fatalities on the y-axis. React renders an SVG with d3.scaleTime and d3.scaleLinear axes, while d3.bin groups the data into monthly thresholds and d3.sum aggregates the death counts per bin. Hovering over a bar reveals its exact total via a native SVG `<title>` tooltip.

Loading thumbnail…

Points on a Map

This interactive map displays global city populations as semi-transparent circles on a natural Earth projection, with country boundaries and graticules. The visualization uses d3.geoPath to render the sphere, graticules, and landmasses from the World Atlas TopoJSON. City coordinates are projected using d3.geoNaturalEarth1, with circle radii scaled by d3.scaleSqrt based on population data from a CSV file. The map is built as a React application using SVG for rendering.

Loading thumbnail…

Interactive Color Legend

This scatter plot displays the classic Iris dataset, mapping petal length and sepal width with dots colored by species. Hovering over a species name in the color legend fades out all other points, highlighting the hovered category. Built with React and rendered as SVG, the visualization uses D3 scales (scaleLinear, scaleOrdinal) and custom components for axes and the interactive legend. The data loads via D3’s csv function, with hover effects managed through React state.

Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset displays petal length against sepal width, with points colored by species. An interactive color legend lets viewers hover over species names, which highlights only matching data points while fading all others. Built with React and D3 v5, the visualization uses d3.scaleOrdinal for color mapping, d3.scaleLinear for axes, and SVG circles rendered through React components. Hover state is managed with React's useState hook, triggering opacity transitions on both legend items and the scatter plot marks.

Loading thumbnail…

Interactive Color Legend

This interactive scatterplot of the Iris dataset uses an ordinal color scale to encode species, with a color legend that filters the displayed points on hover. Built with React and D3 v5, it leverages `scaleOrdinal`, `scaleLinear`, and `extent` to map sepal and petal measurements, while the legend’s `onMouseEnter` handler triggers state updates via `useState`. Axes are rendered using custom `AxisBottom` and `AxisLeft` components, and SVG circles represent data points.

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 flower species. Two dropdown menus let viewers select which attributes appear on the x and y axes, while a color legend distinguishes species using d3.scaleOrdinal. The visualization uses React to manage state and render SVG elements, with D3 scales (d3.scaleLinear, d3.extent) handling coordinate mappings and axes. Data loads asynchronously via d3.csv from a remote source.

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot displays the Iris flower dataset, letting users explore relationships between sepal and petal measurements across three species. Color encodes species using a d3.scaleOrdinal with a categorical palette. Users select X and Y axes via ReactDropdown menus, updating the visualization through React state. The chart uses d3.scaleLinear for both axes, with SVG circles rendered by React components, and d3.csv loads the data. Axis ticks and labels are generated using d3 scale methods, with formatted tick values via d3.format.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which numeric attributes appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, it renders SVG circles for each data point, with axes generated through custom React components. The code uses `d3.scaleLinear` for scaling, `d3.extent` for domains, and `d3.csv` for loading data, while `ReactDropdown` provides the menu controls.

Loading thumbnail…

Menu with React

A dropdown menu built with React offers a selection of pet options (dog, cat, hamster, parrot, spider, goldfish), and the chosen value is logged to the console. The page renders an HTML `<select>` element via React’s `useState` and event handling, styled with a large font. D3.js is loaded but unused; the visualization is purely an interactive form component rendered through ReactDOM.

Loading thumbnail…

React Starter

This example demonstrates a minimal integration of React and D3 by rendering a simple smiley face using SVG elements. The code sets up a React component that uses ReactDOM to mount an `App` component into the DOM, while loading React, ReactDOM, and D3 v5 from CDN sources. The visualization shows basic SVG shapes—circles for the face, eyes, and mouth—drawn in plain SVG markup within the React structure. The example serves as a starter template for combining React’s component-based approach with D3’s data-binding capabilities.

Loading thumbnail…

World Map

This example shows a stylized world map rendered as an SVG, displaying land masses in teal with country borders drawn as interior lines, overlaid on a light gray sphere with graticule grid lines. It uses the `geoNaturalEarth1` projection and `geoPath` from d3-geo, with geographic data loaded from the World Atlas TopoJSON file via `topojson.feature` and `topojson.mesh`. The visualization is built with React, managing the data-fetching lifecycle in a custom `useData` hook and rendering the final map through the `Marks` component.

Loading thumbnail…

Working with Time

This example visualizes temperature readings over the course of a week, using a smooth curved line to trace changes over time. The chart displays the data as an SVG rendered through React, with a time-scaled x-axis and linear y-axis for temperature. The code leverages d3.scaleTime, d3.scaleLinear, and d3.line with curveNatural to create the smooth path, while custom React components handle the axes and marks. Data is loaded from a CSV file containing timestamps and temperature values for San Francisco.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, mapping petal length against sepal width to reveal species clustering patterns. Each point appears as a circular mark with a floating tooltip showing the formatted x-axis value. Built with React and rendered as SVG, the visualization uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.format for tick label formatting. The clean design incorporates a Poppins font, muted axis colors, and custom axis components for a polished, modern aesthetic.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of ten countries using horizontal bars, with the x-axis formatted in billions and the y-axis listing country names. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, while custom axis components generate tick marks and labels. The bars are simple rectangles with tooltips showing the population value, and the layout is styled with a custom Poppins font and muted color palette.

Loading thumbnail…

Refactor Bar Chart

Using React hooks and D3 v5, this visualization displays the top 10 countries by 2020 population as a horizontal bar chart. The SVG rendering uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) that call D3-axis ticks and scale methods. Data is loaded from a CSV via the `csv` promise API in `useData.js`.

Loading thumbnail…

Axes with React & D3

This example demonstrates how React and D3 v5 can be combined to render a bar chart of United Nations population data for 2020, showing the top 10 countries. The visualization uses D3's `csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. React's `useState` and `useEffect` manage the asynchronous data loading, while SVG elements like `<rect>`, `<line>`, and `<text>` are generated declaratively within JSX.

Loading thumbnail…

Fork of Fork of Rendering Data with React

This example shows a horizontal bar chart of the top 10 most populous countries for 2020, using the UN Population 2019 dataset loaded via D3’s `csv` function. The bars are rendered as SVG `<rect>` elements inside a React component, with D3’s `scaleBand` for the categorical y-axis (country names) and `scaleLinear` for the quantitative x-axis (population). React hooks (`useState`, `useEffect`, and `useCallback`) manage asynchronous data loading and state updates. The visualization demonstrates a clean React-D3 integration where D3 handles data parsing and scaling while React owns the component lifecycle and DOM rendering.

Loading thumbnail…

Fork of Rendering Data with React

A colorful pie chart displays CSS named colors from a CSV file, with each slice sized equally and filled with its corresponding RGB hex value. The example integrates React hooks like `useState` and `useEffect` with the d3 v5 APIs `csv` for data loading, `pie` for angle generation, and `arc` for SVG path creation. React renders the SVG paths, while d3 handles the pie geometry and color data mapping.

Loading thumbnail…

Rendering Data with React

This example demonstrates how to render a dataset of CSS named colors as a stacked sequence of horizontal colored bars, each with a fixed width and height. Using React's `useState` and `useEffect` hooks, it fetches data from a CSV file via `d3.csv` and maps each row to a styled `div` element. The visualization relies on React's declarative rendering to translate raw tabular data into visual output, with ReactDOM mounting the component into the document root.

Loading thumbnail…

Vega-Lite API Template

This visualization shows the top five religions by population across countries, with each circle’s color encoding population size and position mapping country and religion. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3.v5, using `vl.markCircle()` for marks and `vl.x().fieldN()`/`vl.y().fieldN()` for categorical axes. The code loads CSV data from a Gist via d3’s `csv()` function, applies a custom config for axis and label styling, and renders responsively to the full window with SVG output.

Loading thumbnail…

Loading Data with React & D3

A React application loads a CSV file of CSS named colors using D3’s `csv` function and displays summary statistics—file size in kilobytes, row count, and column count—in a large monospaced `<pre>` element. The `useEffect` hook triggers the asynchronous data fetch, and the `message` module formats the output using `d3.csvFormat`. Initial loading shows the text "Loading..." until the data arrives.

Loading thumbnail…

Loading and Parsing CSV Data

This example displays three statistics about a CSV file of CSS named colors: its size in kilobytes, row count, and column count, rendered as large text. It loads the data asynchronously using `d3.csv`, which fetches and parses the remote file from a GitHub Gist URL, then formats the results with `d3.csvFormat` and `data.columns`. The visualization is minimal, showing only the parsed dataset’s summary metrics.

Loading thumbnail…

Mouse Follower

A full-screen yellow smiley face is rendered as a React component using SVG. The face is centered and sized relative to the window dimensions, with circular elements for the head, eyes, and a mouth defined by stroke and radius constants. The code uses React and ReactDOM to mount the SVG into the DOM, and it does not include any mouse-tracking logic despite the title. The rendering is static, with no interaction or animation implemented in the provided files.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and parse CSV data using the browser’s native Fetch API, loading a remote file of CSS named colors from a GitHub gist and logging its raw text to the console. It shows the asynchronous pattern of `fetch` with `async/await` and `response.text()`, contrasting it with a commented-out promise-chain version. The page is a minimal HTML structure with inline JavaScript, and no external libraries or frameworks are used, though the README references an alternative React starter approach.

Loading thumbnail…

Smiley Face Part I

Eighteen smiley faces form a grid, each with randomized facial features. A yellow circle with a black stroke serves as the head, while two eyes and an arc-shaped mouth vary in size and position. Built with React components, the visualization uses D3’s `arc` generator to construct each mouth path. The faces render as SVG elements within a container, with random values assigned to stroke width, eye offset, eye radius, and mouth dimensions via `Math.random()`.