CinSiangNg

@cinsiangNG·10 public vizzes

Fork of D3 Transitions

This example illustrates a fork of the classic D3 transitions, showcasing a force-directed network graph where nodes and links transition smoothly between positions. It uses `d3.forceSimulation` to compute the layout and `transition.attrTween` with the `d3.interpolate` function to animate the movement of SVG circles and lines. The rendering is entirely SVG-based, with a light background and plain node styling, highlighting the ease of chaining behavior and modifying attributes in D3 v3. The data appears to be a small static set of nodes and links, demonstrating how force simulation can be combined with custom transition sequencing.

Oct 8, 2024

Loading thumbnail…

Fork of HW02

This example presents an interactive parallel coordinate plot of the classic Iris dataset, allowing users to reorder the dimensions by dragging the axis labels. The visualization renders each flower as a polyline connecting its measurements across the four numeric axes and the categorical species axis, with the three iris species distinguished by color. Built with D3 v7, the chart uses `d3.scaleLinear` and `d3.scaleBand` for axis scaling and `d3.line` to generate the paths. The reordering functionality relies on the Sortable.js library, which triggers a full re-render of the SVG when the drag operation ends.

Sep 18, 2024

Loading thumbnail…

3

This interactive scatter plot visualizes the classic Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. Users can dynamically select which measurement appears on the X and Y axes using radio buttons, with the plot updating accordingly. The visualization uses D3 v4 to render the SVG, creating colored circles for each data point where colors distinguish species. D3 scales and axes are employed to map data values to positions with grid lines, while the plot features a clean white background and labeled axes with legend.

Sep 14, 2024

Loading thumbnail…

2

This interactive scatter plot visualizes Fisher's Iris dataset, allowing users to explore relationships between sepal and petal measurements across three iris species. Colored circles represent individual flowers, distinguished by species category. The visualization includes dropdown menus positioned along the axes for selecting which measurement is displayed on each axis. Built with D3.v7, the code utilizes `scaleLinear` for axis scaling, `scaleOrdinal` with `schemeCategory10` for color encoding, and custom D3 join operations to render axes, legend, and plot marks.

Sep 14, 2024

Loading thumbnail…

Fork of CSV Dataset Template - Penguins

This interactive scatter plot, built with D3 v7, visualizes the Iris flower dataset, displaying measurements like sepal and petal length and width. Users can dynamically change the x- and y-axis attributes using the dropdown menus positioned along the plot's edges. The visualization uses `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` to color the three Iris species, and `axisLeft`/`axisBottom` for chart axes.

Sep 14, 2024

Loading thumbnail…

1

This interactive scatter plot visualizes the classic Iris dataset, displaying sepal length on the x-axis and petal length on the y-axis. Each point represents an individual flower, colored by its species (setosa, versicolor, or virginica) according to a categorical color legend. The visualization is built with D3.js, using `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and modular components for drawing axes and the color legend. The code leverages D3's selection joins for efficient SVG element updates.

Sep 13, 2024

Loading thumbnail…

Fork of Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, using color to distinguish between three species of iris flowers. Dropdown menus allow users to select which measurements to plot on the x and y axes. The visualization uses D3's `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` for positioning and coloring, with `selection.join` for efficient updates. A color legend and axis labels are rendered programmatically.

Sep 13, 2024

Loading thumbnail…

123

This interactive D3.js scatter plot visualizes the classic Iris dataset, displaying measurements of sepal length, sepal width, petal length, and petal width for three species of iris flowers. Users can dynamically select which measurement appears on the x-axis and y-axis via dropdown menus, with the plot updating accordingly. The visualization uses D3's `scaleLinear` for axes, `axisBottom` and `axisLeft` for rendering ticks, and `extent` to determine the domain of the selected data. Points are colored by species using an ordinal color scale, rendered as SVG circles.

Sep 13, 2024

Loading thumbnail…

Fork of Hello HTML

This example displays an interactive network of nodes and edges, simulating a physics-based layout where connected points repel and attract each other until they settle into a stable configuration. The visualization uses the D3.js library’s `forceSimulation` API to compute the forces, while custom SVG rendering draws the graph elements. The graph is generated procedurally with a fixed random seed, and the simulation runs continuously in the browser, allowing the user to drag nodes and observe the dynamic rebalancing of the network.

Sep 13, 2024

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the minimal setup for a VizHub V3 project, which serves as a blank slate for building interactive data visualizations. It shows how a `main` function exported from `index.js` receives a `container` DIV element and an `options` object with `state` and `setState` for immutable state management, eliminating the need for an `index.html` entry point. The code highlights the hot-reloading environment where holding the Alt key and dragging numbers in the editor updates properties like font size in real time. No external libraries are used, relying instead on the VizHub V3 Runtime to render the container’s dimensions and dynamic content.

Sep 11, 2024