Rikibens

@Rikibens·11 public vizzes

Fork of Spotify_Tracks

This visualization analyzes a Spotify tracks dataset, showing how popularity relates to audio features. It displays binned histograms for selected attributes like danceability or energy, with each bar split to reveal both the average popularity and the count of tracks in that bin, colored by mean loudness. The interactive view lets users switch audio features via a dropdown and adjust the number of bins with a slider. Built with React and D3, it uses D3 scales (scaleBand, scaleLinear), rollups for aggregation, and renders as animated SVGs.

Nov 22, 2022

Loading thumbnail…

Fork of Spotify_Tracks

This interactive visualization displays a radar chart of Spotify song attributes, with each track represented as a polygon overlaid on a polar coordinate system. Users can switch between a multi-color mode that highlights individual songs and a mono-color mode that reveals overall density patterns. The chart is built using Plotly through the react-plotly.js wrapper for React, while the data loading and transformation rely on d3.csv and d3-array utilities. The interface includes dropdowns for selecting which audio features to display and a toggle for the coloring mode.

Nov 22, 2022

Loading thumbnail…

Fork of Fork of Fork of Iris Parallel Coordinate Plot

This visualization displays the classic Iris dataset using an interactive parallel coordinate plot, with each of the four traits (sepal length, sepal width, petal length, petal width) mapped to a vertical axis. Users can drag the axes to reorder them, and a dropdown menu toggles the y-axis scale between a fixed union range (0–8) and a per-axis self range based on observed data extents. The plot renders as SVG paths colored by species (setosa, versicolor, virginica) with opacity, and the code uses d3.scalePoint, d3.scaleLinear, d3.axisLeft, d3.drag, and d3.transition to handle layout, interaction, and animated updates.

Oct 14, 2022

Loading thumbnail…

Fork of Fork of Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, comparing sepal and petal measurements across three flower species. Users can toggle between unified and per-axis scaling via a dropdown menu, with colored lines representing Iris setosa, versicolor, and virginica. The visualization uses D3 v5 APIs including d3.scalePoint, d3.scaleLinear, d3.axisLeft, and d3.drag, enabling axis reordering through drag interactions with smooth transitions. SVG paths render each observation, while the semi-transparent stroke width highlights overlapping data patterns across the four quantitative dimensions.

Oct 14, 2022

Loading thumbnail…

Fork of Fork of Iris Parallel Coordinate Plot

This visualization displays the classic Iris dataset as an interactive parallel coordinate plot, with each flower’s measurements across sepal length, width, petal length, and width drawn as semi-transparent polylines colored by species. Users can drag the vertical axes to reorder dimensions via `d3.drag`, which updates the d3.line paths and axis positions. A dropdown menu toggles the y-axis scale between a union range (0–8) and per-attribute extents computed with `d3.extent`. Axis labels and the title are rendered as SVG text, and rendering uses D3 v5 with SVG elements.

Oct 14, 2022

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset across four measurements—sepal length, sepal width, petal length, and petal width—with each of the three species color-coded in orange, teal, and purple. Users can drag axis labels horizontally to reorder dimensions, and a dropdown menu toggles between a fixed union scale (0–8) and per-axis self-scaling based on observed data extents. Built with D3 v5, the SVG rendering uses d3.scalePoint for axes, d3.scaleLinear for y-scales, and d3.drag for interaction, with smooth transitions on axis reordering.

Oct 14, 2022

Loading thumbnail…

Interactive Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. The visualization uses React for state management and d3.scaleLinear and d3.scaleOrdinal to map data to positions and colors. Two dropdown menus let users switch which measurements appear on the x and y axes, while hovering over the color legend or data points dims unrelated marks via opacity transitions. The SVG rendering includes custom axes and a metadata tooltip powered by SVG title elements.

Sep 24, 2022

Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset, with dropdown menus letting users choose which columns map to the X and Y axes. The visualization uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render the axes, while d3.transition animates circles moving to their new positions over two seconds. Data is loaded via d3.csv, and the interactive menus are built with native HTML select elements. The SVG rendering includes gridlines and axis labels that update dynamically.

Sep 24, 2022

Loading thumbnail…

Iris

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It uses d3.scaleLinear for both axes and d3.extent to compute their domains from the data. Circles are rendered in an SVG via d3.selectAll and the join pattern. The dataset is loaded as CSV with d3.csv from a remote gist URL, and the plot fills the entire browser window.

Sep 18, 2022

Loading thumbnail…

Iris

This example visualizes the classic Iris dataset as a basic scatter plot. It loads the data from a CSV file hosted on GitHub, using D3’s `csv` method to parse the data. The page sets up an empty D3 v7 environment with a bare `body` element, and the code logs the parsed dataset to the console, demonstrating the initial step of data loading for subsequent visualization. The current implementation does not yet render any graphical marks or axes, focusing solely on fetching and inspecting the data structure.

Sep 17, 2022

Loading thumbnail…

Fork of Scatter Plot Using Iris Data

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (green, purple, or red). It also encodes sepal length and width via the `rx` and `ry` attributes, though these are not visually apparent since the circles use a fixed radius. Built with D3 v6, the code uses `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.axisLeft` and `d3.axisBottom` for rendering the SVG chart.

Sep 17, 2022