Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Nov 29, 2019

Created on Nov 29, 2019

Forked from Let's make a face with D3.js!

This example shows a horizontal bar chart of the ten most populous countries, using a linear scale for population and a band scale for country names. The axes are customized with a filtered y-axis, a formatted x-axis that converts billions to "B", and a title. Built with D3 v5, it loads data from a CSV and renders SVG rectangles, removing domain lines and tick marks for a cleaner look.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the ten most populous countries, with population values in thousands. The chart customizes both axes by removing domain lines, adding grey tick lines for the x-axis, and styling tick labels. Built with D3.js v6, it uses `scaleLinear` and `scaleBand` for scales, `axisBottom` with a custom tick format, and `axisLeft` for the categorical axis. Data is loaded from a CSV file.

Sscarlet shao

96% match

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the ten most populous countries, with population values scaled to thousands. The visualization customizes both axes by removing default domain lines and tick marks, leaving only text labels for clarity. The chart is built with D3 v5, using scaleBand for the categorical country axis, scaleLinear for the population axis, and the axisBottom and axisLeft functions for rendering. Data is loaded from a CSV file and styled with CSS.

MMarrnj2

96% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population data for ten countries, with customized axes. The y-axis displays country names using a band scale, while the x-axis uses a linear scale with tick labels formatted in abbreviated units (e.g., “1.42B”) via d3.format and a custom replace function. The chart is rendered as SVG using d3-scale, d3-axis, and d3-selection, with data loaded from a CSV file and styled through external CSS.

MMarrnj2

95% match

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the ten most populous countries, with populations scaled in thousands from a CSV file. The chart uses D3 v5 to build linear and band scales and axis generators, then customizes the axes by removing domain lines and default grid lines, adding a rotated x-axis label, and formatting tick labels to abbreviate large numbers (e.g., "1.42B"). The SVG rendering includes a title and styled tick marks, axis labels, and bars in steel blue.

PPioustu

95% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, using a linear scale for population and a band scale for country names. The y-axis labels are enlarged, while the x-axis applies a custom tick formatter that converts values into abbreviated units (e.g., "1.42B"). The chart uses `d3.csv` to load data, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` with SVG rendering. The axis domain lines are removed, and tick marks extend across the plot area.

Jjblaskovich

95% 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

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

95% match

Loading thumbnail…

Customising Axes

A horizontal bar chart shows the ten most populous countries, with population values on the x-axis and country names on the y-axis. The chart uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for the scales, and d3.axisBottom and d3.axisLeft for the axes. The x-axis labels are formatted with d3.format, and the y-axis gridlines and domain line are removed, while the x-axis domain is also removed. A custom axis label and title are added as SVG text elements.

Jjhofang

95% match