Skip to main content
Log in
Z

zerkhi

@zerkhi·12 public vizzes

Loading thumbnail…

Hello VizHub

This example displays a large “Hello VizHub!” message in bold, centered text on a dark blue background. It demonstrates a minimal setup for combining D3.js v5 with ES6 modules. The code uses `select` from D3 to set the text content of a div, imports a message string from a local `myMessage.js` module, and applies styling via a Google Fonts-loaded Ubuntu typeface in `styles.css`.

Aug 18, 2019
Loading thumbnail…

Hello VizHub

This example renders a fixed message, “bi[2]”, inside a large `<pre>` element. It demonstrates VizHub’s module system by importing an array named `bi` from a separate `complete.js` file, though the displayed text is a literal string rather than a computed array value. The page uses `document.getElementById` to target the element and sets its `textContent` directly. No external libraries are used, and the visualization is purely static, showing how plain JavaScript and HTML integrate in a VizHub project.

Aug 18, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal data-driven text visualization. It shows a single motorcycle record from an inline JSON dataset, displaying the name field as large text on a blank page. The code parses the JSON with `JSON.parse` in `complete.js`, then imports the parsed object into `index.js` via a module import. Finally, it uses the Document Object Model (`getElementById`) to set the text content of a preformatted element, producing a straightforward output without external libraries or rendering layers.

Aug 18, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal data-visualization setup using VizHub, where a static JSON array containing a single motorcycle object is parsed and displayed. The code defines the data in `complete.js`, exports it as `newtube`, and then uses `index.js` to extract a property value and render it as text. The message is injected into the HTML page via `document.getElementById` and the `textContent` API, targeting a `<pre>` element styled with large font size. No external visualization libraries are used; the focus is on basic data parsing and DOM manipulation.

Aug 18, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates a static text display that prints the string "newtube.name" in a large font inside an HTML page. It imports a JSON array of motorcycle data from a separate module, parses the constant `bike7`, and exports it as `newtube`, though the visualization does not render or process this dataset. The page uses a `<pre>` element with inline styling for presentation, and JavaScript's `document.getElementById` to set the text content. The code relies on standard ECMAScript module imports and the native JSON API, with no additional visualization libraries like D3 or Canvas involved.

Aug 18, 2019
Loading thumbnail…

hello zerkhi

This example demonstrates a simple text output using imported JavaScript modules. It shows the string “hello imported” displayed in large, monospaced type on a web page. The visualization works by exporting a message from `bikes.js` as `bikejson`, importing it into `index.js`, and setting that value as the text content of a `<pre>` element with a 7em font size. The page relies on a bundled script (`bundle.js`) to execute the module imports, with no additional libraries or data sources involved.

Aug 18, 2019
Loading thumbnail…

hello zerkhi

This example renders a static list of motorcycle data onto a web page. It displays each object from the `bikes` array—containing name, engine type, speed, and price—as raw JSON text inside a `<pre>` element. The code imports the parsed array from `bikes.js` using ES module syntax and sets it as the text content of the element with `document.getElementById`. No external visualization libraries are used; the output is plain text styled with inline CSS.

Aug 18, 2019
Loading thumbnail…

hello zerkhi

This example displays a list of motorcycle data records as plain text on a webpage, showing properties like name, engine type, speed, and price. The visualization uses the `textContent` API to inject the parsed JSON content into a `<pre>` element. The data is defined as a JSON string in `bikes.js`, which is parsed into a JavaScript array using `JSON.parse` and then exported for use. The code relies on standard DOM manipulation and the native JSON module, with the styling set via inline CSS.

Aug 18, 2019
Loading thumbnail…

hello zerkhi

This example renders a static list of motorcycle data onto a web page. It displays each object from the `bikes` array—containing name, engine type, speed, and price—as raw JSON text inside a `<pre>` element. The code imports the parsed array from `bikes.js` using ES module syntax and sets it as the text content of the element with `document.getElementById`. No external visualization libraries are used; the output is plain text styled with inline CSS.

Aug 18, 2019
Loading thumbnail…

hello zerkhi

This example displays the static text "bikese" in a large font size. The visualization consists of an HTML page that loads a JavaScript bundle, which sets the text content of a `<pre>` element to a hardcoded string. The code defines an array of bike objects with properties like name, engine, speed, and price, but this data is not rendered. The page uses basic DOM manipulation via `document.getElementById` to display the text.

Aug 18, 2019
Loading thumbnail…

hello zerkhi

This example displays the name of a bike from a dataset, rendered as large text on a web page. The visualization fetches bike data from a JavaScript module, where a JSON string is parsed into an array of objects, and then accesses the `name` property of the first entry. The text is inserted into an HTML element using the Document Object Model’s `textContent` property. The code relies on the native JavaScript `JSON.parse` method and standard browser APIs, with the page structured in `index.html` and styling applied inline.

Aug 18, 2019
Loading thumbnail…

hello zerkhi

This example demonstrates a minimalist text display, showing the message "dfhgd" rendered in large, seven-em font size within an HTML `<pre>` element. It uses plain JavaScript DOM manipulation via `document.getElementById` and the `textContent` property to set the displayed text. The visualization also imports a parsed JSON dataset of motorcycle specifications from `bikes.js`, though the data is not currently visualized in the body. The page structure relies on a simple HTML template with a bundled script, highlighting basic data handling and DOM update mechanics without any charting or visualization libraries.

Aug 18, 2019