pilafGB62

@pilafGB62·4 public vizzes

Let's make a face with D3.js

This example displays a horizontal bar chart of country populations using D3.js, with bars rendered as SVG rectangles. The chart scales bar widths linearly against population values and positions them along a band scale for country names. The code imports specific D3 modules (`select`, `csv`, `scaleLinear`, `max`, `scaleBand`) to load data from a CSV file, parse population numbers, and bind the data to rectangle elements. Each bar’s height is set by the band scale’s bandwidth, creating a simple, clean visualization of comparative country sizes.

Jun 12, 2020

Loading thumbnail…

Let's make a face with D3.js

A yellow circular face with black eyes, eyebrows, and a curved mouth is drawn and animated using D3.js v5. The code builds the face with SVG shapes, positioning elements relative to the center of a 960×500 canvas. Eyebrows rise and fall repeatedly via chained `transition().duration(2000)` calls on the parent group. The mouth is generated using the `d3.arc()` helper with specified inner/outer radii and angular span, while the `select` API attaches elements to the SVG root.

Jun 11, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling, showing circles, rectangles, lines, and paths arranged in grouped layouts. The code uses raw SVG elements—including circle, rect, line, and path—with attributes like fill, stroke, and transform, while CSS classes apply stroke properties and line joins. A YouTube embed in the README hints at presentation context. The visualization serves as a static showcase of SVG's native geometric primitives and styling capabilities without any JavaScript libraries.

Jun 11, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML-based report listing three used cars with their model years and prices, highlighting the first entry. The page uses plain HTML markup for the list structure and a linked CSS file for styling, with the body set to a large monospace font. The highlighted list item is styled with a red text color via the `.highlighted` class, while the other two items use default styling.

Jun 10, 2020