Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 - Axes

Public visualization

Viewing a saved revision (read-only)

45d24a64e80c40b0aeacfb34f3848819

D3 - Axes

0 stars1🌍 Public
SSubhendu Karmakar
Last edited Dec 29, 2023
Created on Dec 29, 2023

This example demonstrates how D3’s axis components render tick marks and labels for a linear scale. Four separate axes—left, right, top, and bottom—are drawn inside an SVG container, all sharing the same `d3.scaleLinear` domain of 0 to 100 mapped to a 400-pixel range. The code uses `d3.axisLeft`, `d3.axisRight`, `d3.axisTop`, and `d3.axisBottom` to generate the axes, then attaches each to a corresponding `<g>` group using `selection.call`. The visualization highlights the standard D3 approach for orienting axes around a plot area.

AI-generated description

D3 Scales - scaleTime()