Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Bar Chart + Axis customisation

✓ Published6🌍 Public
RRohit-2710
Last edited Feb 26, 2021
Created on Feb 22, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

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
94% match
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
92% 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
90% 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
88% 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
88% 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
85% match
Loading thumbnail…

Fork of area chart

This example renders an area chart of COVID-19 total cases per country using D3 v7. It loads CSV data from a GitHub gist, converts the total cases to numeric values, and maps countries to a band scale along the x-axis. The area is drawn as a single SVG path with a steelblue fill, while axes are generated using `d3.axisBottom` and `d3.axisLeft`, with country labels rotated and shown every fifth tick. The chart includes axis titles for "Country" and "Total Cases."

Ssaishruthik2361@gmail.com
85% match
Loading thumbnail…

Fork of 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.

Cceresfin
85% match