avirathtib

@avirathtib·8 public vizzes

Area Chart for World Population

This area chart visualizes world population growth over time, with the x-axis representing time and the y-axis showing population in billions. The chart uses an area generator with a basis curve to create a smooth filled region beneath the line. Rendered as SVG, it employs D3.js scales, axes, and the `csv` loader to fetch and parse the population data, with a formatted y-axis label converting values to billions.

Jan 2, 2022

Loading thumbnail…

Scatter Plot for D3

This scatter plot visualizes the relationship between horsepower and weight for cars in the auto-mpg dataset. Each red semi-transparent circle represents a car, with its position determined by the `scaleLinear` mappings for the x and y axes. The visualization is rendered as an SVG using D3 version 7.2.1, employing `axisBottom` and `axisLeft` for the labeled axes and data loaded via the `csv` function.

Dec 31, 2021

Loading thumbnail…

Customising Axes of a Bar Chart

This example shows a horizontal bar chart of the ten most populous countries, using population values from a CSV file. The chart customizes its axes by removing the default domain lines and tick lines from the categorical y-axis, and by applying a custom tick formatter to the linear x-axis that abbreviates large numbers (e.g., converting "G" to "B"). The visualization is built with D3 v7, using `scaleLinear` and `scaleBand` for scales, `axisBottom` and `axisLeft` for axes, and SVG rendering.

Dec 31, 2021

Loading thumbnail…

Bar Chart with D3.js

A bar chart displays population figures for ten countries, ordered by country name, with horizontal bars whose lengths encode population values. The chart uses D3.js version 7, loading data from a CSV file and rendering to SVG. The code employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` to draw axes. Bars are appended as `rect` elements, and population values are multiplied by 1000 during data preprocessing.

Dec 30, 2021

Loading thumbnail…

Make a face with D3.js

A smiley face is rendered in an SVG canvas using D3.js v7, with a yellow circle for the head and two black circles for the eyes. The code appends each circle to the selected `svg` element, setting its radius and horizontal/vertical position via `attr` in relation to the SVG’s `width` and `height`. The styling is handled by an external CSS file that removes page margins. This example demonstrates basic D3 shape creation and attribute manipulation for static visual output.

Dec 29, 2021

Loading thumbnail…

Shapes with CSS and SVG

This example demonstrates various SVG shapes rendered directly on a page, including circles, rectangles, lines, and a path. The SVG markup applies styling through attributes and CSS, with group elements (`g`) using transforms and inherited fill and stroke properties. It also illustrates CSS class-based styling for the line and path elements via the `.lines` rule. The visualization uses raw SVG and CSS, with no additional libraries, showing how shape attributes and styles interact.

Dec 29, 2021

Loading thumbnail…

Cars Report

This simple web page displays a list of three used cars with their prices, presented as static HTML list items. The report highlights the 2012 Nissan Leaf in red text using a CSS class selector, while the other vehicles appear in default styling. The page uses a monospace font at a large size, defined in a linked stylesheet. The data is hardcoded in the HTML markup, with no interactive features or external data sources. The example demonstrates basic document styling with plain HTML and CSS, relying on the `color` property and class selectors for visual emphasis.

Dec 28, 2021

Loading thumbnail…

Fork of Hello VizHub!

This example displays the text “Fork of Hello VizHub!” in a large, centered Ubuntu font on a dark background, with the message rendered via a simple HTML div element. The page uses D3 v5, loaded from a CDN, and relies on CSS for styling—setting a near-black background, light gray text, and full-viewport alignment. No interactive behavior or data binding is present; the visualization is purely static, demonstrating a minimal setup where D3 is included but not yet applied to any data or graphical computation.

Dec 28, 2021