Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Sep 4, 2019

Created on Sep 4, 2019

This example displays a horizontal bar chart ranking 15 countries by speed camera density, as sourced from a Spectator Index tweet. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map camera counts and country names, with `axisBottom` and `axisLeft` generating custom gridlines and ticks. Numerical labels are formatted using `d3.format` to abbreviate values, while the y-axis hides its domain and ticks for a cleaner look. SVG rectangles render the bars, with margins and axis titles controlled via CSS classes.

AI-generated description

Data on speed traffic cameras from this tweet.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart ranking the top 15 countries by speed camera density, using data on speed traffic cameras. The visualization applies a linear scale for the x-axis and a band scale for the y-axis, with custom tick formatting to abbreviate large numbers. The axes are customized using `d3.axisBottom` and `d3.axisLeft`, with grid lines extending across the chart and axis labels styled via CSS. The chart is rendered as an SVG using D3.js v5, with data loaded from a CSV file.

CCurran Kelleher

93% match

Loading thumbnail…

Customizing Axes

This bar chart ranks fifteen European countries by speed camera density, showing cameras per 1,000 square kilometers, with Belgium leading and Spain trailing. The visualization customizes its axes by removing domain lines and tick marks on the y-axis, adding a formatted x-axis with abbreviations (e.g., "67" becomes "67.0"), and including a title and axis label. Built with D3 v5 using `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format`, the SVG renders steel-blue rectangles from CSV data sourced from a tweet.

LLaurens

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

86% match

Loading thumbnail…

Customising Axes

This example shows a horizontal bar chart ranking the world’s most populous countries, with custom styling for both axes. The chart uses D3’s `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates, while `axisBottom` and `axisLeft` produce the ticks and grid lines. The y-axis’s default domain and tick lines are removed, and the x-axis labels are formatted using `format('.3s')` to abbreviate large numbers (e.g., converting G to B). The bars themselves are purple SVG rectangles, and the data comes from a CSV file listing population figures.

Yyktan89

86% match

Loading thumbnail…

Customizing Axes

A bar chart ranks ten countries by population using horizontal bars, with a custom margin and axis layout. The code loads CSV data and uses D3 v5 scales (`scaleLinear`, `scaleBand`) and axes (`axisBottom`, `axisLeft`) to position bars and ticks. The x-axis applies a `format("s")` tick formatter to abbreviate large numbers, while SVG `rect` elements render the bars in steelblue.

Uumihito

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

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

85% match

Loading thumbnail…

Customizaing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using a D3 v5 SVG rendering. The chart shows population values on a linear x-axis with custom tick formatting that abbreviates large numbers (e.g., converting billions to 'B'), while the categorical y-axis lists country names. The code uses D3's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the scales and axes. It removes default domain lines and tick lines, and adds custom axis labels and a title. Data is loaded from a CSV file and multiplied by 1,000.

Nnkohdatavis

85% match