Aravind Subramaniam

@aravind098·7 public vizzes

Let's make a bar chart

A bar chart displays population values for East African nations from a CSV file, with repeated entries producing overlapping rectangles. Each data point becomes a square via D3's `selectAll`, `data`, and `enter` methods, set to fixed 300-pixel dimensions. The code loads the data using `d3.csv`, multiplies population values by 100, and renders SVG rectangles without axis or scaling logic.

Jan 19, 2020

Loading thumbnail…

Responding to Resize

This visualization demonstrates how an SVG chart can automatically resize to fill its browser window. It shows two semi-transparent green lines forming an X, which dynamically adjust their positions and lengths based on the current viewport dimensions. The implementation uses d3.select to create the SVG element, then a custom redraw function extracts the container’s clientWidth and clientHeight to update the SVG attributes. A window resize event listener triggers the redraw, while the dataset provides the line endpoints. The chart’s container is styled with CSS positioned fixed to span the entire page.

Jan 19, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a cartoon face from SVG primitives. A yellow circle forms the head, with positioned circles for eyes and arcs for a mouth, all centered via a group transform. The code constructs these shapes using `select`, `arc`, and attribute setters, while a `transition().duration()` sequence animates the eyebrows upward and back down over several seconds, creating a simple facial expression.

Jan 19, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiley face built from basic SVG shapes—a yellow circle, two eyes, and a mouth—demonstrates D3.js DOM manipulation. The code uses `d3.select` and `d3.append` to construct elements, while `d3.arc` defines the mouth path. A continuous `transition` animates the eyebrows upward and downward over two-second intervals, showing chained movement. The example relies on D3 v5, rendering in SVG, with dimensions taken directly from the `<svg>` attributes.

Jan 17, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a polyline path—arranged in a grid and styled with both inline attributes and CSS classes. The SVG elements are grouped and transformed using the `transform` attribute for scaling and translation, while the CSS file defines stroke properties for the line elements. Rendered entirely with inline SVG markup, the visualization shows how fill colors can be applied directly or inherited from parent `<g>` groups, including combined fill and stroke effects.

Jan 17, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of used cars filtered by price. It loads car data from an embedded JSON array, filters cars under $2,000, and displays formatted strings like "2009 Ford F150: $1950" in a page element. The code uses JavaScript modules with `export`/`import`, a `Promise` with `setTimeout` to simulate asynchronous data fetching, and the `Array.filter`, `Array.map`, and `Array.join` methods. The report updates after a two-second loading delay, using `document.getElementById` to set the text content.

Jan 15, 2020

Loading thumbnail…

Cars Report

This example demonstrates how to generate a text-based report from a hardcoded array of car objects, listing vehicles priced under $2,000 in the format “year make model:$$price.” The interface initially displays “Loading…” while the `getCars` function simulates a two-second delay with a promise before data is processed. The `generateReport` module filters the array, maps each car through the `formatCar` utility, and joins results on newlines. The page updates via `document.getElementById` to replace the loading message with the final report.

Jan 15, 2020