mohamedabbessi

@mohamedabbessi·7 public vizzes

tryin smthn

This example shows an SVG bar chart of Tunisia’s GDP from 1971 to the latest year in the dataset, with axes and gridlines. It uses React’s `useState` and `useEffect` to load CSV data via `d3.csv`, then renders the chart with `d3.scaleLinear` for both x and y scales. The bars are drawn as `rect` elements, with a `d3.axisBottom` scale applied to a group element for the x-axis. The data is fetched from a GitHub-hosted CSV file and plotted in a fixed 960×500 viewport.

Oct 15, 2023

Loading thumbnail…

loading data with d3 and react

This example shows a bar chart of Tunisia’s GDP over time, displayed as SVG elements rendered by React. It loads a CSV file using `d3.csv`, then uses `scaleLinear` for the y-axis and `scaleTime` for the x-axis to map data points. The chart displays loading text until data arrives, and renders grid lines with tick labels from the scales.

Oct 15, 2023

Loading thumbnail…

Loading data with React & D3

A React component renders a D3-selected SVG circle that follows the mouse pointer across the viewport. The example demonstrates unidirectional data flow: mouse events call `setState` to update coordinates, which triggers a re-render passing new state to a `viz` function. It uses `d3.select`, `.join('circle')`, and `.attr` to bind the circle’s position to state properties `x` and `y`. The initial state centers the circle, and the SVG resizes to the window dimensions.

Sep 29, 2023

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face follows the mouse cursor across an SVG canvas, with a circle reacting to pointer movement in real time. The visualization is built using React state to track mouse coordinates and re-render the circle's position on every move. The SVG element handles the mousemove event, while React's `useState` hook manages the positional updates. The example uses React 16.9 and renders via ReactDOM into a root div, with the SVG dimensions fixed at 960 by 500 pixels.

Sep 29, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using JavaScript's built-in `fetch` API. The program fetches a CSV file containing CSS Named Colors from a GitHub gist and logs the raw text content to the browser console. The code uses asynchronous `async`/`await` syntax to handle the network request and response parsing, displaying the retrieved data in the console rather than rendering any visual interface. The example focuses on the data acquisition and parsing step, without incorporating any additional visualization libraries or charts.

Sep 28, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as a responsive SVG that fills the entire browser window. React manages the component structure, while D3’s `arc` generator creates the mouth path. The face uses circles for the head and eyes, with fixed offsets and radii, and is centered using a translate transform based on the window dimensions.

Sep 26, 2023

Loading thumbnail…

#1 smiley face

A single yellow smiley face rendered as an SVG graphic. The face consists of a large yellow circle with a black outline, containing two smaller black circles for eyes. The code uses basic SVG elements—`<svg>`, `<circle>`, and CSS styling—to draw the shapes directly in the HTML page. No JavaScript libraries or external data sources are involved; the visualization is purely static markup.

Sep 24, 2023