NickJolly

@NickJolly·4 public vizzes

Hello VizHub

This example loads a CSV file of national populations and logs the parsed data to the console, demonstrating the basic data-loading workflow in VizHub. The code uses `d3.csv` to fetch `data.csv`, which contains country names and population figures, and attaches a promise callback to inspect the resulting array of objects. The page itself renders only an empty `<section>` element, while the JavaScript handles all data processing; no chart is drawn. Styling is applied via an imported Ubuntu font and a large base font size.

Sep 6, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal VizHub project structure, showing how an HTML page can load external CSS and JavaScript resources. The index.html file contains an empty body element, while the style.css file defines the page’s visual styling. It illustrates the basic scaffolding required for a VizHub visualization, with the HTML serving as the container and the CSS providing formatting. The example uses no JavaScript libraries or data sources, focusing purely on the static document and styling setup.

Sep 6, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a simple data-visualization starter using a hard-coded JavaScript array of car objects from a local module. The page displays the model field of the first car entry inside a large, styled HTML element. The code imports the `cars` array and the `select` function from D3 v5, then uses `select('#message').text()` to render the text content. The visualization relies on plain DOM manipulation rather than SVG, canvas, or data joins, with styling provided by an external CSS file.

Aug 26, 2019

Loading thumbnail…

Cars Report

This example displays a large, centered “Hello World” message on a dark blue background using the Ubuntu font. The page is styled entirely through CSS, with the body configured for full-screen text and a light color scheme. The code uses plain JavaScript to select the `message-element` from the DOM and set its text content, while the HTML structure loads the bundled script and stylesheet. It demonstrates a minimal setup where layout and typography are controlled via `styles.css`.

Aug 26, 2019