Final Project For Like The Third Time

100%

Final Project For Like The Third Time

✓ Published0🌍 Public

Last edited Nov 17, 2021

Created on Nov 17, 2021

This example visualizes chess transfer data as an animated scatter plot, mapping players’ standard ELO ratings on both axes. The plot supports categorical and linear scales, dynamically repositions circles with staggered delays, and grows new points from radius zero. It uses D3 v7’s `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `transition` APIs within a reusable `scatterPlot` function. Data is loaded via `d3.json` from a GitHub gist, with SVG rendering and a 1000ms transition duration for updates.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Test of JSON Data

This interactive scatter plot visualizes chess player birth years against their standard ELO ratings, using data from a JSON dataset of chess transfers. The chart renders as an SVG with animated circles that grow on entry and transition between positions when the data changes. Built with React and D3 v5, it uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to construct axes, while the custom `scatterPlot` module handles circle positioning and transitions via `transition().duration(1000)`.

PPatrick-Houlihan

81% match

Loading thumbnail…

Final Submission For DataViz

This visualization combines a world map and an animated scatterplot to explore chess player transfer data. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with TopoJSON world-atlas data, allowing users to select up to 20 countries. The scatterplot, rendered with SVG circles, plots selected quantitative attributes like ELO ratings or birth year, with transitions from `d3.transition`. Menu selectors and brushing filter the data, updating map highlights and the plot’s title. The dataset is loaded via `d3.json` from a GitHub gist.

PPatrick-Houlihan

80% match

Loading thumbnail…

Fork of D3 Starter

This example displays a scatter plot comparing programming language performance on Project Euler problems, with user-selectable axes, filter options, and animated transitions. It loads CSV timing data and color mappings from GitHub repositories, then visualizes results as colored circles that animate to new positions when the dataset changes. The visualization uses a custom surrounding-layout system that automatically positions titles, subtitles, axes, and legends within an SVG canvas. Built with D3 v7, the code leverages `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleTime`, `d3.axisBottom`, `d3.axisLeft`, `d3.transition`, and dynamic menu-driven data selection through reusable chart components.

GGavin Sykes

75% match

Loading thumbnail…

Chess Scatterplot With Menus And Brushing

A scatterplot of chess player statistics uses two dropdown menus to select the x- and y-axis fields, including ELO ratings, birth year, federation, and title. A d3.brush overlay allows users to select a rectangular region of circles, highlighting those points in green and dimming the rest. The selected points retain their highlight while changing menus, enabling tracking of individual players across different statistical dimensions. The visualization updates axes and circle positions with a d3.transition and uses d3.scaleLinear and d3.scalePoint for quantitative and categorical fields.

PPatrick-Houlihan

75% match

Loading thumbnail…

Chess Game Dataset Histogram Viz

Three interactive histograms visualize a chess game dataset, showing the distribution of average player ratings, the absolute rating difference between players, and the number of turns per game. Each plot uses `d3.histogram` with adjustable bin counts via HTML number inputs, and bars transition smoothly using `transition.attrTween` and `d3.axisLeft` for updated scales. Data is fetched as CSV from a GitHub gist and parsed with `d3.csvParse`. The visualizations render as SVG with a shared axes module for consistent labeling.

MMartha Cash

74% match

Loading thumbnail…

Gist fe5834a6c79855e23c3c7e3ae7e7f048

This example visualizes the distribution of a dataset through an interactive scatterplot, encoding three variables on the x- and y-axes and point size. The visualization uses D3.js with `d3.forceSimulation` to arrange overlapping points into a readable layout, while `d3.scaleLinear` and `d3.axisBottom` handle axis generation. Rendering is done via SVG circles, and transitions are applied using `transition.attrTween` to smoothly update positions when data changes. The underlying data originates from a static JSON array embedded in the gist, with no external data source, and the code includes hover tooltips via `d3.select().on("mouseover")` for individual point inspection.

AAlexDaGr8

74% match

Loading thumbnail…

D3 Scatter Plot - Chess

This D3 scatter plot visualizes the change in FIDE chess player federations, plotting each player as a point based on their federation change metrics. The visualization uses D3 v6’s scalable vector graphics (SVG) rendering to draw the scatter plot, with data sourced from a JSON file containing player information. Because the dataset includes federation codes for numerous countries, the plot suffers from significant dead space, as many nations have far fewer players than powerhouses like the United States. The implementation relies on standard D3 selection and scaling APIs to map data to coordinates, though the sheer volume of categories makes this representation visually cluttered and suboptimal for the data.

PPatrick-Houlihan

74% match

Loading thumbnail…

Final Board Game Visualization Schnair

An interactive scatter plot of board game data from a CSV dataset, visualized with D3.js and React. The visualization displays games by BGG rating and complexity, with color encoding by domain or numeric attributes, and supports filtering by game domains and mechanics through a control panel. Users can switch between scatter, sparkline, and bar chart views, while axes and labels render through custom D3 modules. The responsive canvas automatically resizes based on window dimensions, with hover effects highlighting selected categories across the visualization.

112jack812@gmail.com

73% match