vegetable.c@nycu.edu.tw

@vege-t·8 public vizzes

Fork

Sankey Particles animates the flow of energy through a network diagram using the car evaluation dataset and an energy consumption JSON file. The visualization combines an SVG-based Sankey layout with a canvas particle overlay, where d3.sankey positions the nodes and links while animated particles traverse the paths to illustrate data movement. The code implements custom layout calculations for node positioning and link depths, with the canvas rendering particle motion on top of the static SVG structure.

Oct 31, 2024

Loading thumbnail…

Fork of Parallel Coordinates with Brushing

This example presents an interactive parallel coordinates plot for the Iris dataset using D3.js, featuring linked brushing for multidimensional filtering. Users can brush along any axis to highlight or fade lines in the visualization, with smooth 500ms transitions between filtered states. The code employs `scalePoint`, `scaleLinear`, `brushY`, and a custom `lineGenerator` with mix-blend-mode for overlapping strokes. It demonstrates responsive resizing via `observeResize` and memoized data filtering, serving as a cross-project export test for VizHub-powered Vite applications.

Sep 18, 2024

Loading thumbnail…

Debug

This interactive scatter plot explores the classic Iris dataset, showing how measurements of sepal and petal dimensions cluster by flower species. Users select which attributes to compare via dropdown menus, and points are color-coded by species (Setosa, Versicolor, Virginica) with a legend provided. The visualization uses D3 v7 (d3.csv, d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, d3.axisLeft) to render an SVG. On each attribute change, the scales and axes update with a smooth two-second transition and a staggered delay between points.

Sep 14, 2024

Loading thumbnail…

Scatter Plot

This interactive scatter plot explores the Iris dataset, showing the relationships between four numerical flower attributes across three species. Users switch the X and Y axes via dropdown menus, and an animated transition moves the colored circles to their new positions. The visualization uses D3.js v5 with a modular structure, leveraging `scaleLinear` for axes, `scaleOrdinal` for species colors, and `axisBottom`/`axisLeft` for grid lines. Data loads from an external CSV file, with circles rendered as SVG elements and a legend identifying each species.

Sep 14, 2024

Loading thumbnail…

Fork of Debug

This interactive scatter plot of the Iris dataset lets users explore relationships between sepal and petal measurements. Clickable buttons select which two features appear on the x- and y-axes, highlighting the chosen dimensions in the control panel. The visualization uses D3 v5’s `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes, with points colored by species (setosa, versicolor, virginica). Data loads from a CSV file containing 150 samples.

Sep 14, 2024

Loading thumbnail…

1st

An interactive scatter plot of the Iris dataset displays measurements of sepal and petal dimensions, with each of the three species rendered in a distinct color and identified in a fixed legend. Users select attributes for the x- and y-axes from two dropdown menus. The chart uses D3 v5 scales and axes (`scaleLinear`, `axisLeft`, `axisBottom`), with circles animated via `transition().delay()` as they reposition. Data is loaded asynchronously from a CSV file, and SVG rendering is updated dynamically upon menu selection.

Sep 14, 2024

Loading thumbnail…

Starter

This interactive scatterplot displays the classic Iris flower dataset, allowing users to compare any two numerical measurements by selecting the x- and y-axis columns from dropdown menus. The visualization renders data points as fixed-radius circles within an SVG canvas, with axis labels updating dynamically to reflect the chosen variables. Built with React and D3 v7, the code leverages `select` for DOM manipulation, `csv` for data loading, `scaleLinear` for axis scaling, and `axisLeft`/`axisBottom` for generating the axes, all orchestrated through a custom `scatterPlot` module.

Sep 13, 2024

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates how VizHub’s v3 runtime provides a blank canvas for building interactive visualizations, displaying a simple “Hello World” text whose font size is adjustable via Alt-drag. The code exports a `main` function from `index.js`, which receives a `container` DIV and uses plain HTML and inline styles to render the text. It highlights the platform’s hot-reloading and state-management APIs, including `setState` and `state`, without relying on any external libraries like D3 or Three.js.

Sep 12, 2024