Avijit Roy Karmakar

@avijitroykarmakar·3 public vizzes

Lets make a face with d3.js

This example assembles a friendly face from basic geometric shapes—circles form the eyes, and arcs create the smile—rendered as SVG elements on a 960×500 canvas. The page loads d3.v5 from a CDN and uses standard d3 selections and shape generators to position each facial feature relative to the center of the viewport. No data or interaction is involved; the face is static, with the code simply demonstrating how d3’s coordinate system and SVG primitives combine to construct a recognizable illustration.

Sep 4, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling, showing circles, rectangles, lines, and paths rendered in a single SVG canvas. The code uses raw SVG elements with attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `transform` for positioning and scaling. CSS classes in `styles.css` control stroke properties and colors for the line and path elements, while inline attributes set fill colors on individual shapes. The visualization highlights how SVG geometry combines with CSS rules to style vector graphics without JavaScript libraries.

Sep 4, 2019

Loading thumbnail…

Hello VizHub

This example displays the text "Hello VizHub!" centered on a dark blue background using the D3.js library. It demonstrates how to set the text content of a specific HTML element with the `select` function and the `.text` method. The page integrates a custom ES6 module, `myMessage.js`, which exports the message string, and defines its typography and color scheme through an external CSS file. The visualization is a simple proof of concept for building interactive web pages with D3 and modular JavaScript.

Sep 4, 2019