anupam.sivaram@gmail.com

@anupamsivaram·4 public vizzes

Fork of Hello VizHub

This example shows a simple web page displaying the message "Hello VizHub!" centered in large text. It demonstrates VizHub's ability to load D3.js from UNPKG and import the `select` function to target the message div. The code also imports a local ES6 module, `myMessage.js`, which exports the displayed text, and includes a stylesheet for formatting.

Feb 7, 2025

Loading thumbnail…

Fork of Circles with D3

This example demonstrates a simple D3.js visualization that creates and positions three SVG circles, each with distinct coordinates, radii, and fill colors. Using D3’s `select`, `selectAll`, `data`, and `join` methods, the code dynamically binds an array of circle objects to SVG elements, setting their `cx`, `cy`, `r`, and `fill` attributes. The visualization is contained within an SVG element sized to its container, and the styling and layout are driven entirely by the input data array. This serves as a basic introduction to D3’s data binding and element creation patterns.

Feb 7, 2025

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates a minimal "Hello World" visualization using the VizHub V3 Runtime Environment, where a number in the code can be alt-dragged to hot-reload and change the rendered font size. The `main` function exports from `index.js` and writes directly to the container’s `innerHTML`, using an inline style to set the text size. The visualization illustrates the platform’s interactive widget support and simplified entry point without requiring an `index.html` file. The code uses no external libraries, relying purely on the runtime’s built-in state and rendering capabilities.

Feb 7, 2025

Loading thumbnail…

Fork of Hello VizHub

This example displays the message “Hello VizHub!” as large, centered text. It demonstrates how a D3 visualization project can load the D3 library from a CDN and use ES6 module imports. The code imports the `select` function from `d3` and a `message` string from a local `myMessage.js` module, then uses `d3.select` to set the text content of the `#message` div. The page’s styling is defined in an external CSS file.

Feb 7, 2025