Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published0🌍 Public
IIanmp
Last edited Jun 16, 2020
Created on Jun 16, 2020
Forked from Customizing Axes

This bar chart displays the average viewership per season for two TV shows, Friends and HIMYM, based on a supplied CSV dataset. It demonstrates how to customize D3 axes, with axis ticks removed, custom tick formatting using `d3.format`, and axis labels styled via CSS. The visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with axis functions like `d3.axisLeft` and `d3.axisBottom`. The rendered output is an SVG generated with D3 v5.

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…

series BarChart

This example shows a grouped bar chart comparing viewer ratings for two TV series, Friends and How I Met Your Mother, across ten seasons. The chart uses an SVG container with a fixed width and height, and the data is loaded from a CSV file using d3.csv. The visualization is built with D3 v5 within a React framework, though the primary rendering logic relies on D3’s selection and data-join methods. The bars are not yet drawn in the provided code, as the script only logs the parsed data to the console.

IIanmp
79% match
Loading thumbnail…

Customizing Axes

This bar chart displays the average values per telescope name from a small CSV dataset. The visualization demonstrates custom axis styling using D3 v5, where both the bottom and left axes are generated with `scaleBand` and `scaleLinear` respectively, and configured via `axisBottom` and `axisLeft`. Tick labels are enlarged to 2.7em, tick lines use a light gray stroke, and a custom axis label appears with a larger font size. The chart renders as an SVG with a fixed width and height, and the data is loaded asynchronously via `csv()`.

LLonwabo11
77% match
Loading thumbnail…

Customizing Axes

This example presents a bar chart of model accuracy, using data from a local CSV file. It demonstrates how to customize D3 axes with `d3.axisBottom` and `d3.axisLeft`, removing default domain lines and adjusting tick labels with `d3.format`. The chart’s layout uses `d3.scaleLinear` and `d3.scaleBand`, with a custom tick format that replaces 'G' with 'B' for large numbers. Styling is applied via CSS to the SVG output.

Iisaac-ux
74% 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
74% 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
74% match
Loading thumbnail…

Customizing Axes

This example presents a horizontal bar chart of opera type counts from a CSV file, demonstrating custom D3 axis styling. The y-axis removes domain and tick lines for a cleaner look, while the x-axis applies a custom tick formatter using `d3.format` to abbreviate large numbers and replaces "G" with "B". The code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with SVG rendering and CSS controlling tick, label, and title appearance.

JJasonXQH
74% match
Loading thumbnail…

Customizing Axes

This example shows how to customize axes in D3 bar charts, displaying event names on the y-axis and their start years on the x-axis. It uses D3 v5’s `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, with custom tick formatting via `format('.3s')` and removal of default domain lines. The SVG rendering includes axis labels, a title, and grid lines generated by setting negative tick sizes. Data comes from a local CSV file parsed with `d3.csv`.

SShehroze Aamer
74% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of country populations, with a custom tick format that abbreviates large numbers from billions (G) to billions (B). It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to position bars and axes, with data loaded from a CSV via `d3.csv`. The axis ticks are formatted using D3’s `format` function and the bars are styled with a blue fill in SVG.

LLonwabo11
74% match