marouan-ben

@marouan-ben·14 public vizzes

Axis with React and D3

This example visualizes the top 20 countries by 2020 population as a horizontal bar chart, using React for rendering and D3 for data loading and scales. It fetches CSV data with `d3.csv` and constructs band and linear scales via `d3.scaleBand` and `d3.scaleLinear`. Axes are hand-drawn as SVG lines and text elements, with ticks generated from `xScale.ticks()`. The React component manages state with hooks (`useState`, `useEffect`) and updates the SVG output accordingly.

Sep 29, 2023

Loading thumbnail…

Pathetic Bar Chart V0

The example shows the 20 most populous countries in 2020 as horizontal bars, sorted by population with country labels on the y-axis. It loads CSV data from a GitHub-hosted UN Population dataset using D3’s `csv` utility, then renders SVG rectangles via React. The bar widths are scaled with `d3.scaleLinear` and the y-axis positions with `d3.scaleBand`, with margins applied via an SVG transform.

Sep 29, 2023

Loading thumbnail…

Rendering Data with React & D3

A radial burst of CSS named colors fills the screen, with each slice rendered as a colored arc emanating from the center. The example demonstrates a React component that loads color data from a CSV file using D3's `d3.csv`, then uses `d3.pie` to compute the arcs and `d3.arc` to generate the SVG paths. React manages the component state and renders the SVG elements, while D3 handles the data loading and geometry calculations. The visualization shows all colors equally weighted, with each slice's fill set directly from the data's RGB hex value.

Sep 17, 2023

Loading thumbnail…

Rendering Data with React & D3

This example visualizes the CSS named colors dataset as a radial burst by rendering each color as a thin horizontal strip. React manages the application state and component rendering, while D3’s `csv` utility loads the data from a remote gist URL. The visualization displays all colors in a single column of stacked 4-pixel-high divs, with each div’s background set to the corresponding hexadecimal value from the dataset.

Sep 17, 2023

Loading thumbnail…

Rendering Data with React & D3

This example visualizes CSS named colors from a CSV dataset as a radial burst, with each color rendered as a colored block. It loads data using D3’s `csv` utility and manages asynchronous state with React’s `useState` and `useEffect` hooks. The visualization displays a loading message until the data arrives, then maps each row to a colored div, though the final layout and styling are incomplete in the provided code. React and D3 are integrated directly through imports, with React handling the DOM rendering.

Sep 17, 2023

Loading thumbnail…

Loading Data from React & D3

This example displays summary statistics about a CSV dataset—file size in kilobytes, row count, and column count—in a large text element. It loads the CSS Named Colors dataset from a GitHub gist using D3 v5’s `d3.csv` method, which returns a promise, and then renders the results via React-compatible DOM manipulation. The code also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, illustrating different ways to handle asynchronous data loading in a React and D3 context.

Sep 17, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel economy data from the UCI Auto MPG dataset, plotting cylinders against horsepower with circles colored by origin and sized by weight. It uses the Vega-Lite API to declaratively define the scatter plot, with tooltips showing car names. The visualization leverages d3.csv to load the data, Vega-Lite’s config for axis and label styling, and renders via Vega’s SVG output. The chart fills the browser window with an interactive tooltip handler from vega-tooltip.

Sep 17, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data, displaying a message that reports the file size in kilobytes, the row count, and the column count of the dataset. The code uses D3 v5’s `d3.csv` function to fetch a remote CSV file containing CSS named colors from a GitHub gist, then applies `d3.csvFormat` to compute the size and accesses the parsed data’s length and `columns` property. Comments in the code also illustrate alternative approaches using `fetch`, `async`/`await`, and `d3.csvParse` for manual text handling.

Sep 11, 2023

Loading thumbnail…

pointer moving

A yellow circle tracks the mouse pointer across an SVG canvas, updating its position in real time as the user moves the cursor. The visualization uses React state management with the `useState` and `useCallback` hooks to capture mouse coordinates via the SVG `onMouseMove` event. The circle’s `cx` and `cy` attributes are bound to the current mouse position, and it is rendered at a fixed radius of 30 pixels. The code initializes the circle at the center of a 960 by 500 viewport. No external data source is involved; the interaction is purely mouse-driven.

Sep 11, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This interactive visualization displays a smiley face that follows the mouse cursor across an SVG canvas. Using React state management, the component tracks pointer movement through an `onMouseMove` event handler and updates the circle's `cx` and `cy` coordinates in real time. The code renders a single yellow circle with a black outline using React's declarative SVG elements, while React's `useState` and `useCallback` hooks manage position updates efficiently.

Sep 11, 2023

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This example shows a smiley face constructed from modular React components, with a yellow circular background, two black eyes, and an arc-shaped mouth. The face is built using SVG elements within a `<g>` transform, positioned by center coordinates. The mouth is generated using the `d3.arc()` API to create a path with specified inner and outer radii and angles. React's component structure passes props for dimensions and styling, while D3 v7 provides the arc generation for the curved mouth.

Sep 10, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and display the raw contents of a CSV file in the browser console. It uses the JavaScript `fetch` API to retrieve a remote CSV file containing CSS named colors, and then parses the response using the `text()` method. The fetched data is logged directly to the console without any further processing or visualization rendering. The page itself contains only a static "Hello HTML!" message.

Sep 10, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a stylized smiley face composed of a yellow circular background, two black eyes, and an arc-shaped mouth, all centered within an SVG viewport. The face is built from modular React components, with each part—such as the background circle, eyes, and mouth—defined in separate files and composed together. The mouth is generated using the D3 `arc` generator with specified inner and outer radii and angle extents. Rendering relies on React 18 and D3 v7, with SVG elements positioned by translating a group element to the center of the canvas.

Sep 10, 2023

Loading thumbnail…

smilyface 1

A yellow circle with a black outline and two black dots forms a simple smiling face. The static SVG graphic uses basic shape primitives: a large `<circle>` for the head and two smaller circles for the eyes, all positioned absolutely within a 960 by 500 canvas. No animation or interaction is present. The data source is the inline HTML/SVG code itself, rendering directly in the browser without any external JavaScript libraries or charting frameworks.

Sep 9, 2023