Skip to main content
SimilarExport ZIP
100%

Bar graph with customised axis

✓ Published1🌍 Public
VVishwa246
Last edited May 3, 2020
Created on May 3, 2020
Forked from HTML Starter

This example visualizes the top 10 most populous countries using a horizontal bar graph, with bars rendered as SVG rectangles and a customized axis. The graph displays population values on the x-axis and country names on the y-axis, with data loaded from a CSV file. The code leverages D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the scales and axes, while `format` is used to abbreviate tick labels (e.g., converting billions to "B"). Custom styling is applied via CSS classes for ticks, labels, and the title.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customized Axis

This example shows a horizontal bar chart ranking the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. The chart uses d3.scaleLinear and d3.scaleBand to map data from the CSV file, while d3.axisBottom and d3.axisLeft render the axes with customized tick formatting (using d3.format to abbreviate large numbers). The y-axis labels are styled distinctly, and the chart includes a title and a labeled x-axis. The bars are rendered as SVG rectangles with a fixed fill color.

YYasara Peiris
91% match
Loading thumbnail…

Customizing Axis

This example presents a horizontal bar chart of the top 10 most populous countries using data from a CSV file. Customized axes include a formatted population scale that abbreviates numbers with “B” for billions, and grid lines extending across the chart. The code imports specific D3 v5 functions like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, rendering the visualization as SVG within a React framework.

SSchmittYannic
90% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries, with a horizontal layout and customized axes. The y-axis removes its domain and tick lines, while the x-axis uses a custom tick format that abbreviates large numbers and replaces 'G' with 'B' for billions. The chart is rendered with SVG using D3 v5, loading population data from a CSV file. The code uses `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` to create and customize the visualization.

VVeena Muralidharan
90% match
Loading thumbnail…

Making a Bar Chart/Customizing Axis

This example displays a horizontal bar chart of the top 10 most populous countries, using population data loaded from a CSV file. The chart customizes its axes, removing domain lines and using a D3 formatter to abbreviate large population numbers, such as converting billions to "B". The code relies on D3 v7 modules including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`. SVG rectangles are drawn to represent each bar, with the chart rendered entirely through D3’s data join and SVG manipulation.

Aadelgrosso
90% match
Loading thumbnail…

Bar Chart Example

This horizontal bar chart displays the top 10 most populous countries, using population data loaded from a CSV file. The visualization uses React with D3 v5’s `scaleLinear` and `scaleBand` to map values, while `axisLeft` and `axisBottom` with tick formatting render the axes. SVG elements are appended directly to the DOM, with grid lines created via tick size and styled bars filled in steelblue.

NNico Donovan
90% match
Loading thumbnail…

Customising Axes

This example displays a horizontal bar chart of the top 10 most populous countries, with populations from a CSV file. It customizes the axes by removing domain lines and tick lines from the y-axis, while the x-axis uses a tick format that abbreviates large numbers and converts 'G' to 'B'. The code uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom, and d3.format within a React framework, rendering to SVG. The chart also includes axis labels and a title, with a steelblue fill for bars.

JJoseph Popoola
90% match
Loading thumbnail…

Customizing Axis

This bar chart displays the population of the top 10 most populous countries, using horizontal bars ordered by descending values. It customizes the axes by hiding the default axis lines and ticks, applying a tick formatter that abbreviates large numbers (e.g., converting "G" to "B"), and adding custom labels for the x-axis and title. The visualization is built with D3 v5, using `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format`, with data loaded from a CSV file and rendered as SVG rectangles.

WWahe3bru
90% match
Loading thumbnail…

Customizing Axis

This example shows a horizontal bar chart of the top 10 most populous countries, with a title, axis label, and customized axis ticks. Population values are formatted with d3.format to abbreviate large numbers, and grid lines extend across the chart via the tickSize method. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom for axes. It is rendered as SVG within a React framework.

Sshreyagoddu
90% match