ross-fisher

@ross-fisher·10 public vizzes

Input

This example demonstrates two groups of radio buttons for selecting options, with a form that captures and displays the chosen contact method as text output. The page combines static HTML form elements with a JavaScript event listener that uses the FormData API to log submitted values. Styling relies on CSS with monospace fonts, rem-based spacing, and a highlighted class for visual emphasis. The code uses standard browser APIs—including addEventListener, preventDefault, and querySelector—to handle form submission without any external visualization libraries.

Nov 7, 2019

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays population estimates for ten countries, with bars extending from left to right and labeled by country name. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values and country names to pixel positions, while a data join appends `rect` elements to the SVG. Data is loaded from a CSV file using `d3.csv`, with population values parsed as numbers before rendering.

Nov 7, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, and a line—styled and arranged through inline attributes and CSS. It shows how SVG groups (`<g>`) can apply shared fill colors, strokes, and transforms to multiple shapes at once, while individual elements can override those inherited styles. The code uses raw SVG markup within an HTML document, with no external JavaScript libraries, and relies on a linked stylesheet for overall page typography and layout. The rendering approach is purely static SVG, with all positioning and styling declared directly in the markup.

Nov 5, 2019

Loading thumbnail…

Thing

This example demonstrates the basic setup of a VizHub project, displaying a static webpage with the title "Thing" and the text "Hello" on a dark blue background. It loads a small CSV dataset containing country population figures, using the `d3.csv` function to fetch the data from `data.csv` and log it to the browser console. The page styling relies on CSS, importing the Ubuntu font from Google Fonts to render the large, centered text.

Oct 9, 2019

Loading thumbnail…

D3 Intro. Making a face.

This example builds a stylized face using D3.js’ DOM manipulation and SVG elements. It creates a yellow circle as the head, then adds eyes, eyebrows, and a mouth as separate SVG shapes—circles, rectangles, and a path generated with the `arc()` generator. All features are positioned relative to the SVG center using a `<g>` group with a translation transform. The code uses D3 v5 selections (`d3.select`, `append`, `attr`) to construct the scene entirely in code, with no external data source.

Oct 9, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to construct a simple static SVG composition using only HTML and CSS, with no JavaScript. It shows how basic shapes—circles, rectangles, lines, and a path—are positioned and styled to create a graphic. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with attributes for coordinates, fill colors, and stroke properties. CSS classes like `.lines` apply stroke width and line joins, while a `<g>` transform groups shapes and scales them. The rendering approach is pure SVG, with styling handled externally via `style.css`.

Sep 24, 2019

Loading thumbnail…

Hello VizHub

This example displays a large "Hello VizHub!" message in bright text against a dark blue background. The visualization uses D3 v5’s `select` function to target a div element and set its text content. The message itself comes from a separate ES6 module, `myMessage.js`, demonstrating modular code structure. Styling relies on an imported Ubuntu font and CSS properties for color, alignment, and font size. The page loads D3 from a CDN and imports local modules via `bundle.js`.

Sep 24, 2019

Loading thumbnail…

Cars Report (Basic)

The example displays a simple text report of cars, listing each vehicle's year, make, model, and price after a simulated delay. It uses D3.js v5 for DOM selection and formatting, with a custom promise-driven workflow that loads car data from an embedded JSON array. The report filters cars based on a price threshold and renders the results as plain text in an HTML element, styled with the Ubuntu font and a dark, high-contrast theme.

Sep 24, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal “Hello VizHub” page, rendering a single text message using D3.js v5. The visualization sets the text content of a div element through D3's `select` and `.text` methods, importing the message string from a local ES6 module. Styling is handled via an external CSS file with a Google Fonts import, applying a large, centered Ubuntu font against a dark blue background. The code highlights basic D3 DOM manipulation, modular JavaScript imports, and external stylesheet integration in a simple, self-contained example.

Sep 24, 2019

Loading thumbnail…

HTML Cars Report

This example shows a minimal HTML page displaying a plain list of three used cars, each with its model year, make, model, and price. The page uses a monospaced, large font, with one entry highlighted in red. Rendering relies on standard HTML for structure and a linked CSS file, specifically the `.highlighted` class selector, to style the featured car. The data is hardcoded directly in the markup.

Sep 24, 2019