Making a Bar Chart

100%

Making a Bar Chart

✓ Published15🌍 Public

Last edited Sep 2, 2018

Created on Sep 2, 2018

A horizontal bar chart displays the goal counts of Premier League players, sorted in descending order from Mohamed Salah’s 32 to Eden Hazard’s 12. Built with D3 v5, the example loads CSV data via `d3.csv`, selects the SVG element with `d3.select`, and renders steelblue rectangles with `rect` elements. The chart uses a fixed 960×500 SVG canvas, with text labels sized via CSS, demonstrating a straightforward mapping from tabular data to visual bars.

AI-generated description

MIT Licensed

Similar vizzes

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

87% 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…

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

77% match

Loading thumbnail…

Barchart-d3

This interactive bar chart displays goal and age data for ten Premier League players, sourced from a CSV file. Users can switch between these two attributes via a dropdown menu. The visualization uses D3 v5 scaleLinear and scaleBand for axes and bars, with a color legend driven by scaleSequential and interpolatePlasma. Hover interactions highlight bars in orange and display the numeric value overlaid as text, with a transition animation on mouseout reverting the fill.

Ssonalja

77% match

Loading thumbnail…

d3js workshop - bar chart

This bar chart visualizes the English Premier League standings as of February 2015, showing each team’s total points. Using d3.csv to load the league table, it maps team names to horizontal bars whose widths are scaled linearly to the PTS column. The SVG rendering places team point totals at the end of each bar, with a fixed bar height and padding for clarity. The code relies on d3.scale.linear for the x-axis scale and d3 selection/enter/append patterns to construct the chart, though it does not include axes, labels, or interactivity beyond the static bars.

AAlbertFranco

77% match

Loading thumbnail…

d3js workshop - bar chart

This example shows a horizontal bar chart of English Premier League standings, with each bar’s length representing a team’s total points and its color encoding the number of wins. The chart is rendered as SVG using D3 v3, reading team data from a CSV file via `d3.csv`. A linear `d3.scale.linear` maps points to bar widths and a second linear scale maps wins to a blue-to-red color range. Each bar is a `<rect>` inside a `<g>` group, with a text label showing the points value and a `<title>` element for hover tooltips.

BBillyBHWong

76% match

Loading thumbnail…

d3js workshop - bar chart

This bar chart visualizes the Premier League standings as of February 2015, showing each team’s total points as horizontal bars. It displays only the points data, omitting team labels entirely. The visualization uses D3.js v3 to load the CSV data, applies a linear scale (`d3.scale.linear`) to map points to bar width, and renders the chart as SVG rectangles with text labels showing the point values at each bar’s end. The bar height is fixed, with spacing between bars via padding.

BBillyBHWong

76% match

Loading thumbnail…

Barchart-d3

A bar chart displays the ages of Premier League footballers from a CSV file, with a dropdown menu to switch between goals and age attributes. The visualization uses D3 v5's `scaleBand` and `scaleLinear` to position bars, `axisLeft` and `axisBottom` for axes, and SVG rectangles. Hovering triggers a fill change to orange, a thick stroke, and a temporary text label showing the numeric value, with transitions animating the mouseout state. The data source is `data.csv` with player statistics.

PpramodK

75% match