avssvd

@avssvd·3 public vizzes

Start with D3.js

This visualization creates a simple smiley face using D3.js selection and shape-generation methods. The code renders a yellow circle as the face, two black circles for eyes, and an arc path for the mouth, centered within an SVG using translation. It demonstrates `d3.select`, `arc`, and SVG attribute manipulation via `attr()`. The example is a minimal starter project that runs with D3 v6 and includes a plain HTML page with separate CSS and JavaScript files.

Feb 25, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using inline attributes and CSS classes. It shows how CSS rules, such as setting stroke width and color on a group with class `lines`, can apply consistent styling to multiple elements. The code uses raw SVG markup within an HTML page, with a linked `styles.css` for presentation. A transform on the outer group scales and translates the entire composition, while nested groups inherit fill and stroke properties, illustrating SVG’s grouping and inheritance model.

Feb 25, 2021

Loading thumbnail…

HTML Cars Report

This example renders a static, unstyled HTML report of three used cars with model, year, and price. The page uses an `<h1>` heading and an unordered list to present the data, with CSS styling applied globally for font size and family, and a `.hilighted` class to highlight the first car entry in red. The code relies on plain HTML, CSS, and JavaScript, with no external libraries or data fetching; the car listings are hardcoded directly in the `index.html` file.

Feb 25, 2021