RajaeKrib

@RajaeKrib·5 public vizzes

Create a Bar Chart with D3 and React

This example demonstrates a bar chart built with React and D3, displaying internet usage percentages across UN countries from a CSV file fetched via an external URL. The visualization renders each data point as a rectangle within an SVG canvas, with dimensions of 960 by 500 pixels, using the `d3.csv` parser to load the data asynchronously. The React component manages state through hooks (`useState`, `useEffect`) and maps the dataset to generate the chart elements, while the HTML page loads both React and D3 libraries from CDN. The code includes a loading state that displays a message before data arrives.

Aug 20, 2021

Loading thumbnail…

Loading data with React and d3

This example demonstrates how React and d3 can work together to load and display a CSV dataset, showing the file size, row count, and column count as plain text. The React component uses the `useState` and `useEffect` hooks to manage loading state and fetch data once on mount via `d3.csv`, while `d3.csvFormat` calculates the data size. The message updates from "Loading..." to the summary once the data from the GitHub-hosted CSV file arrives. It uses React 16 and d3 v7, with ReactDOM rendering the result into the page.

Aug 15, 2021

Loading thumbnail…

parse data with d3

This example demonstrates how to parse a CSV file with D3, displaying the dataset’s size in kilobytes, row count, and column count on a styled webpage. It loads monthly death records from a GitHub-hosted CSV URL using `d3.csv()`, then formats the parsed data with `d3.csvFormat()` to calculate its byte length. The results are rendered as large text inside a `<pre>` element. The visualization uses D3 v7 within a minimal HTML page, showing the core data-loading and metadata-summarizing workflow without any charting or graphical output.

Aug 15, 2021

Loading thumbnail…

Mouse Interaction with React

A circle rendered as an SVG element follows the mouse cursor within a fixed 900×500 viewport. The React component `App` tracks pointer coordinates via an `onMouseMove` handler, updating the circle's `cx` and `cy` attributes through state managed by `useState`. The initial position is centered at half the width and height. React 16.13.1 and ReactDOM render the interactive graphic, which updates smoothly as the user moves the mouse over the SVG area.

Aug 15, 2021

Loading thumbnail…

Loading data using fetch

This example demonstrates how to load external CSV data asynchronously in the browser using the Fetch API. It fetches a raw CSV file of monthly death counts from a GitHub gist, then logs the returned text to the console. The code uses a custom `fetchText` function that awaits the response and extracts plain text via `response.text()`. The visualization is minimal, with no charts or rendering—it focuses solely on the data-loading step using vanilla JavaScript within an HTML page.

Aug 15, 2021