Sushant Kunkekar

@sushforyou·3 public vizzes

FACE with D3

A face rendered as a yellow circle with black eyes and a mouth appears on an SVG canvas. The example demonstrates basic D3 shape generation and SVG attribute manipulation. Using D3 v5, the code appends circles for the face and eyes, and a path created with the `d3.arc` helper to form the mouth, with the arc's innerRadius, outerRadius, startAngle, and endAngle defining its shape. The SVG width and height are read directly from the DOM attributes to position elements.

Jul 16, 2019

Loading thumbnail…

SVG with HTML

This example demonstrates a static SVG scene composed of basic geometric shapes—a magenta circle, a red rectangle, a thick black line, and a triangular path—drawn directly in the HTML markup with fixed coordinates and styling. The page also includes a JavaScript module that imports D3’s `select` function to update the text of a `#message` div, while a separate CSS file sets a cyan background and hides overflow. The rendering relies entirely on SVG elements defined in the source, with no data binding or interaction.

Jul 16, 2019

Loading thumbnail…

Car Report

This example displays a simple car report page with a heading listing two vehicle models: Nano and Hexa. The page uses D3.js, specifically the `select` function, to set the text content of a designated message div with a string imported from a local ES6 module. Styling is applied through an external stylesheet, giving the body a cyan background and increased font size. The visualization is static, showing basic HTML structure combined with D3 for DOM manipulation.

Jul 16, 2019