Suvrajit karmaker

@suvrajitkarmaker·3 public vizzes

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It shows a horizontal bar layout with country names on the y-axis and population values on the x-axis, featuring custom axis formatting that converts large numbers to abbreviated units like “B” for billions. Built with D3 v5, the example uses `d3.scaleLinear` and `d3.scaleBand` for positioning, `d3.axisLeft` and `d3.axisBottom` for axes, and `d3.csv` to load data. The chart is rendered as SVG elements with styled rectangles.

Apr 27, 2020

Loading thumbnail…

Making a bar chart

This example shows a blank SVG canvas prepared for building a bar chart, with the viewport dimensions explicitly read from the SVG element’s width and height attributes. The code uses d3’s `select` and `attr` methods to access the SVG and its dimensions, setting up the foundation for subsequent data binding and shape generation. The rendering approach is SVG-based, and the initial state includes a simple body style with zero margin and hidden overflow. The chart itself is not yet populated, focusing purely on the setup phase of the visualization.

Apr 27, 2020

Loading thumbnail…

Face making

A face made of SVG shapes is drawn in the center of a yellow circle, with eyes, eyebrows, and a mouth formed from arcs and rectangles. The eyebrows animate upward and then back down over two seconds using chained D3 transitions. Built with React and D3 v5, the code selects the SVG, appends groups for spatial offsets, and uses D3’s `arc()` generator for the mouth path. The animation is driven by `transition().duration(2000)` on the eyebrow group’s transform attribute.

Apr 26, 2020