ncube-eng

@ncube-eng·5 public vizzes

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects, with population values formatted in billions. The example builds on a basic bar chart by customizing both axes: the left axis removes tick lines and domain, while the bottom axis uses a tick format that converts "G" to "B" for billions and spans the full inner height. The code employs D3 v5 modules including `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format`, rendering SVG elements with custom axis labels and a title. Population data loads from a CSV file and is multiplied by 1000 to reflect actual figures.

Aug 1, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple cars report as a bulleted list, highlighting the first entry in red. It uses plain HTML with a `<ul>` element and CSS classes to style the page, with the `highlighted` class applying the red color. The React starter code from the `README.md` provides the framework context, while the body content is rendered directly in static markup. The report lists three used vehicles with their prices, and the page is styled with a large monospace font for readability.

Jul 26, 2020

Loading thumbnail…

HTML Starter

A single HTML page displays the text "Hello ncube" in large, light-blue centered type. The example demonstrates a minimal setup for an HTML document with embedded CSS styling and a script tag that logs "Hello JavaScript!" to the browser's developer console. It uses no external libraries, highlighting the bare structure of an HTML file as a starting point for visualization projects.

Jul 26, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, and a line—styled with CSS and positioned directly in an HTML document. It shows how SVG elements can be given inline attributes like `fill`, `stroke`, `stroke-width`, and a `transform` group to control color, outlines, and placement. The code uses no JavaScript libraries, relying purely on native SVG markup and a small external stylesheet that resets the page margins. A red-highlighted class in the CSS hints at potential text styling, though no text elements appear in the rendered graphic.

Jul 26, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a group transform—styled inline and via CSS. It shows how shape attributes like `fill`, `stroke`, `stroke-width`, and `cx`/`cy`/`r` control appearance and position, with a highlighted class defined in styles.css. Rendered directly as SVG within an HTML page, the visualization uses no external libraries, relying solely on native SVG elements and React starter code for structure. The fixed coordinate system and hardcoded attributes illustrate fundamental vector graphics rendering.

Jul 26, 2020