Skip to main content
SimilarExport ZIP
100%

d3.js: axis new and vanilla comparison side-by-side

✓ Published0🌍 Public
GGerHobbelt
Last edited Sep 11, 2012
Created on Sep 11, 2012

This example presents three side-by-side iframes, each embedding a separate d3.js block that compares the old and new implementations of the d3 axis API. The layout uses a fixed-width container with three tall frames, vertically offset to align the top-level charts for visual comparison. The embedded blocks make heavy use of d3.svg.axis (the deprecated version) and d3.axisBottom, d3.axisLeft, and related new-style axis constructors, demonstrating differences in tick formatting, orientation, and configuration. The surrounding HTML and CSS simply arrange the iframes; no interaction or additional code is present beyond the three embedded examples.

AI-generated description

Similar vizzes

Loading thumbnail…

Axis test

Two charts compare how `d3.axisBottom` handles band scales with different domain sizes. The top axis uses a small domain of seven values, displaying every tick, while the bottom axis uses a domain of fifty values and reduces ticks to twenty using `d3.ticks`. Both scales use `d3.scaleBand` and `rangeRound`, with axes rendered as SVG `<g>` groups. The implementation builds axis configurations through a custom `makeAxis` function that conditionally selects tick values based on domain length.

AAltxis
71% match
Loading thumbnail…

Classical Scales

This example showcases a series of classical axis configurations built with the D3.js v2 library, highlighting its advanced axis component. It demonstrates various scale types—linear, logarithmic, power, square-root, quantile, quantize, threshold, and identity—each paired with different domain ranges and tick subdivision settings. The visualization animates through these axes, each labeled with a description, and includes SVG rendering with custom filters and styling. The code is derived from Ger Hobbelt’s enhanced d3.axes component, with related gists for vanilla D3 compatibility.

GGerHobbelt
69% match
Loading thumbnail…

D3 - Axes

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.

SSubhendu Karmakar
68% match
Loading thumbnail…

fresh block

A simple D3.js example displays a time-scale x-axis spanning from September 2012 to January 2013, with major ticks every 14 days formatted using a custom multi-level time format (`d3.time.format.multi`). The code sets a large top and bottom margin (250 pixels) to center the axis vertically within the SVG canvas. It renders a single SVG group containing the axis via `d3.svg.axis()`, with tick labels suppressed by the custom format function. The visualization demonstrates basic axis configuration and custom tick formatting without any underlying data or interactive behavior.

AA6Brgeuka
68% match
Loading thumbnail…

D3: A simple, unstyled axis

This example demonstrates a basic scatterplot rendered as an SVG, with red data-point labels and axes that adopt a default, unstyled appearance. Using D3 v4, the code loads a hardcoded array of coordinate pairs and applies linear scales to map the data to a 500-by-300-pixel drawing area. The `d3.axisBottom` and `d3.axisLeft` functions generate the x- and y-axes, while circles are placed and labeled via D3’s `selectAll` and `append` chain. Data is presented without any custom styling rules, highlighting raw axis output.

深深度碎片
68% match
Loading thumbnail…

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
68% match
Loading thumbnail…

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
68% match
Loading thumbnail…

Axis (with nice)

This example displays a horizontal axis with five numerical tick marks, positioned below a short line of data points. The axis is generated using D3.js version 4.2.2, specifically the `d3.axisBottom` function, which is applied to a linear scale created with `d3.scaleLinear`. The scale’s domain is derived from the minimum and maximum of the sample data array using `d3.extent`, and its range is set to 600 pixels. The axis is rendered as an SVG group element, transformed to sit at a specified vertical position within the 700×100 pixel canvas. The page itself is a minimal HTML document with embedded JavaScript and uses the D3 library loaded from a CDN.

Ppanmenghan
68% match