Mei

@Masiesworld·4 public vizzes

Making a Bar Chart

A horizontal bar chart displays population counts for ten countries, sorted alphabetically by country name. Each bar’s length is scaled linearly from zero to the maximum population, while the y-axis uses a band scale for country labels. The visualization is built with D3 v5, using `d3.csv` to load data, `scaleLinear` and `scaleBand` for axes, and SVG rectangles for bars. The chart includes left and bottom axes generated with `axisLeft` and `axisBottom`.

Dec 30, 2020

Loading thumbnail…

Making Face with D3.js

A cheerful yellow face is drawn with D3.js (v6) in an SVG, featuring a circle for the head, two outlined eyes, and an arc-based mouth. The right eyebrow animates upward and back down over four seconds using chained `transition().duration()` calls, while the left stays static. Shapes are built with `select`, `append`, and `arc` from the D3 API, centered via a translated group. The SVG background is LightYellow, and data is hardcoded as numeric constants for positioning.

Dec 29, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a 960×500 canvas and scaled uniformly. It shows how attributes like `fill`, `stroke`, and `stroke-width` can be applied directly or inherited through an enclosing `<g>` group, while CSS classes (`.lines`, `.lines path`) override stroke properties with RoyalBlue and a rounded line join. The code uses raw SVG elements and a linked stylesheet (styles.css), with transforms such as `scale()` and `translate()` to position and resize the shapes.

Dec 27, 2020

Loading thumbnail…

My Car Report

This example renders a text-based report of cars filtered by price. It shows a list of car descriptions, each formatted with year, make, model, and price, for vehicles priced under $2,000. The visualization uses React with a simple data array parsed from JSON, and the report is generated by filtering the data and mapping it through a custom formatting function. The output is inserted into an HTML element using vanilla JavaScript DOM manipulation via `getElementById`.

Dec 19, 2020