C

clara6

@clara6·23 public vizzes

Loading thumbnail…

Hello VizHub

This example displays a single, static text message, “Hello VizHub!”, centered on a dark blue screen with large, light-colored Ubuntu typography. It serves as a minimal demonstration of the VizHub platform’s basic workflow. The visualization is rendered using D3 v5, specifically the `select` API to target the `#message` DOM element and set its text content. The message itself is defined as an ES6 module export, and the styling comes from an external stylesheet that imports the Ubuntu font.

Loading thumbnail…

Hello VizHub

This example displays a single, static text message, “Hello VizHub!”, centered on a dark blue screen with large, light-colored Ubuntu typography. It serves as a minimal demonstration of the VizHub platform’s basic workflow. The visualization is rendered using D3 v5, specifically the `select` API to target the `#message` DOM element and set its text content. The message itself is defined as an ES6 module export, and the styling comes from an external stylesheet that imports the Ubuntu font.

Loading thumbnail…

Cars report

This example renders a single car make from a hardcoded JSON array onto a webpage using plain JavaScript and the DOM API. It displays the text “honda” at a large font size against a dark blue background, styled with an imported Ubuntu font from Google Fonts. The data is parsed via `JSON.parse` and accessed through array indexing, with the result written to a `pre` element using `textContent`. No external visualization libraries are used.

Loading thumbnail…

Cars report

This example shows a minimal cars report that displays the make of the first car in a dataset. The page renders “honda” in large, styled text on a dark blue background using the Ubuntu font. The code imports a static JSON array from `cars.js`, accesses `cars[0].make`, and updates the text content of a `pre` element via `document.getElementById`. Styling is handled through an external Google Fonts import in `styles.css`.

Loading thumbnail…

Cars report

This example displays the make of the first car in a hardcoded JSON array. It uses a simple DOM API, `document.getElementById`, to insert the text "honda" into a preformatted element. The data is parsed with `JSON.parse` and styled with custom CSS, including a Google Fonts import, on a dark background.

Loading thumbnail…

Cars report

This example demonstrates how to display a car make from a static JSON dataset. The visualization imports a small array of car objects, accesses the first entry’s make property, and renders that text into a large HTML pre element. The page uses a custom Google Font and a dark blue background via CSS. The code relies on the cars module’s exported parsed JSON and manipulates the DOM with vanilla JavaScript through document.getElementById.

Loading thumbnail…

Cars report

This example displays the make of the first car in a hardcoded JSON array as large text on a webpage. The code imports the car data from a `cars.js` module, parses it with `JSON.parse`, and uses vanilla JavaScript to set the `textContent` of a `<pre>` element. Styling applies a custom Ubuntu font and a dark blue background via CSS, with no external visualization libraries involved.

Loading thumbnail…

Cars report

This example shows a minimal cars report that displays the make of the first car in a dataset. The page renders “honda” in large, styled text on a dark blue background using the Ubuntu font. The code imports a static JSON array from `cars.js`, accesses `cars[0].make`, and updates the text content of a `pre` element via `document.getElementById`. Styling is handled through an external Google Fonts import in `styles.css`.

Loading thumbnail…

report paciente

This example displays a single data point from a small patient dataset, showing the make of the first record. The visualization uses D3 v5 and a custom JavaScript module to parse JSON data, extracting specific fields from the patient objects. The code imports the `pacientes_12` array, parses it with `JSON.parse`, and renders the first patient's make value as text on a dark blue background with large Ubuntu font styling. The data source is a local JSON file with two patient records containing sex, age, and cardiopathy information.

Loading thumbnail…

report paciente

This example displays a single data point from a small patient dataset, showing the make of the first record. The visualization uses D3 v5 and a custom JavaScript module to parse JSON data, extracting specific fields from the patient objects. The code imports the `pacientes_12` array, parses it with `JSON.parse`, and renders the first patient's make value as text on a dark blue background with large Ubuntu font styling. The data source is a local JSON file with two patient records containing sex, age, and cardiopathy information.

Loading thumbnail…

report paciente

This example displays a single data point from a small patient dataset, showing the make of the first record. The visualization uses D3 v5 and a custom JavaScript module to parse JSON data, extracting specific fields from the patient objects. The code imports the `pacientes_12` array, parses it with `JSON.parse`, and renders the first patient's make value as text on a dark blue background with large Ubuntu font styling. The data source is a local JSON file with two patient records containing sex, age, and cardiopathy information.

Loading thumbnail…

report paciente

This example displays a single data point from a small patient dataset, showing the make of the first record. The visualization uses D3 v5 and a custom JavaScript module to parse JSON data, extracting specific fields from the patient objects. The code imports the `pacientes_12` array, parses it with `JSON.parse`, and renders the first patient's make value as text on a dark blue background with large Ubuntu font styling. The data source is a local JSON file with two patient records containing sex, age, and cardiopathy information.

Loading thumbnail…

report paciente

This example displays a single data point from a small patient dataset, showing the make of the first record. The visualization uses D3 v5 and a custom JavaScript module to parse JSON data, extracting specific fields from the patient objects. The code imports the `pacientes_12` array, parses it with `JSON.parse`, and renders the first patient's make value as text on a dark blue background with large Ubuntu font styling. The data source is a local JSON file with two patient records containing sex, age, and cardiopathy information.

Loading thumbnail…

report paciente

This example displays a single data point from a small patient dataset, showing the make of the first record. The visualization uses D3 v5 and a custom JavaScript module to parse JSON data, extracting specific fields from the patient objects. The code imports the `pacientes_12` array, parses it with `JSON.parse`, and renders the first patient's make value as text on a dark blue background with large Ubuntu font styling. The data source is a local JSON file with two patient records containing sex, age, and cardiopathy information.

Loading thumbnail…

report paciente

This example displays a single data point from a small patient dataset, showing the make of the first record. The visualization uses D3 v5 and a custom JavaScript module to parse JSON data, extracting specific fields from the patient objects. The code imports the `pacientes_12` array, parses it with `JSON.parse`, and renders the first patient's make value as text on a dark blue background with large Ubuntu font styling. The data source is a local JSON file with two patient records containing sex, age, and cardiopathy information.

Loading thumbnail…

report paciente

This example displays a single data point from a small patient dataset, showing the make of the first record. The visualization uses D3 v5 and a custom JavaScript module to parse JSON data, extracting specific fields from the patient objects. The code imports the `pacientes_12` array, parses it with `JSON.parse`, and renders the first patient's make value as text on a dark blue background with large Ubuntu font styling. The data source is a local JSON file with two patient records containing sex, age, and cardiopathy information.

Loading thumbnail…

report paciente

This example displays a single data point from a small patient dataset, showing the make of the first record. The visualization uses D3 v5 and a custom JavaScript module to parse JSON data, extracting specific fields from the patient objects. The code imports the `pacientes_12` array, parses it with `JSON.parse`, and renders the first patient's make value as text on a dark blue background with large Ubuntu font styling. The data source is a local JSON file with two patient records containing sex, age, and cardiopathy information.

Loading thumbnail…

report paciente

This example displays a single data point from a small patient dataset, showing the make of the first record. The visualization uses D3 v5 and a custom JavaScript module to parse JSON data, extracting specific fields from the patient objects. The code imports the `pacientes_12` array, parses it with `JSON.parse`, and renders the first patient's make value as text on a dark blue background with large Ubuntu font styling. The data source is a local JSON file with two patient records containing sex, age, and cardiopathy information.

Loading thumbnail…

report paciente

This example displays a single data point from a small patient dataset, showing the make of the first record. The visualization uses D3 v5 and a custom JavaScript module to parse JSON data, extracting specific fields from the patient objects. The code imports the `pacientes_12` array, parses it with `JSON.parse`, and renders the first patient's make value as text on a dark blue background with large Ubuntu font styling. The data source is a local JSON file with two patient records containing sex, age, and cardiopathy information.

Loading thumbnail…

Reporte de coches

This example displays a large text element showing the make of the first car from a hardcoded JSON array of car records, which includes fields such as sex, age, and prior heart condition. The visualization uses plain JavaScript to parse the JSON with `JSON.parse` and update the DOM via `document.getElementById` to set the text content. Styling is applied through CSS with an imported Ubuntu font and a dark blue background, while the page structure is defined in the HTML template.

Loading thumbnail…

Hello VizHub

This example displays a single, static text message, “Hello VizHub!”, centered on a dark blue screen with large, light-colored Ubuntu typography. It serves as a minimal demonstration of the VizHub platform’s basic workflow. The visualization is rendered using D3 v5, specifically the `select` API to target the `#message` DOM element and set its text content. The message itself is defined as an ES6 module export, and the styling comes from an external stylesheet that imports the Ubuntu font.

Loading thumbnail…

Hello VizHub

This example displays a single, large, centered message that reads "Hello VizHub!" on a dark blue background. It demonstrates a minimal setup for a D3.js project using the d3.select API to target a DOM element and set its text content. The visualization imports a local ES6 module to provide the message string, while the styling utilizes the Ubuntu font from Google Fonts and a CSS stylesheet.

Loading thumbnail…

Hello VizHub

This example displays the text “Hello VizHub!” centered on a dark blue background, using the Ubuntu font at a large scale. It renders the message by selecting the `#message` div and applying the text via D3’s `select` function. The visualization is built with D3 v5, using the `select` API from the `d3` module and an ES6 module (`myMessage.js`) that exports the message string. The code also imports a custom stylesheet, which sets the page’s background color, text color, and typography.