Scatter Plot

100%

✓ Published1🌍 Public

Last edited Jul 23, 2020

Created on Jul 23, 2020

This scatter plot displays the final Premier League standings, plotting each team’s points total along the x-axis against team names on the y-axis using a categorical scale. It uses d3.csv to load the data, d3.scaleLinear for the point values, and d3.scalePoint for team ordering, with axes from d3.axisLeft and d3.axisBottom. Circles are rendered via SVG, with gridlines generated through tickSize, and margin-based positioning via a translated group.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows football match data from the English Premier League, with each circle representing a match and colored by the number of goals scored. The visualization maps match days on the x-axis and total goals per match on the y-axis, using a linear scale for both. The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to load data, compute scales, and render axes with SVG circles. It also computes rolling averages for home and away performance before rendering.

Bbenholvey

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

80% match

Loading thumbnail…

Scatter Plot PL xG Data with both xP and Points with menu

This interactive scatter plot visualizes Premier League data for a selected team, comparing actual points against expected points (xP) across matchweeks. A dropdown menu lets users choose among teams, updating two overlaid lines: a solid red line for actual points and a dashed black line for xP. Built with D3 v7, the visualization fetches CSV data from GitHub Gists, uses scaleLinear for axes, and implements a custom dropdown with scroll functionality. The menu, axes, and scatter plot are modularized into separate JavaScript functions, with styled red accents matching team colors.

MMatthew Dzwil

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

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…

Making a Scatter Plot

A scatter plot displays final power scores for ten teams, with each team’s score plotted along the x-axis and team names along the y-axis. The chart uses a linear scale for scores and a point scale for categorical team labels, with grid lines extending from both axes. D3 v5’s `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` methods render the SVG, while styled circles, a title, and an axis label clarify the data.

HHirsh Gupta

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…

A4 - Scatter Plot

This scatter plot visualizes the relationship between total expected goals (xG) accumulated by football teams in home versus away games during a Premier League season. Each circle represents a team, positioned by aggregating home and away xG values via `d3.rollup` and `d3.sum` from CSV data. The visualization uses D3 v7 to create SVG axes with `d3.axisLeft` and `d3.axisBottom`, labels, and labeled circles, with hover effects defined in CSS.

RRavneet Singh Bhatia

76% match