Graph Devinsa Radio

100%

Graph Devinsa Radio

✓ Published0🌍 Public

Last edited Dec 23, 2019

Created on Dec 23, 2019

This chart displays the results of a principal component analysis as a scatterplot, with each point representing a radio station positioned along two principal axes from a CSV file. The visualization uses D3 v5 to render an SVG with axes and grid lines, and supports interactive zooming and panning via the `d3.zoom` extension. Users can toggle the display of station name labels on or off using radio buttons, which control the text opacity. Points change color on hover, and the chart updates dynamically during zoom transitions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Graph Devinsa Radio

This example displays a principal component analysis (PCA) scatter plot of radio-related entities, plotting each point on two axes with a red, semi-transparent circle. The visualization supports interactive zooming and panning through a `d3.zoom` behavior, and includes a toggle to reveal or hide the corresponding name labels for each data point. The SVG visualization uses `d3.scaleLinear` for axis scaling and `d3.axisBottom`/`d3.axisLeft` for grid lines, with data loaded from a remote CSV file using `d3.csv`.

GGuillaume-Delbarre

91% match

Loading thumbnail…

Graph Devinsa

This visualization shows a scatter plot of PCA results from the Devinsa dataset, with each point representing a data sample positioned along two principal components (Axe 1 and Axe 2). The chart uses red circles with hover highlighting and includes axis labels, tick marks, and a title. Built with D3 v5, the code loads CSV data, applies linear scales, and renders SVG circles. Interactive zoom and panning are enabled via `d3.zoom`, which rescales the axes and repositions points on user input, with a clip path constraining the visible plot area.

GGuillaume-Delbarre

76% match

Loading thumbnail…

Spotify

This interactive scatterplot visualizes a dataset of Spotify tracks, plotting pairs of audio features such as acousticness, energy, and valence on x- and y-axes. Users select features from two dropdown menus, and the visualization updates the axes and data points accordingly. Rendered as an SVG using D3.js version 5, the chart uses `d3.scaleLinear` for both axes and draws semi-transparent circles to indicate track distributions. The code reads from a local CSV file and updates the chart dynamically via a polling function that checks selector changes.

Gginnyching

69% match

Loading thumbnail…

music vis

This interactive scatterplot maps Spotify track attributes against one another, letting users select any two numeric columns from the dataset to compare on the x- and y-axes. The visualization updates dynamically through D3 v7's `scaleLinear`, `axisBottom`, and `axisLeft` APIs, rendering circles positioned by the chosen metrics. The code assigns CSS classes to each point based on a track genre field, although the dataset’s example rows lack a genre column, so the legend and color-coding rely on that optional data. The SVG plot includes labeled axes and a title reflecting the current variable pair.

Aa15923647

68% match

Loading thumbnail…

310553047-HW1

This interactive scatter plot visualizes a Spotify dataset, allowing users to compare any two musical attributes by selecting them from dropdown menus for the x- and y-axes. The visualization shows how the chosen variables correlate across tracks, with each data point represented as a semi-transparent blue circle. The code uses D3 v5’s `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` APIs to load data, render the SVG, and update the chart dynamically. Axis labels and gridlines are included, and the plot refreshes whenever the user changes the selected attributes.

Yyujun12689

68% match

Loading thumbnail…

Untitled

This interactive parallel coordinates chart visualizes audio features of songs by selected artists, including energy, liveness, valence, speechiness, and danceability. Users click buttons to load CSV data for different artists, which triggers a D3 v6 animation that redraws the plot lines. The SVG rendering uses d3.scaleLinear for axes, d3.scalePoint for positioning, and d3.scaleOrdinal to color lines by playlist genre, with a legend displayed on the right. The data is sourced from GitHub-hosted CSV files.

Vvedant74

68% match

Loading thumbnail…

Data Visualization - Bubble Chart of Spotify Track Dataset

This interactive visualization presents a radar chart of Spotify track data, allowing users to compare the audio characteristics of songs across three selected genres. The chart is built with D3.js v5 and renders using SVG, with animation applied to transitions when the genre selections change. Users can choose genres from three dropdown menus, and the radar chart dynamically updates to display the tracks’ attributes. The implementation relies on D3’s selection and merge methods for the interactive menus and uses SVG paths for the radar chart’s geometric structures.

JJuliachien

67% match

Loading thumbnail…

D3 Interactive plot

This interactive line chart lets users explore musical trends across different artists by clicking buttons to switch datasets, which are loaded from CSV files hosted on GitHub. Built with D3.js v6, the visualization uses `d3.csv()` to fetch data and renders an SVG with a single line per playlist genre. The chart includes a color-coded legend for six genres—pop, rap, rock, latin, r&b, and edm—using an ordinal color scale. Clicking a button updates the chart by removing existing line elements and redrawing them with the new data, providing a dynamic way to compare genre patterns across artists.

Vvedant74

67% match