trishailendra (@trishailendra), VizHub

SVG Example

This example shows a simple polyline drawn on an SVG canvas using black strokes of varying lengths. The visualization consists of three connected line segments plotted with hardcoded x and y coordinates, creating a zigzag pattern within a 250 by 250 pixel viewport. The code uses plain SVG elements with specific attributes like `x1`, `y1`, `x2`, and `y2` to define each segment, along with `stroke` and `stroke-width` for styling. Additionally, it includes a separate ZingChart bar chart configuration with series data, though that chart is not rendered on the page.

Apr 18, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello World” in large, centered type on an otherwise blank HTML page. It uses the D3.js `select` function in `index.js` to target the message element and set its text content, while CSS in `index.html` handles the visual styling. The page’s script tag also includes a `src` statement, though it has no effect.

Apr 13, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a bare-bones HTML page that renders the text “Hello HTML” in the center of the screen using a large 13em font size defined in CSS. It also executes a JavaScript snippet that logs “Hello JavaScript!” to the browser’s developer console. The page uses no external libraries, relying solely on vanilla HTML, CSS, and JavaScript. The styling is applied inline within a `<style>` block, and the script runs directly within the body, showcasing the foundational structure for a web-based visualization or application.

Apr 12, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimalist HTML page that renders the text “Hello World” in large, centered type. It uses vanilla JavaScript and the Document Object Model (DOM) API, specifically `document.getElementByID`, to dynamically update the content of a `<pre>` element with the message. The page’s styling is handled entirely through inline CSS within the `<style>` tag, and the script is loaded from a separate `bundle.js` file. No external data or visualization libraries are involved.

Apr 12, 2021

Loading thumbnail…

Fork of Cars Report

This example renders a plain HTML page with centered text, displaying “Hello” in a `<pre>` block and “Hello HTML” in the body. The styling uses a large font size of 13em, though the page does not include any data visualization. The code relies on basic HTML and CSS, with a minimal JavaScript file defining a `message` variable that is not used in the output. The page is a static, non-interactive starter template without external libraries like D3 or React.

Apr 12, 2021

Loading thumbnail…

Fork of Smiley face part 1

This visualization shows a yellow smiley face rendered as an SVG, with two black eyes and a mouth arc drawn on a blank canvas. The face is centered in a 960x500 pixel viewport, built using React components that generate SVG elements. D3’s `arc()` function creates the mouth path with defined inner and outer radii and angular extents, while circles handle the face and eyes. The code sets fixed dimensions and offsets, relying on React’s `ReactDOM.render` to mount the component into the DOM.

Apr 12, 2021

Loading thumbnail…

Car Report

This example renders a static “Car Report” page using plain HTML, CSS, and JavaScript. The page displays the text “Hello World” inside a large `<pre>` element, styled with a left-aligned, 3em font. The code directly manipulates the DOM via `document.getElementById(‘message-element’)` to insert the message, demonstrating a minimal, non-framework approach. It relies on a basic script tag to load a bundled JavaScript file, with no additional visualization libraries or data sources.

Apr 12, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a bare-bones HTML page that renders the text “Hello HTML” in the center of the screen using a large 13em font size defined in CSS. It also executes a JavaScript snippet that logs “Hello JavaScript!” to the browser’s developer console. The page uses no external libraries, relying solely on vanilla HTML, CSS, and JavaScript. The styling is applied inline within a `<style>` block, and the script runs directly within the body, showcasing the foundational structure for a web-based visualization or application.

Apr 12, 2021