e94091071@gs.ncku.edu.tw

@lynn9106·6 public vizzes

2

A parallel coordinate plot displays the Iris dataset, with four axes representing sepal length, sepal width, petal length, and petal width. Each flower is a polyline connecting its measurements across the axes, colored by species via the CSS classes `.Iris-setosa`, `.Iris-versicolor`, and `.Iris-virginica`. The visualization is rendered as SVG using D3 v5, with `d3.scaleLinear` for per-axis scaling, `d3.scalePoint` for axis positioning, and `d3.axisLeft` for tick labels.

Sep 18, 2024

Loading thumbnail…

Fork of 2 TO Drag

This interactive parallel coordinate plot displays the Iris dataset's four measurements as polylines connecting labeled axes. Users can drag axis labels to reorder variables, while hovering over color-coded legend entries highlights one of three Iris species using D3 transitions. The visualization is built with D3 v5, using scalePoint, scaleLinear, and drag behavior APIs to implement the reordering and highlighting interactions. SVG paths render the data lines, and the axis ordering updates dynamically during drag events.

Sep 18, 2024

Loading thumbnail…

HW1 - Scatter Plot of Iris Dataset

An interactive scatter plot visualizes the Iris dataset, allowing users to compare any pair of four floral measurements via two dropdown menus. The plot depicts all 150 specimens as colored circles, with light pink, green, and orange distinguishing the three iris species through a custom color legend. Built with D3 v5, the visualization uses `csv()` to load data, `scaleLinear()` for axes, and `axisBottom()`/`axisLeft()` for grid lines. Animated transitions animate circles from the chart’s center to their plotted positions after each axis selection. SVG rendering displays the chart and dropdown menus.

Sep 17, 2024

Loading thumbnail…

HW1-Scatter Plot with Menu

This interactive scatter plot visualizes multidimensional data through a menu-driven interface. The visualization uses D3.js to render points on an SVG canvas, with a dropdown menu allowing users to switch between different data attributes for the x and y axes. The code employs d3.select, d3.scaleLinear, d3.axisBottom, and d3.axisLeft to construct the coordinate system, while d3.csv parses the external dataset. A menu change event triggers a transition that updates the point positions using transition.attr, providing a dynamic comparison of variable relationships.

Sep 9, 2024

Loading thumbnail…

test

This example shows a force-directed network layout where nodes are grouped into fixed, prominent clusters by categorical labels. The visualization demonstrates how d3.forceSimulation, with forces for collision, x-position, and y-position, organizes data points into distinct color-coded groups based on a numeric field. Each node is rendered as a colored circle, with labels displayed on hover, and the simulation runs in a continuous loop to maintain the cluster structure. The code uses the D3 library’s force simulation and selection APIs to update positions each tick.

Sep 9, 2024

Loading thumbnail…

Intro to HTML

This example displays the text “Hello HTML!” centered on a blank page, styled with a 13em font size via a CSS class. It demonstrates the foundational structure of an HTML document, including a `<head>` section with embedded `<style>` rules and a `<body>` containing a single `<div>` element. The page uses standard HTML and CSS to achieve the visual result, with no external libraries or JavaScript logic beyond the markup itself.

Sep 4, 2024