dhruva2014

@dhruva2014·4 public vizzes

Hello Vizhub

This example displays the text “Hello VizHub!” centered on the page using D3 v5’s `select` API to set the DOM element’s content. It demonstrates loading D3 from a CDN via UNPKG, importing the `select` function directly from the `d3` module, and importing a local ES6 module (`myMessage.js`) that exports the message string. The message is rendered inside a `div` with id `message`, styled by `styles.css`. The code shows modular JavaScript organization and straightforward D3 DOM manipulation without data binding or scales.

Apr 13, 2021

Loading thumbnail…

Fork of Hello VizHub

This example displays the text “Hello VizHub!” in large, centered type within a styled div. It demonstrates basic D3.js usage by importing the `select` function from the D3 module via UNPKG and using it to set the text content of the `#message` element. The code also showcases local ES6 module imports, pulling a string constant from `myMessage.js`. The rendering relies on D3 v5 alongside custom CSS for typography and alignment.

Apr 13, 2021

Loading thumbnail…

SVG Fundamentals

A React component renders a yellow smiley face as SVG, using absolute coordinates for the face, eyes, and mouth. The code imports the `arc` function from D3 to generate the mouth's curved path, while circles are positioned with hardcoded `cx`, `cy`, and `r` values. The visualization demonstrates basic SVG shapes and D3's arc generator within a React rendering pipeline, with all geometry computed from fixed dimensions and offsets.

Apr 13, 2021

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape primitives within a standalone HTML document, rendered directly in the browser’s SVG namespace. It shows a row of three colored circles (black, red, and yellow), followed by a large red rectangle with a navy stroke and a diagonal navy line. The code uses plain SVG elements—`circle`, `rect`, and `line`—with explicit attributes for positioning, fill colors, and stroke properties. No JavaScript libraries are involved; the rendering relies solely on the browser’s native SVG support, with a brown background set on the body element.

Apr 13, 2021