Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Responsive Axes with Extra Options

Public visualization

Viewing a saved revision (read-only)

bf84c65466264cddabd60944e111eebb

Fork of Responsive Axes with Extra Options

0 stars0🌍 Public
Sssmadha@hotmail.com
Last edited Mar 13, 2024
Created on Feb 9, 2024
Forked from Responsive Axes

This example demonstrates a responsive D3 v7 chart with customizable axes, including rotated tick labels on both the X and Y axes. It shows how to adjust tick density, outer ticks, tick sizes, and axis label offsets through the exported `axes` and `viz` functions. The visualization uses `d3.axisBottom` and `d3.axisLeft` with `scaleLinear` scales, and automatically resizes via a `ResizeObserver` that updates the chart dimensions. A gray inner rectangle highlights the plotting area, with separate modules handling axis rendering, labels, and resize observation.

AI-generated description

A viz container with responsive axes that have consistent tick mark density. Try opening in full screen mode and resizing!

Challenge

  • Use this technique to make the axes on your viz responsive