Skip to main content
SimilarExport ZIP
100%

d3js workshop - bar chart

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

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.

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 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
92% 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
92% 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
92% 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
88% 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
Loading thumbnail…

Fork of Fork of Making a Bar Chart

A horizontal dot plot displays the average league position for 15 Premier League teams in 2018, from Chelsea to Fulham. The chart uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render an SVG, with circle marks sized at a fixed radius. The x-axis tick format abbreviates values using `format`, while the underlying data is loaded from a CSV file.

JJonathan Taylor
77% match
Loading thumbnail…

Fork of HTML Starter

This visualization presents a grouped bar chart of Champions League team statistics, comparing goals scored, matches played, and wins for each team. The code loads a CSV dataset from a GitHub gist, aggregates the data using d3.rollup and d3.sum, and renders three colored bars per team using SVG rectangles. D3 v7 handles the scales, axes, and legend, with x-axis labels rotated for readability. The chart uses d3.scaleBand for categorical positioning and d3.scaleLinear for the numeric y-axis, providing a clear side-by-side comparison of these metrics.

BBALAJI MANDAVA
77% match
Loading thumbnail…

Fork of HTML Starter

This visualization displays bar charts for Champions League team statistics, comparing goals, matches played, and wins. It employs a group bar chart where each team’s metrics are shown side-by-side in steelblue, orange, and green bars. The D3.js library (v7) is used for data parsing, aggregation, and rendering to SVG, with scales and axes built using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The data is fetched from a CSV URL and aggregated via `d3.rollup`. The SVG renders bars, axes, and a legend within an 800x600 canvas.

66264kusuma@gmail.com
77% match