Fork of Bar Chart + Axis customisation

100%

Fork of Bar Chart + Axis customisation

✓ Published0🌍 Public

Last edited Jan 30, 2021

Created on Jan 30, 2021

Forked from Bar Chart + Axis customisation

This example presents a horizontal bar chart of population data for ten countries, drawn from a CSV file. It uses D3 v6 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes. Custom axis formatting converts large numbers into abbreviated labels like "B" for billions, and the chart includes styled titles and labels. The bars render as SVG rectangles filled with a linear gradient, while tick text uses a separate gradient for visual distinction. The chart also removes default axis domain lines and tick marks.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Customizing Axes

This example customizes a horizontal bar chart of the top 10 most populated countries. It uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population data loaded from a CSV. Axis lines and ticks are selectively removed, tick labels use a custom `.3s` format replacing “G” with “B”, and a title and axis label are added. SVG rectangles are rendered for each bar, with styling from an external CSS file.

Ddaniel

91% match

Loading thumbnail…

Fork of Customizing Axes

This example displays a horizontal bar chart of the populations of the ten most populous countries, using data from a CSV file. The chart ranks countries from largest to smallest, with bars colored steelblue and clear axis labels. It uses D3 v6 APIs such as `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. The code customizes axes by removing domain lines, adding grid lines, and formatting tick labels to show values in billions.

MMajaha21

90% match

Loading thumbnail…

Fork of Making a Bar Chart/Customizing Axis

A horizontal bar chart displays the ten most populous countries, with population values on the x-axis and country names on the y-axis. Population numbers are formatted using `d3.format`. The chart uses `d3.scaleLinear` and `d3.scaleBand` to map data from a CSV file, with `d3.axisLeft` and `d3.axisBottom` for the axes. SVG rectangles are rendered via D3 selections, with the y-axis domain removed and grid lines drawn through `tickSize`.

Aadelgrosso

90% match

Loading thumbnail…

Fork of Making a Bar Chart

This horizontal bar chart displays population figures for ten countries, with each bar’s length proportional to the population value from a CSV file. The visualization uses D3 v6’s `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis positioning, and SVG `rect` elements for bars. Data is loaded asynchronously via `d3.csv` and multiplied by 1000 before rendering. Axes are generated using `axisLeft` and `axisBottom`, with margins applied through a translated group element.

MMajaha21

90% match

Loading thumbnail…

Fork of Making a Bar Chart

MMajaha21

90% match

Loading thumbnail…

Fork of Bar Chart + Axis customisation

This fork of a D3.js v6 bar chart visualizes population data for 21 countries, using the `d3.csv` loader and `d3.scaleLinear` and `d3.scaleBand` to map population and country names to the SVG canvas. It features customized axes via `d3.axisLeft` and `d3.axisBottom`, with tick labels formatted using `d3.format` to abbreviate large numbers (e.g., "1.44B"). The chart applies a linear gradient fill to the bars and displays a title and axis label, with gridlines removed for a cleaner presentation.

RRohit-2710

90% match

Loading thumbnail…

Fork of Making a bar chart

This horizontal bar chart displays population figures for ten countries, using data from a CSV file with populations scaled by a factor of one thousand. The visualization relies on D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with SVG rectangles representing each country’s value. Axes are generated via `axisBottom` and `axisLeft`, while tick labels are formatted using `format` to abbreviate numbers, and gridlines are styled through CSS. The chart includes custom axis titles and a chart title, all rendered as SVG elements.

Llinyyyyyyyyy

89% match

Loading thumbnail…

Fork of Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries in 2018, based on United Nations data loaded from a CSV. It shows the population values via bar lengths, with a custom tick format that converts large numbers into abbreviated suffixes like “B” for billions. The visualization builds on a basic bar chart by customizing D3 axes: removing domain lines, adding an axis label, and styling ticks using `d3.axisBottom`, `d3.axisLeft`, and `scaleBand`. It uses D3 v5 with SVG rendering, and the code imports specific modules like `csv` and `scaleLinear`.

Sskb461

89% match