Skip to main content
100%

d3js workshop - animated bar charts

✓ Published0🌍 Public
Aaduo122
Last edited Oct 19, 2017
Created on Oct 19, 2017

A horizontally aligned bar chart ranks ten English Premier League teams by total points, with each bar’s fill color mapping to the team’s win count on a blue-to-red linear scale. Clicking a bar or a corresponding circle above the chart triggers an update function that animates the bar’s width to reflect wins instead of points. The visualization uses d3.v3 with SVG elements, `d3.scale.linear` for axes and color encoding, and data from the included CSV file.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/mostaphaRoudsari/'>mostaphaRoudsari</a>'s block: <a href='http://bl.ocks.org/mostaphaRoudsari/b65c971877b2950a3f38332eb8c24400'>08_workshop_animated horizontal bar chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3js workshop - animated bar charts

The visualization displays the English Premier League table as an animated horizontal bar chart, with each bar representing a team’s points total and colored by number of wins. Circles above the chart encode the same data redundantly and, like the bars, respond to clicks. Built with d3.v3, the example uses d3.csv to load the league data, d3.scale.linear for both x-position and color mapping, and SVG groups with appended rects, text, and titles. Clicking a bar or circle triggers an update function, though the full behavior is not shown.

VVyrwn
95% match
Loading thumbnail…

d3js workshop - animated bar charts

The visualization displays the 2015 English Premier League standings as an animated bar chart, with each team’s points and wins encoded by bar width and a blue-to-red color scale. The code uses d3.v3 with SVG and linear scales, reading data from a CSV file. Clicking a team’s bar or matching circle triggers an update function that transitions the rectangle’s width and text, animating between the points and wins metrics. Tooltips show team names via native SVG title elements.

VVyrwn
95% 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
94% 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
93% match
Loading thumbnail…

d3js workshop - animated bar charts

This example shows an interactive animated bar chart of 2015 Premier League standings, with each team’s points displayed as the bar length and colored by number of wins. Below the chart, a row of circles duplicates the same color encoding, and clicking either a bar or circle triggers a D3 update that transitions the bar widths and colors to reflect wins instead of points. Built with d3.v3, it uses d3.csv to load the data, d3.scale.linear for positioning and color, and SVG elements with event listeners for the interaction.

NNate-Holland
93% match
Loading thumbnail…

d3js workshop - bar chart

This example displays 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 visualization uses d3.csv to load the league table, d3.scale.linear for both the x-axis width and the color gradient from blue to red, and SVG groups with appended rect and text elements. Bar heights are fixed, while the title element provides hover tooltips with team names.

VVyrwn
92% match
Loading thumbnail…

d3js workshop - bar chart

A horizontal bar chart displays the English Premier League standings as of February 21, 2015, with each team’s points encoded as bar length and labeled directly on the bars. The SVG visualization uses d3.v3 with `d3.csv` to load the team data, `d3.scale.linear` to map points to pixel widths, and data-bound `<g>` groups containing `<rect>` and `<text>` elements. Each bar includes a `<title>` tooltip showing the team name. The chart is built with D3’s selection and enter/append pattern, using a fixed bar height and padding.

Aaduo122
92% match
Loading thumbnail…

d3js workshop - bar chart

A horizontal bar chart displays English Premier League standings as of February 2015, with each team’s total points encoded as bar length. The visualization reads team data from a CSV file and renders it as SVG rectangles using d3.csv, d3.scale.linear, and selection.append. Bar heights are fixed, while point values appear as labels at each bar’s end. The code sets the x-scale domain to the maximum points and positions each bar group via transform translations.

Aaduo122
92% match