Sanyog Yadav

@sanesanyo·3 public vizzes

Lets make a face using D3.js

A smiling face is drawn with SVG shapes, including a yellow circle for the head, black eyes, rectangular eyebrows, and an arc-based mouth. The left eyebrow animates upward over two seconds using a `transition` on its `y` attribute. Built with D3 v5, the example uses `select`, `arc`, and chained transitions, positioning elements via a centered group with `translate`. All elements are rendered in an SVG canvas, with geometry defined from the viewport’s width and height.

Nov 24, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling, showing circles, rectangles, lines, and a path organized in groups with transforms. The code uses raw SVG elements with attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, and `height`, alongside CSS classes that apply stroke and fill colors. A `scale(1.5)` transform enlarges the entire group, while a translated group applies consistent `fill` and `stroke` properties. The `.lines` class and its nested `path` rule define stroke styling, including a custom color and rounded line joins, with no external JavaScript libraries involved.

Nov 24, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal data-driven report. It displays a list of cars that are priced under a given threshold, showing details like make, year, model, and price. The visualization initially shows a loading message, then asynchronously fetches car data from a hardcoded JSON array using a Promise and `setTimeout`. The `generateReport` function filters and formats this data, which is then rendered as plain text in an HTML `<pre>` element with custom styling from CSS. The code uses standard JavaScript functional methods like `filter`, `map`, and `join`.

Nov 24, 2019