FaysalIbnMohi

@FaysalIbnMohi·7 public vizzes

Showing World Population with D3

This example displays world population data as a series of static rectangular bars, each representing a country’s population value loaded from a local CSV file. Using D3 v7, the code parses the data with `d3.csv`, converts population strings to numbers, and renders SVG `<rect>` elements via `selectAll` and data joins. A `d3.scaleLinear` is configured for the x-axis domain, though the bars currently use fixed dimensions and do not yet map population values to visual properties.

Feb 18, 2022

Loading thumbnail…

Emoji With D3

This example draws a smiling emoji face entirely with D3.js v7, rendering the face, eyes, eyebrows, and mouth as SVG shapes. The code creates a yellow circle for the head, adds two eyes and rectangular eyebrows, and uses d3.arc to construct the curved mouth path. All shapes are positioned relative to the SVG center using grouped transforms. The example demonstrates importing the select and arc functions from D3 and using UNPKG to load the library in the HTML.

Feb 16, 2022

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape creation and grouping within a static web page. It shows circles, rectangles, a line, and a path rendered directly in the markup, with CSS styling for stroke, fill, and line joins. The code uses standard SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with the `<g>` grouping element and transform translations. No external libraries are loaded; all shapes are hand-coded in `index.html` and styled through `styles.css`, making it a pure SVG demonstration without D3 or additional JavaScript APIs.

Feb 14, 2022

Loading thumbnail…

HTML Car Report

This example presents a static HTML car report, displaying a list of three vehicles with their model years and prices in a monospace font. It demonstrates how to load D3 and local ES6 modules via VizHub, though the current visualization uses no JavaScript data rendering. The page structure uses an unordered list with a CSS class to highlight the first car entry in red. The report relies entirely on hardcoded HTML content and styles.css for formatting, with no external charting libraries or data processing visible.

Feb 12, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates the simplest possible web page structure, displaying the text “Hello World” in a `<pre>` element. It uses plain HTML, CSS, and JavaScript, with the script loaded from a bundled `bundle.js` file. The page defines a single `message-element` and renders a static string via `document` manipulation, serving as a minimal template for further visualization development.

Feb 12, 2022

Loading thumbnail…

Car Report

This example displays a static “Hello World” message and a second “Hello VizHub!” message using ES6 modules, demonstrating basic DOM manipulation and text styling. It loads D3 v7 from a CDN via UNPKG and imports local modules, though no D3 functions are actually invoked. The page renders text through `document.getElementById` and applies CSS for centered, large-font styling. The code illustrates VizHub’s workflow for combining external libraries, local imports, and HTML/CSS structure in a minimal setup.

Nov 11, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub supports importing D3 and local ES6 modules to render a simple text message. The page displays “Hello VizHub!” centered in a large font using the `select` function from D3 to set the text content of a div element. The code imports `select` from `d3` and a `message` constant from a local `myMessage` module, showing modular code organization. D3 v5 is loaded via UNPKG, and the styling is defined in a separate CSS file.

Nov 11, 2021