david-fon

@david-fon·6 public vizzes

Customizing Axes

This example displays the populations of the world’s top billionaires as a horizontal bar chart, using data from a sample CSV with United Nations estimates. It builds on a basic bar chart by customizing both axes: the left y-axis labels are cleaned of tick lines and the domain, while the bottom x-axis uses `scaleLinear` and `axisBottom` with a custom tick format that converts billions to "B". The chart is rendered in SVG using D3 v5, with margins and labels styled via external CSS.

Dec 6, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the ten most populous countries using 2018 estimates from the United Nations World Population Prospects 2017, with values converted to millions via `d3.format` and county names on a band scale. It demonstrates custom D3 axes: the y-axis removes its domain and tick lines, while the x-axis applies a custom tick formatter and full-height tick marks, with an axis label appended via `axisBottom`. The data is loaded from a CSV using `d3.csv` and rendered as SVG rectangles with `scaleLinear` and `scaleBand`.

Dec 6, 2020

Loading thumbnail…

let us make a bar chart

This example presents a horizontal bar chart of population figures for ten countries, rendered as an SVG composed of steelblue rectangles on a white canvas. The visualization is built with D3 version 6, using `scaleBand` and `scaleLinear` to map country names and population values to pixel coordinates. Axes are generated with `axisLeft` and `axisBottom`, while the data is loaded from a local CSV file. The chart displays the final ranked list of countries sorted by their population.

Dec 6, 2020

Loading thumbnail…

Periodex

A radial visualization depicts the hierarchical power-of-two rhythmic subdivisions in a 4/4 time signature. Based on an L-System grammar, the pattern grows through twelve iterations, producing nested arcs that represent musical note values. The visualization uses React and D3 v5, specifically leveraging `d3.scaleBand` for angular and radial positioning, and `d3.arc` to render the SVG paths with rounded corners.

Dec 1, 2020

Loading thumbnail…

HTML Starter

This example shows a bare minimum HTML page that renders the text "Hello HTML" in the center of the viewport, styled with CSS at a font size of 13 em units. It also demonstrates basic JavaScript execution by logging "Hello JavaScript!" to the browser console via the console.log API. The page uses plain HTML, CSS, and JavaScript without any external libraries, serving as a minimal template for web development.

Nov 29, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that renders a simple SVG graphic consisting of two connected line segments forming a broken path. The visualization uses raw SVG elements—a `<line>` and a `<path>`—drawn with a thick black stroke, while CSS centers the content on a large 13em font-size body. JavaScript logs a message to the browser’s developer console, and the SVG is scaled using a transform attribute. No external libraries are used; the code relies purely on native HTML, CSS, and JavaScript APIs.

Nov 29, 2020