Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published2🌍 Public
SSagar Malviya
Last edited Jun 1, 2019
Created on Jun 1, 2019
Forked from Making a Bar Chart

This example demonstrates how to customize axes in a bar chart displaying the top 10 most populous countries, using population data loaded from a CSV file. The chart applies a linear scale for the x-axis and a band scale for the y-axis, with custom tick formatting that converts large numbers to abbreviations. The code leverages D3.js v5 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, while removing default axis domains and styling grid lines and labels through CSS.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example visualizes the top 10 most populous countries as a horizontal bar chart, using population values loaded from a CSV file. The axes are heavily customized: the y-axis removes its domain line and tick marks, while the x-axis applies a custom tick format that abbreviates numbers (e.g., converting billions to "B") and draws full-width grid lines. Both axes and the chart title use large sans-serif fonts with muted gray fills. The code relies on D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format`.

VVijay
95% match
Loading thumbnail…

Customizing Axes

This example demonstrates how to customize axes in a bar chart visualizing the top 10 most populous countries, using data from a CSV file. The chart displays population values on the x-axis and country names on the y-axis, with custom formatting that converts large numbers to a readable scale. The code employs D3's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the axes, while removing default tick lines and domain paths to achieve a clean design. The visualization also uses `format` to abbreviate numbers, replacing "G" with "B" for billions, and applies custom styling through CSS classes.

Ggilbster
95% match
Loading thumbnail…

Customizing Axes

This example demonstrates how to customize axes in a bar chart using D3 v5, displaying the top ten most populous countries with population values along the x-axis and country names along the y-axis. The chart uses linear and band scales, with axis tick labels formatted to show millions as “B” and gridlines extending across the plot area. Data is loaded from a CSV file, and the SVG rendering removes default axis domains while adding custom labels and styling.

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

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using data from a CSV file, with population values in thousands rendered as circles on a linear scale. The code customizes both axes by removing default domain lines, adding truncated tick labels formatted with d3.format (e.g., changing G to B for billions), and extending tick lines across the chart via tickSize. It uses d3.csv, scaleLinear, scalePoint, axisLeft, and axisBottom in D3 v5, with an SVG rendered scatter-style layout.

Aaurelio-david
94% match
Loading thumbnail…

Customizing axes

This example demonstrates how to customize axes in a bar chart showing the top 10 most populous countries, with population values formatted from raw numbers to compact “B” notation. It removes unnecessary axis lines, adds grid lines via tick sizing, and includes a chart title and axis label. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with styles guided by a dataviz style guide. Data comes from a CSV file, rendered as SVG rectangles with custom tick formatting and removed domain lines.

Llokkafufya
94% match
Loading thumbnail…

Customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, using population data loaded from a CSV file. It customizes the axes by removing domain lines and tick lines from the y-axis, while the x-axis uses a custom tick format that abbreviates large numbers (e.g., converting billions to "B") via d3.format. The chart is rendered with SVG using d3.scaleBand for the categorical country labels and d3.scaleLinear for population values. Axis generation relies on d3.axisBottom and d3.axisLeft, with tick size extended across the plot for grid lines, and a title and axis label added as text elements.

AAnita Tse
94% match
Loading thumbnail…

Customizing Axes

This example uses a bar chart to display the top ten most populous countries, with population values read from a CSV file and scaled by a factor of one thousand. The chart customizes both axes by removing domain lines, applying a tick format that abbreviates large numbers (converting "G" to "B"), and adding a population label and title using SVG text elements. It builds the visualization with d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, rendering as SVG. The y-axis ticks are styled with a larger font, and the chart includes a grid-like effect with horizontal tick lines.

Ccornshoots
94% match