Pseudo PL Plot with real data

100%

Pseudo PL Plot with real data

✓ Published0🌍 Public

Last edited Feb 6, 2023

Created on Feb 6, 2023

This example combines two scatter plots into a single visualization, overlaying an x-position view and a y-position view of the same dataset. The x-position plot places circles along the horizontal axis based on matchweek, while the y-position plot centers all circles vertically. The code uses D3 v7 selections and joins, with separate `xPosition` and `yPosition` modules drawing on two SVG elements. Real data tracks team performance metrics across ten matchweeks, with circle radii differing between the two views.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo PL Plot

This example displays a cumulative expected points (xP) progression across ten match weeks for a single team, with circles marking each match and a red line connecting them. The visualization renders in an SVG generated by D3 v7, using the `d3.line` generator to create the path for the line and data joins with `.join()` to bind the circles. The custom `lineTest` and `xPosition` functions independently map match week and xP values to coordinates, with circle positioning based on the raw data and the line path derived from the same coordinate system.

MMatthew Dzwil

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

74% match

Loading thumbnail…

Data Visualisation with D3 - Pseudo Charts

This example visualizes a scatter plot using a pseudo-chart technique, approximating the data points as black circles positioned at arbitrary coordinates. The SVG uses `<circle>` elements to render the visualization, with each circle given a random x and y coordinate to suggest a distribution. The code relies on the SVG library and the `d3` framework, though it does not explicitly use a specific D3 API for layout or rendering. The data source is not externally loaded; instead, the circle positions are hardcoded in the markup, demonstrating a minimal, stylized approach to scatter plot construction.

Vvivienho22

72% match

Loading thumbnail…

Plot

This scatter plot visualizes the relationship between X and Y values across multiple datasets. The visualization uses color coding to distinguish different datasets, with circles rendered at low opacity to reveal overlapping points. Users can click a legend item to highlight a specific dataset's points at higher opacity, and double-click to reset the view. The plot also supports zooming via the d3.zoom API. Data is loaded from CSV files and rendered as SVG circles using D3 v5 within a React framework. The axes include gridlines and formatted tick labels.

Eendlesstory

70% match

Loading thumbnail…

Pseudo Scatter Plot

This example presents a pseudo scatter plot, using a set of six circles arranged to suggest a data distribution rather than plotting actual data points. Each circle is rendered as a static SVG `<circle>` element with fixed coordinates and a radius of 34.5, positioned on a white 960×500 canvas. The visualization relies purely on raw SVG markup inside an `index.html` file, with no JavaScript libraries or dynamic data processing involved. The sparse, hand-coded placement of circles creates a simple, minimalist view of a hypothetical scatter pattern.

YYangxi Liu

70% match

Loading thumbnail…

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

This example visualizes Premier League expected goals (xG) data for Arsenal, plotting both actual points and expected points (xP) across matchweeks as separate scatter plot layers over a shared axis. A clickable “Team” button toggles a dropdown menu listing all teams, allowing the user to filter and compare different squads. The visualization is built with D3 v7, using `scaleLinear` for axes, `csvParse` to load data from a GitHub gist, and applies a join-based approach for incremental SVG rendering of circles and menus. The code also integrates custom axis and dropdown modules.

MMatthew Dzwil

70% match

Loading thumbnail…

D3: Drawing a Scatter Plot

This example displays a basic scatter plot of ten data points, each represented by a circle and a red text label showing its coordinates. The visualization uses D3.js v7 to append SVG circles and text elements to the document body. Circle radii are calculated as the square root of the difference between the plot height and the y-coordinate, creating a size variation tied to vertical position. The chart is drawn with a 500 by 100 pixel viewport, using the data array directly as the source for positioning.

MMarisa Tania

70% match

Loading thumbnail…

Fork of D3 Scatter Plot

This fork of a D3 scatter plot visualizes a dataset of PG2021 matches, plotting each entry’s percentage of something matched against its name. The SVG chart uses `d3.scaleLinear` for both axes, with `d3.axisLeft` and `d3.axisBottom` to render tick labels, and circles are drawn via SVG `rect` elements (though named as circles). The data is loaded from a CSV file using `d3.csv`, and the layout adapts to the browser window’s inner dimensions.

TThaverman

69% match