irasheed01

@irasheed01·4 public vizzes

SVG

This example demonstrates basic SVG shape rendering within an HTML page, organizing circles, rectangles, lines, paths, and polygons in nested groups. The SVG canvas scales the entire composition with a `transform` attribute, while a second group applies a further scale to the polygon. Cascading style sheets define red stroke styling for the `.lines` class, including a darkened path with rounded joins and caps, plus a light-blue stroked, dark-blue filled polygon. The code uses raw SVG elements—`circle`, `rect`, `line`, `path`, `polygon`—with inline attributes for fills, strokes, and coordinate positions, showing static vector graphics without external libraries.

Nov 24, 2019

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small, hard-coded dataset. It loads a JSON array of five cars, each with a year, make, model, and price, from the `cars` module using `JSON.parse`. The `index.js` file accesses `cars[0].make` and sets the text content of a `<pre>` element with `id="message-element"` in `index.html`, rendering the string “Honda” in large font. The visualization is static and relies on plain JavaScript DOM manipulation, not any charting or animation libraries.

Nov 23, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example shows how to construct a cartoon face using SVG shapes and D3.js. It renders a grey background and draws facial features with D3 selections. The code uses the `select` API from D3 v5 to target the SVG element and applies styling through the `style` method. The visualization demonstrates basic SVG manipulation with D3, including setting background colors and preparing geometric elements.

Nov 23, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and color styling using inline attributes and CSS classes. It shows circles, rectangles, a line, and a polyline path, with fill colors applied directly (like red or `#83cc2a`) and inherited through group elements. The code uses SVG’s `<g>` elements for transforms (`scale`, `translate`), plus CSS rules to control stroke properties such as width, linejoin, and linecap. Rendering is entirely client-side via the SVG DOM, with no external libraries or data sources.

Nov 22, 2019