Customize axis

100%

Customize axis

✓ Published1🌍 Public

Last edited Sep 25, 2023

Created on Sep 25, 2023

Forked from test d3

A horizontal bar chart displays the populations of China, India, and the United States, using a custom SVG axis. The chart loads data from a CSV file, converting population values to thousands. It uses d3.scaleLinear and d3.scaleBand for positioning, and d3.axisBottom with a custom tick formatter that abbreviates large numbers. Grid lines extend across the plot, while the y-axis and domain lines are removed, leaving a clean, labeled visualization.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axis

This example shows a horizontal bar chart of the world’s most populous countries, ranking China, India, and the United States at the top by population. It uses D3 v6’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the axes and bars in SVG. The x-axis uses `tickFormat` to abbreviate large numbers and `tickSize` to draw grid lines. Data loads from a CSV file and is parsed with `d3.csv`, while axis labels and a title are styled via CSS.

PPredrag Nikolic

90% match

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the populations of ten countries, with bars ranked from China down to Mexico. The visualization focuses on axis customization: a band scale positions country labels on the y-axis, while a linear scale maps population values to bar lengths on the x-axis. Rendered as SVG using d3.scaleLinear, d3.scaleBand, axisLeft, and axisBottom, the chart loads population data from a CSV file and multiplies each value by 1000 to reflect actual population counts.

Wwsupko

89% match

Loading thumbnail…

Customizing Axes

This example demonstrates a bar chart displaying the population of ten countries, including China and India, sorted by value, with customized axes. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population counts and country names, while `axisBottom` and `axisLeft` render the axes. The x-axis applies a `tickFormat` with the `.3s` specifier to abbreviate large numbers. Data is loaded from a CSV file via `csv`, and the visualization is rendered as SVG rectangles with steelblue fills.

ZZY Huang

88% match

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top ten most populous countries in 2018, with China and India leading by a significant margin. The visualization uses D3 v5 to load CSV data and render SVG elements, employing `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` for the axes. Custom tick formatting converts large numbers into abbreviated units (e.g., "B" for billions), while removed domain lines and styled gridlines highlight the data values.

Sslipperyd

87% match

Loading thumbnail…

Customizing_Axes

This bar chart displays the populations of ten countries, sorted from largest to smallest, with China and India leading. The visualization uses D3 v7 with an SVG rendering approach. It employs `d3.scaleLinear` for the population axis, `d3.scaleBand` for country categories, and `d3.axisLeft` and `d3.axisBottom` to render the axes. Data loads from a CSV file via `d3.csv`, with population values converted from thousands to absolute numbers.

AAuliaAmirullah15

87% match

Loading thumbnail…

Customizing Axis Fork

A horizontal bar chart displays population data for seven countries, ranked from most to least populous. The visualization highlights the dramatic difference between China and India and smaller nations like Serbia, using a stark black-and-lime aesthetic with a hot pink title. Built with D3 v6 in SVG, the code uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for positioning, and custom axis formatting via `axisBottom` and `format('.3s')` to abbreviate values. The chart removes default axis domains and gridlines, replacing them with custom ticks and labels styled through external CSS.

BBaffling Science

87% match

Loading thumbnail…

Customizing Axes - 072119

A horizontal bar chart displays the populations of the top ten most populous countries, with values scaled in thousands and formatted with custom ticks (e.g., "1.41B" for China). It uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisBottom and d3.axisLeft for axes. The chart removes default axis domains, adds gridlines via tickSize, and includes custom axis and title labels. Data is rendered as SVG rectangles with steelblue fill.

Sshallowater

87% match

Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the populations of ten countries, with bars sorted by value and customized axes. The chart uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft plus d3.axisBottom for ticks. Axis customization includes removing domain lines, adding gridlines via tickSize, and formatting tick labels with d3.format to abbreviate values (e.g., converting G to B). A title and axis label are appended as SVG text elements.

Mmagua

87% match