Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published2🌍 Public
RRobindj2000
Last edited Dec 8, 2021
Created on Dec 3, 2021
Forked from Making a bar chart

This example shows a horizontal bar chart ranking the population of the top 10 most populous countries, with a customized axis style. The chart uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to generate the axes. The code removes default axis lines and domain paths, then applies custom styling via CSS for tick labels, grid lines, and a title. The visualization renders to SVG elements.

AI-generated description

This is the same bar chart of previous work, but more styled.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with population values displayed in billions on a custom axis. The code uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisBottom with a custom tick format that abbreviates numbers (e.g., converting "G" to "B"). The left axis hides its domain and tick lines, while a title and axis label are added as SVG text elements.

RRiccardo Pressiani
96% 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
96% 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
95% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top ten most populous countries, with population values in billions and country names as categorical labels. The visualization customizes both axes by removing default domain lines, styling tick marks and labels via CSS, and formatting tick values with D3’s `format(".3s")` to convert gigabytes into billions. Using `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, it renders SVG rectangles with a steelblue fill, a title, and an x-axis label, all positioned within computed margins.

EEllednera
95% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 countries by population, with customized axes. The chart uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft, d3.axisBottom, and d3.axisRight for axis rendering. The x-axis is formatted with a custom tick formatter that converts values from millions to billions, and gridlines are extended across the plot. The y-axis labels and tick lines are removed, while the axis lines themselves are customized with specific font sizes and colors via CSS.

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

Customizing Axes

This example shows a horizontal bar chart ranking the top 10 most populous countries, with population values formatted using abbreviated notation. The chart customizes both axes: the y-axis removes domain lines and tick marks, while the x-axis uses a tick format and negative tick size to create gridlines. Built with D3 v5, it uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to render SVG elements, with data loaded from a CSV file.

SShengjie-Sun
95% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, with populations displayed in billions using a custom tick format. The chart uses d3.scaleLinear and d3.scaleBand to map population values and country names, while d3.axisBottom and d3.axisLeft render the axes. Key customizations include removing domain lines, adding gridlines via tickSize, and appending an axis label. Data is loaded from a CSV file with d3.csv, and the visualization is rendered as SVG with D3 v5.

CChampCham
94% match