Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published1🌍 Public
Eecw99
Last edited Mar 22, 2020
Created on Mar 22, 2020
Forked from Customizing Axes

This example visualizes the heights of wide receivers from the 2010 NFL draft, using data from a local CSV file. It builds on a basic bar chart to demonstrate how D3 axes can be customized, applying styled tick labels, grid lines, and axis titles through the `d3.axisLeft` and `d3.axisBottom` APIs. The SVG rendering uses `d3.scaleBand` and `d3.scaleLinear` for the chart’s scales, with formatting via `d3.format`.

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 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
87% 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
87% match
Loading thumbnail…

Customizing Axes

This example demonstrates a customized bar chart of NFL career sack leaders, using data from a CSV file listing player names and sack counts. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map the data, with `axisLeft` and `axisBottom` to render the axes. The x-axis features a custom tick format via `format`, and grid lines are created with `tickSize`. Styling is applied through CSS, including custom font sizes, colors, and removal of the default axis domain lines, while the bars themselves are filled green.

UUsbaldoFraire
83% match
Loading thumbnail…

Customizing Axes

This example demonstrates a customized bar chart of NFL career sack leaders, using data from a CSV file listing player names and sack counts. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map the data, with `axisLeft` and `axisBottom` to render the axes. The x-axis features a custom tick format via `format`, and grid lines are created with `tickSize`. Styling is applied through CSS, including custom font sizes, colors, and removal of the default axis domain lines, while the bars themselves are filled green.

UUsbaldoFraire
83% match
Loading thumbnail…

Customizing Axes

This visualization displays the most-watched Super Bowls, ranking teams by viewer counts from the provided CSV data. It uses D3 v5’s `scaleLinear` for the horizontal axis and `scaleBand` for vertical categories, with custom formatting via `format('.3s')` to abbreviate numbers. The chart builds on a prior bar chart example, highlighting axis customization through `axisBottom` and `axisLeft`, removing default domain lines, and styling tick marks, labels, and the title with CSS.

Nnicfavfar
82% 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
81% 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
80% match
Loading thumbnail…

Axes customization.

This example demonstrates customizing axes in a bar chart built with D3 v5, loading data from an external CSV file and rendering it as SVG rectangles. It uses `d3.scaleLinear` and `d3.scaleBand` to map numeric and categorical values, while `d3.axisBottom` and `d3.axisLeft` generate the axes with custom tick formatting via `d3.format`. The code removes default domain lines, adds a custom axis label and title, and styles tick marks and text through CSS.

CChocoOrange
80% match