Skip to main content
SimilarExport ZIP
100%

DataViz

✓ Published0🌍 Public
MMisha Lubich
Last edited Jun 23, 2020
Created on Jun 23, 2020
Forked from HTML Starter

This visualization displays a bar chart of the Morley speed-of-light experiment data, with experiment run numbers on the x-axis and speed measurements on the y-axis. The page includes Google sign-in functionality and a Bootstrap-styled navigation bar. Built with React, it uses D3 v5 APIs including `d3.csv`, `d3.tsv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to fetch data from a remote CSV and render the chart within an SVG.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This bar chart displays the frequency of letters from a CSV data source, with bars that can be clicked to highlight or dim selections. The visualization uses React 19 to manage state and render the UI, while D3 v7 handles the SVG rendering, scales, axes, and bar elements. The chart includes interactive features such as hover effects and click-to-select, with smooth CSS transitions on bar fill and opacity. Data loading uses D3's `csv` parser, and the SVG is drawn with responsive dimensions tracked via a `ResizeObserver`.

NNita
73% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This bar chart displays the frequency of letters from a CSV data source, with bars that can be clicked to highlight or dim selections. The visualization uses React 19 to manage state and render the UI, while D3 v7 handles the SVG rendering, scales, axes, and bar elements. The chart includes interactive features such as hover effects and click-to-select, with smooth CSS transitions on bar fill and opacity. Data loading uses D3's `csv` parser, and the SVG is drawn with responsive dimensions tracked via a `ResizeObserver`.

NNita
73% match
Loading thumbnail…

Data Viz w/ D3 And React

This visualization displays all CSS named colors as horizontal SVG bars, stacked vertically in a 960-pixel-wide column. The React component fetches color data from a remote CSV file using the `csv` function from D3 v6, then renders each row as a div with its corresponding RGB hex value as the background color. The example demonstrates integration of D3’s data-loading utilities within a React state management flow, using hooks like `useState` and `useEffect` to handle asynchronous data fetching and display a loading message until the dataset arrives.

AAndres de la Garza
73% match
Loading thumbnail…

Viewing Data with React & D3

A bar chart displays the number of video plays per course from a 10,000-person MITx dataset, sourced via CSV from a GitHub gist. Loaded into React with `useState` and `useEffect`, the data drives a D3 SVG visualization using `scaleBand` for courses on the y-axis and `scaleLinear` for the x-axis, rendering axis ticks and rectangles without axes.

Ssophburke
73% match
Loading thumbnail…

Loading data with React

This example demonstrates how React state manages data loaded asynchronously with D3 utilities. A bar chart displays quantitative values with axes, using D3's `scaleLinear` for positioning and `axisBottom` for tick labels. The visualization renders SVG elements generated through React components, with hover interactions highlighting individual bars. Data originates from a CSV file fetched via `d3.csv`, and the loaded dataset populates the chart after a state update triggers re-rendering.

Nn.koldovsky@gmail.com
73% match
Loading thumbnail…

React & D3 Vibecoding Starter

This example shows an interactive bar chart of letter frequencies from a CSV file, rendered in React with D3.js. The visualization updates responsively to window resizing via ResizeObserver and allows hover to change bar color and click to select or deselect bars. The code demonstrates a modular architecture where React manages state and component lifecycle, while D3 handles SVG rendering, scales, and axes through its `scaleBand`, `scaleLinear`, and `axisBottom`/`axisLeft` APIs.

CCurran Kelleher
72% match
Loading thumbnail…

Actually Visualizing data D3 and react

A React application maps CSV color data to horizontal bars while displaying a reusable SVG face composed of components for background, eyes, and mouth. The face uses D3’s `arc` generator for the mouth path and SVG linear gradients for the eyes. Data loads asynchronously via `d3.csv` from a GitHub gist, with each row rendered as a colored div sized by the CSV’s hex values. The visualization demonstrates combining D3’s data utilities with React’s component model, though only the loading state and bar rendering are visible in the provided code.

JJonas Carvalho
72% match
Loading thumbnail…

Loading

This example displays a minimal bar chart of food deliciousness ratings from a CSV file, with the data loaded asynchronously using the D3 `csv` method. The code creates an SVG container and fetches `data.csv` to log the parsed data to the console, though no visual encoding is currently rendered beyond the empty SVG element. It relies on D3 v5 and is embedded within a React framework, serving as a basic template for data loading and inspection.

NNaveenaS12
72% match