iamsrihari28

@iamsrihari28·3 public vizzes

Fork of D3 Starter

This visualization displays employment rates for both males and females over time, allowing users to select a country from a dropdown menu to update the chart. The view shows a dual-series line chart where brown vertical lines and circles represent male data at each time point, while green ones represent female data. Built with D3 v7, the code uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for axes, and SVG circles and lines for rendering. A legend distinguishes the two gender variables.

Sep 17, 2021

Loading thumbnail…

Fork of Fork of Fork of Hello VizHub : Making circles 1

This example displays 150 randomly generated circles scattered across an SVG canvas. The code uses D3 v5 APIs such as `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` to map data values to positions and colors. Each circle’s radius, x-coordinate, and y-coordinate are derived from the random data multiplied by additional random factors. The circles are rendered with semi-transparent fills and strokes using RGB strings, demonstrating basic data binding and SVG element creation.

Sep 16, 2021

Loading thumbnail…

sad face

A yellow smiley face with animated eyebrows is displayed on a black background. Built with D3.js v5, the SVG face’s eyes and mouth are static, while the eyebrows alternate between two vertical positions over two seconds using chained `transition().attr()`. The rendering relies on SVG primitives like `circle`, `rect`, and `path` created via `d3.select` and `d3.arc`.

Sep 12, 2021