woo

@wooleee·6 public vizzes

CSS

This example demonstrates the fundamental structure of a web page using HTML and CSS, with inline styling applied directly to elements. The page contains an `h1` heading styled with red text, a paragraph, and an unordered list with five items, all placed within a `<div>` wrapper. The code links an external stylesheet (`style.css`) via a `<link>` tag in the `<head>`, while also using the `style` attribute for inline color modification. No JavaScript or interactive data visualization is present; the focus is purely on static markup and basic presentation rules.

Oct 12, 2020

Loading thumbnail…

Making a Bar Chart

A bar chart displays population figures for ten countries, with horizontal bars sized proportionally to each nation’s population. The visualization loads data from a CSV file and renders it as SVG rectangles. The code uses D3 v6 modules including `scaleLinear` and `scaleBand` for positioning, while `csv`, `select`, `max`, and the array data-binding pattern drive the chart construction. The example demonstrates fundamental D3 features like data loading, scaling, and SVG shape generation.

Oct 2, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates a simple smiling face built entirely with SVG shapes, including a yellow circular head, two eyes, animated eyebrows, and an arc-based mouth. The code uses D3.js v6 selections to append and position elements, while `transition().duration()` creates the bouncing eyebrow animation. A single `d3.arc()` path generates the lips, and the central `g` transform centers the composition. The face is drawn with hard-coded geometry values for spacing and radius, without external data.

Oct 2, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes are styled and transformed using CSS and inline attributes. It pairs circles and rectangles with default black fills, red and gray custom fills, and a group inheriting blue fill with black strokes. The code uses SVG elements like `circle`, `rect`, `line`, and `path`, with transformations via `scale` and `translate`. CSS classes like `.lines` define stroke properties, while `.lines path` overrides the stroke color and applies a round line join. The rendering uses inline SVG markup within an HTML document.

Oct 2, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled and transformed using both inline attributes and CSS. It shows circles, rectangles, lines, and a path, with some shapes grouped to share fill and stroke properties, while the `lines` class applies black strokes and a rounded line join. The SVG viewport scales up by 1.5, and a translated group shifts lines and paths into place. The code uses raw SVG elements and CSS rules, with no external JavaScript libraries.

Oct 2, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML report listing three used cars with model years, names, and prices. The page presents the data as a bulleted list, with the first item — a 2012 Nissan Leaf — highlighted in red to draw attention. The report relies on basic HTML markup in `index.html` and a linked `styles.css` stylesheet for the large monospace text and the `.highlighted` red color styling, using standard CSS selectors and properties.

Oct 2, 2020