CarlIssac

@CarlIssac·4 public vizzes

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives and styling within a static webpage. It shows a line, a path, a circle, a rect, and a filled circle, all grouped inside a scaled `<g>` transform. The code uses raw SVG elements defined directly in the HTML, with CSS providing layout resets and overflow control. No JavaScript libraries are involved; rendering relies solely on the browser’s SVG support.

Nov 19, 2019

Loading thumbnail…

Untitled

This example visualizes a network of interconnected nodes and edges using D3.js. The graph employs `d3.forceSimulation` to position nodes and links, with paths rendered as thick, rounded lines in a dark teal color against a white background. The visualization demonstrates a force-directed layout, where the simulation calculates node positions and link paths dynamically. It uses SVG paths with `stroke-linejoin` and `stroke-linecap` set to round for smooth connections, while the `styles.css` file defines the visual styling for the lines and their paths.

Nov 19, 2019

Loading thumbnail…

Hello VizHub

This example displays a large, centered "Hello VizHub!" message in a bright Ubuntu font against a dark navy background. It demonstrates a minimal D3.js setup where the `select` function targets a `<div>` element and sets its text content using the imported `message` constant. The page relies on an ES6 module for the string and a linked stylesheet for typography and color, serving as a basic template for VizHub projects.

Nov 19, 2019

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small inline JSON dataset. It demonstrates asynchronous data loading and DOM updates, using a custom `GetCars` function that returns a Promise resolving after a two-second delay. The page initially shows “loading…” via direct textContent assignment, then replaces it with “Honda” once the data resolves. The code uses ES6 modules, a template literal for JSON, and the `getElementById` API to interact with the DOM.

Nov 19, 2019