Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published2🌍 Public
Ddaigokawabe
Last edited Jul 19, 2020
Created on Jul 19, 2020
Forked from Making a Bar Chart

This example shows a horizontal bar chart of population counts for East Japan’s most populous prefectures, with custom-styled axes for readability. It loads CSV data using `d3.csv`, scales populations with `d3.scaleLinear` and prefectures with `d3.scaleBand`, and renders bars as SVG `rect` elements. The axes are built with `d3.axisLeft` and `d3.axisBottom`, using `d3.format` for compact number labels and custom tick sizes and gridlines. Axis labels and titles are added manually, with the default domain lines removed for a cleaner design.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of population figures for prefectures in East Japan, with each bar’s length proportional to the population value. It customizes both axes: the y-axis removes its line and tick marks for a cleaner look, while the x-axis uses `d3.axisBottom` with a `.2s` tick formatter (e.g., “13.7M”) and spans the full chart height via negative tick sizes. The chart is rendered with D3 v5, loading data from a CSV, and uses `scaleLinear` and `scaleBand` for positioning.

VVikil Lakkavatri
94% match
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
86% match
Loading thumbnail…

Customizing Axes

This example demonstrates a horizontal bar chart of the world’s most populous countries using a CSV dataset of population figures. It customizes the axes by removing default domain lines, styling tick marks and labels, and formatting tick values with a `.3s` format specifier that converts billions to “B”. The chart uses `d3.scaleLinear` and `d3.scaleBand` to position bars and applies `d3.axisLeft` and `d3.axisBottom` to render SVG axes.

Ssakhabutdinov
86% match
Loading thumbnail…

Customizing Axes

This example demonstrates a horizontal bar chart of the world’s most populous countries using a CSV dataset of population figures. It customizes the axes by removing default domain lines, styling tick marks and labels, and formatting tick values with a `.3s` format specifier that converts billions to “B”. The chart uses `d3.scaleLinear` and `d3.scaleBand` to position bars and applies `d3.axisLeft` and `d3.axisBottom` to render SVG axes.

Ssakhabutdinov
86% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population data for ten countries, sourced from a CSV file, with a heavily customized axis layout. The chart uses d3.csv to load the data, d3.scaleBand and d3.scaleLinear for positioning, and d3.axisLeft with d3.axisBottom to render the axes. The x-axis tick labels are formatted using d3.format to abbreviate large numbers (e.g., "1.41B"), and the axes are manually positioned within an SVG using margin offsets and a transform attribute.

LLichenYang
86% match
Loading thumbnail…

Customizing Axes

A bar chart ranks ten countries by population using horizontal bars, with a custom margin and axis layout. The code loads CSV data and uses D3 v5 scales (`scaleLinear`, `scaleBand`) and axes (`axisBottom`, `axisLeft`) to position bars and ticks. The x-axis applies a `format("s")` tick formatter to abbreviate large numbers, while SVG `rect` elements render the bars in steelblue.

Uumihito
86% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays population data for ten countries, with bars extending from the left edge and country labels on the y-axis. The example emphasizes customizing axes by styling the bar lengths and band spacing without visible tick marks or labels. It loads data from a CSV file using `d3.csv`, transforms population values by multiplying them by 1000, and renders SVG rectangles with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. The chart adapts to the SVG’s width and height attributes.

BBrandon Da Silva
85% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays population data for 27 countries, with bars extending from a linear scale and country names on a band scale. The example demonstrates customizing axes by applying D3’s `axisLeft` and `axisBottom` within a margin-based layout, using `scaleLinear` and `scaleBand` from D3 v6. Data is loaded from a CSV file via `d3.csv`, with population values multiplied by 1000. The SVG rendering uses steelblue rectangles, with axis text styled via CSS at 1.4em.

HHan Jinseok
85% match