Prasanth Balaraman (@prasanth-balaraman-engineer), VizHub

Making a Bar Chart

This example shows a horizontal bar chart of the ten most populous countries using data from a CSV file, with population values scaled in thousands. The visualization is built with D3 v7, using `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for the axes. SVG rectangles are appended to a group element, positioned with the band scale’s padding, and filled with steelblue via CSS.

Nov 20, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on a plain page, with the message styled at a very large font size. It demonstrates a basic HTML document that uses embedded CSS for visual presentation, with no external libraries or JavaScript functionality. The rendering approach is a straightforward static HTML page that leverages the browser’s default text layout, with styling defined in a `<style>` block within the document’s `<head>`. The code does not include any data sources or interactive behavior, serving as a minimal template for web-based projects.

Nov 20, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup that displays the text “Hello VizHub!” inside a centered HTML div. It shows how to load D3 version 5 from a CDN, import the `select` function from the `'d3'` module, and import a local ES6 module (`myMessage.js`) that exports a string. The code uses `select('#message').text()` to inject the message into the page, with styling applied via an external CSS file.

Nov 20, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on a plain page, with the message styled at a very large font size. It demonstrates a basic HTML document that uses embedded CSS for visual presentation, with no external libraries or JavaScript functionality. The rendering approach is a straightforward static HTML page that leverages the browser’s default text layout, with styling defined in a `<style>` block within the document’s `<head>`. The code does not include any data sources or interactive behavior, serving as a minimal template for web-based projects.

Nov 20, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub supports modular ES6 development with D3 by rendering a simple text message. The page displays “Hello VizHub!” centered in large type using CSS styling. The code imports the `select` function from D3 and a local `message` export from an ES6 module, applying it to a div via `d3.select().text()`. D3 is loaded from UNPKG as a CDN script, while the local JavaScript modules are bundled together.

Nov 20, 2021

Loading thumbnail…

Hello HTML

A bare minimum HTML page demonstrates the foundational structure of web documents. The code uses standard HTML elements, including `<!DOCTYPE html>`, `<html>`, `<head>`, and `<title>`, to define a page that renders an empty body. The example highlights the essential markup required for any webpage, without additional libraries or CSS. The accompanying README file provides context and links to an embedded YouTube video, while the `index.html` file contains only static markup, showing the simplest possible starting point for web development.

Nov 17, 2021