pml31780

@pml31780·4 public vizzes

Shapes with SVG and CSS

This example shows how to draw and style basic SVG shapes—including circles, rectangles, lines, and a path—on a 960×500 canvas. The shapes are grouped and transformed using SVG’s `scale` and `translate` attributes to position and size them. CSS in an external stylesheet (styles.css) defines stroke and fill properties for the groups, including a `.lines` class that sets black strokes and a class-specific path style with a dark teal color and rounded line joins. The page uses plain HTML with linked CSS, no JavaScript frameworks or libraries.

Nov 10, 2022

Loading thumbnail…

Making a bar chart

This example visualizes the population of the top ten most populous countries in 2017 using a horizontal bar chart. The chart maps country names to the y-axis with a band scale and population values to the x-axis via a linear scale, with bars rendered as SVG rectangles. It uses D3 v7 modules including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and formats axis tick labels with `format('.3s')` to display values in billions. The data, from World Population Prospects 2017, is loaded from a local CSV file where population figures are multiplied by 1000.

Nov 6, 2022

Loading thumbnail…

Let's make a face with D3js

A yellow circle face with two eyes and animated eyebrows is drawn using D3.js v7. The code uses `select` to target the SVG element, `arc` for the mouth path, and chained `transition().duration()` calls to animate the eyebrows vertically. The construction translates groups via `.attr('transform', ...)` to position facial features relative to the center.

Nov 5, 2022

Loading thumbnail…

PML31780 01 - HTML Cars Report

This example displays a simple HTML cars report listing three used vehicles with their model years and prices. It demonstrates basic CSS styling and JavaScript-less interactivity, using standard HTML elements like headings, lists, and list item classes. The page applies a monospace font and larger text size via CSS, while a `.highlighted` class turns the Nissan Leaf entry red. The rendering approach relies solely on plain HTML and CSS, with no external libraries or data fetching beyond the hardcoded list content.

Nov 4, 2022