AliciaNiu

@AliciaNiu·7 public vizzes

line with confidence interval

This example shows a line chart with a confidence interval. The visualization loads CSV data from a gist URL using `d3.csv`. The data is parsed and the code retrieves basic information about the dataset, including the number of rows and columns, which is logged to the console and displayed in a message container. The code uses the D3 v7 library, loaded from an external CDN, within a React framework setup.

Jul 19, 2021

Loading thumbnail…

d3 and color

This example shows a color wheel generated from a CSV dataset, where each data row is rendered as a pie slice filled with its RGB color value. It demonstrates loading D3 via UNPKG and using ES6 imports from the local module, with a React component fetching data via `d3.csv` from a GitHub gist. The visualization maps each row to a pie slice using `d3.pie` and `d3.arc`, centering the resulting ring in an SVG canvas with `d3.arc`’s inner and outer radii.

Jul 16, 2021

Loading thumbnail…

Fork of d3 and react to load csv

This example demonstrates how to load and render CSV data using React and D3 within a VizHub project. It fetches a remote CSV file via D3’s `csv` function, then maps each row to a colored horizontal strip whose background color comes from the `RGB` column. The visualization uses React state and hooks (`useState`, `useEffect`, `useCallback`) to manage asynchronous data loading, displaying a "loading..." message until data arrives. D3 is loaded via UNPKG alongside React, with local ES6 modules imported for additional functionality.

Jul 16, 2021

Loading thumbnail…

load data with React and D3

This example demonstrates loading and parsing external CSV data using D3 within a React starter page. It fetches a remote dataset from a GitHub gist via `d3.csv`, then displays the number of rows and columns in a plain HTML `<pre>` element. The visualization updates the page’s text content asynchronously after the promise resolves. The code uses D3 v7’s `d3.csv` with a promise-based `.then` callback, while the page layout is styled with simple CSS. No explicit React components are used; instead, vanilla JavaScript manipulates the DOM directly.

Jul 16, 2021

Loading thumbnail…

load csv

This example demonstrates loading and inspecting a CSV file using D3.js within an HTML page. It fetches data from a GitHub Gist and displays the row and column counts in a large, centered text format. The code relies on `d3.csv()` to parse the remote file asynchronously, leveraging the promise-based `then()` method to process the result. The page uses D3 v7, loaded via a CDN, and updates the `textContent` of a `<pre>` element with the summary information. React is noted in the metadata but not directly used here.

Jul 16, 2021

Loading thumbnail…

Cars Report

A React SVG visualization renders a single yellow circle that follows the mouse cursor as it moves across the canvas. The code imports React for state management and D3’s `arc` module, though only the SVG circle element is used for rendering. Mouse position updates via React’s `useState` and `useCallback`, with the circle’s center coordinates driven by the event’s `clientX` and `clientY` values. The example demonstrates D3 loaded via UNPKG and React DOM integration within an HTML wrapper.

Jul 14, 2021

Loading thumbnail…

Fork of load csv

This example shows a minimal React-style HTML page that fetches and logs a CSV file’s raw text to the browser console. It uses the native Fetch API’s `fetch` and `response.text()` to retrieve data from a GitHub Gist URL, with the result printed via `console.log`. The page’s CSS sets a large font size for the body, but no visualization or chart is rendered; the focus is purely on demonstrating asynchronous text loading.

Jul 14, 2021