Skip to main content
SimilarExport ZIP
100%

Customising Axes

✓ Published1🌍 Public
WWhitney Hung
Last edited May 26, 2020
Created on May 26, 2020
Forked from Making a bar chart

This example demonstrates how to customize axes in a bar chart showing the top 17 most populous countries. The chart uses D3 v5 to load CSV data and render SVG rectangles, with a linear scale for population on the x-axis and a band scale for country names on the y-axis. The code customizes the axes by removing default domain and tick lines, formatting tick labels from millions to billions using `d3.format`, and adding custom axis titles with specific font sizes and colors via CSS classes. The x-axis ticks extend across the plot area for enhanced readability.

AI-generated description
MIT Licensed

Similar vizzes

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

Customizing Axes

This example demonstrates a bar chart of the top three most populous countries, with customized axes that remove tick marks and format population values in billions. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars from CSV data. The x-axis labels are formatted using D3’s `format` function, replacing “G” with “B” for readability. The chart also includes a title and applies a steelblue fill to bars via external CSS.

RRyan
92% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries in 2018, with population values on the x-axis and country names on the y-axis. The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to position bars and customize tick marks, removing default domain lines and applying a custom tick formatter that converts values to billions. Grid lines extend across the plot area, and labels for the title and axes are added with SVG text elements.

Hhamza.miftah@gmail.com
92% 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
92% match
Loading thumbnail…

Customizing axes

This example demonstrates how to customize chart axes in a horizontal bar chart showing the populations of the top ten most populous countries. It uses D3 version 5 to load data from a CSV file and render SVG graphics. The code applies custom tick formatting with `d3.format`, removes default axis domain lines and tick lines, and adds labels for the x-axis and chart title. The y-axis uses `d3.scaleBand`, while the x-axis uses `d3.scaleLinear`.

YYvan Brito
92% 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
92% 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
92% match