Scatter Plot

100%

Scatter Plot - Interactive Color Legend

✓ Published1🌍 Public

Last edited Apr 27, 2023

Created on Mar 14, 2023

A scatter plot without axes shows the relationship between total followers and total stream time for streamers, colored by language (English, Portuguese, Spanish, Korean). Hovering a color legend item highlights the corresponding streamer points and dims others. The visualization uses D3 v7 with `scaleLog`, `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` to render circles and an interactive legend, loading data from a CSV file.

AI-generated description

A scatter plot of the Twitch Dataset with no axes. It shows the total followers with respect to the total stream time for English, Portuguese, Spanish and Korean streamers.

Red is English streamers
Blue is Portuguese streamers
Green is Korean streamers
Yellow is Spanish streamers

MIT Licensed

Similar vizzes

Loading thumbnail…

This scatter plot visualizes the Twitch dataset, showing total followers against total stream time for streamers in English, Portuguese, Spanish, and Korean, with each language represented by a distinct color. The visualization uses D3.js with the `d3.scaleLog`, `d3.scaleLinear`, and `d3.scaleOrdinal` APIs to map data, and draws circles with `d3.selectAll` and `join`. Axes are rendered using the `axes.js` module, while a custom `colorLegend.js` explains the color-coding.

IIshaChid76

89% match

Loading thumbnail…

Interactive Scatter Plot

This interactive scatter plot visualizes the relationship between total followers and total streaming time for Twitch streamers across four languages. The data is sourced from the Twitch dataset and displayed using D3 v7, with points colored by language—red for English, blue for Portuguese, green for Korean, and yellow for Spanish. The visualization uses `scaleLog` and `scaleLinear` for the axes and `scaleOrdinal` for color mapping, with axis labels added via custom `axes.js` code. The plot renders with an animation, though no axes were initially shown, and the chart is built using the `scatterPlot` function which applies the specified scales and color domains.

IIshaChid76

87% match

Loading thumbnail…

Scatter Plot with Menu

This scatter plot shows the relationship between total followers and total stream time for the top Twitch streamers, colored by language (English, Portuguese, Spanish, and Korean) via d3.scaleOrdinal and a d3 color legend. A d3 menu lets users switch between language filters, though the code only displays the English option. The visualization uses d3.scaleLog for the x-axis and d3.scaleLinear for the y-axis, with axes drawn using d3.axisLeft and d3.axisBottom. Data is loaded and parsed from a CSV file using d3.csvParse, with points rendered as semi-transparent circles.

IIshaChid76

85% match

Loading thumbnail…

assn2t5

This example shows a scatter plot of Twitch streamers, plotting total followers against total streaming time in minutes, with points colored by language. The chart uses a log scale for the x-axis and a linear scale for the y-axis, and includes a color legend for the language categories. The visualization is built with D3 v7, using `scaleLog`, `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` to map data from a CSV file, with custom reusable modules for axes and color legend rendering.

Mmandadi1999

82% match

Loading thumbnail…

Twitch Dataset - Mouseover

A scatter plot of the Twitch dataset plots total followers against total streaming time, with streamers colored by language (English, Portuguese, Spanish, and Korean). Mousing over a point reveals the channel name in a tooltip, while hovering a language label in the color legend dims points from other languages. The visualization uses d3.v7 with scaleLog and scaleOrdinal for axes and colors, and event handlers on circles and legend ticks to drive the interactions. Data comes from a local CSV file parsed with d3.csvParse.

IIshaChid76

79% match

Loading thumbnail…

Fork of Twitch Dataset - Dropdown

This scatter plot visualizes Twitch streamer data, showing total followers against total stream time with points colored by language (English, Portuguese, Spanish, Korean). A dropdown menu allows switching the x-axis between followers and views gained, while a color legend enables filtering by language. Built with D3 v7, the visualization uses `scaleLog` and `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and includes interactive tooltips on hover.

IIshaChid76

79% match

Loading thumbnail…

SPAC Interactive Color Legend

This interactive scatterplot displays CSS named colors as a radial burst, with a color legend that highlights matching data points on hover. The visualization uses D3 utilities for data loading and scales (scaleLinear, scaleOrdinal, extent, max), while React components render the SVG marks, axes, and interactive legend. Users can select different attributes from dropdown menus to change the x and y axes, and hovering over a legend item fades non-matching points to 30% opacity. The data comes from a CSV file loaded asynchronously via D3’s csv function.

Ppnlinyz

76% match

Loading thumbnail…

Scatter plot with interactive color legend

This interactive scatter plot visualizes the Iris dataset, showing relationships between flower measurements selected via dropdown menus. A color legend on the right highlights points by species, dimming all other data when a species is hovered. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and renders SVG circles with tooltips. The dataset is loaded as CSV and parsed into numeric values for plotting.

AAlex Stulov

75% match