Khadidja Arezki

@KhadidjaArezki·8 public vizzes

Making a Bar Chart with React & D3

This example shows a horizontal bar chart of country populations for 2022, displaying the top ten countries sorted by their population values. Built with React and D3, it renders SVG rectangles whose lengths are scaled using `d3.scaleLinear` and positioned with `d3.scaleBand`. The chart loads CSV data via `d3.csv` and uses React’s `useState` and `useLayoutEffect` to fetch and update the data, with the final visualization drawn inside an SVG element sized to the browser window.

Dec 29, 2022

Loading thumbnail…

Rendering Data with React & D3

This example renders a full-screen pie chart of CSS named color values, loading the data as CSV from a GitHub gist and mapping each row to a colored slice. The React component uses a `useLayoutEffect` hook to fetch the data and `d3.csv` for parsing, while D3’s `pie` and `arc` generators compute the angles and SVG path geometry. Each slice’s fill is set directly from the hex value in the dataset, producing a dense, colorful disk that reveals the distribution of named colors. D3 v7 and React 16 are loaded via CDN, and the visualization is drawn as static SVG.

Dec 28, 2022

Loading thumbnail…

Vega-Lite API - Bars

This example uses the Vega-Lite API to render an interactive bar chart of the top five religions by country population, sourced from a CSV file via d3.csv. The visualization encodes country on the x-axis, population on the y-axis, and religion as color, with a tooltip showing population on hover. It leverages vega-lite-api’s `markBar`, `encode`, `fieldN`, and `fieldQ` methods, along with d3.v5 for data loading. The chart is configured with a custom dark theme and automatically fits the full browser window size.

Dec 20, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from a CSV file, plotting engine horsepower against miles per gallon. Circle size is fixed, while color encodes vehicle weight and a tooltip displays the car name on hover. The visualization is built using the Vega-Lite API, with `vl.markCircle` defining the marks and `vl.x().fieldQ`, `vl.y().fieldQ`, `vl.color().fieldQ`, and `vl.tooltip().fieldN` specifying the encodings. Data is loaded via `d3.csv`, and the Vega-Lite specification is rendered to SVG using the `vega-lite-api` library with custom axis and label styling from the `config` object.

Dec 13, 2022

Loading thumbnail…

Loading Data with React and D3

A React component displays a summary of a CSV dataset loaded from a GitHub gist, showing file size in kilobytes, row count, and column count in a large monospace text block. The code uses React hooks (useState, useLayoutEffect, useCallback) and D3's csv function to fetch the external color data. If the data is still loading, the screen shows the text "Loading..." until the parsed CSV response arrives.

Dec 12, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates a concise summary of the CSS Named Colors dataset, displaying its size in kilobytes, row count, and column count within a large HTML `<pre>` element. It loads and parses a remote CSV file using D3 v5’s `d3.csv` function, which internally handles fetching and parsing. The resulting data object’s properties are then used to compute and present the statistics, illustrating a straightforward workflow for ingesting tabular data and projecting key metrics into a web page.

Dec 12, 2022

Loading thumbnail…

Interaction with React

This example shows how React manages interactive SVG graphics through a single circle element. As the mouse moves over the viewport, the circle’s center point follows the cursor’s coordinates. The code uses React’s `useState` hook to store mouse position, an `onMouseMove` handler on the SVG element to capture the cursor location, and `ReactDOM.render` to output the visualization. The rendering uses a plain SVG circle with a fixed radius, whose `cx` and `cy` attributes are updated dynamically.

Dec 12, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization assembles a stylized face from reusable SVG components built with React and D3.js (d3.v7). It shows a yellow circular head with eyes, an upper lip, a filled mouth area, teeth, and a gradient-shaded tongue with a drop shadow. The code defines each facial feature as a separate React component, using D3’s `arc` for the mouth arcs and a custom `roundedRect` path for the tongue. The face is centered via an SVG `<g>` transform, with fixed numeric coordinates and styling applied through inline attributes.

Oct 17, 2022