d3js workshop - bar chart

100%

d3js workshop - bar chart

✓ Published0🌍 Public

Last edited Oct 19, 2017

Created on Oct 19, 2017

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.

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/26eda28ec7589c8f8ed0811f0b3924b8'>06_workshop_horizontal bar chart</a>

mit Licensed

Similar vizzes

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

93% match

Loading thumbnail…

d3js workshop - bar chart

A horizontal bar chart displays Premier League football teams' total points, with each bar's length proportional to the team's PTS value and an overlaid text label showing the exact number. Built with D3.js v3, the chart reads team statistics from a CSV file and renders as SVG rectangles, using a linear scale (d3.scale.linear) mapped to the bar widths and groups positioned vertically via translation transforms. The example demonstrates basic data loading, scaling, and SVG shape creation for workshop purposes.

LLelandCurtis

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

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

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

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

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

85% match

Loading thumbnail…

Customising Axes

This example shows current Premier League standings as a horizontal bar chart, with teams sorted by points and a custom-styled axis layout. It uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom to render the axes. The code removes default tick lines and domain paths for the y-axis, adds rotated titles, and uses CSS classes to style tick text and axis labels. The SVG rendering loads data from a CSV file.

Bbenholvey

78% match