amala1004

@amala1004·5 public vizzes

SVG Technology

This example demonstrates a small collection of basic SVG shapes—circles, rectangles, a line, and a path—rendered directly in an HTML page using inline SVG markup. The combination of individual elements and transformed groups shows how simple geometric primitives can be positioned and styled. The code uses raw SVG elements with attributes like `fill`, `stroke`, `stroke-width`, and a `transform` translation, while also importing D3.js’s `select()` function to set the text of a message div. The page’s styling is defined in a linked CSS file.

Jul 5, 2019

Loading thumbnail…

SVG Technology

This example demonstrates a minimal SVG rendering of a single large circle on a dark background, accompanied by a text message. It shows how VizHub combines static SVG markup with dynamic D3.js functionality, where the `select` function updates the displayed message. The page relies on an ES6 module export for the text content and a CSS file that imports the Ubuntu font. The SVG circle is defined directly in the HTML, while the JavaScript adds interactivity by modifying the DOM.

Jul 5, 2019

Loading thumbnail…

Hello VizHub

This example presents a minimal Cars Report page built as a static HTML document. It displays a heading and a short list of greeting items, while the main message area is updated dynamically using D3’s `select` function to insert text from a local ES6 module. The page imports `select` from the D3 library and a custom `message` constant from `myMessage.js`, demonstrating basic module imports and DOM manipulation. Styling is applied through an external CSS file, setting the body font size. The visualization serves as a simple introduction to combining vanilla HTML with D3 and modular JavaScript.

Jul 5, 2019

Loading thumbnail…

Car Reports

This example demonstrates a text-based car report, showing each vehicle's year, make, model, and price. It uses D3 v5 for the document structure and fetches a static JSON dataset from an asynchronous promise. The `formatcar` function formats the data into readable strings, which are then displayed in a styled HTML element. The presentation uses the Ubuntu font and a dark background to highlight the report's output.

Jul 5, 2019

Loading thumbnail…

Car Reports

This example displays a large, centered “Hello VizHub!” message using D3.js and a custom ES6 module for text content. The page renders the message in a pre-element, styled with an Ubuntu font and a dark blue background. The visualization demonstrates basic DOM manipulation with D3 and plain JavaScript, alongside modular code organization. It uses D3 v5 and CSS imports from Google Fonts, serving as a minimal template for integrating external libraries and custom scripts.

Jul 5, 2019