Skip to main content
Log in
S

Sumeyya-Eser

@Sumeyya-Eser·6 public vizzes

Loading thumbnail…

Fork of Interactive Streamgraph Template in React

This interactive streamgraph displays changes in numeric values across multiple named categories over time, using a silhouette-style stacked area layout. Built with React and D3 v5, it loads CSV data via `d3.csv` and processes it with `stack`, `stackOffsetSilhouette`, `stackOrderInsideOut`, and `area` with `curveBasis`. A React hover state adjusts path opacity and shows a tooltip label. Colors come from `schemeDark2` via `scaleOrdinal`, with axes scaled by `scaleLinear` and `extent`.

Nov 23, 2021
Loading thumbnail…

Fork of Interactive Streamgraph Template in React

This interactive streamgraph visualizes changes in a dataset over time, with each colored stream representing a different category. The chart uses a silhouette offset and inside-out ordering to create a symmetric, layered appearance. Built with React and D3 v5, the code leverages `d3-shape`'s `stack`, `area`, `curveBasis`, and `stackOffsetSilhouette` functions for layout, while `d3-scale-chromatic` provides the color scheme. Hovering over a stream triggers a tooltip and dims other streams. Data is loaded from a CSV file via `d3-fetch`.

Nov 23, 2021
Loading thumbnail…

Fork of Interactive Streamgraph Template in React

This fork of the streamgraph template displays multiple ECG data series as stacked, filled areas over time, with a tooltip that appears on hover to identify each stream. Built with React and D3 v5, it uses `d3.stack` with `stackOffsetSilhouette` and `stackOrderInsideOut` to compute the layout, and `d3.area` with `curveBasis` to generate SVG paths. Data is loaded from a CSV gist via `d3-fetch`’s `csv` function. Hovering changes the opacity of non-highlighted streams, while the tooltip text updates to show the active series key.

Nov 23, 2021
Loading thumbnail…

Fork of Interactive Streamgraph Template in React

This fork of the streamgraph template displays multiple ECG data series as stacked, filled areas over time, with a tooltip that appears on hover to identify each stream. Built with React and D3 v5, it uses `d3.stack` with `stackOffsetSilhouette` and `stackOrderInsideOut` to compute the layout, and `d3.area` with `curveBasis` to generate SVG paths. Data is loaded from a CSV gist via `d3-fetch`’s `csv` function. Hovering changes the opacity of non-highlighted streams, while the tooltip text updates to show the active series key.

Nov 22, 2021
Loading thumbnail…

Iris parallel coordinate plot

This interactive parallel coordinate plot displays nutritional data for 67 ice cream flavors from a CSV file, using color-coded lines to represent each flavor across four dimensions: trans fat, carbohydrates, sugars, and protein. Users can click and drag axis labels to reorder the dimensions, with adjacent axes swapping positions when crossed. The visualization uses D3 v4 with SVG rendering, employing d3.scaleOrdinal for color mapping, d3.scalePoint for axis positioning, d3.line for path generation, and d3.drag for interactive axis movement. Hovering highlights a flavor by dimming other lines with opacity transitions.

Jul 20, 2021
Loading thumbnail…

Fork of Iris parallel coordinate plot

This parallel coordinate plot visualizes the classic Iris dataset, with each flower sample drawn as a colored polyline across four axes: petal length, petal width, sepal length, and sepal width. The lines are colored by species (red, green, blue), and hovering over a line highlights all samples of that species while dimming the rest. The axes can be dragged horizontally to reorder dimensions; when dragged past another axis, the two axes swap positions with an animated transition. The visualization uses d3.v4 with d3.line for paths, d3.axisLeft for scales, and d3.drag for interactive axis reordering, rendered as SVG.

Jul 20, 2021