Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Responsive Axes

Public visualization

Viewing a saved revision (read-only)

09a183404d9b4566b6b1c6ec35e616b7

Responsive Axes

0 stars1🌍 Public
JJingxuan Yang
Last edited Feb 13, 2024
Created on Feb 13, 2024

This example demonstrates how to build a responsive scatter plot visualization with labeled axes using D3.js. It renders a gray inner rectangle with linear scales for the x and y axes, both of which dynamically adjust their tick count based on the chart's dimensions. The code uses a ResizeObserver to monitor the container size and automatically update the SVG’s width and height on resize. Axes are drawn with `axisBottom` and `axisLeft`, while labels are added as rotated text elements, showcasing a modular structure split into separate axis and label modules.

AI-generated description

Adding labels to our X and Y axes with D3.