Alish Shrestha

@AlishShresth·6 public vizzes

Fork of Fork of Loading Data with React & D3

This example visualizes a dataset of CSS named colors as a pie chart, with each slice filled using its corresponding hexadecimal color value. It loads the data from a remote CSV file using D3’s `csv` function, then manages the async data loading with React hooks (`useState` and `useEffect`). The chart is rendered as SVG paths computed by D3’s `pie` and `arc` generators, with the arc’s outer radius set to the full viewport width, creating a large, color-coded circular layout. React’s `useCallback` is also imported, though not used, and the data is fetched only once on mount.

Nov 25, 2023

Loading thumbnail…

Fork of Loading Data with React & D3

This work presents a pie chart of CSS named colors, partitioned into equal slices for each color. Built with React and D3, it uses the `d3.csv` function to load color data from a remote gist URL, and the `d3.pie` and `d3.arc` utilities to generate SVG paths. React’s `useState` and `useEffect` manage the asynchronous data loading, displaying "Loading..." until the data arrives.

Nov 25, 2023

Loading thumbnail…

Fork of Loading Data with React & D3

This example visualizes CSS named colors as a horizontal stacked bar chart, where each row represents a color by its RGB hex value. It loads color data from a CSV file using D3’s `csv` utility, then manages the asynchronous data fetching with React’s `useState` and `useEffect` hooks. While the data loads, a large “Loading...” message appears. The rendering maps each color entry to a div element with a fixed width and height, using the hex value as the background color. The code relies on React 16.9, D3 v5, and the `ReactDOM.render` method.

Nov 25, 2023

Loading thumbnail…

Loading data with D3

This example demonstrates asynchronous data loading in a React application using D3. It fetches a CSV file containing CSS named colors, then displays a summary message showing file size, row count, and column count once the data arrives. The implementation uses React hooks (`useState` and `useEffect`) to manage state and trigger the `d3.csv()` request, while a helper function calculates and formats the data metrics. The visualization renders as pure SVG text, with a loading state displayed before the data is fetched.

Nov 25, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates a minimal interface for inspecting a CSV dataset of CSS named colors. It displays the file size in kilobytes, the number of rows, and the number of columns using large, readable text. The visualization loads the remote CSV file using `d3.csv`, which returns a promise, and the results are rendered directly into an HTML `<pre>` element. The code also includes commented-out alternatives using the Fetch API with async/await, contrasting different approaches to asynchronous data loading.

Nov 25, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a yellow smiley face in an SVG, composed of a circle, two eyes, and a mouth. Built with React and D3 v7, it uses D3’s `arc` generator to create the mouth path, while the face and eyes are simple SVG circles. The component structure defines a reusable `BackgroundCircle`, and all elements are positioned relative to a center point using SVG transforms.

Jul 24, 2023