a15923647

@a15923647·8 public vizzes

Iris parallel coordinate plot

This interactive parallel coordinate plot visualizes the Iris dataset, encoding each flower's measurements across four dimensions as colored polylines. Users can drag any axis to reorder the dimensions, with the visualization smoothly animating the transition. Built using D3 v5 within a React framework, the code leverages `scalePoint`, `scaleLinear`, and `axisLeft` to construct the axes, while custom drag logic from `d3.drag` handles axis repositioning. The SVG rendering uses `line()` to generate paths and `transition()` for animated updates, with a legend mapping Iris species to distinct colors.

Nov 17, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how to add interactive brushing to a D3 visualization. It displays a single circle in an SVG element that changes color based on user selection: the circle turns green when it falls within the brushed area and pink otherwise. The code uses d3.brush to create the selection region and listens to brush events to trigger the updateChart function. Rendering occurs via SVG, with d3 v7 handling both the circle and brush interactions.

Nov 14, 2022

Loading thumbnail…

test

A continuously shuffling set of the 26 alphabet letters animates horizontally across an SVG canvas. The visualization demonstrates D3's general update pattern with a key function, showing how data joins handle enter, update, and exit selections. Each letter's x-position is recalculated based on its new index after each shuffle via `d3.shuffle`. An infinite loop triggers repeated updates, with a 750ms transition on position changes. The code primarily uses D3 v7 selections, `join()`, and `transition()` for the animation.

Nov 13, 2022

Loading thumbnail…

Fork of music2

This visualization presents a bar chart of average track popularity aggregated by a selected categorical column from a Spotify dataset. Users can interact with a range slider to filter data and click on a bar to transition to a scatter plot. The rendering uses D3.js to create SVG bar and scatter plots with transitions and tooltips, alongside jQuery UI for the slider. The bar chart’s color scale interpolates blues to indicate popularity values.

Nov 13, 2022

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars, with country names on the y-axis and population counts (converted from UN data to billions) on the x-axis. Built with React and D3 v5, it uses `scaleBand` for the ordinal y-axis, `scaleLinear` for the x-axis, and `format('.2s')` to abbreviate tick labels. The code renders SVG elements through components like `AxisBottom` and `Marks`, loading data from the United Nations World Population Prospects 2019 via `csv()`. Teal bars with a Poppins font and minimal axes create a clean, stylized presentation.

Nov 5, 2022

Loading thumbnail…

music2

This interactive bar chart explores a dataset of music tracks, showing the average popularity of songs grouped by a selected attribute. Users can switch the grouping variable via dropdown menus, and a scrollable overview bar allows panning through many categories. Built with D3.js and Vue, the visualization uses `scaleBand` and `scaleLinear` for positioning and `axisBottom`/`axisLeft` for axes, with drag handling to update the visible range. Data is loaded from a CSV file.

Nov 5, 2022

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.

Nov 5, 2022

Loading thumbnail…

Fork of D3 Starter

This interactive scatterplot lets users explore the classic Iris dataset, comparing any two of the four numeric flower measurements on the x- and y-axes while color-coding points by species. The visualization uses D3 v7 to load CSV data, render SVG circles, and update axes and titles dynamically through select elements. Scales, axes, and event listeners are built with d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.csv, with styling for each Iris class defined in CSS.

Sep 24, 2022