Skip to main content
SimilarExport ZIP
100%

Bar Chart + Axis customisation

✓ Published5🌍 Public
SSharvariPhadke
Last edited Jan 15, 2021
Created on Jan 13, 2021
Forked from Making a face

This example shows a horizontal bar chart of population by country, using a blue gradient fill for the bars and a custom orange-to-red gradient for axis tick labels. The visualization demonstrates axis and scale customization with d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, including formatted tick labels (e.g., converting "G" to "B" for billions) and extended tick lines. Data is loaded from a CSV file via d3.csv, with population values multiplied by 1000 during parsing. The SVG rendering applies margins, a title, and axis labels through d3 selections and SVG attributes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays population data for 27 countries, with bars extending from a linear scale and country names on a band scale. The example demonstrates customizing axes by applying D3’s `axisLeft` and `axisBottom` within a margin-based layout, using `scaleLinear` and `scaleBand` from D3 v6. Data is loaded from a CSV file via `d3.csv`, with population values multiplied by 1000. The SVG rendering uses steelblue rectangles, with axis text styled via CSS at 1.4em.

HHan Jinseok
88% match
Loading thumbnail…

Customizing Axis

This example demonstrates a horizontal bar chart of population data for selected countries, with customized axis formatting. The visualization uses a linear scale for population values and a band scale for country names, rendering bars as SVG rectangles filled with steelblue. It customizes the x-axis tick labels using `d3.format` to abbreviate large numbers with SI prefixes, while the y-axis displays country names. Data is loaded from a CSV file using `d3.csv`, and the chart layout applies explicit margins and padding.

SSophia Murage
88% match
Loading thumbnail…

Customizing Axis

This example demonstrates a horizontal bar chart of population data for selected countries, with customized axis formatting. The visualization uses a linear scale for population values and a band scale for country names, rendering bars as SVG rectangles filled with steelblue. It customizes the x-axis tick labels using `d3.format` to abbreviate large numbers with SI prefixes, while the y-axis displays country names. Data is loaded from a CSV file using `d3.csv`, and the chart layout applies explicit margins and padding.

SSophia Murage
88% match
Loading thumbnail…

Customizing Bar Chart Axis

This example demonstrates how to customize bar chart axes using D3.js (v5), presenting population data for ten countries from a CSV file. The chart uses a linear scale for the x-axis, showing population values, and a band scale for the y-axis listing countries. The code extends the `d3.axisBottom` and `d3.axisLeft` functions, applying a custom tick formatter that converts numbers to abbreviated labels (e.g., "B" for billion) and removing domain lines and tick marks for a cleaner look. SVG rendering displays the bars, with styled tick text and lines via CSS.

Fframptonb
88% match
Loading thumbnail…

Customizing Axis

This example shows a horizontal bar chart of population data for ten countries, with a customized axis layout using margins to position the labels and tick marks. The visualization uses D3 v5 with an SVG rendering approach, importing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the D3 library. Population values from the CSV file are multiplied by 1000 before being mapped to the x-axis scale, while country names are mapped to the y-axis band scale. The chart displays the data as steelblue rectangles, with the bottom axis explicitly translated to the inner chart height.

RRenato Francia Castillo
88% match
Loading thumbnail…

D3 Bar Chart Customising Axes

This example shows a horizontal bar chart of the populations of the world’s ten most populous countries, with customized axes. It uses d3.csv to load data from a CSV file and d3.scaleBand for the country categories, while d3.scaleLinear maps population values to bar widths. The chart employs d3.axisBottom and d3.axisLeft, with tick formatting via d3.format to abbreviate large numbers into billions. Axis lines and tick marks are selectively removed, and labels for the title and axis are added as SVG text.

Aadbirch
88% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of country populations, with bars scaled to population size and country names on the y-axis. Using d3.csv to load data.csv, it parses population values as numbers, then applies d3.scaleLinear and d3.scaleBand for positioning. The chart renders in SVG, with d3.axisLeft and d3.axisBottom generating labeled axes and tick formatting via d3.format('.3s') for compact labels. Rect elements are appended and sized using the scales, with steelblue fill from CSS.

BBraja Gopal Das
87% match
Loading thumbnail…

d3 Customizing Axis

This example shows a horizontal bar chart of the top 10 most populous countries, using population data from a CSV file. The chart displays country names on the y-axis and population values on the x-axis, with axis labels and a title. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom for rendering axes. It customizes the x-axis tick format to abbreviate large numbers with the d3.format function, replacing 'G' with 'B' for billions. The SVG rendering includes styled tick lines and text elements defined in CSS.

JJohnPaulPagelerJr
87% match