Skip to main content
SimilarExport ZIP
100%

Fork of Customizing axes3

✓ Published0🌍 Public
Aakshayms0
Last edited Oct 22, 2022
Created on Oct 22, 2022
Forked from Customizing axes

This horizontal bar chart displays the top 10 most populous countries using a CSV dataset, with population values multiplied by 1000. The visualization uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars, with custom tick formatting converting values to billions via `.3s` and custom axis labels. The chart highlights styling through CSS classes, including colored ticks, axis label, and title, while removing default axis domains for a cleaner look.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries using horizontal bars, with population values on the x-axis and country names on the y-axis. The visualization uses D3 v5 with `d3.csv` to load data, `scaleLinear` and `scaleBand` for scaling, and `axisBottom` and `axisLeft` for axes. Data originates from a CSV file, rendered as SVG rectangles with custom tick formatting that converts billions to "B" notation.

WWaffleSlayer69
91% match
Loading thumbnail…

Customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, with population values converted from raw numbers to thousands and formatted with abbreviated tick labels (e.g., “1.41B”) using D3’s `format` and `.replace('G','B')`. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with custom axis styling applied via CSS classes like `.tick text` and `.axis-label`. Grid lines are created by setting `tickSize(-innerHeight)` on `d3.axisBottom`, while the y-axis’s domain and tick lines are removed. Data comes from a local CSV file, and the SVG rendering is driven by React and D3 v7.

Aakshayms0
91% match
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 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
90% 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 Customizing axes of a bar chart

This horizontal bar chart ranks the top 10 most populous countries, using population values derived from a CSV file where the raw numbers are multiplied by 1,000. Built with D3 v5, it employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical y-axis labels, and custom axis tick formatting via `d3.format` to display abbreviations like "B" for billions. The SVG rendering includes a title, rotated axis labels, and styled grid lines and ticks.

Jjingwg3@163.com
90% match
Loading thumbnail…

Fork of Customizing Axes

This horizontal bar chart displays the population of the top 10 most populous countries using 2018 UN estimates. Written with D3 v5, the visualization uses `scaleLinear` for the x-axis and `scaleBand` for categorical y-axis placement of each country. The chart customizes axes by removing default domain lines and tick marks, adding gridlines via negative tick sizes, and styling labels with large fonts. The SVG rendering includes a title and an axis label, with data loaded from a local CSV file.

KKinjal-Goyani
90% match
Loading thumbnail…

Fork of Fork of Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects, with data loaded from a CSV file. It showcases customized D3 v5 axes, using `d3.scaleLinear` for the population scale and `d3.scaleBand` for countries. The code applies tick formatting with `d3.format`, removes axis domains, and uses `d3.axisBottom` and `d3.axisLeft` to render the scales. A title and axis label are added, with styled SVG text and steelblue rectangles for bars.

Ddankvader1
90% match