bar chart

100%

✓ Published1🌍 Public

Yyashaswisanjanaaerra@my.unt.edu

Last edited Mar 25, 2025

Created on Mar 25, 2025

Forked from A8 -D3 Node Link (Force Direct Layout)

This bar chart visualizes English Premier League player salaries, showing each player’s annual earnings in pounds as horizontal bars sorted along the y-axis. The chart uses D3.js v7 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for categorical player names. It loads CSV data from a GitHub gist, formats salary values from text to numeric, and adds interactive tooltips on mouseover using D3 event handlers. Gridlines and axis labels provide additional context for comparing salary magnitudes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of A8 -D3 Node Link (Force Direct Layout)

This D3.js (v7) scatter plot visualizes English Premier League player salaries, comparing each player's name along the y-axis against their salary in pounds on the x-axis. The data, loaded from a CSV file hosted on GitHub, is processed by stripping currency symbols and converting million units before being mapped to a linear scale for salary and a band scale for player names. The chart uses SVG circles for data points, with a hover tooltip displaying the player's name and exact salary. Axis labels and a title provide context for the visualization.

Yyashaswisanjanaaerra@my.unt.edu

82% 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

79% match

Loading thumbnail…

Premier League Player Stats

This horizontal bar chart visualizes the top 10 goal scorers in the English Premier League for the 2017-18 season. It uses D3 v5 to map player names to a band scale and goal counts to a linear scale, rendering SVG rectangles with a fixed pink fill. The data is loaded from a local CSV file containing player and goal columns, and axes are generated with `axisLeft` and `axisBottom`.

MMukund Khandelwal

78% match

Loading thumbnail…

Fork of Making a Bar Chart

This interactive bar chart shows Premier League team transfer spending (incoming fees) for a selected season, with teams ordered alphabetically or by final league position. Users toggle between seasons and transfer types via dropdown menus, which trigger re-rendering with D3’s `scaleBand` and `scaleLinear`. The SVG chart loads data from a local CSV file using `d3.csv`, with axes formatted via `axisLeft` and `axisBottom`. Bars update dynamically as selections change, displaying transfer totals in euros.

JJonathan Taylor

78% 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 - animated bar charts

This interactive bar chart visualizes the English Premier League standings as of February 21, 2015, showing each team's points and win totals. The visualization uses a horizontal bar chart where bar lengths represent points, while bar colors encode win counts on a blue-to-red scale. Users can click either the bars or the circular markers above to toggle the displayed metric between points and wins, with smooth animated transitions updating the bar widths. The code uses D3 v3 with SVG rendering, employing linear scales, CSV data loading via `d3.csv`, and click-event handlers to drive the dynamic updates.

OOValdivia110

77% match

Loading thumbnail…

d3js workshop - animated bar charts

This animated bar chart visualizes the English Premier League standings as of February 2015, showing each team’s points and wins. Built with D3.js v3, it renders an SVG bar chart where bar lengths correspond to points, while bar colors and circular markers encode win counts on a blue-to-red scale. Clicking a bar or circle triggers a transition (via `transition.attrTween`-style updates) that switches the displayed metric, with text labels and tooltips revealing team names. The visualization reads data from a CSV file and uses `d3.scale.linear` for both position and color, with all elements rendered as SVG shapes.

BBillyBHWong

77% match

Loading thumbnail…

d3js workshop - bar chart

This bar chart displays the total points earned by Premier League teams as of February 21, 2015, using horizontal rectangles whose widths are scaled by the d3.scale.linear function. The chart is rendered as an SVG, with each bar grouped into a <g> element that also contains a text label showing the point value. Built with D3 v3, the code loads data from a CSV file, coerces the PTS column to numbers, and sets the x-domain to the maximum points value. The bars are positioned using d3.selectAll("g") with transform translations, and the height remains fixed per record.

OOValdivia110

77% match