axis breaks

100%

✓ Published0🌍 Public

Last edited May 28, 2019

Created on Aug 8, 2017

This chart visualizes a small dataset of seven numeric values as bars, but the y-axis scale has a deliberate break between 5 and 20. The diagram uses the `fc.scaleDiscontinuous` API from the d3fc library to remove that range, compressing the visual gap and making the larger values (22 and 25) easier to compare with the smaller ones. A dashed red annotation line, created with `fc.annotationSvgLine`, marks the location of the break. The chart is implemented with d3 v5 and the d3fc `fc.chartCartesian` function, with data hard-coded in the script.

AI-generated description

This example demonstrates how the d3fc discontinuous scale can be used to create a 'break' in a scale, in this case the range 5-20 is removed in order to allow data which spans a large range, to be more easiy visualised.

A line annotation is used to highlight the location of the break.

(Note, the axis ticks are not ideal, as highlighted in this issue).

mit Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This horizontal bar chart displays average response times for various API endpoints, with a linear x-axis and categorical y-axis. It uses a D3 v5 scaleBand for bars and scaleLinear for the x-axis, with custom tick formatting via `format('~s')` that replaces "G" with "B" for large values. A left axis without domain lines and horizontal gridlines from negative tick sizes emphasize the bar lengths. The data comes from a CSV file containing endpoint names and their average response times in milliseconds.

AAndres Crovetto

71% match

Loading thumbnail…

Customizing Axes - 072019

This bar chart displays the populations of ten countries, with bars ordered alphabetically along the vertical axis and population values on the horizontal axis. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map data from a CSV file, and `axisBottom` with a custom tick format that abbreviates numbers (e.g., converting gigabytes to billions). The SVG rendering includes a left axis stripped of domain and tick lines, while the bottom axis removes its domain line, creating a clean, minimal appearance with steelblue bars.

Sshallowater

70% match

Loading thumbnail…

AXIS

This example demonstrates a simple bar chart with a labeled x-axis ranging from 0 to 100. The axis is placed at a fixed vertical position using SVG transforms, with a single semi-transparent blue bar anchored at the value 50. Built with D3 version 7, it uses `d3.scaleLinear` to map data values to pixel coordinates and `d3.axisBottom` to render the tick marks and labels. The visualization is drawn as an SVG element with a background color, highlighting the basic workflow of creating scales and axes.

HHan Jinseok

70% match

Loading thumbnail…

DecemberCafeChap7

Five dark blue rectangles form a small horizontal bar chart, with bar widths proportionally mapped from a five-point numeric dataset. The visualization uses two side-by-side SVG groups and incomplete axis attempts, but the committed code renders an x-axis at the bottom and a y-axis on the right, both using d3.axisBottom and d3.axisLeft with d3.scaleLinear. The y-axis placement appears misaligned, offset beyond the chart’s visible area. The example demonstrates basic data binding, scales, and axis creation in d3 v4 with SVG rendering.

AAlsaxian

70% match

Loading thumbnail…

Customizing Axes

This bar chart visualizes node insertion distances from a dataset, showing both absolute and relative distances across node IDs. The chart uses dual y-axes: a left axis for node distance and a right axis for relative distance, with red circles overlaid on bars to highlight relative values. Built with D3 v5, the code demonstrates customizing axes through `scaleLinear`, `scaleBand`, `axisLeft`, `axisRight`, and `axisBottom`, with `.tickFormat` and `.tickSize` controls. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes labeled axes and a title.

Uucsclk

70% match

Loading thumbnail…

Fork of Customizing Axis

This example shows a bar chart of monthly incidents, using a diverging scale where bars extend horizontally from a central axis. The chart is rendered as an SVG in a React environment with D3 v5, using `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The x-axis labels are formatted with `format('.2s')` to display numbers in thousands. The code customizes the axis by removing domain lines and tick marks, and adds a rotated title and axis label via `g.append`. Data comes from a CSV file loaded with `d3.csv`.

PPaolaAntonicoli

70% 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

70% match

Loading thumbnail…

axis

A horizontal bar chart ranks ten countries by population, with the data loaded from a CSV file and drawn as SVG rectangles. The visualization uses `d3.scaleLinear` and `d3.scaleBand` for positioning, while `d3.axisLeft` and `d3.axisBottom` render country labels and a formatted population axis that converts units to billions. The chart includes a title, an "xTitle" label, and gridlines styled via the `tickSize` method.

AAveryBurke

69% match