Musikdude

@Musikdude·4 public vizzes

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled with CSS, setting the entire visualization’s background to red via a style property. The code uses D3 v5’s `select` function to target the `<svg>` element and apply the background color directly. The visualization consists of a bare 960-by-500 pixel SVG canvas embedded in an HTML page, with styling separated into an external stylesheet. It highlights the simplicity of combining D3’s selection API with CSS-based visual customization.

Feb 14, 2020

Loading thumbnail…

Shapes with SVG AND CSS

This example demonstrates how basic SVG shapes—circles and rectangles—can be styled and grouped using both inline attributes and CSS. It shows three sets of shapes: the first uses default black fill, the second uses explicit inline fill colors, and the third applies a `fill` attribute to a `<g>` group to style all contained shapes. The code also defines a `.highlighted` CSS class, though it is not applied to any visible element. The SVG is rendered directly in the HTML document with a fixed 960×500 viewport, using standard SVG elements and a linked external stylesheet.

Feb 13, 2020

Loading thumbnail…

Hello Boss

This example demonstrates a minimalist HTML page with a large “yo” heading and a three-item bullet list, where one list item is visually highlighted in red. The design relies entirely on a monospace font and an oversized text size to create a bold, retro terminal aesthetic. The code uses plain HTML elements (`h1`, `ul`, `li`) with styling applied through a linked CSS file that sets the body font size and family, and defines a `.highlighted` class for the red text. No JavaScript libraries or data sources are present; the rendering is static and purely document-based.

Feb 13, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based car report generated from a JSON array of car objects. The page initially displays the make of the first car, while a separate module, `generateReport.js`, filters cars by price and formats them with `formatCar`. Data loading is simulated asynchronously via `getCars()`, which returns a promise after a two-second delay. The code uses native JavaScript `JSON.parse`, array methods `filter` and `map`, and ES6 module exports, with the final output rendered into an HTML `<pre>` element.

Feb 13, 2020