KH customising axis barchart with D3.js

100%

KH customising axis barchart with D3.js

✓ Published1🌍 Public

Last edited Aug 27, 2021

Created on Aug 27, 2021

Forked from KH makes a barchart with D3.js

This bar chart displays the top 10 most populous countries, with population values read from a CSV file and rendered as horizontal bars. The visualization uses D3.js v7’s `scaleLinear` and `scaleBand` for positioning, `axisLeft` and `axisBottom` for custom axes, and a tick formatter that converts large numbers into abbreviated units (e.g., "B" for billions). Axes are styled with custom CSS, and grid lines are drawn via tick sizing.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries, using D3.js v5 to render an SVG visualization. The chart customizes axes by removing the y-axis line and ticks, and by formatting x-axis tick labels from raw numbers into a compact "B" (billion) suffix using a custom tick format function. Country labels appear on the y-axis, while population values are represented by horizontal bars scaled with `d3.scaleLinear`. Data is loaded from a CSV file and parsed for the visualization.

MMinwoo Pak

88% match

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries, using horizontal bars ordered by population. The chart customizes axes by applying a tick format that abbreviates large numbers (converting G to B) and removing domain lines for a cleaner look. Built with d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, it renders to SVG and includes labeled axes and a title.

BBarryC7

88% match

Loading thumbnail…

KH makes a barchart with D3.js

This is a horizontal bar chart made with D3.js (version 7) and rendered as an SVG, showing the populations of ten countries (in thousands) from a local CSV file. The view uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with populations read from the data and multiplied by 1,000 before being drawn as rectangles. Axes are added with `axisLeft` and `axisBottom`, and the chart is built by appending a group element and then entering rectangles, all styled with a steelblue fill.

KKyleHincz

88% match

Loading thumbnail…

Customizing Axes - 072119 12:06 am

This bar chart displays the populations of the top 10 most populous countries, using a horizontal layout with custom axes and tick formatting. The chart renders population values in billions by converting the raw data with d3.csv and d3.format, while removing default axis lines and ticks. The visualization uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to position bars and labels within an SVG, with a title and axis label added via appended text elements.

Sshallowater

88% match

Loading thumbnail…

Customizing Axis

This visualization displays the top 10 most populous countries as horizontal bars, with population values on the x-axis and country names on the y-axis. It uses d3.csv to load data from a CSV file, then d3.scaleLinear and d3.scaleBand to map values and categories. The axes are customized using d3.axisBottom and d3.axisLeft, with tick labels formatted via d3.format to abbreviate large numbers (e.g., “1.41B”). Bar rectangles are appended to an SVG group with margins applied, and gridlines are created by negative tick sizes on the x-axis.

KKaleb LaBarrie

88% match

Loading thumbnail…

Customizing axes

This bar chart shows the populations of the top 10 most populous countries, using a horizontal layout with population on the x-axis and country names on the y-axis. The example demonstrates customizing axes by removing default tick lines, adding a custom tick format that converts G to B, and including custom axis labels. Built with D3 v4, it uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft to render the SVG visualization from a CSV data file.

KKarkG

88% match

Loading thumbnail…

Barchart vol. 2 / Customizing Axis

This bar chart displays the top 10 most populous countries with population values on the x-axis and country names on the y-axis. It uses D3 v7's `scaleLinear` and `scaleBand` to map data, with `axisLeft` and `axisBottom` for axis generation, including customized tick formatting via `d3.format`. The SVG rendering omits axis domains and gridlines, styling bars in steelblue. Population data from a CSV file is multiplied by 1000 before visualization, with a title and custom-styled labels.

Llnfrnzsk

88% match

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top 10 most populous countries using data from a CSV file. It maps population to bar width with a linear scale and country names to bar height using a band scale. The axes are customized with d3.axisBottom and d3.axisLeft; tick lines are removed, grid lines are added, and population values are formatted with d3.format to abbreviate billions as "B". The visualization is rendered as SVG with D3 v6.

WWayne716

88% match