Customizing axes

100%

Customizing axes

✓ Published1🌍 Public

Last edited Aug 14, 2019

Created on Aug 13, 2019

This example shows a horizontal bar chart of the ten most populous countries, with a custom formatted x-axis and a styled y-axis. The D3 script (v5) loads data from a local CSV file and uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG. It removes default axis lines, customizes tick labels to abbreviate numbers (e.g., "1.43B"), and adds a title and an axis label.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, with a customized axis layout and formatting. It uses D3 v5 with `csv`, `scaleLinear`, and `scaleBand` to map population values and country names, while `axisBottom` and `axisLeft` render the axes. Axis ticks are formatted with `format(".3s")` to abbreviate numbers, and grid lines are styled via CSS. The SVG is drawn with `select` and appended `rect` elements, and the legend titles are added as text elements.

JJefferson Abreu

94% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, using a linear scale for population and a band scale for country names. The axes are customized with a filtered y-axis, a formatted x-axis that converts billions to "B", and a title. Built with D3 v5, it loads data from a CSV and renders SVG rectangles, removing domain lines and tick marks for a cleaner look.

DDhaval Potdar

93% match

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the ten most populous countries, with population values in thousands. The chart customizes both axes by removing domain lines, adding grey tick lines for the x-axis, and styling tick labels. Built with D3.js v6, it uses `scaleLinear` and `scaleBand` for scales, `axisBottom` with a custom tick format, and `axisLeft` for the categorical axis. Data is loaded from a CSV file.

Sscarlet shao

93% match

Loading thumbnail…

customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, with custom axis styling. It uses d3.csv to load population data, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the numeric x-axis. The code removes default axis domains and gridlines via selections, applies custom tick formatting with `format('.3s')` to abbreviate large numbers, and adds axis titles and a graph title. All rendering is done with SVG elements, with bar colors and text styles defined in an external stylesheet.

Ttheaddies

93% match

Loading thumbnail…

Customizaing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using a D3 v5 SVG rendering. The chart shows population values on a linear x-axis with custom tick formatting that abbreviates large numbers (e.g., converting billions to 'B'), while the categorical y-axis lists country names. The code uses D3's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the scales and axes. It removes default domain lines and tick lines, and adds custom axis labels and a title. Data is loaded from a CSV file and multiplied by 1,000.

Nnkohdatavis

93% match

Loading thumbnail…

Customizing Axes

This example demonstrates a horizontal bar chart of the top 10 most populous countries, highlighting customized axis styling. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population and country names, with `axisBottom` and `axisLeft` rendering ticks. The code removes default axis domains and gridlines, applies custom tick formatting via `format('.3s')` to abbreviate numbers, and sets an SVG title. Data loads from a CSV file, and rendering uses SVG with `select` and `csv` from D3.

BBo Yang

93% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the populations of the ten most populous countries, using a CSV data source. D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` position the bars and axes, while the bottom axis’s tick labels are formatted with `format(".2s")` and a custom replacement of ‘G’ with ‘B’. The chart removes default axis domain lines and y-axis tick marks to create a cleaner look, and appends custom text elements for the axis label and title.

Ssaeedtajikai

92% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with customized axes. The y-axis displays country names using d3.axisLeft, while the x-axis uses d3.axisBottom with a tick formatter that converts values to abbreviations like "1.42B" and draws grid lines via tickSize. The code removes default axis domains and tick lines, and adds axis labels and a title with custom text styling. Data is loaded from a CSV file using d3.csv, with population values multiplied by 1000.

LLukas Schießer

92% match