Muhammed AbuOdeh

@mabuodeh·12 public vizzes

Fork of Mouse Follower incomplete

This example displays a smiling face drawn with SVG circles, but the implementation is incomplete. The code uses React (version 16.9) to render a simple interface that fetches a CSV file of CSS colors via d3.csv, showing the total count of loaded data. The commented-out SVG markup reveals the intended yellow face with black stroke, eyes, and a mouth, though the active React component only prints the data length. The visualization relies on React hooks (useState, useEffect) and the d3 library for data loading, with the final rendering approach—whether the face will integrate the data—left unresolved.

Feb 27, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors using D3 v5. The page uses the `d3.csv` method to fetch the remote dataset and logs the parsed result to the browser console. The code also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, as well as a minimal display of dataset statistics. The visualization serves as a practical introduction to asynchronous data loading techniques in D3.

Feb 27, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading a remote CSV file and inspecting its raw text output. The visualization itself is minimal, displaying no graphical chart; instead, it prints the fetched CSV data to the browser console. The code uses the `fetch` API with async/await to retrieve the data from a GitHub gist containing CSS named colors. While the page includes commented-out examples using D3.js v5 functions like `d3.csv` and `d3.csvParse`, the active implementation only logs the text response to the console, showing the loading process without further processing or rendering.

Feb 27, 2021

Loading thumbnail…

Fork of Smiley Face Part VI incomplete

The visualization displays a grid of eighteen randomly generated smiley faces, each with unique eye positions, radii, stroke widths, and mouth dimensions. The faces are rendered as SVG elements using React components, with the `arc()` API from d3-shape constructing the mouths. React Fragments group the eyes, while a FaceContainer wraps the SVG and applies a translation transform. Each face uses randomized parameters generated by `Math.random()` within a range, producing varied expressions across the grid.

Feb 27, 2021

Loading thumbnail…

Fork of Smiley Face Part V incomplete

This example shows a smiley face composed of a yellow circular background, two eyes, and a mouth, all rendered as SVG elements within a React application. The face is centered using an SVG `<g>` transform, with a fixed viewport of 960 by 500 pixels. The code uses React components for each facial feature, with the mouth generated using the D3 `arc` function to create a curved path. The visualization relies on React for component structure and D3’s geometry utilities for the mouth’s shape, using D3 v5.

Feb 27, 2021

Loading thumbnail…

Fork of Smiley Face Part IV incomplete

This fork of the “Smiley Face Part IV” example renders a yellow smiley face using React components and D3’s `arc` generator for the mouth. The SVG drawing includes a background circle with a thick yellow fill and black stroke, two offset eye circles, and a mouth path formed by an arc with inner and outer radii. D3 v5 supplies the arc shape, while React 16.9 manages the component hierarchy and JSX markup. The code does not include interactivity or animation, and the face is statically centered in a 960×500 viewport.

Feb 27, 2021

Loading thumbnail…

Fork of Smiley Face Part III incomplete

This interactive smiley face visualization, rendered with React and D3.v6, displays a simple geometric face that scales to fill the browser window. The face consists of a large yellow circle with black stroke, two eye circles, and a mouth drawn as an arc using D3’s `d3.arc()` generator, which computes the SVG path for a partial ring. The HTML includes commented-out static SVG markup, but the live version uses dynamic dimensions from `window.innerWidth` and `window.innerHeight` to position elements via a centered `<g>` transform. The example is incomplete, as no JavaScript interaction or animation is implemented.

Feb 27, 2021

Loading thumbnail…

Fork of Smiley Face Part II incomplete

A partially completed smiley face is rendered as an SVG, showing a yellow circular head with black outline and two black eyes, but no mouth. The React app uses ReactDOM to render the SVG into the DOM, with circle positions and dimensions computed from constants like `centerX`, `centerY`, `eyeOffsetX`, and `eyeRadius`. The code demonstrates a fork of a prior example, with the mouth element commented out, leaving the visualization incomplete.

Feb 27, 2021

Loading thumbnail…

Fork of Smiley Face Part II complete

This example shows a yellow smiley face with two black eyes, rendered inside a scalable SVG canvas that fills the browser window. The face is centered dynamically, with its size and feature positions calculated from the viewport dimensions. The visualization is built with React, using `ReactDOM.render` to draw SVG circles for the face, eyes, and stroke outlines. The code leverages React's component model to define the SVG elements, with coordinates and radii computed relative to the window's center and height.

Feb 27, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I incomplete

A yellow circle with a thick black outline dominates the SVG canvas, flanked by two smaller, unfilled black circles. The composition resembles an incomplete face, with the main body drawn and the eyes positioned but lacking pupils or other features. The visualization is built using static SVG elements—specifically three `circle` elements—within an HTML page. It relies on hardcoded coordinates and styles rather than any JavaScript libraries or data-driven methods, rendering directly in the browser.

Feb 26, 2021

Loading thumbnail…

Fork of Hello HTML incomplete

This example presents a nearly empty HTML page with a blank body, serving as an incomplete fork of a basic “Hello HTML” template. The page structure uses minimal markup with a title element but no visible content or data visualization. It includes an embedded YouTube video link in the README, though the browser page itself renders nothing interactive. The code relies solely on standard HTML tags without any JavaScript libraries, D3.js functions, canvas APIs, or rendering engines. The demonstration highlights the starting point for a visualization project, where the body remains intentionally empty for future additions.

Feb 26, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I complete

A static SVG face built from basic geometric shapes uses three circles to form a yellow head and two black eyes on a 960 by 500 canvas. The code sets the face’s position and size through explicit `cx`, `cy`, and `r` attributes, with the head’s stroke width calculated to align its edge precisely. This example demonstrates foundational SVG markup for constructing simple illustrations without any JavaScript libraries or data binding.

Feb 26, 2021