M

mkdeeps01

@mkdeeps01·57 public vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—can be styled and positioned within an SVG canvas, using both inline presentation attributes and external CSS rules. It shows grouped elements under a `<g>` tag inheriting shared fill and stroke properties, while individual shapes override these with explicit `fill` colors. The code relies purely on native SVG elements and CSS (via a stylesheet defining a `.lines` class) without any JavaScript libraries. The rendering approach is static SVG, with shapes placed at fixed coordinates to illustrate foundational vector-graphics composition.

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic SVG shapes—circles and rectangles—positioned on a 960 by 500 canvas, with individual elements styled directly via fill attributes or grouped within a `<g>` element to apply shared styling. The HTML markup uses standard SVG tags like `<circle>`, `<rect>`, and `<g>` with a transform for translation, while a linked stylesheet defines global body margins and a `.highlighted` class. Shapes appear in their default black unless explicitly colored red, green, or blue, demonstrating how SVG attributes and CSS rules combine for static vector rendering without JavaScript interaction.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG and styled using CSS. It shows circles and rectangles in various colors, including a group of shapes translated down the canvas using an SVG transform. The code relies on inline SVG elements and CSS rules for presentation, such as setting the body margin and overflow properties. No data source is used; the visualization is purely a static arrangement of shapes.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes rendered directly in HTML, featuring two circles and two rectangles with varying positions and colors, including a red circle and a green square. The visualization uses plain SVG markup within index.html, styled minimally through CSS in styles.css, which sets the page margin to zero and hides overflow while applying a red highlight class. No external JavaScript libraries are used; the code relies solely on native SVG elements and CSS properties to construct the simple geometric composition.

Loading thumbnail…

Shapes with SVG and CSS

This example shows a simple set of SVG shapes—a circle and a rectangle—rendered inside a fixed 960×500 viewport. The page uses inline SVG elements and CSS rules for styling, with the `highlighted` class available to color shapes red. The SVG is embedded directly in the HTML, and the stylesheet handles page margins and overflow. The visualization demonstrates basic geometric shape placement and CSS integration without additional JavaScript libraries or data sources.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create simple geometric shapes—a circle and a rectangle—using inline SVG elements within an HTML page, with CSS applied for styling. The SVG canvas is set to 960 by 500 pixels, and the shapes are positioned using explicit `cx`, `cy`, `x`, and `y` attributes. The stylesheet defines a `highlighted` class that turns text red, while the body margin is reset for a clean display. The rendering relies on native SVG markup and CSS rules, with no external JavaScript libraries or data sources involved.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the use of SVG and CSS to render a single large circle on a 960 by 500 canvas. The visualization shows how basic SVG shapes can be styled and positioned using HTML and CSS, with the circle defined via its `r` attribute and the page styled through an external stylesheet. The `index.html` file embeds the SVG directly, while `styles.css` uses a monospace font and a `.highlighted` class to add red text styling. The rendering relies purely on native SVG elements and CSS, without any JavaScript libraries or data processing.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a single large circle rendered with SVG alongside a styled HTML body. The visualization shows a basic geometric shape without data mapping, using inline SVG markup and a CSS stylesheet to set page typography. The code initializes an empty `<svg>` element and adds a `<circle>` with a fixed radius, while `styles.css` applies monospace font styling and a red `.highlighted` class. The example relies on native HTML5 and SVG APIs, with no external JavaScript libraries or data sources.

Loading thumbnail…

HTML Cars Report

This example displays a simple inventory report for two cars, a 2012 Nissan Leaf and a 2006 Ford F150, each paired with a numeric value. The presentation is a basic HTML page with an unordered list, where one item carries a `highlighted` class that turns its text red. The styling comes from a linked `styles.css` file that sets a large monospace font for the body and the red color for the highlighted entry. The report is rendered directly in the browser without any JavaScript or external charting libraries, relying solely on static HTML and CSS markup.

Loading thumbnail…

HTML Cars Report

The HTML Cars Report is a static list of car models and their prices, presented as plain HTML text with a highlighted entry for the 2012 Nissan Leaf at 1800. It shows two vehicles without any interactive or dynamic features. The page uses basic HTML structure in index.html, styled with a monospace font and larger text size via styles.css, while the `.highlighted` class applies visual emphasis to the first car entry. No JavaScript libraries or data-loading APIs are used; the report relies entirely on hardcoded markup and CSS styling.

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML page titled “Cars Report” that lists two car models with their associated weights in plain text. The page uses a static, hand-written HTML structure wrapped in an `<ul>` element, with the first list item styled via a `.highlighted` CSS class. The visual presentation relies on basic HTML and CSS, with a monospace font and enlarged text size defined in `styles.css`. No JavaScript libraries or data-driven rendering are used; the content is hardcoded directly in the markup.

Loading thumbnail…

HTML Cars Report

This example displays a basic HTML cars report that lists two vehicles—a 2012 Nissan Leaf and a 2006 Ford F-150—along with their associated weights. The page renders the data as a static list, with the first entry highlighted using a CSS class. The implementation uses plain HTML structure with an external `styles.css` stylesheet for monospace font sizing and visual emphasis. No JavaScript libraries or dynamic data-binding are present; the report is purely markup-driven and provides no interactive or animated visualization.

Loading thumbnail…

HTML Cars Report

This example presents a static HTML report listing cars with their model years and prices, using plain HTML list items and CSS styling. The page displays two vehicles—a 2012 Nissan Leaf and a 2006 Ford F150—with their respective costs, where the first item is highlighted via a CSS class. The visualization relies solely on foundational web technologies, including the HTML `<ul>` and `<li>` elements for content structure, a linked `styles.css` stylesheet for typography and visual emphasis, and no JavaScript libraries or data-driven rendering. The data is hardcoded directly into the markup, with no external data source or dynamic computation involved.

Loading thumbnail…

HTML Cars Report

This example presents a static HTML report listing two cars, a 2012 Nissan Leaf and a 2006 Ford F-150, with associated numeric values. It demonstrates a minimal web page structure with a heading, an unordered list, and basic styling. The rendering relies on plain HTML elements in `index.html` and CSS rules in `styles.css` to set a monospace font and highlight one list item via the `.highlighted` class. No external visualization libraries or dynamic data-binding code are used in the visible files.

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML cars report listing two vehicles with their model years and weights. It renders the data as a plain text list, with each car shown as a bullet point under a heading. The visualization relies on basic HTML and CSS, using a `<ul>` element for the list and a monospace font with increased base font size defined in the linked `styles.css` file. The page structure is built with standard HTML markup, and no JavaScript libraries or data-driven APIs are involved.

Loading thumbnail…

HTML Cars Report

This example presents a basic HTML cars report that displays a static list of vehicle names and associated numeric values. The page uses an HTML list element to render two car entries with their respective prices. The code relies on plain HTML markup and a linked CSS stylesheet, which applies a large monospaced font to the body. No JavaScript libraries or data visualization APIs are utilized, as the cars.js and index.js files are not referenced by the main page.

Loading thumbnail…

HTML Cars Report

This example shows a plain HTML report listing cars with their model years and prices. The page displays a simple bulleted list, including a 2012 Nissan Leaf and a 2006 Ford F-150, with the body styled using CSS to use a monospace font at double the default size. The visualization is built entirely with static HTML and CSS, with no JavaScript libraries or interactive rendering, and the data is hardcoded directly into the index.html file.

Loading thumbnail…

HTML Cars Report

This example displays a simple, text-based report of car models and their corresponding values, including the 2012 Nissan Leaf and 2006 Ford F-150. The visualization is rendered as static HTML within an `index.html` file, using a plain unordered list to present the data entries. The page's styling is applied via an external stylesheet (`styles.css`), which imports the Ubuntu font from Google Fonts and sets a dark blue background with white text. The presentation relies on standard HTML elements and CSS, with no JavaScript libraries or dynamic rendering involved.

Loading thumbnail…

HTML Cars Report

This example displays a static HTML report titled “Cars Report” that lists two vehicle entries with their associated weights, such as a 2012 Nissan Leaf at 1800 and a 2006 Ford F150 at 2600. The page is styled using an external stylesheet that imports the Ubuntu font from Google Fonts, applies a dark navy background with light text, and centers the content at an extremely large font size. The visualization relies solely on plain HTML list markup and CSS, with no JavaScript libraries or data-driven rendering frameworks involved.

Loading thumbnail…

HTML Cars Report

This example renders a simple, static HTML report that lists car models alongside their weights, with the data hardcoded directly into the page. The visualization uses plain HTML and CSS, featuring a large, centered numeric display with a dark navy background and white Ubuntu font. No JavaScript libraries or data-processing APIs are involved; the presentation relies solely on the browser’s native document structure and styling, with the car information embedded in an unordered list. The example demonstrates a minimal, non-interactive approach to reporting textual data.

Loading thumbnail…

HTML Cars Report

This visualization displays a simple cars report with listed entries for a 2012 Nissan Leaf and a 2006 Ford F150, each paired with a value. The page uses static HTML markup for the list structure, while the body applies heavy styling through CSS, importing the Ubuntu font and setting a dark blue background with off-white text at an extremely large font size. The JavaScript files are present but do not appear to generate dynamic content, relying instead on plain text embedded directly in the HTML document.

Loading thumbnail…

car Report

This example displays a text-based report of car listings, showing each car’s year, make, model, and price after filtering for prices above $2,000. The visualization uses a static HTML page with a large-font `<pre>` element to render the output. It imports car data from a local `cars.js` module, parses it with `JSON.parse`, and formats the records using a custom `formatCar` function. The report is built by chaining `filter`, `map`, and `join` methods on the array, then setting the resulting string directly into the DOM via `document.getElementById`.

Loading thumbnail…

car Report

This example displays a plain-text report of used cars, filtering the dataset to vehicles priced above $2000 and formatting each entry with its year, make, model, and price. The code imports a local `cars` module containing an array of car objects, then uses array methods like `filter`, `map`, and `join` to build the output string. The final message is rendered into the DOM via `document.getElementById` with CSS styling from the `styles.css` file. The visualization relies on JavaScript ES6 features, including destructuring and template literals, within a VizHub environment.

Loading thumbnail…

car Report

This example displays a car report as plain text on a dark background, listing each vehicle’s year, make, model, and price for entries above $2,000. The code imports car data from a local `cars.js` module, filters the array, and formats the results using template literals. It sets the generated report as the `textContent` of a `<pre>` element via the DOM API. Styling uses CSS with the Ubuntu font, while no external visualization libraries are required.

Loading thumbnail…

car Report

This example displays a single car make, "honda", in large text on a dark blue background. The visualization extracts the first record from a hardcoded JSON array of car data defined in the `cars.js` file. Using the D3.js API, the code imports the parsed data and sets the text content of an HTML element via the Document Object Model. The page is styled with an Ubuntu font and color scheme from the linked stylesheet. The rendering is static, showing only the value of the first car's make property.

Loading thumbnail…

car Report

This car report displays the make of the first car in a small dataset on a webpage. The visualization is minimal, showing the text "honda" in a large, styled font against a dark blue background. It uses JavaScript with an imported `cars` array from a local module, and D3.js is commented out but not utilized. The page renders the result via `document.getElementById` and sets the text content of a `<pre>` element, demonstrating basic data handling and DOM manipulation.

Loading thumbnail…

car Report

This example displays the make of the first car in a hardcoded JSON array. It imports the `cars` data from `car.js` and renders the text "honda" inside a large `<pre>` element. The code uses `document.getElementbyId` to update the message element, while the styling relies on a Google Fonts import and a CSS file. The visualization is a minimal demonstration of importing and displaying data in a web page without any charting library.

Loading thumbnail…

car Report

This example displays the make of the first car in a small JSON dataset as large, styled text on a dark background. It imports car data from a local module, parses it with `JSON.parse`, and uses plain DOM methods to update the page. The visualization relies on standard web APIs and CSS styling, with no external charting libraries, to present a minimal data-report interface.

Loading thumbnail…

car Report

This simple web page displays the make of the first car in a hardcoded dataset. Importing an array of car objects from a separate JavaScript module, the code uses `document.getElementbyId` to select a DOM element and sets its text content to that value. CSS styles the page with a dark blue background and large Ubuntu font. The visualization relies on plain JavaScript and JSON parsing, with no external libraries or dynamic rendering.

Loading thumbnail…

car Report

This example displays a single car make, “honda,” in large text on a dark background. It imports an array of car objects from a local module and uses `document.getElementbyId` to set the text content of a `<pre>` element. The page styling comes from an external Google Fonts stylesheet, and the data is parsed from a hard-coded JSON string within `car.js`, showing a minimal use of JavaScript for DOM manipulation without additional visualization libraries.

Loading thumbnail…

car Report

This example displays the make of the first car from a hardcoded JSON dataset as large text on a dark, styled page. The visualization demonstrates basic data import and DOM manipulation using a custom `cars.js` module and vanilla JavaScript’s `document.getElementbyId` method to update the text content of an HTML element. Styling relies on CSS with the Ubuntu font and a bold color scheme. No external charting libraries are used, only native browser APIs and local module imports.

Loading thumbnail…

car Report

This example displays a single car make from a hardcoded JSON dataset, rendering the text “honda” at a large font size on a dark blue background. The code defines an array of car objects in `car.js`, imports it into `index.js`, and uses `document.getElementById` to update the message element’s text content. The visual styling comes from an external Ubuntu font and CSS rules in `styles.css`.

Loading thumbnail…

car Report

This example displays a single car's make in large text on a dark blue background. It imports a hardcoded JSON array of car objects from `car.js` and uses `document.getElementbyId` to set the `textContent` of the `message-element` pre tag. The styling comes from `styles.css`, which uses the Ubuntu font and sets a font size of 12em. The visualization is minimal, showing only the first entry's make.

Loading thumbnail…

car Report

This example displays a single car's make in large text on a dark blue background. It imports a hardcoded JSON array of car objects from `car.js` and uses `document.getElementbyId` to set the `textContent` of the `message-element` pre tag. The styling comes from `styles.css`, which uses the Ubuntu font and sets a font size of 12em. The visualization is minimal, showing only the first entry's make.

Loading thumbnail…

car Report

This example displays a single car's make in large text on a dark blue background. It imports a hardcoded JSON array of car objects from `car.js` and uses `document.getElementbyId` to set the `textContent` of the `message-element` pre tag. The styling comes from `styles.css`, which uses the Ubuntu font and sets a font size of 12em. The visualization is minimal, showing only the first entry's make.

Loading thumbnail…

car Report

This example displays a single car's make in large text on a dark blue background. It imports a hardcoded JSON array of car objects from `car.js` and uses `document.getElementbyId` to set the `textContent` of the `message-element` pre tag. The styling comes from `styles.css`, which uses the Ubuntu font and sets a font size of 12em. The visualization is minimal, showing only the first entry's make.

Loading thumbnail…

car Report

This example displays a single car's make in large text on a dark blue background. It imports a hardcoded JSON array of car objects from `car.js` and uses `document.getElementbyId` to set the `textContent` of the `message-element` pre tag. The styling comes from `styles.css`, which uses the Ubuntu font and sets a font size of 12em. The visualization is minimal, showing only the first entry's make.

Loading thumbnail…

car Report

This example displays a single car's make in large text on a dark blue background. It imports a hardcoded JSON array of car objects from `car.js` and uses `document.getElementbyId` to set the `textContent` of the `message-element` pre tag. The styling comes from `styles.css`, which uses the Ubuntu font and sets a font size of 12em. The visualization is minimal, showing only the first entry's make.

Loading thumbnail…

car Report

This example displays a single car's make in large text on a dark blue background. It imports a hardcoded JSON array of car objects from `car.js` and uses `document.getElementbyId` to set the `textContent` of the `message-element` pre tag. The styling comes from `styles.css`, which uses the Ubuntu font and sets a font size of 12em. The visualization is minimal, showing only the first entry's make.

Loading thumbnail…

car Report

This example displays a single car's make in large text on a dark blue background. It imports a hardcoded JSON array of car objects from `car.js` and uses `document.getElementbyId` to set the `textContent` of the `message-element` pre tag. The styling comes from `styles.css`, which uses the Ubuntu font and sets a font size of 12em. The visualization is minimal, showing only the first entry's make.

Loading thumbnail…

car Report

This example displays a single car's make in large text on a dark blue background. It imports a hardcoded JSON array of car objects from `car.js` and uses `document.getElementbyId` to set the `textContent` of the `message-element` pre tag. The styling comes from `styles.css`, which uses the Ubuntu font and sets a font size of 12em. The visualization is minimal, showing only the first entry's make.

Loading thumbnail…

car Report

This example displays the make of the first car in a hardcoded JSON dataset, rendered as large text on a dark blue background. The visualization uses a JavaScript array parsed from a JSON string and writes the result directly into an HTML element. The page loads the message through the `getElementById` method and applies styling from an external stylesheet that imports the Ubuntu font. No charting library is used; the output is purely textual.

Loading thumbnail…

car Report

This example displays the make of the first car in a hardcoded JSON dataset, rendered as large text on a dark blue background. The visualization uses a JavaScript array parsed from a JSON string and writes the result directly into an HTML element. The page loads the message through the `getElementById` method and applies styling from an external stylesheet that imports the Ubuntu font. No charting library is used; the output is purely textual.

Loading thumbnail…

car Report

This example displays the make of the first car in a hardcoded JSON dataset, rendered as large text on a dark blue background. The visualization uses a JavaScript array parsed from a JSON string and writes the result directly into an HTML element. The page loads the message through the `getElementById` method and applies styling from an external stylesheet that imports the Ubuntu font. No charting library is used; the output is purely textual.

Loading thumbnail…

car Report

This example displays a single car's make in large text on a dark blue background. It imports a hardcoded JSON array of car objects from `car.js` and uses `document.getElementbyId` to set the `textContent` of the `message-element` pre tag. The styling comes from `styles.css`, which uses the Ubuntu font and sets a font size of 12em. The visualization is minimal, showing only the first entry's make.

Loading thumbnail…

car Report

This example displays the make of the first car in a hardcoded JSON array within a large, styled text element. It imports the parsed car data from `car.js` and uses plain JavaScript to set the text content of the message element via `getElementById`. The page is styled with a dark background, Ubuntu font, and a large font size defined in `styles.css`. The visualization relies on the DOM manipulation of `document` to present the data, without using additional libraries.

Loading thumbnail…

car Report

This car report displays the make of the first car in a hardcoded JSON array, rendering "honda" prominently on a dark blue webpage. The code imports the parsed data from `cars.js` and uses vanilla JavaScript’s `getElementById` to set the text content of a `<pre>` element, styled with a large Ubuntu font from an external Google Fonts import in `styles.css`.

Loading thumbnail…

car Report

This example displays the make of the first car from a hardcoded JSON dataset, rendered as large text on a dark, styled web page. The application imports the `cars` array from a local ES6 module and uses JavaScript's DOM `getElementById` method to inject the string into a `<pre>` element. It relies on the D3.js library for data handling, while the visual styling, including a custom font and centered layout, is defined using CSS with an imported Ubuntu typeface.

Loading thumbnail…

car Report

This example displays a car report by rendering the first car’s make from a hardcoded JSON dataset in large text. It imports the dataset from a local ES6 module and uses `document.getElementById` to update the page’s message element. The styling relies on an external Google Fonts stylesheet, while the page structure is minimal, containing only a preformatted text element and a bundled script.

Loading thumbnail…

car Report

This example displays the make of the first car from a hardcoded JSON dataset, rendered as large text on a dark, styled web page. The application imports the `cars` array from a local ES6 module and uses JavaScript's DOM `getElementById` method to inject the string into a `<pre>` element. It relies on the D3.js library for data handling, while the visual styling, including a custom font and centered layout, is defined using CSS with an imported Ubuntu typeface.

Loading thumbnail…

car Report

This visualization example displays a single text message extracted from a dataset of car records. The code loads a JSON array of cars, parses it with `JSON.parse`, and then uses D3.js to select the first entry, displaying the car’s make in a large, styled `pre` element. The page uses an external Ubuntu font and a dark blue background for visual emphasis. The rendering relies on the `document.getElementbyId` method to update the HTML content dynamically.

Loading thumbnail…

car Report

This example displays the make of the first car from a small JSON dataset, rendering the text “honda” prominently on screen. The code imports the `cars` module, parses the dataset, and uses D3’s `select` alongside the native DOM method `getElementById` to update the message element’s content. Styling relies on a custom Ubuntu font and a dark blue background, demonstrating basic data-driven text output in a VizHub environment.

Loading thumbnail…

car Report

This example displays the first car’s make from a hardcoded JSON dataset of vehicles, rendering the text prominently on a dark, styled page. It uses D3.js’s `select` import and a custom ES6 module (`myMessage.js`) to parse and export the car data, while `document.getElementById` updates the HTML element’s content. The visualization relies on simple DOM manipulation rather than complex charting, with CSS from Google Fonts and a large, centered typography to emphasize the result.

Loading thumbnail…

car Report

This example displays the make of the first car from a parsed JSON dataset as large text on a dark, styled page. It uses D3’s `select` function and imports local ES6 modules, along with a `cars` data module, to fetch and parse the car records. The code sets the text content of an HTML element via `document.getElementbyId`, demonstrating simple data binding and module integration without interactive charts or complex rendering.

Loading thumbnail…

car Report

This example shows a car report by displaying the make of the first car in a dataset, rendered as large text on a dark, styled page. The code imports a car dataset from a local module and uses D3’s `select` function (though the visible output uses `document.getElementById`) to set the message element’s text content. The car data is parsed from a JSON string in `myMessage.js`, and the page’s appearance is styled with CSS, including the Ubuntu font and a navy background.

Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub can render a simple text message using D3.js. It displays the phrase "Hello VizHub!" in large, centered styling against a dark blue background. The code uses D3’s `select` function to target a `div` element and set its text content, while importing a message from a local ES6 module. The styling relies on Google Fonts’ Ubuntu typeface and a custom CSS file for layout and color.

Loading thumbnail…

cars Report

This example renders a static report page for a dataset labeled “cars.” It displays a simple message element that prints “Hello VizHub!” as plain text. The code imports the `select` function from D3.js and defines a text message in a separate module (`myMessage.js`), though the actual graph or chart is not implemented. The page uses a dark blue background with Ubuntu font via CSS and loads a bundled JavaScript file (`bundle.js`) through an HTML wrapper.