Test of JSON Data

100%

Test of JSON Data

✓ Published0🌍 Public

Last edited Nov 16, 2021

Created on Nov 1, 2021

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)`.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Final Project For Like The Third Time

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.

PPatrick-Houlihan

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

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

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

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

73% match

Loading thumbnail…

React + D3 experiment

A scatterplot maps eye-color and gender data from a JSON file, plotting red and green color components on the x- and y-axes. The visualization animates circles into place using D3 transitions with a bounce easing function, while circle size encodes the blue component. Built as a React experiment, the example wraps only the root SVG element in React, leaving all sub-elements to D3 v5. The code uses `d3.json`, `d3.select`, `d3.scaleLinear`, and `transition.attr` methods to render and animate the SVG.

LLaurens

72% match

Loading thumbnail…

D3 scatter plot with react

This React-based scatter plot demonstrates animated data updates with D3.js. The visualization renders seven circles with distinct colors and sizes, positioned by x/y coordinates, with axes labeled X and Y. Data updates trigger a button click, which initiates D3 transitions using `transition().duration(1000).ease(easeLinear)` for enter animations and faster transitions for updates, while exit animations shrink circles to zero radius. The SVG rendering uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll('circle').join()` for binding data to DOM elements.

JJulien Tremblay

72% match

Loading thumbnail…

reusable D3 Scatter Plot

This visualization presents a sunburst chart of the first K steps in chess games, using a sequence of page types (account, home, product, etc.) as hierarchical segments. The chart is built with D3.js within a React framework, leveraging the `d3` library to render the nested ring structure. Data is sourced from a CSV file containing step sequences and their counts, which drives the size of each arc. The layout and interactivity are handled through D3’s hierarchical layout functions, allowing users to explore the frequency of different navigation paths.

PPeiyang Li

72% match