Ebrahim Alareqi

@alareqi·4 public vizzes

Shapes and Colors with SVG and CSS

This example demonstrates fundamental SVG shapes and CSS styling within a static web page. It shows circles and rectangles with explicit fills, a group inheriting fill and stroke attributes, and a separate group of lines and paths. The rendering uses inline SVG elements with a scale transform, while CSS classes like `.lines` control stroke color, width, and line joins. No external libraries are used; the implementation relies purely on native SVG markup and a linked stylesheet.

Jul 21, 2019

Loading thumbnail…

Shapes with SGV and CSS

This example renders a single red-framed circle on an SVG canvas, with the page title “Shapes with SGV and CSS.” It uses plain SVG elements—specifically a `<circle>` with fixed coordinates and radius—inside an empty `<svg>` tag, and applies a monospace font and red highlighting via CSS classes. The code does not load any external libraries or data, relying solely on static SVG markup and the linked `style.css` for basic visual styling.

Jul 21, 2019

Loading thumbnail…

HTML Cars reposrt

This example presents a static HTML car report listing three identical 2009 Ford F150 entries, each with the year 2015. It demonstrates basic styling with CSS, using a monospace font and a red highlight class applied to the first list item. The page relies solely on standard HTML elements and CSS rules, with no JavaScript libraries or data-processing frameworks involved. The rendering approach is straightforward DOM markup with stylesheet-defined presentation.

Jul 21, 2019

Loading thumbnail…

Cars Report

This example demonstrates how to generate a text-based car report using D3.js and ES6 modules. It filters a hardcoded JSON dataset of seven cars by a minimum price threshold of $1000, formats each matching entry with the `formatCar` function, and displays the results in a `<pre>` element. The visualization uses `d3.select` and `document.getElementById` to render the final message, while the report logic relies on array methods like `filter`, `map`, and `join`. A dark blue background and Ubuntu font style the output.

Jul 21, 2019