YilmazSalman

@YilmazSalman·6 public vizzes

Shapes with SVG and CSS

This example demonstrates how to construct and style geometric shapes using Scalable Vector Graphics (SVG) elements embedded directly in an HTML document, with CSS controlling their visual properties such as color and size. The code uses the HTML5 DOM structure and a linked stylesheet to define a highlighted class that changes text color to red. The page includes a body element for content and references separate JavaScript files, though no interactive data visualization or dynamic rendering is implemented in the provided files. The example focuses on fundamental markup and styling techniques rather than data-driven charting.

Nov 8, 2019

Loading thumbnail…

Cars Report

This example displays the make of the first car in a dataset as a large, centered text message on a dark blue background. It imports a JSON array of three car objects from a local module, parses it, and assigns the `make` property to a pre-formatted text element. The page uses the Ubuntu font and minimal JavaScript, with no additional visualization libraries. The rendering approach is straightforward DOM text manipulation, showcasing how VizHub can render static data-driven content.

Nov 8, 2019

Loading thumbnail…

Cars Report

This example displays a cars report by reading the first entry’s make from an embedded JSON dataset and rendering it as large text on a dark, styled page. It uses a pre-formatted `<pre>` element to show “Nissan,” with the text updated via the `Document.getElementById` API. The visualization demonstrates basic data import and DOM manipulation through ES6 modules, importing `cars` from a local module and applying global CSS with the Google Fonts Ubuntu typeface.

Nov 8, 2019

Loading thumbnail…

Cars Report

This example displays a static report page for a cars dataset, rendering the text “Hello VizHub!” in large, styled typography. The visualization demonstrates basic DOM manipulation and ES6 module imports within a VizHub project structure. The page uses plain JavaScript to set text content via `document.getElementById`, while a separate module exports the message string. Styling relies on CSS with an imported Ubuntu font, a dark blue background, and centered layout. The project includes no data loading, charts, or interactive elements, showing VizHub’s minimal setup for a simple text-based output.

Nov 8, 2019

Loading thumbnail…

Cars Report

This example demonstrates a basic text-output report using modern JavaScript modules. It displays the message “Hello VizHub!” prominently on a styled page. The implementation uses an HTML file that loads a bundled script, while an ES6 module exports the message string and the main script updates the DOM element via `document.getElementById`. Styling relies on an imported Google font and a dark blue background defined in a separate CSS file. The visualization’s primary purpose is to show how simple data or text can be presented with minimal code, highlighting the workflow of importing modules and manipulating page content.

Nov 8, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how a minimal D3.js visualization can be set up within the VizHub environment. It displays the text “Hello VizHub!” prominently on a dark blue background with Ubuntu font styling. The code imports the `select` function from D3 v5 and a custom ES6 module to define the message string, then uses D3’s `select` and `.text()` method to update the content of a `div` element. A separate HTML file loads external styles and the D3 library.

Nov 8, 2019