salamullahuet

@salamullahuet·9 public vizzes

Shape with SVG and CSS

A large circle, rendered with SVG, fills the viewport against a plain white background. The example demonstrates the minimal structure needed to display a basic shape using an SVG `<circle>` element with a radius of 400, placed within a 960 by 500 viewBox. The page includes a linked stylesheet that hides scrollbars and defines a `.highlighted` class, though the circle itself receives no styling or interaction. The code uses no JavaScript libraries, relying solely on standard HTML, CSS, and inline SVG markup to produce the static visual.

Feb 10, 2020

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small, hardcoded dataset. It shows how to import a JavaScript array of car objects, parsed from a JSON string in a separate module, and render a single data point to the page. The visualization uses a plain HTML `<pre>` element, directly setting its text content via the standard DOM API `document.getElementById` and `textContent` in a script that imports the `cars` array.

Feb 7, 2020

Loading thumbnail…

Cars Report

This example displays a static set of car records parsed from a JSON array embedded in the cars module. The page simply renders the fixed text “Hello World” into a large HTML `<pre>` element using plain JavaScript’s `getElementById` and `textContent`. No charting or interactive features are implemented; the visualization is limited to a text output generated from the imported data. The code relies on ES module imports and the exported `cars` array from the `cars.js` file.

Feb 7, 2020

Loading thumbnail…

Cars Report

This example demonstrates a minimal data-driven report by displaying the make of the first car in a hardcoded dataset. It loads car information from a JSON array defined in `cars.js` and renders the text onto a webpage using plain JavaScript. The implementation parses the JSON with `JSON.parse`, accesses the first object’s `make` property, and updates the page’s DOM element via `document.getElementById` and `textContent`. The visualization is intentionally simple, showing static text rather than interactive charts or graphics.

Feb 7, 2020

Loading thumbnail…

Cars Report

This example displays a plain-text report of the first car in a small dataset, rendering "Honda" on the page. It loads car data from a local JavaScript module containing an array of objects with year, make, model, and price fields. The React starter code uses standard DOM manipulation via `document.getElementById` and sets the `textcontent` of a preformatted element. No visualization libraries are used; the report simply reads from a static JSON string parsed with `JSON.parse`.

Feb 7, 2020

Loading thumbnail…

Cars Report

This interactive display presents a static ‘Hello World’ message within a large HTML `<pre>` element. It does not visualize any car data, despite its intended title and imported data file. The React-based project imports a hardcoded JSON array of car makes, models, years, and prices from `cars.js` but never uses it. The code relies on a standard DOM API method (`getElementById`) to update the text content. The visualization is non-functional, showing no charts, graphs, or data processing; it only renders a fixed greeting.

Feb 7, 2020

Loading thumbnail…

Cars Report

The Cars Report displays a single car make, "Honda," as large text from a static JSON array of five used cars. The React-based example imports and parses the inline `cars.js` dataset, then uses plain DOM manipulation to write the first record’s make into an HTML `<pre>` element via `document.getElementById` and `textContent`. No charting library or visualization API is used; rendering relies solely on React’s component structure and the browser’s native text layout.

Feb 7, 2020

Loading thumbnail…

HTML Starter

This example shows a bare minimum HTML page that displays the text “Hello HTML” centered on a white background, with the font size set to 13em. It demonstrates the fundamental structure of an HTML document, including a `<head>` section with a `<title>` and embedded `<style>` rules, and a `<body>` containing the text. The code uses no external libraries or frameworks, relying solely on plain HTML and CSS. It serves as a starting point for creating simple web pages or visualizations without additional dependencies.

Feb 6, 2020

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a centered message using a large font size. It uses React 16 and ReactDOM to mount a component into the `#root` element, with styling defined in the HTML file’s `<style>` block. The code relies on the production builds of React and ReactDOM loaded via CDN, and a separate `bundle.js` file for the application logic. The visualization itself is a static text display, showcasing the basic setup for integrating React into a web page.

Feb 6, 2020