Surendar

@surendarviz·3 public vizzes

Surendar Bar Chart

A horizontal bar chart displays the populations of ten countries, with steel-blue bars sorted by country name and population values scaled in thousands. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population counts to bar widths and country names to vertical positions, with `axisLeft`, `axisBottom`, and SVG `rect` elements for rendering. Data is loaded from a CSV via `d3.csv` and converted to numbers, showing a straightforward comparison of relative national population sizes.

Mar 31, 2022

Loading thumbnail…

Surendar Bar Chart

A D3.js v5 animation renders a yellow smiley face in SVG, centered within a 960x500 viewport. The face’s eyebrows, drawn as rectangles, move up and down via chained `transition()` calls over two seconds each, while the eyes and arc-based mouth remain static. The example demonstrates fundamental DOM manipulation with `d3.select` and `d3.arc` for constructing shapes and animating attributes.

Mar 31, 2022

Loading thumbnail…

Lets make a face with D3

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face whose eyebrows animate vertically. It uses SVG elements—circles for the face and eyes, rectangles for eyebrows, and a path with the `d3.arc` API for the mouth—all grouped and positioned within an SVG canvas. Eyebrow movement is driven by chained `transition().duration()` calls on the `<g>` container, shifting its `y` attribute back and forth. The code imports `select` and `arc` from D3 v5 to construct and manipulate the visualization dynamically.

Mar 31, 2022