Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Bar Chart + Axis customisation

✓ Published0🌍 Public
RRohit-2710
Last edited Feb 25, 2021
Created on Feb 25, 2021

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.

AI-generated description
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
95% 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
94% 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
93% 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
93% 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
91% match
Loading thumbnail…

Fork of Fork of Coursework 1.js!

A static bar chart displays COVID-19 case counts for eleven countries, using green bars to encode the `covid_cases` value against a categorical country axis. The visualization is built with D3 v5, employing `scaleLinear` for the value axis and `scaleBand` for the categorical axis, with `axisLeft` and `axisBottom` to render the chart's axes. The data is loaded from a CSV file via `d3.csv`, and the bars are drawn as SVG `<rect>` elements. The chart's source code attempts to fetch a different remote dataset, but the final render uses the local `dataset.csv` file.

FFarhaan Qazi
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 Customizing Axes

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.

Ssofigg
85% match