AllOneeeee

@AllOneeeee·3 public vizzes

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width for three flower species. Hovering over a species in the color legend highlights only that species’ data points while dimming all others. The visualization uses React with D3 scales (`scaleLinear`, `scaleOrdinal`) for positioning and coloring, and SVG circles for rendering. The color legend implements mouse-event handlers to update hovered state, which filters the data and adjusts opacity for the fade effect.

Dec 28, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes the CSS named colors dataset as a radial burst of arcs. It loads the data with D3’s `csv` utility and computes the pie layout with `d3.pie`, while rendering each colored slice as an SVG `<path>` using `d3.arc`. React manages the component state and lifecycle via hooks, fetching the data asynchronously and displaying a loading message until the CSV arrives. The visualization fills the entire SVG canvas with a full circle of color segments, each arc filled with its corresponding hex value.

Dec 28, 2023

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a "pathetic" bar chart, using horizontal bars with no axes or labels. The visualization loads data from the United Nations World Population Prospects 2019 dataset, which is fetched via the `csv` function in d3. The bars are rendered as SVG rectangles, with each bar’s width proportional to the country’s 2020 population. The layout uses `scaleBand` for the y-axis positioning and `scaleLinear` for the x-axis scaling, with React managing the component state and rendering the final SVG output.

Dec 28, 2023