Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Bar Chart + Axis customisation

✓ Published0🌍 Public
DDmitrii
Last edited Mar 2, 2021
Created on Mar 2, 2021

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.

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

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart visualizes COVID-19 cases across the top 20 countries, using horizontal bars to compare case counts. The visualization is built with React and D3 v5, where React manages state and renders SVG elements while D3 scales handle data mapping. The code uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.csv` to load the dataset from a GitHub gist. Tick marks and axis labels are generated manually through React's array mapping rather than using D3's axis components.

SSamanvitha1
83% match