Abdessalem Lagraf

@Lagrafabdessalem·8 public vizzes

Start

This example renders a horizontal bar chart of the top ten countries by 2020 population using React and D3 utilities. It loads CSV data from a GitHub gist via the `d3.csv` method, then maps each row’s population to bar widths using `d3.scaleLinear` and country names to vertical positions with `d3.scaleBand`. The SVG bars are generated as React `<rect>` elements, with the dataset displayed in descending order.

Sep 19, 2022

Loading thumbnail…

Fork of Refactored Bar Chart

A bar chart displays the top 10 most populous countries, with horizontal bars ranked by population for 2020. The visualization uses React for component composition and d3 v5 for scales (`scaleBand`, `scaleLinear`), data loading via `d3.csv`, and SVG rendering with custom axis components for bottom and left tick labels. The data comes from the United Nations World Population Prospects 2019. Empty space and missing axes in the README contrast with the full implementation shown in the code.

Sep 19, 2022

Loading thumbnail…

Fork of A Bar Chart(Platform)

A bar chart displays global, EU, JP, NA, and other regional sales for the top 500 video games across different platforms, sourced from Kaggle. Users select a sales region via a React dropdown, updating the y-axis and bars. The SVG rendering uses React components with D3 v5 scaleBand and scaleLinear, while CSV data is loaded via d3.csv.

Sep 19, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a bar chart of the top ten countries by population for 2020, rendered as an SVG using React and D3. It loads CSV data from a GitHub gist with d3.csv, then maps the data to scaleBand and scaleLinear scales for country and population axes. React components render the axes and rectangles via SVG, and a d3-based tick system draws gridlines.

Sep 5, 2022

Loading thumbnail…

learn

A grid of eight randomly generated smiley faces rendered as SVG, demonstrating component reuse in React with D3.js. Each face varies in stroke width, eye offset, eye radius, mouth width, and mouth radius, computed via `Math.random()` within the `range` utility from D3. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, with the mouth path generated using the D3 `arc` generator. The faces are mounted into the DOM via `ReactDOM.render`, using D3 v5 and React 16.9.

Sep 4, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face is drawn responsively across the full browser window, with eyes and a head sized relative to the viewport dimensions. The example demonstrates how React components render SVG elements dynamically, using JavaScript to compute coordinates from `window.innerWidth` and `window.innerHeight`. React 16.9.0 manages the component tree via `ReactDOM.render`, while the SVG markup relies on standard circle elements with transforms, coordinates, and stroke properties. The face includes a filled head with a black outline, two eye circles, and mouth measurements precomputed in variables, though the mouth itself is not drawn in the visible code.

Sep 3, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen smiley face using React and SVG, with the head, eyes, and mouth positioned relative to the window dimensions. The code imports the `arc` function from D3 v5 to generate the curved mouth path, while React handles the component structure and props like `stroke-width` and radius values. Static circles and an arc path define the facial features, all drawn dynamically based on computed dimensions for the viewport.

Sep 3, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal React application that renders a simple “hello” heading to the DOM. The code uses React and ReactDOM from unpkg, with `ReactDOM.render` targeting a root element. Although an SVG with circles is present in the HTML, it is commented out, so only the heading appears. The page uses inline CSS to reset margins and hide overflow.

Sep 3, 2022