Skip to main content
Log in
J

joalvarenga53

@joalvarenga53·8 public vizzes

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hard-coded five-record dataset. The report presents the text “Honda” in a large <pre> element on a blank page. It imports the parsed `cars` array from a separate module, accesses its first object, and writes the `make` value to the DOM via `textContent`. The visualization relies on plain JavaScript and the `JSON.parse` API, with no external charting libraries.

Apr 13, 2020
Loading thumbnail…

Cars Report

This example displays a single car brand and model from a small JSON dataset of five used cars, rendering the text in large type on a plain HTML page. It shows the make of the first car entry in the array. The visualization uses a hand-written `cars.js` module that exports parsed JSON data, which is then imported in `index.js` and accessed with standard array indexing to set the `textContent` of a `<pre>` element. The code relies on ES module imports and the native `JSON.parse` API.

Apr 13, 2020
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face is drawn entirely with SVG shapes, using a yellow circle for the head, two black circles for eyes, and a path generated by the `d3.arc` function for the mouth. The code demonstrates fundamental DOM manipulation by selecting the SVG element and appending each shape with explicit attributes for position, radius, and fill. Reactivity is limited to static rendering, with the face centered via hard-coded values derived from the SVG’s width and height. The example uses D3 v5 and relies on `d3.select` for element access.

Apr 13, 2020
Loading thumbnail…

Cars Report

This example displays a hardcoded list of five cars with details such as year, make, model, and price, referenced from the `cars.js` module. It shows a simple "Hello World" message rendered in large text on a blank page. The visualization uses plain HTML and JavaScript, with the message written to the DOM via `document.getElementById` and the `textContent` property. No external libraries or charting frameworks are utilized; the example serves as a minimal demonstration of data import and static text output.

Apr 13, 2020
Loading thumbnail…

Cars Report

This example displays a hardcoded list of five cars with details such as year, make, model, and price, referenced from the `cars.js` module. It shows a simple "Hello World" message rendered in large text on a blank page. The visualization uses plain HTML and JavaScript, with the message written to the DOM via `document.getElementById` and the `textContent` property. No external libraries or charting frameworks are utilized; the example serves as a minimal demonstration of data import and static text output.

Apr 13, 2020
Loading thumbnail…

Cars Report

This example displays a simple “Hello World” message centered on the page, with text set to a large font size. It demonstrates the basic structure of a VizHub project, using an HTML file with a single `<pre>` element to hold the output. The JavaScript file `index.js` accesses this element via `document.getElementById` and sets its text content to the exported string from the ES6 module `myMessage.js`. No external libraries or data sources are used; the rendering relies solely on plain DOM manipulation and CSS styling.

Apr 13, 2020
Loading thumbnail…

React Starter

This example demonstrates a minimal React application that displays the text "Hello React!" centered on the page. The app renders a single message element using JSX syntax, with styling applied via a CSS class. The implementation uses React and ReactDOM from the production UMD builds, and the main component is defined in `index.js` where `ReactDOM.render` mounts the `App` component into the `#root` div. The page loads the React libraries from unpkg and uses a separate `bundle.js` for the application code.

Apr 13, 2020
Loading thumbnail…

React Starter

This example demonstrates a minimal React application that displays the text "Hello React!" centered on the page. The app renders a single message element using JSX syntax, with styling applied via a CSS class. The implementation uses React and ReactDOM from the production UMD builds, and the main component is defined in `index.js` where `ReactDOM.render` mounts the `App` component into the `#root` div. The page loads the React libraries from unpkg and uses a separate `bundle.js` for the application code.

Apr 13, 2020