Alejandro Torres

@alejandrotor2012·7 public vizzes

Untitled

This example demonstrates a minimal D3.js setup within VizHub, loading the library via UNPKG and using ES6 module imports. The code defines a basic HTML document structure but does not render any visualization or data, as the body is empty and no JavaScript logic is present. It serves as a starter template to verify that D3 and local module imports work correctly, rather than showing a specific chart or interaction. The example highlights the core workflow of importing dependencies and scaffolding an HTML page for future visualization development.

Jan 18, 2022

Loading thumbnail…

Cars Report

This example displays an auto-generated text report on car performance metrics using a simple HTML page. It loads car data asynchronously and renders a formatted summary based on a year threshold of 2000. The visualization uses vanilla JavaScript with the Fetch API via `getCars()` and a custom `generateReport()` function that processes the data. React is used as the framework, though the final output is plain text presented in a `<pre>` element with large font styling, demonstrating a minimal data-reporting approach without traditional charts or graphics.

Jan 18, 2022

Loading thumbnail…

Cars Report

Built with React, this minimal example renders a large, plain-text "Hello World" message as a car report. The page displays the text using a `<pre>` element with an inline font-size style, and the message is set dynamically via `document.getElementById` to update the element's `textContent`. The visualization relies on a JavaScript bundle generated by Rollup, with the HTML document serving as the app’s shell. It demonstrates a basic data-binding pattern without external charting libraries, focusing instead on direct DOM manipulation within a React-compatible setup.

Jan 18, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal webpage that displays the text “Hello HTML!” centered on the screen. The page uses plain HTML and CSS to structure and style the message, with the `.message` class setting a large font size and text alignment. It also includes a JavaScript file via an HTML script tag, though the displayed content itself relies solely on the markup and stylesheet. The code defines a single `div` element containing the greeting, showing how basic styling and static content can be rendered in a browser without external libraries.

Jan 18, 2022

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal HTML page that displays the text “Hello HTML!” centered with a very large font size. It demonstrates a basic setup using plain HTML for structure, embedded CSS for styling, and JavaScript is included but not actively used. The page relies on standard web technologies rather than any external libraries or frameworks, serving as a simple starter template for web-based visualization projects.

Jan 18, 2022

Loading thumbnail…

Fork of Alemeister

This example renders a smiling face using React and D3, drawing a yellow circle as the head with two black eyes and a curved mouth. The visualization is built with SVG elements, where the head uses a circle and the mouth is created from a D3 arc path using the `arc()` API with specified inner and outer radii. The entire graphic is centered using a coordinate transform, and the code leverages ReactDOM to mount the component into the page’s root element.

Jan 8, 2022

Loading thumbnail…

Alemeister

Alemeister renders a yellow smiley face as a single static SVG graphic, centered within a 960-by-500 viewport. Built with React, it uses D3’s `arc` generator to draw the mouth as a semi-circular path, with two black circles for eyes and a stroked circle for the head. The SVG elements are positioned using absolute coordinates, and the visualization does not include any interactivity or animation.

Jan 8, 2022