Skip to main content
Log in
Z

zarioualid@gmail.com

@OualidZari·8 public vizzes

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a network of draggable nodes connected by links, rendered with SVG inside a React component that uses d3.forceSimulation to compute positions. Clicking a node enables an attack button that injects a new red node and link into the graph. The code builds the visualization with d3.forceLink, d3.forceManyBody, and d3.forceCenter, and handles dragging through d3.drag. Static data defines three initial nodes and two links, with no external data source.

Jun 21, 2024
Loading thumbnail…

Scatter Plot 2

This example displays the top 10 most populous countries as a horizontal bar chart, showing population values with abbreviated tick labels. The chart uses React to render SVG elements, with D3 scale functions (`scaleBand` and `scaleLinear`) mapping country names and population data. Axes are custom-built components, and the data comes from the United Nations World Population Prospects 2019 dataset. Tooltips display formatted population values on each bar.

Jun 20, 2024
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping sepal width and sepal length for individual flowers. The visualization uses D3 v5 functions like `scaleLinear` and `extent` to compute scales, while React components render SVG circles for each data point, complete with tooltips displaying the exact measurements. The chart includes styled axes with tick marks, and the data is loaded asynchronously via the `csv` function from a remote URL. The clean design, featuring teal markers and a Poppins font, emphasizes the distribution and correlation between the two sepal dimensions across the flower species.

Jun 20, 2024
Loading thumbnail…

Bar Chart

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React and D3 v5, with SVG rendering for the marks and axes. Population values are formatted in billions using D3’s `format` function, while `scaleBand` and `scaleLinear` position the bars. Hovering over each bar reveals a tooltip with the population figure via the native SVG `title` element.

Jun 19, 2024
Loading thumbnail…

Interaction with React

This example demonstrates how to integrate React with D3 for data visualization. It shows a React component that fetches and parses a CSV file containing named CSS colors from a GitHub gist, using the Fetch API and d3.csvParse. The code renders a simple React app with a heading, while the fetched data’s columns and length are stored in a Promise. The visualization uses React 16.9 and D3 v5, loaded via UMD scripts, with ReactDOM rendering the component into the DOM.

Jun 18, 2024
Loading thumbnail…

Fork of React Starter

This example renders a single centered message, “Hello React!”, using the React library. It demonstrates the basic setup for a React application with a minimal HTML page and a JavaScript entry point. The code imports React and `createRoot` from `react-dom`, defines a functional component, and mounts it to the `#root` element in the DOM. Styling is applied via CSS, and the page loads React and ReactDOM from a CDN.

Jun 18, 2024
Loading thumbnail…

Fork of Let's Make a Face Part I

The visualization renders a full-screen smiley face built from a composite `Face` component, which layers a yellow `BackgroundCircle`, `Eyes`, and a `Mouth` shaped by D3’s `arc()` into an SVG container. The code also includes an interactive overlay: a black circle tracks the mouse via React state, adjusting its radius based on cursor coordinates. While the primary face is commented out, the active app uses React’s `useState` and `useCallback` to handle `onMouseMove` events, updating the circle’s position dynamically within the SVG.

Jun 17, 2024
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing CSV data by fetching a remote file containing CSS named colors, then outputting its raw contents to the browser console and a large-text HTML element. The code uses the JavaScript `fetch` API within an asynchronous function to retrieve the text from a GitHub gist URL, relying on Promises and `async`/`await` syntax. It leverages the D3.js version 5.11 library for its scripting environment, though the core task here is straightforward data ingestion rather than visual rendering. The visualization ultimately displays no chart, focusing instead on the initial data-loading stage.

Jun 17, 2024