AlainKuiete

@AlainKuiete·5 public vizzes

Fork of HTML Starter

This example demonstrates a minimal integration of React with a plain HTML page, rendering static text content. The page displays “Hello HTML!” as a large, centered message using CSS styling, while also including a separate script tag that writes “Hello JavaScript” in the browser console (the provided code contains a typo in the script tag, so it does not actually execute). The code uses React 17 via CDN links, but no React components or hooks are defined or used; it primarily showcases how to set up a basic HTML structure with external libraries and inline styles.

Mar 28, 2022

Loading thumbnail…

Fork of Smiley Face Part I

This visualization displays a simple smiley face drawn with SVG shapes, positioned at the center of a 960x500 canvas. It features a yellow circle with a black stroke, two black eyes offset symmetrically, and a mouth created using d3.arc() with specified inner and outer radii and angle ranges. The React component renders the SVG elements directly, while D3’s arc generator computes the mouth path. Input values for dimensions, offsets, and radii are hardcoded as constants. The example demonstrates basic geometric composition using React and D3 v7 without interactivity or data sources.

Mar 28, 2022

Loading thumbnail…

Cars Report

This example displays a static text message, “Hello Word,” inside a div element on an HTML page. The visualization does not include any charts or data plots, instead serving as a minimal React starter template. The code uses plain JavaScript DOM manipulation, setting the `textContent` of the `message-element` div, and is built with React and bundled via a script tag. No external visualization libraries such as D3 are used.

Jun 1, 2020

Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub supports modular ES6 development with D3.js, displaying a simple "Hello World!" message centered on the page. The code imports the `select` function from D3 and a custom `message` constant from a local ES6 module, then uses `select('#message').text()` to update the DOM. Styling comes from an external stylesheet, while D3 v5 is loaded via CDN. The visualization shows basic DOM manipulation and module imports rather than data-driven graphics.

Jun 1, 2020

Loading thumbnail…

Cars Report

This visualization, titled "Cars Report," displays a static message reading "Hello Word" in enormous, centered text on a plain white background. The page is built with a minimal HTML structure and uses a JavaScript file, `gn.js`, to directly set the text content of a `<pre>` element via `getElementById`. The styling is applied through inline CSS, with a font size of 13em. The example demonstrates a basic React project setup, though the current code only renders the single text message without any interactive or data-driven elements.

May 31, 2020