charliekramer

@charliekramer·2 public vizzes

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged in a grid and styled through CSS classes and inline attributes. It shows how presentation properties like fill, stroke, stroke-width, and transforms (scale, translate) apply both directly and via stylesheet rules. The visualization loads D3.js from UNPKG and uses its `select` API to inject a message into an HTML element, while a local ES6 module supplies the text. Rendering relies entirely on SVG markup within the HTML file, with CSS controlling the appearance of grouped elements.

May 6, 2022

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded JSON dataset. It demonstrates loading D3 and using local ES6 modules in VizHub. The code imports the parsed `cars` array from `cars.js` and writes the first car’s make into a `<pre>` element via the DOM API. It uses `JSON.parse` on an embedded string to structure the data.

May 5, 2022