chreec

@chreec·4 public vizzes

Fork of HTML Starter

This example shows a minimal HTML page displaying the text “Hello HTML” in large, centered type. The code uses plain CSS for styling and JavaScript for a console log message, serving as a basic demonstration of web fundamentals. It highlights how HTML, CSS, and JavaScript integrate in a single file, with the script writing “Hello JavaScript!” to the browser’s developer tools. This is a stripped-down starter template with no external libraries, ideal for understanding core web technologies.

Aug 12, 2021

Loading thumbnail…

D3.js Intro: Make a face!

This example demonstrates the fundamental D3.js workflow by rendering a simple face from a circle on an SVG canvas. The code explicitly sets the circle’s radius, horizontal center, and vertical center using the SVG’s width and height attributes, positioning it centrally. It imports the `select` function from the d3 module to attach the shape, and also imports a local ES6 module to display a greeting message in a separate div. The SVG is styled with a dark background and large Ubuntu font via CSS, with a fixed 960 by 500 pixel viewport.

Jul 21, 2021

Loading thumbnail…

Fork of Hello VizHub!

This example displays the text “Hello VizHub!” centered on a dark gray background, with the message rendered in a large, Ubuntu font. The visualization uses D3.js version 5, specifically the `select` API to target a `div` element and set its text content from an imported ES6 module. A separate CSS stylesheet defines the page’s color scheme, typography, and text alignment, while the HTML file loads D3 from a CDN and runs a bundled JavaScript file that combines the main script and the message module.

Jul 21, 2021

Loading thumbnail…

Fork of Cars Report

This example demonstrates a JavaScript-based data report that filters a list of cars by price and formats the results into a readable text presentation. The visualization uses the Promise-based `getCars` function to asynchronously retrieve a hardcoded JSON array of five car objects, then applies a filter for cars priced under 2000 and maps each entry to a formatted string. The final message, which initially displays "Loading..." before the data arrives, is rendered in large type via the `textContent` property of an HTML `<pre>` element. The modular structure uses exported functions (`formatCar`, `generateReport`) and relies on standard JavaScript array methods like `filter`, `map`, and `join` for processing.

Jul 21, 2021