ling900101@gmail.com

@LazyForFun·3 public vizzes

Homework8

This example presents a Sankey diagram visualizing the relationships between categorical attributes of cars, using the classic car evaluation dataset. The diagram shows how each attribute value (such as "buying=vhigh" or "safety=low") connects to other attribute values, with link thickness representing the conditional probability of one attribute value given another. The visualization uses the `d3.sankey` plugin to compute and render the node-link layout, while `d3.csvParse` processes the raw CSV data. Each node is colored using a `d3.scaleOrdinal` with the `schemeCategory20` palette, and rendering is done as an SVG element. The code manually constructs nodes and links, calculating link values through data filtering, and displays the resulting flow diagram with interactive hover tooltips.

Nov 6, 2023

Loading thumbnail…

Fork of hw8_sankey

This example visualizes the Car Evaluation dataset using a Sankey diagram to show conditional probability relationships between categorical car attributes. The code computes pairwise ratios between attribute values, such as buying price and maintenance cost, and encodes these as link widths. It uses d3.csvParse to load the data and builds the diagram with d3.sankey, layout(1), and SVG rendering within a React framework. Node names combine column labels with their values to trace flows across six attribute dimensions.

Nov 3, 2023

Loading thumbnail…

test

This interactive scatterplot visualizes the height and width of Iris flower organs, allowing users to toggle between sepal and petal measurements via a dropdown menu. The SVG chart uses D3 v7’s `scaleLinear`, `axisLeft`, and `axisBottom` to map dimensions, with points colored by Iris species (setosa, versicolor, virginica). Data comes from the `iris.csv` dataset. The visualization highlights how petal measurements cluster more distinctly by species compared to sepals, revealing the dataset’s classic separation pattern.

Sep 24, 2023