Vipul Gaurav

@vgaurav3011·3 public vizzes

d3 Starter bar chart

This bar chart visualizes the top 10 most populous countries in 2018 using data from the United Nations World Population Prospects 2017. The example demonstrates a minimal D3.js v5 setup, reading from a CSV file and rendering rectangular bars as SVG elements. The code uses `d3.csv` to parse the data, `d3.scaleLinear` for scaling, and appends SVG `rect` elements with `steelBlue` fill. While the bar heights are fixed at 300 pixels in the visible code, the structure shows how D3 binds data to graphical primitives.

Apr 21, 2020

Loading thumbnail…

Plot Countries

This example visualizes religious populations across countries from a CSV file, displaying each country’s data as rectangles in an SVG. It uses D3 v5’s `csv` loader to parse the data, converts population values to numbers, and appends rectangles via `selectAll` and `data` binding through the `enter()` selection. The `scaleLinear` is configured but not applied, leaving the rectangles fixed at 300 by 300 pixels. The visualization demonstrates basic data loading and SVG element creation without implementing axes or dynamic scaling.

Apr 20, 2020

Loading thumbnail…

Let's make a face with D3.js!

A face is drawn as a smiley with yellow fill, black stroke, circular eyes, and an arc-shaped mouth on an SVG canvas. The code demonstrates fundamental D3.js DOM manipulation by appending shapes to a group element, using `d3.select`, `d3.arc`, and chained `transition` calls to animate the eyebrows, which move up and down over two-second intervals. The rendering is entirely SVG with a simple animation loop.

Apr 20, 2020