Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published2🌍 Public
BBirmanTAZ
Last edited May 7, 2019
Created on May 7, 2019
Forked from Customizing Axes

This bar chart displays the payroll salaries of the top ten active Red Sox players, with dollar amounts read from a CSV file. The example showcases how to customize D3 axes using `d3.axisBottom` and `d3.axisLeft`, including tick formatting that abbreviates large numbers, removal of domain lines, and added axis labels. The SVG chart uses `d3.scaleLinear` and `d3.scaleBand` for positioning, with styling applied via external CSS.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 best paying jobs by annual mean wages, with population values from a CSV file representing salary figures. It shows customized axes where the x-axis uses abbreviated tick labels with billions format and horizontal grid lines, while the y-axis labels are positioned without tick lines or domain path. Built with D3 v5, the code uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the visualization, and renders as SVG with styled tick marks and labels. The chart includes a title and axis label, with data loaded via `csv` and formatted using `format`.

Llizziechoi121
81% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 best paying jobs by annual mean wages, with population values from a CSV file representing salary figures. It shows customized axes where the x-axis uses abbreviated tick labels with billions format and horizontal grid lines, while the y-axis labels are positioned without tick lines or domain path. Built with D3 v5, the code uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the visualization, and renders as SVG with styled tick marks and labels. The chart includes a title and axis label, with data loaded via `csv` and formatted using `format`.

Llizziechoi121
81% match
Loading thumbnail…

2018 World Champions

This bar chart displays the 2019 salaries of active Boston Red Sox players, highlighting that the highest salary exceeds five times the tenth-highest value. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map salary data from a CSV file, with red bars rendered as SVG rectangles. Axis labels and a title are added via `axisBottom` and `axisLeft`, while tick lines and domains are customized. Data originates from Spotrac as of 07-May-2019.

BBirmanTAZ
79% match
Loading thumbnail…

2018 World Champions - Red Sox!

A horizontal bar chart displays 2019 payroll salaries for active Red Sox players, sourced from Spotrac, with values in millions of dollars. The bar lengths vary dramatically, as the highest salary is over five times the lowest. Built with D3 v5, the visualization uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and renders bars as red SVG `rect` elements. Axis labels and a title are drawn using SVG `text` elements, and the scene is styled with an external CSS file.

BBirmanTAZ
78% match
Loading thumbnail…

Customizing Axes

This bar chart displays the heights of 46 wide receivers from a CSV dataset, with the top 10 most populous countries’ population data noted in the README. It demonstrates custom D3 v5 axes by styling tick labels, tick lines, and an axis label with large sans-serif fonts and custom colors. Using the `d3.select` and `d3.csv` APIs, the SVG renders with steelblue bars, while the axis customization is applied via CSS classes on the `.tick` and `.axis-label` elements.

Eecw99
77% match
Loading thumbnail…

Customizing Axes

This bar chart displays the heights of 46 wide receivers from a CSV dataset, with the top 10 most populous countries’ population data noted in the README. It demonstrates custom D3 v5 axes by styling tick labels, tick lines, and an axis label with large sans-serif fonts and custom colors. Using the `d3.select` and `d3.csv` APIs, the SVG renders with steelblue bars, while the axis customization is applied via CSS classes on the `.tick` and `.axis-label` elements.

Eecw99
77% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of Alpha Team ratings by soldier role, with scores normalized from a CSV dataset. The visualization demonstrates customizing D3 axes by removing default domain lines and tick lines, adding an axis label, and applying custom styling via CSS. It uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, d3.axisBottom, and d3.axisLeft, with data loaded via d3.csv.

JJimmyDiGioia
77% match
Loading thumbnail…

Customizing Axes

This example demonstrates a bar chart visualizing shift patterns for multiple employees over consecutive dates, with customized axes for readability. The chart uses D3 v5 APIs including `d3.nest` to group data by date, `d3.scaleBand` for the y-axis, and `d3.scaleLinear` for the x-axis, with `d3.axisLeft` and `d3.axisBottom` generating ticks. Axis labels are styled via CSS, and the x-axis tick format converts large numbers using `d3.format`. Data comes from a CSV file listing names, dates, and shift types, rendered as SVG rectangles.

Hharada32
77% match