mrdeevid

@mrdeevid·3 public vizzes

Making a Bar Chart

This example displays a horizontal bar chart of the populations of the ten most populous countries, based on 2018 United Nations estimates. The chart uses D3 v7 with SVG rendering, relying on `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Data is loaded from a CSV file with `csv()`, and axes are drawn via `axisBottom` and `axisLeft`. Bars appear in steelblue, with dimensions mapped from population values and country names.

Mar 7, 2022

Loading thumbnail…

Shapes with SVG and CSS

This example constructs a smiling face out of basic SVG shapes—circles, rectangles, and a path—drawn inside a 960 by 500 pixel canvas. The face is centered using a `transform` on a group, with static features like the yellow head, black outline, eyes, and an arc-based mouth. The eyebrows are rectangles that animate up and down using sequential `d3.transition()` calls, each lasting two seconds. The code leverages the D3.js v7 library's `select`, `append`, `attr`, and `arc` APIs within a React framework, rendering entirely as SVG.

Mar 7, 2022

Loading thumbnail…

HTML Cars Report

This example displays a static HTML report listing three used cars with model years, manufacturers, and prices. The page uses plain HTML for structure and CSS for styling, with a monospace font and a red class called `.highlighted` applied to the first list item. It demonstrates fundamental web technologies—HTML elements, a CSS stylesheet linked via `styles.css`, and no JavaScript logic. The rendering relies entirely on the browser’s default layout, showing a simple data table as an unordered list without any visualization libraries or dynamic data processing.

Mar 7, 2022