Skip to main content
SimilarExport ZIP
100%

Barchart-d3

✓ Published2🌍 Public
PpramodK
Last edited Feb 14, 2020
Created on Feb 6, 2020

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.

AI-generated description

Barcharts and Histograms. D3 playground.

MIT Licensed

Similar vizzes

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
91% match
Loading thumbnail…

Barchart-d3

This example displays a bar chart of player statistics from a small dataset, with each bar representing a player's goals or age. The bars are rendered as SVG rectangles using D3 v5, with a dropdown menu to switch between the two data attributes. On mouseover, a bar highlights in orange and displays its value as text. The visualization uses D3's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs, with a transition animation on mouseout to restore the bar's original styling.

Bbl75d
85% 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
79% 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…

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