waterm80

@waterm80·6 public vizzes

CSV Data

This example visualizes aggregated popularity by music genre using CSV data loaded from a remote GitHub URL. The bar chart shows how track popularity sums vary across genres, with each genre represented as a distinct bar. The code uses d3.csv to fetch and parse the dataset, then d3.nest and d3.sum to group records by track_genre and calculate total popularity. The visualization runs in a React framework with D3 v5, though the displayed output relies solely on the data aggregation logic without additional chart rendering.

Nov 16, 2022

Loading thumbnail…

Fork of Bubble Chart Visualization

This fork of a bubble chart visualization displays the relative number of boba shops across eleven California cities using an interactive force-directed layout. Circles are initially clustered at the center, then repelled and spaced by d3.forceSimulation, d3.forceManyBody, and d3.forceCollide until stable. Users can drag any circle with d3.drag, while a custom tooltip reveals city names and counts on hover. The visualization loads data from a CSV file via d3.csv, scales circle radii with d3.scaleLinear, applies an ordinal color scheme, and renders everything as SVG elements.

Nov 16, 2022

Loading thumbnail…

Fork of Jinsu Bubble

This visualization displays song popularity and genre using a bubble chart, with each bubble sized by popularity and colored by genre according to a Tableau10 ordinal scale. The chart packs hierarchical leaves via `d3.pack` and renders SVG circles, labels, and tooltips from a CSV dataset. A legend built with custom selection methods shows genre color mappings. The code uses D3 v7 APIs including `d3.hierarchy`, `d3.map`, `d3.InternSet`, and `d3.scaleOrdinal`.

Nov 16, 2022

Loading thumbnail…

Fork of Bubble Chart Visualization

This interactive bubble chart displays the number of boba shops across eleven Bay Area cities, with circle size scaled linearly by shop count. Built with D3 v7, it renders as an SVG where users can drag bubbles to reposition them while a force simulation, using `d3.forceSimulation` with center, charge, and collide forces, arranges the circles and prevents overlap. Hovering reveals a tooltip showing each city’s name and shop total, with data loaded from a remote CSV file.

Nov 16, 2022

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, displaying four numeric measurements across parallel axes with each sample colored by species. Users can drag any axis label horizontally to reorder the dimensions, with smooth transitions animating the line paths and axes to their new positions. Built with D3 v5, the visualization uses `drag`, `scalePoint`, and `scaleLinear` for axis management, while SVG paths with `transition` handle the animated updates. The code loads data from a CSV file and includes a legend identifying the three Iris species.

Nov 13, 2022

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot displays the Iris dataset, showing measurements of sepal and petal length and width. Users can select which measurement appears on the x-axis and y-axis via dropdown menus. The visualization uses d3.scaleLinear for axis scaling and d3.axisLeft and d3.axisBottom for axes, with circles animated via transition().duration() and delay(). Colors are assigned to species using d3.scaleOrdinal with a manual color range, and a legend is drawn with SVG rectangles and text. Data loads from a CSV URL, and rendering uses SVG with 2-second animated transitions.

Sep 29, 2022