windsoftheo

@windsoftheo·5 public vizzes

Making a Bar Chart with D3.js

This bar chart displays the populations of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects. The visualization employs D3.js v6 with SVG rendering, using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Population values are loaded from a CSV file and multiplied by 1000. The chart includes axes generated with `d3.axisLeft` and `d3.axisBottom`, with bars colored steelblue via CSS.

Dec 30, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face from scratch in an SVG canvas, with a yellow circular head, framed by black outlines, two eyes, and an open arc-shaped mouth. The face is centered via a translated group element, and its features are composed of basic geometric shapes: circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc` function for the mouth. The visualization is animated using D3 transitions—the right eye shrinks and regrows over a two-second duration, while the entire eyebrow group shifts vertically and returns, creating a subtle winking and raising expression.

Dec 28, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example shows how to compose basic SVG shapes—circles, rectangles, lines, and paths—within a grouped, scaled canvas. It demonstrates applying both inline attributes and CSS classes to control fill, stroke, and stroke-width, with different styling for inherited properties versus explicit overrides. The code uses raw SVG elements and external CSS, with no JavaScript or D3 APIs, relying on the `g` transform to scale and translate the shapes. The rendering is purely static SVG, illustrating simple declarative vector graphics.

Dec 18, 2020

Loading thumbnail…

HTML Cars Report

This example presents a simple HTML report of used cars, listing three vehicles with their model years, makes, and prices. The page uses a plain HTML list styled with CSS, where the first car entry is highlighted in red using a `.highlighted` class. The rendering relies solely on standard HTML markup and a linked external stylesheet, `styles.css`, which sets a monospace font and large text size. The data is hardcoded directly into the `index.html` file, with no external data source or JavaScript libraries involved.

Dec 17, 2020

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of cars filtered by price, displayed in a large `<pre>` element. It fetches car data from an embedded JSON array via the custom `getCars()` promise, which simulates a two-second delay. The `generateReport` function filters cars under a 2000-dollar threshold using array methods, then formats each entry with `formatCar` before joining lines. The page initially shows "Loading..." and updates to the report using vanilla JavaScript and ES modules.

Dec 17, 2020