Fork of Customizing Axes

100%

Fork of Customizing Axes

✓ Published0🌍 Public

Last edited May 24, 2022

Created on May 22, 2022

This bar chart displays total COVID-19 vaccinations for 16 European countries, using data from a CSV file. The visualization demonstrates custom axis styling with D3 v5, including a horizontal grid, formatted tick labels that convert G to B for billions, and a custom title and axis label. It uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG chart, with bars colored via CSS.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

A horizontal bar chart displays total COVID-19 cases for eleven countries, using a linear gradient fill and customized axes. The visualization employs D3 v6 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars, while tick labels use a text gradient and formatted numbers via `d3.format`. Data comes from a CSV file containing country names and case totals. The chart includes a title and axis labels, with gridlines removed from the axes.

YYash_Mistry

87% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

A horizontal bar chart displays total COVID-19 cases for ten countries, sorted from highest (USA) to lowest (Argentina). The visualization uses D3 v6 with SVG rendering, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. Custom axis formatting converts large numbers using the `format` function, replacing 'G' with 'B' for billions. The bars and tick labels are styled with linear gradients defined in SVG defs, while the x-axis includes a custom label and tick marks that extend across the plot area. Data comes from a CSV file loaded via `d3.csv`.

Ttolik518

85% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

This bar chart visualizes total COVID-19 cases across eleven countries, using a horizontal layout with a blue-pink gradient fill for bars. The visualization customizes both axes: the y-axis removes tick lines and domain, while the x-axis formats values using D3’s `format` function (e.g., converting to compact notation) and includes a labeled axis title. Data is loaded from a CSV file using `d3.csv`, with scales created via `scaleLinear` and `scaleBand`. Text elements also feature gradient fills, and margins are explicitly set to position the chart within an SVG canvas.

RRohit-2710

85% match

Loading thumbnail…

Fork of Customizing Axes

This visualization displays two horizontal bar charts comparing population values for named countries, with the charts placed side by side for comparison. The bars are rendered as SVG rectangles using D3 v5, with scales from `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. The code customizes axes by removing domain lines, adding grid lines via `tickSize`, and formatting tick labels with `d3.format`. Population data is loaded from CSV files using `d3.csv` and multiplied by 1000.

Sskb461

84% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

This bar chart displays COVID-19 total cases per country, with countries listed on the y-axis and case counts on the x-axis. Each bar is filled with a purple-to-pink linear gradient, and the axis labels use a separate gradient for text styling. The visualization is built with D3 v6, using `scaleLinear` and `scaleBand` to map the data, which is loaded from a CSV file. The code customizes the axes and text appearance through CSS rules, including tick label colors and font sizes.

DDmitrii

83% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

This horizontal bar chart displays COVID-19 case totals for ten countries, using a purple-to-pink gradient fill for the bars and a separate gradient for axis tick labels. The visualization uses d3.csv to load the data, d3.scaleLinear for the x-axis, d3.scaleBand for the categorical y-axis, and d3.axisLeft and d3.axisBottom with custom tick formatting to abbreviate large numbers (e.g., converting billions to "B"). Both axis domain lines and tick lines are removed for a cleaner design.

SSudharsan A

83% match

Loading thumbnail…

Fork of Fork of Bar Chart + Axis customisation

This example shows the total COVID-19 cases for ten countries in a horizontal bar chart, with a custom gradient fill for the bars and gradient text for the axis tick labels. It loads data from an external CSV file using `d3.csv`, then renders SVG rectangles scaled with `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The chart includes a titled x-axis with formatted tick labels via `format('.2s')`, and uses `axisBottom` and `axisLeft` for axes.

RRohit-2710

83% 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

83% match