Akram Gassem

@akramgassem·3 public vizzes

Data viz with Vega-Lite API

This example visualizes live updates from a dataset about U.S. presidents, rendering each update as a bar in a Vega-Lite chart with datetime on the x-axis and author on the y-axis. It uses the Vega-Lite API (`vl.markBar`, `vl.x().fieldT`, `vl.y().fieldN`) to declaratively define the chart, with D3.js (`d3.json`) fetching the data from a GitHub gist. The visualization is customized via a config object, and the final SVG output is appended to the document body through the Vega view’s renderer.

Mar 7, 2021

Loading thumbnail…

React sample

A React component renders an SVG circle that follows the mouse cursor across a 960×600 viewport. The application tracks pointer coordinates through the `onMouseMove` event handler and stores them in state using the `useState` hook. The circle's `cx` and `cy` attributes update reactively as the `mousePostion` state changes, demonstrating a direct integration of React's declarative rendering with SVG. D3.js v6 is loaded but not actively used in this example, which instead relies purely on React 17 and ReactDOM for all interactivity and rendering.

Mar 7, 2021

Loading thumbnail…

Smile face

A grid of eighteen smiling faces, each rendered as a yellow circle with black stroke, eyes, and a curved mouth, appears on a plain background. The faces vary slightly in stroke width and eye radius due to random values. Built with React components, the visualization uses D3’s `arc` generator to create the mouth path and `range` to generate the face count, all drawn as SVG elements.

Mar 7, 2021