Ammar Ehab

@Ammar-Ehab·6 public vizzes

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population trends over time by region, with a movable vertical line that updates the selected year on hover. The visualization uses d3.scaleTime, d3.scaleLinear, d3.nest, and d3.line with curveBasis to render smooth paths from UN population estimates and medium-variant projections (1950–2100). A d3.ordinal color scale distinguishes regions via a legend, while mouse events trigger year selection through d3.mouse and axis inversion. SVG rendering handles all elements, including gridlines, labeled axes, and an interactive overlay rect.

Aug 16, 2022

Loading thumbnail…

Fork of Stylized Line Chart

This interactive chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset, using a stylized line chart with rotated axis labels and a clean, minimalist aesthetic. The visualization is built in React with D3 v5's scale functions and line generator, using `curveNatural` for smooth path interpolation. SVG rendering, tick marks with custom colors, and a Poppins font create a polished, lightweight presentation. Axis components are separate, re-used modules, showing a modular approach to the chart’s construction.

Aug 13, 2022

Loading thumbnail…

Mouse Follower

The visualization displays a single circle at the center of an SVG canvas. As the mouse moves over the canvas, the browser logs the cursor’s X and Y coordinates to the console using the `onMouseMove` event handler. Built with React and rendered as an SVG element, the circle’s static position is defined by `circleX` and `circleY` constants. The example demonstrates basic event handling and coordinate tracking without any dynamic visual response.

Aug 13, 2022

Loading thumbnail…

Stylized Line Chart

This visualization presents a stylized line chart of weekly temperature data from the Data Canvas Sense Your City dataset, plotting temperature over time in San Francisco. Built with React and D3 v5, it renders an SVG with time-scaled x-axis and linear y-axis, using Poppins typography and teal-colored circular marks. The chart displays axis ticks via custom components, includes hover tooltips through SVG `<title>` elements, and implements responsive loading states while fetching data from a GitHub-hosted CSV file.

Aug 8, 2022

Loading thumbnail…

Hello HTML

A single yellow circle with a thick black outline is drawn at the center of an SVG canvas. The example illustrates the minimal structure of an HTML page embedding SVG directly, with the circle positioned at coordinates (480, 250) and a radius of 200 pixels. The code uses standard HTML and inline SVG, with CSS to remove page margins and hide overflow. No external libraries or data sources are involved; the rendering is entirely self-contained within the `index.html` file.

Aug 1, 2022

Loading thumbnail…

Fork of Hello HTML

This example shows a blank HTML page, defined entirely by a minimal `index.html` file that contains an empty body. The code uses no external libraries or APIs, relying solely on standard HTML structure to render a page with no content or data visualization. The page’s purpose is to demonstrate the simplest possible starting point for an HTML document, with no scripts, styles, or visual elements. Its behavior is limited to displaying an empty web page, as no other files or resources are referenced.

Aug 1, 2022