Aditya Kumar

@coderford·5 public vizzes

Simple Example

This example displays a ranked list of ten best-selling game consoles with their lifetime sales figures. It shows each console name followed by its total units sold in millions, creating a simple text-based data readout. The page loads data from a CSV file containing console names and sales numbers sourced from Wikipedia, then binds it to paragraphs using the D3 v6 selection and data-join pattern with `d3.csv` and `selectAll().data().enter().append()`. Styling is handled through a separate CSS file with a large font size for readability.

Jan 7, 2021

Loading thumbnail…

Best-selling game consoles

This horizontal bar chart ranks the ten best-selling game consoles by lifetime units sold, from the PlayStation 2 at the top to the PlayStation Portable at the bottom. The visualization encodes sales figures as bar lengths on a linear scale, with console names displayed on a band scale on the y-axis. It uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render the SVG bars and axes, and loads the dataset from a CSV file via d3.csv, converting sales values to millions. Data originates from Wikipedia.

Jan 7, 2021

Loading thumbnail…

Animated smiley with D3.js

A yellow smiley face with eyebrows animates on an SVG canvas using D3.js v6. The face is constructed from SVG primitives: a circle for the head, smaller circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` generator for the mouth. The `transition` API repeatedly moves the eyebrows up and down in a looping animation.

Jan 6, 2021

Loading thumbnail…

Shapes with CSS + SVG

This example demonstrates basic geometric shapes rendered with SVG, comparing their default styling, explicit fill attributes, and inherited presentation properties. It uses raw SVG elements such as `circle`, `rect`, `line`, and `path` within a `<g>` container that applies a scale and translation transformation. CSS, via `styles.css`, defines a monospaced body font and strokes for the line group, including a rounded line join on the path. The code shows how shape attributes and CSS rules interact to control color, stroke width, and the overall visual appearance.

Jan 2, 2021

Loading thumbnail…

HTML Cars Report

This example displays a static HTML page titled “Cars Report” that lists three used cars with their model year, make, and price. The data is hardcoded directly in the markup, with the 2008 Nissan Leaf highlighted in red via the `.highlighted` CSS class. The page uses plain HTML lists and a linked `styles.css` file, which sets a monospace font at 2em and applies the red color to the highlighted item. No JavaScript or visualization libraries are involved; the rendering is purely structural and stylistic.

Jan 2, 2021