Jaya Durga V

@nobel10122025·4 public vizzes

Fork of Polished Scatter Plot with Menus

An interactive scatter plot of the Iris dataset displays measurements like sepal length and petal width, letting users change which attribute appears on each axis via ReactDropdown menus. The visualization uses React for component structure and SVG for rendering, with d3.scaleLinear for axes and d3.csv for data loading. Circles represent individual flowers, and hovering reveals the numeric value through a native SVG title tooltip.

Feb 5, 2022

Loading thumbnail…

bar_chart

This example renders a colorful pie chart where each slice represents a CSS named color, loaded from a remote CSV file. The code uses React for component state management and D3’s `csv`, `pie`, and `arc` functions to compute and draw the chart as SVG paths. Each slice is filled with its corresponding hexadecimal value from the dataset, creating a full circle of distinct hues. The visualization demonstrates a straightforward mapping of categorical data to a pie layout without inner radius or additional styling.

Jan 28, 2022

Loading thumbnail…

color_graph

This example displays all named CSS colors as a radial pie chart, with each wedge filled by its corresponding RGB hex value. The visualization loads color data from a CSV file via `d3.csv` and uses React state to manage the data. The chart is rendered as an SVG using D3’s `pie()` layout and `arc()` generator, with the outer radius set to the full width of the viewport. Each slice is drawn as a path with its fill directly from the data’s hex column, creating a vibrant, full-circle spectrum of color names.

Jan 27, 2022

Loading thumbnail…

smiley_part_1

A grid of eighteen procedurally generated smiley faces fills the SVG canvas. Each face is a distinct combination of randomly sized features: circular yellow heads with black strokes, pairs of eyes, rectangular noses, and arc-based mouths. The visualization is built with React components, using D3 v7’s `d3.arc()` API to create the curved mouth paths and `d3.range()` to generate the array of faces. All facial elements are positioned relative to a common center point, rendered as SVG within a React app.

Jan 23, 2022