atifroome@gmail.com

@atifroome·4 public vizzes

first

This example presents a minimal web page that outputs the text "Hello World!" into the browser using D3.js version 3. It demonstrates the most basic D3 selection and DOM manipulation API, `d3.select`, which targets the document's `body` element and appends a new paragraph (`p`) containing the string. The visualization is a static text rendering, relying on HTML and CSS for display, and serves as a simple starting point for learning JavaScript-based graphics. No data source is used; the content is hardcoded in the page's script.

Aug 2, 2024

Loading thumbnail…

Fork of SVG Fundamentals

A compact demonstration of SVG fundamentals uses overlapping red and green circles, an ellipse, and a thick red line to illustrate basic shape and path rendering. The example relies on native SVG elements such as `<circle>`, `<ellipse>`, and `<line>`, with minimal HTML/CSS for full-viewport display. A significant portion of the code is commented out, including a `<rect>` and complex `<path>` data, leaving only these core primitives visible. The rendering approach is purely client-side, using the SVG namespace directly within an HTML document, with no external libraries or data sources.

Feb 21, 2024

Loading thumbnail…

Fork of HTML Starter

This example displays a minimal HTML page that renders the text “Hello HTML!” centered in the browser window using CSS, with the message styled at a very large font size of 13em. The code uses a plain HTML `<div>` element with a class selector, styled via an embedded `<style>` tag, and includes no JavaScript or external libraries. It demonstrates the fundamental structure of an HTML document, with the `<!DOCTYPE html>` declaration and basic `<head>` and `<body>` sections, serving as a bare-bones starting point for web development.

Feb 21, 2024

Loading thumbnail…

Fork of D3-Histogram

This example presents a histogram of earthquake impact magnitudes in Hawaii, using a bar chart to display the frequency distribution across magnitude bins. The chart includes labeled axes for impact magnitude and earthquake count, with a title indicating the dataset’s subject. Built with D3 v6 and React, the visualization loads CSV data via `d3.csv`, computes bins using `d3.histogram`, scales positions with `d3.scaleLinear`, and renders SVG rectangles styled with a teal fill. Axes are generated through `d3.axisBottom` and `d3.axisLeft`.

Feb 21, 2024