Abdulazizfh

@Abdulazizfh·10 public vizzes

Documentation Dashboard

This dashboard displays software documentation usage as a compact, monospace-styled list of three categories (elie, m, a) with corresponding use-case counts (5, 10, 43). The rendered HTML lists the numbers as plain text items without interactive elements, relying solely on static markup and CSS. The page uses a simple `<ul>` structure with custom styling from `styles.css`, which sets a large 4em monospace font for readability, but does not employ any JavaScript libraries, data bindings, or dynamic rendering. The example demonstrates a minimal, typography-focused documentation overview.

Feb 24, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a static composition of SVG shapes, including circles and rectangles, with varied fill colors and strokes, while a broken line and polyline path show stroke styling. The scene is wrapped in a `<g>` group with a scale transform. The implementation relies directly on SVG elements and CSS rules from `styles.css`, where the `.lines` class applies a black stroke and the path receives a teal color with rounded line joins and caps. No JavaScript or external library is used for the rendering.

Feb 24, 2021

Loading thumbnail…

Let's a face with

A single large circle spans the center of the SVG canvas, its radius fixed at 400 pixels and positioned at the midpoint of the 400-pixel-tall viewport. The visualization uses D3 v6’s `select` method to append a `Circle` element to the SVG, setting its `r`, `cx`, and `cy` attributes directly. The circle’s styling is minimal, with the page’s body margins removed and overflow hidden, focusing the viewer’s attention entirely on the geometric shape. The rendering relies on standard SVG primitives rather than data-driven joins or simulation forces.

Jan 27, 2021

Loading thumbnail…

Let's a face with

A red SVG canvas displays a blank space where a face could be drawn, but no visual elements are rendered. The example sets the background color using D3.js v6, specifically calling `d3.select('svg').style('background-color','red')` on an SVG sized 1000x400. The code includes an inline script and loads D3 from a CDN, with a linked stylesheet controlling the page layout. The visualization demonstrates basic SVG selection and styling through D3’s selection API.

Jan 27, 2021

Loading thumbnail…

Let's make a face with

This example demonstrates how D3.js (v6) can load and structure car data using JavaScript modules, filtering vehicles by price and formatting each entry as a readable string. The visualization renders inside an SVG container, although the primary focus is on an educational tutorial that uses `import`/`export` statements across `formatCar.js`, `generateReport.js`, and `getCars.js`. A bundled script (`bundle.js`) connects the modules to the HTML page, while the code defines a `generateReport` function that filters cars under a specified maximum price and maps them to formatted text output. The example emphasizes modular coding practices rather than interactive graphical elements.

Jan 27, 2021

Loading thumbnail…

Fork of Fork of Let's make a face with

A yellow face with a black outline appears on a red background. The face features two circular eyes, rectangular eyebrows, and a mouth shaped as a semi-circular arc. The eyebrows animate by moving downward and back upward over a four-second cycle. The visualization is built using D3.js, with SVG shapes (`circle`, `rect`, `path`) positioned via transforms. The mouth is drawn using D3's `arc` function, and the eyebrow animation is driven by chained `transition` calls. The red background is set via an inline SVG style.

Jan 27, 2021

Loading thumbnail…

Fork of Responding to Resize

This example demonstrates a full-page SVG that dynamically resizes to match its container. It uses D3 v5 to select the chart div and append an SVG element, then defines a redraw function which extracts the container’s CSS-computed `clientWidth` and `clientHeight` to set the SVG’s attributes. A green diagonal cross is drawn with `selectAll` and data-bound `line` elements, merging enter and update selections. The function runs initially and listens for the browser `window` `resize` event, redrawing the graphic to fill the viewport.

Jan 27, 2021

Loading thumbnail…

Lets make a face

A yellow face with black-outlined features animates its eyebrows in a repeating bounce, rising and falling over two-second intervals. The face is built with D3 selections and SVG shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the D3 `arc` generator for the mouth. The entire composition is centered within an SVG canvas using a translated group, and the eyebrow motion is controlled by chained D3 transitions that alternate the group's vertical position.

Jan 27, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example uses D3.js to construct a smiley face entirely from SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth drawn with an arc path. The code demonstrates fundamental DOM manipulation by selecting an SVG element, appending groups and shapes, and applying transforms. The eyebrows animate by chaining two `transition().duration(2000)` calls that shift their vertical position up and then back down, cycling through a curious expression. All shape attributes, such as radii and spacing, are defined as constants, and the face is centered using a translation based on the SVG's height and width.

Jan 27, 2021

Loading thumbnail…

Fork of Cars Report

This example shows a text-based car report generated from a hardcoded JSON array of five vehicles, displaying only those priced under $2,000. It demonstrates modular JavaScript organization by separating data retrieval, formatting, and report generation into distinct files. The code uses native `Promise` and `setTimeout` to simulate an asynchronous data fetch via `getCars()`, then applies `Array.filter()`, `Array.map()`, and `Array.join()` in `generateReport` to produce the final output. The page displays a loading message that is replaced with the car listing using DOM manipulation through `document.getElementById()`.

Jan 27, 2021