Risabh Raj

@risabhRizz·3 public vizzes

Making a Bar chart

A horizontal bar chart displays population estimates for ten countries, with each rectangle’s height fixed at 300 pixels and width also fixed at 300 pixels, so the bars do not encode the values proportionally. The data from `data.csv` is loaded via `d3.csv`, and each population value is multiplied by 1000 in JavaScript to convert units. The chart is rendered as an SVG, using `d3.select` to target the `<svg>` element and `svg.selectAll('rect').data().enter()` to append rectangles.

Sep 16, 2021

Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face entirely with D3.js v7, rendering geometric shapes as SVG elements. A yellow circle forms the head, while two circles create eyes and rectangles form eyebrows, all positioned with explicit coordinate offsets. The mouth is drawn using the `arc()` generator with specified inner and outer radii. The code selects an SVG element and appends groups to translate the face to the canvas center, demonstrating basic D3 shape generation and SVG transformation.

Sep 9, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to construct basic SVG shapes—circles, rectangles, lines, and paths—using a static HTML page and CSS. The visualization shows how SVG attributes like `fill`, `stroke`, `stroke-width`, and the `<g>` element group shapes to apply shared styling, with initial shapes appearing in default black and then colored red and green. A `<g>` group applies a light blue fill and black stroke to its contents, and another group applies a thick black stroke to a line and path. The code uses raw SVG in `index.html` with a linked `styles.css` for page-level body styling, with no JavaScript involved.

Sep 7, 2021