Skip to main content
SimilarExport ZIP
100%

Formatting axes

✓ Published3🌍 Public
Bbertieip
Last edited Jun 22, 2020
Created on Jun 12, 2020
Forked from Making a barchart

This example displays a bar chart of the populations of the ten most populous countries, sorted by rank. The chart uses a formatted y-axis that converts raw numbers into human-readable values with the suffix "B" for billions, and a categorical x-axis for country names. The visualization is rendered as an SVG using React and D3 v5, with scales created via `d3.scaleLinear` and `d3.scaleBand`. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, and tick labels are formatted using `d3.format`. The data is loaded from a CSV file using `d3.csv`, with population values multiplied by 1000 during preprocessing.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Formatting axes

This example displays a bar chart of the populations of the ten most populous countries, sorted by rank. The chart uses a formatted y-axis that converts raw numbers into human-readable values with the suffix "B" for billions, and a categorical x-axis for country names. The visualization is rendered as an SVG using React and D3 v5, with scales created via `d3.scaleLinear` and `d3.scaleBand`. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, and tick labels are formatted using `d3.format`. The data is loaded from a CSV file using `d3.csv`, with population values multiplied by 1000 during preprocessing.

Bbertieip
100% match
Loading thumbnail…

Customizing Axes

This example shows the top 10 most populous countries as a bar chart, with the x-axis customized to format population values in billions using `d3.format('.3s')`. The chart uses a linear x-scale and a band y-scale, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Y-axis tick lines and domains are removed, while the x-axis includes a tick-line grid extending across the plot. Data comes from a CSV file, and the visualization is rendered as SVG using D3 v5 within a React framework.

BBat-Erdene
89% match
Loading thumbnail…

Formatting axis

This example shows a horizontal bar chart of the top 10 most populous countries, with population values formatted using d3.format’s ".3s" abbreviation (e.g., 1.42M). The chart uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisBottom with a custom tickFormat to display compact population labels. Data is loaded from a CSV file via d3.csv, and the SVG rendering is driven by React-compatible D3 v7 code. Axis gridlines are removed, and a text label for the x-axis appears below the ticks.

Aalisha-zemoso
89% match
Loading thumbnail…

Customising Axes

This example displays a horizontal bar chart of the top 10 most populous countries, with population values formatted in billions using `d3.format`. The code customizes both axes: the y-axis removes its domain and tick lines for a cleaner look, while the x-axis uses a custom tick format that converts 'G' to 'B' and adds grid lines via `tickSize`. Data is loaded from a CSV file using `d3.csv`, and scales are created with `d3.scaleLinear` and `d3.scaleBand`. The visualization is rendered as SVG within a React framework.

Bbrett@cloudaccelerator.co
89% match
Loading thumbnail…

Formatting Axis

This example displays a horizontal bar chart of the top 10 most populous countries, with population values formatted using a custom tick format that replaces "G" with "B" for billions. The chart uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft and d3.axisBottom to render axes with tick lines extending across the plot. The SVG rendering includes a title, axis labels, and steelblue rectangles for each bar.

Rrebeccayc
89% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the ten 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 position bars, while `d3.axisBottom` and `d3.axisLeft` render customized axes with removed domain lines and grid ticks. Population numbers are formatted using `d3.format` to abbreviate large values (e.g., "1.42B"), and the chart is rendered as SVG within a React-compatible setup using data loaded from a CSV file.

Ddamankwah
89% match
Loading thumbnail…

Fork of Formatting axis

This bar chart displays the population of the top 10 most populous countries, with country names on the y-axis and population values on the x-axis, using a horizontal layout. It loads data from a CSV file and renders as SVG within a React framework, leveraging d3.scaleLinear and d3.scaleBand for scales. The code formats the x-axis tick labels using d3.format’s ".3s" abbreviation and applies d3.axisLeft and d3.axisBottom for the axes. Each bar’s width corresponds to the population, with steelblue fill and custom font styling from CSS.

Sssdrockstar1
89% match
Loading thumbnail…

Styled Bar Chart

This example displays a horizontal bar chart ranking the populations of the ten most populous countries, with formatted tick labels and axis styling. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and SVG rectangles for the bars. Data is loaded from a CSV file of UN population estimates for 2020, and the chart includes custom tick formatting that converts values to billions with the ‘B’ suffix.

MMark Lam
88% match