Skip to main content
SimilarExport ZIP
100%

Bar Chart

✓ Published1🌍 Public
Rries62
Last edited Sep 12, 2021
Created on Sep 5, 2021
Forked from Customizing Axes

This example displays a bar chart of the top ten goal scorers for the Netherlands national football team, with player names on the y-axis and goal counts on the x-axis. The visualization uses D3 v5 to parse a CSV string with `csvParse`, transform the data, and render gold bars against a dark slate background. The chart includes styled axes, tick labels, and a title, all formatted via external CSS. The data originates from a hardcoded CSV in the source files, and the SVG rendering is handled entirely by D3’s standard plotting functions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bar Chart

A forked bar chart displays the all-time top ten goal scorers for the Netherlands national football team, with player names and goal counts loaded from inline CSV data. The visualization uses D3 v5 to render gold rectangles on a dark background, with large axis labels and tick marks styled in oldlace. It applies function composition through `Array.reduce` to process data transformations, though the chart itself shows a straightforward categorical comparison of player totals.

Rrichard.adamson@hotmail.com
90% match
Loading thumbnail…

D3 Starter

This visualization displays the top Dutch football (soccer) scorers, comparing the number of matches played versus goals scored for each player. The chart renders as an SVG with a dark slate background, gold rectangles for bars, and old lace-colored text and axes. It is built using React with D3 v6 functions including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to generate the axes. Data is loaded asynchronously from a CSV file named `topscoorders.csv` using D3's `csv` method, and the visualization updates accordingly.

Rries62
81% match
Loading thumbnail…

Bar Chart

This bar chart visualizes the most goals scored by professional footballers, with player names on the y-axis and goal counts on the x-axis. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for the axes, and d3.axisBottom with tick formatting. Purple rectangles are rendered in SVG, and the chart includes a title and axis label.

RRashesh4
77% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 goal scorers in the world, with countries and goal counts drawn from a CSV file. It shows how D3 v5 axes can be customized: the y-axis uses `axisLeft` for country labels, while the x-axis uses `axisBottom` with a custom tick formatter that converts large numbers into abbreviated units (e.g., "805" to "805"). The chart also removes default axis domains and gridlines, adds an axis label and title, and uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis.

Ppblanas
77% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 goal scorers in the world, with countries and goal counts drawn from a CSV file. It shows how D3 v5 axes can be customized: the y-axis uses `axisLeft` for country labels, while the x-axis uses `axisBottom` with a custom tick formatter that converts large numbers into abbreviated units (e.g., "805" to "805"). The chart also removes default axis domains and gridlines, adds an axis label and title, and uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis.

Ppblanas
77% match
Loading thumbnail…

Bar Chart: Goals

A bar chart compares total career goals for different footballers, with green bars animating upward in sequence from an initial zero position. The chart includes custom axes, rotated labels, and a football pitch overlay with field markings and penalty areas drawn behind the bars. It uses D3 v3 and v4 together, loading data from a CSV file, and relies on `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `selection.transition()` with duration and delay for the animated bar growth.

SSimon Hackbert
74% match
Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays the goals scored by African football players, with player names on the y-axis and goal counts on the x-axis. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map data from `data.csv` to SVG rectangles, with `axisLeft` and `axisBottom` generating scales and tick marks. `<rect>` elements are bound to the data via a data join, while CSS styles the bars.

HHadi Boukdir
74% match
Loading thumbnail…

Making a Bar Chart

A bar chart displays the number of goals scored by Premier League players, with data from a local CSV file loaded via D3’s `csv` function. Steelblue rectangles represent each player’s goal count, with player names and values rendered as text. The visualization uses an SVG canvas, sized 960 by 500 pixels, and is built with D3 v5, selecting the SVG element and parsing the data through the `select` and `attr` methods.

MMukund Khandelwal
74% match