Skip to main content
Log in
R

ryanrholler

@ryanrholler·5 public vizzes

Loading thumbnail…

Let's make a map D3.js

This example demonstrates how to build a simple SVG map using D3.js version 5. The code selects an SVG element from the HTML and reads its width and height attributes to set up the canvas. It imports the `select` and `arc` functions directly from the D3 library, preparing the foundation for drawing geographic paths or shapes. The visualization relies on the D3.js framework with SVG rendering, as specified in the metadata, and is accompanied by a tutorial video link in the README. The map itself is not yet populated with data in the provided JavaScript.

Feb 22, 2020
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population estimates for the ten most populous countries, with bar lengths proportional to each country’s population. Using D3 v5, it loads CSV data via `d3.csv`, converts the population values to numbers, and maps them to pixel widths with `d3.scaleLinear`. The chart renders as SVG rectangles appended to the page, each with a fixed height of 300 pixels, demonstrating a basic data-binding workflow with `.data()` and `.enter()`.

Feb 1, 2020
Loading thumbnail…

HTML Cars Report

This example displays a simple, styled list of used cars and their prices using plain HTML and CSS. The report presents three vehicle entries, with the 2012 Nissan Leaf highlighted in red via the `.highlighted` class. The page is built with a basic HTML `<ul>` list and styled using a CSS `body` rule that sets a large monospace font. No external libraries or JavaScript are used; the rendering relies solely on standard HTML structure and CSS styling.

Feb 1, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles and rectangles—styled with CSS. It shows how shapes can be rendered in an initial row, colored inline via fill attributes in a second row, and then repeated within a translated group element. The code uses raw SVG markup inside an HTML page, with a linked stylesheet that resets margins and sets a highlight color. React is listed as the framework, though the visible code is standalone SVG and CSS without React-specific syntax.

Feb 1, 2020
Loading thumbnail…

HTML Cars Report

This example displays a simple, styled list of used cars and their prices using plain HTML and CSS. The report presents three vehicle entries, with the 2012 Nissan Leaf highlighted in red via the `.highlighted` class. The page is built with a basic HTML `<ul>` list and styled using a CSS `body` rule that sets a large monospace font. No external libraries or JavaScript are used; the rendering relies solely on standard HTML structure and CSS styling.

Feb 1, 2020