Ali Sher

@alisheranwar·4 public vizzes

Gudu Pandit

This example demonstrates VizHub’s ability to combine external libraries with local ES6 modules. The page renders a blue, full-width greeting and a green, hoverable text block that turns white on mouseover. Using D3 v5, it imports the `select` function to set the message from a local module, while the stylesheet manages layout and interaction. The code highlights importing from both a CDN and local files.

Aug 16, 2022

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup that renders the text “Hello VizHub!” in large, centered type. It shows how to load D3 v5 from a CDN via UNPKG and structure an HTML page with a dedicated CSS file for styling. The code imports the `select` function from the `d3` package and a custom string from a local ES6 module, then uses `select('#message').text(message)` to update the page. It highlights import syntax, local module usage, and basic DOM manipulation with D3.

Aug 16, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that loads React 18.2.0 from a CDN and logs the React object to the browser console. The page uses a single script tag to import the React production build, then calls `console.log(react)` to inspect the library’s API. It shows how to set up a bare-bones React environment without build tools, relying on the UMD distribution for direct browser usage. No components or UI are rendered; the focus is solely on verifying that React is available globally.

Aug 15, 2022

Loading thumbnail…

Start Up

A minimal SVG drawing depicts a stylized black-and-yellow face with two circular eyes, rendered directly in the markup with hardcoded coordinates. The page uses plain HTML and CSS, with no JavaScript or external libraries. The face is constructed from three `<circle>` elements: a large yellow circle for the head and two smaller black circles for the eyes, each with a black stroke. The SVG canvas is fixed at 650 by 500 pixels, and the body styling in CSS sets a fixed height and width.

Jun 26, 2022