Surabhi Verma

@vermasurabhi·4 public vizzes

HTML D3

This example shows a static set of basic geometric shapes rendered in an SVG canvas, using HTML, CSS, and JavaScript without any external libraries. It displays two circles, one pink and one black, alongside a black rectangle with a pink stroke, all positioned manually via SVG coordinates. The styling is applied through a CSS class for typography and inline presentation attributes for the shapes. The code demonstrates the foundational structure of an HTML page with embedded SVG, which serves as a minimal starting point for building more complex D3.js visualizations in a React environment.

Oct 22, 2023

Loading thumbnail…

Hello VizHub1

This example demonstrates how to set up a minimal visualization using D3.js within the VizHub environment. It shows a text message rendered in the browser by dynamically updating the content of an HTML element. The code imports the `select` function from D3 and a local `message` variable from an ES6 module, then uses `select('#message').text(message)` to display it. A CSS file styles the text, and the page loads D3 v5 from UNPKG via a script tag.

Oct 22, 2023

Loading thumbnail…

Vizproject

This example shows a static SVG composition featuring two circles and a rectangle set against a blank canvas. The rendering relies on raw SVG elements—circles with pink and black fills and a black rectangle with a thick pink stroke—positioned within a 960 by 500 coordinate space. The code uses no external libraries, working solely with the HTML5 SVG API embedded directly in the page. The styling is applied through inline SVG attributes and a minimal CSS rule for the page message, with the overall layout fixed and non-interactive.

Oct 21, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates the foundational structure of an HTML page, presenting a minimal yet visually striking "Hello HTML!" message. The rendering approach is straightforward: it combines a standard HTML `div` element with cascading style sheets (CSS) to control the visual presentation, specifically using a class selector to apply a large, centered font size. The code establishes a baseline for web development using only vanilla HTML and CSS, laying the groundwork for more complex interactive data visualizations that would typically incorporate JavaScript libraries like React or D3. It serves as a starting point before introducing dynamic behavior or data binding.

Oct 20, 2023