Skip to main content
SimilarExport ZIP
100%

Customising axis

✓ Published0🌍 Public
SShabani Muswamba
Last edited Apr 18, 2020
Created on Apr 18, 2020
Forked from Customising axis

This bar chart shows the top 10 most populous countries in 2018, with population values converted from thousands and formatted using a custom tick format that replaces 'G' with 'B' (e.g., billions). The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, with d3.axisLeft and d3.axisBottom to render the axes. Custom styling removes the default domain and tick lines on the left axis, while the bottom axis draws light green gridlines using tickSize. Data is loaded from a CSV file via d3.csv and rendered as SVG rectangles.

AI-generated description

This bar chart shows population of the top 10 most population countries. Data from 2018 Author: Chris Shabani Muswamba

MIT Licensed

Similar vizzes

Loading thumbnail…

Customising axis

This bar chart shows the top 10 most populous countries in 2018, with population values converted from thousands and formatted using a custom tick format that replaces 'G' with 'B' (e.g., billions). The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, with d3.axisLeft and d3.axisBottom to render the axes. Custom styling removes the default domain and tick lines on the left axis, while the bottom axis draws light green gridlines using tickSize. Data is loaded from a CSV file via d3.csv and rendered as SVG rectangles.

SShabani Muswamba
100% match
Loading thumbnail…

Customizing Axis

This bar chart displays the top 10 most populous countries, with population values formatted in billions using a custom tick formatter that replaces "G" with "B" in d3.format output. The chart uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft to render horizontal bars, with gridlines extending from x-axis ticks. A title and axis label are added via SVG text elements, and the y-axis domain lines and tick marks are removed while the x-axis domain is hidden, leaving a clean, focused visualization.

ÁÁlvaro Cáceres Muñoz
94% match
Loading thumbnail…

Customizing Axis

This bar chart displays the top ten most populous countries, with population values shown on a horizontal axis and country names on a vertical axis. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the population scale and `scaleBand` for country categories. Axis customization includes tick formatting via `format('.3s')` that replaces 'G' with 'B' for billions, plus removal of axis domain lines and grid-line styling through `axisBottom` and `axisLeft` calls. Population data from CSV files is converted to absolute numbers by multiplying by 1000.

Nnick-yadav
93% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. It demonstrates axis customization using d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, including custom tick formatting that converts billions to the letter B. The chart removes default axis lines, adds grid lines via tickSize, and includes styled axis labels and a title. Data is loaded as CSV and rendered as SVG rectangles with steelblue fill.

DDuyun Tan
92% match
Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the population of the ten most populous countries, with values formatted in billions using a custom tick format that replaces 'G' with 'B'. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the population x-axis, with d3.axisLeft and d3.axisBottom rendering the axes. SVG rectangles represent the bars, and the y-axis gridlines are removed while the x-axis includes a label. Data comes from a CSV file loaded via d3.csv.

Ffbudwill
92% match
Loading thumbnail…

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, with horizontal bars sorted by country name. The code uses d3.scaleLinear and d3.scaleBand for positioning, and d3.axisBottom with a custom tick formatter that converts large numbers to abbreviated units like "B" for billions. Axis gridlines extend across the plot area via negative tick sizes, while y-axis ticks and domains are removed for a cleaner look. Data loads from a CSV file and is multiplied by 1000 to reflect actual population figures.

TTsing
92% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It shows population values on the x-axis and country names on the y-axis. The example demonstrates D3 axis customization, including formatted tick labels that abbreviate numbers with "B" for billions and removed axis lines. It uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft to render the SVG visualization, with custom styling applied to ticks and labels.

Ccgeiran
92% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries in 2018, based on United Nations population estimates. It shows how D3 axis customization can enhance readability, using custom tick formats (e.g., abbreviating millions as "B") and styled grid lines. The chart employs `d3.scaleLinear` and `d3.scaleBand` for scales, with `d3.axisBottom` and `d3.axisLeft` for axes. SVG rendering styles tick text, grid lines, and labels via CSS. Data is loaded from a CSV file using `d3.csv`, with population values multiplied by 1000.

CCameron
92% match