Jingya

@chick890417·7 public vizzes

Bubble chart

This bubble chart visualizes Spotify track data, plotting the average popularity (x-axis) against the average valence (y-axis) for each artist, with bubble size representing the total number of tracks. The chart uses an SVG renderer with D3.js v4 and a color scale from `d3-scale-chromatic` to differentiate artists. Hovering over a bubble triggers a tooltip displaying the artist name and track count. Data is loaded from a remote CSV file and aggregated using JavaScript's `reduce` method to compute averages and counts.

Nov 21, 2022

Loading thumbnail…

Untitled

Two linked bar chart and donut chart views examine Spotify track data filtered by popularity and genre. The bar chart filters tracks with popularity between 80 and 100, counts occurrences per genre, and displays only genres with at least 10 tracks, using `d3.scaleBand` and `d3.axisBottom`. The donut chart presents popularity above 80 with `d3.pie`, `d3.arc`, and categorical color scales. Both render as SVG using `d3.csv` to load the dataset.

Nov 21, 2022

Loading thumbnail…

Plots(311551085)

This scatter plot visualizes the Iris dataset, showing the relationship between two selected attributes for each flower sample. Users can interactively choose which measurements to display on the x- and y-axes via dropdown menus. The chart uses D3 v4 with SVG rendering, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. Each point is colored by species using an ordinal scale, with the data loaded from a CSV file.

Nov 20, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data 2

This example displays the contents of a Spotify track dataset loaded from a CSV file, showing a short preview of its values in a preformatted text area. The code uses D3 v5’s `d3.csv` method to fetch and parse the remote CSV, then accesses the parsed data and its column headers to extract and display specific fields. The visualization is minimal, focusing on demonstrating data loading and parsing rather than graphical rendering. It highlights the async callback pattern of `d3.csv` and how parsed rows are accessed programmatically.

Nov 18, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading a CSV file from a GitHub gist using D3’s `d3.csv` method. It parses the Spotify track dataset and displays the first ten rows of the data as raw text inside a `<pre>` element, while also logging `album_name` values to the console. The visualization is minimal, focusing on the parsing and output of tabular data rather than graphical representation. It relies on D3 v5 loaded via UNPKG and uses standard DOM manipulation to update the message container.

Nov 18, 2022

Loading thumbnail…

Parallel coordinates(311551085)

This interactive parallel coordinates plot visualizes the Iris dataset, showing four measured attributes (sepal and petal length and width) as parallel axes. Each flower appears as a polyline connecting its attribute values, colored by species (setosa, versicolor, virginica) using a d3.scaleOrdinal color scale. The visualization uses d3.scalePoint for axis positioning, d3.scaleLinear for each axis’s y-scale, and d3.line to generate polylines. Users can drag axis labels to reorder dimensions, with d3.drag handling reordering and smooth d3 transitions animating axis repositioning and path updates.

Oct 12, 2022

Loading thumbnail…

Scatter Plots(311551085)

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements. Users can select which measurement appears on the X and Y axes via dropdown menus. The visualization uses d3.scaleLinear to scale the axes, d3.axisLeft and axisBottom for ticks, and d3.scaleOrdinal to assign distinct colors to the three Iris species. The plot renders as SVG circles, with a title, axis labels, and a color legend identifying Iris-setosa, versicolor, and virginica.

Sep 22, 2022