Rotated Axis Labels

d3.js graph with rotated axis text

This example shows a time-series line chart of stock closing prices, with the x-axis labels rotated to prevent overlap. The SVG visualization uses D3 v3 to parse dates from a CSV file and map them to a time scale, while a linear scale maps the price values. Axis text is formatted with a custom tick format and rotated using D3’s `selection.attr` with a transform string. The line path is generated via `d3.svg.line`, and both axes are built with `d3.svg.axis`.

81% match

Rotated axis labels in v6

This example shows a line graph of stock closing prices over time, with the x-axis labels rotated at a steep angle to prevent overlap. The chart is rendered as an SVG, built with d3.v6’s scaleTime, scaleLinear, and d3.line for the path, while d3.axisBottom and d3.axisLeft generate the axes. After drawing the bottom axis, the code selects its text elements and applies a rotate(-65) transform along with adjusted text anchoring. The data comes from the included data.csv file, parsed using d3.timeParse.

80% match

Rotated axis labels in v4

This example shows a simple line chart of stock closing prices over time, with the x-axis labels rotated at a steep angle to prevent overlap. The graph uses d3.csv to load the date and close value pairs from data.csv, then renders the line with d3.line and scales using d3.scaleTime and d3.scaleLinear. After drawing the axes with d3.axisBottom and d3.axisLeft, it applies a rotation transform of -65 degrees to the tick text, along with adjusted text anchoring, to make the dates readable.

79% match

Extending the d3 Axis function

This example shows how to extend D3’s built-in axis component to customize tick styling—specifically, highlighting January ticks as bold, black year labels while other months remain gray. The custom `timeAxis` function wraps `d3.svg.axis`, reuses its scale and tick configuration, then reapplies a class to tick elements based on whether the date falls in January. It uses D3 v3 with SVG rendering, and the code includes a custom multi-format date formatter for month and year labels. The axis is drawn on a time scale spanning from July 2010 to April 2012.

HHerbCaudill

78% match

Axis Styling II

This example demonstrates a time-series axis with a customized right-side y-axis using post-selection, where axis labels and grid lines are restyled after rendering. The code uses d3.axisBottom and d3.axisRight to create the axes, with the y-axis’s tick lines converted to dashed gray gridlines and labels repositioned. A transition triggered by d3.timeout animates the y-axis domain change over 2.5 seconds, using post-selection to modify entering, updating, and exiting tick elements. The implementation relies on d3.scaleTime, d3.scaleLinear, and transition.attrTween to cancel default tweens, rendering as SVG with animation.

Mmbostock

Axis Styling

This example demonstrates how to customize the appearance of axes created with the d3-axis API in D3 v4, rendering SVG output. The chart shows a time-based scale on the x-axis spanning 2010–2012 and a linear scale on the y-axis ranging from 0 to 2 million. Customization is achieved through post-selection, where the code modifies generated axis elements by removing the domain path, styling tick lines with dashed strokes and gray color, and adjusting tick text positioning. A custom tick format prefixes the first value with a dollar sign and appends “million” while others use narrow non-breaking spaces. The code uses `d3.axisBottom`, `d3.axisRight`, `d3.scaleTime`, and `d3.scaleLinear`.

Mmbostock

Date Ticks

This example demonstrates how D3’s time scale and axis API can animate date tick marks as the domain’s upper bound randomly shifts. A bottom-oriented SVG axis is created with `d3.time.scale` and `d3.svg.axis`, formatting tick labels as month/day strings. Every few seconds, `setInterval` triggers a transition that updates the axis domain to a new random date, smoothly redrawing the ticks and grid lines via `.transition().duration()`. The chart uses no external data, only a generated sequence of dates between January 2 and a random day in late January, with the axis centered vertically on a 960×500 SVG canvas.

Mmbostock

Rotated axis labels in v5

A line chart displays stock closing prices over time, with the x-axis labels rotated at a steep angle to prevent overlap. The visualization uses d3.csv to load date and price data, then maps dates with d3.scaleTime and values with d3.scaleLinear. The line path is drawn via d3.line, while d3.axisBottom and d3.axisLeft generate the axes. Rotated labels are styled by selecting axis text elements and applying a transform of rotate(-65) with adjusted text-anchor and offsets. The SVG rendering approach follows d3 v5 patterns.