jediknight956

@jediknight956·3 public vizzes

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with two black eyes and an arc-based mouth positioned relative to the center of the 960x500 viewport. The code explicitly sets circle radii, coordinates, and fill/stroke attributes, while the mouth uses the d3.arc() helper to generate a path with defined inner and outer radii and angle ranges. Static geometric values define the face’s proportions, with no dynamic data or interaction involved.

Sep 5, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS classes. The SVG canvas is scaled and translated using transform groups, showing how shape fill, stroke, and stroke-width properties work. It uses raw SVG elements with CSS from `styles.css` to apply black strokes and rounded line joins to path elements. The rendering relies entirely on standard SVG markup and CSS, with no additional JavaScript libraries.

Sep 5, 2019

Loading thumbnail…

HTML Cars Report

This example presents a simple cars report as a static HTML list of three used vehicles with prices. It uses basic HTML markup with an unordered list and plain text content, styled through a linked CSS file using monospace font and large font size. The report highlights the first car entry, a 2012 Nissan Leaf, with red text via the CSS `.highlighted` class, while the other two cars remain in default black. The code relies solely on core HTML and CSS, with no JavaScript libraries or external data sources.

Sep 5, 2019