Skip to main content
SimilarExport ZIP
100%

Fork of hw8_sankey

✓ Published0🌍 Public
Lling900101@gmail.com
Last edited Nov 3, 2023
Created on Nov 3, 2023
Forked from 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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

hw8_sankey

This example creates a Sankey diagram from car evaluation data, showing the proportional relationships between categorical attributes such as buying price, maintenance cost, doors, persons, luggage boot, and safety. Each node represents a specific attribute value, and links between nodes encode the conditional ratio of one value occurring given another across all possible column pairs. The code loads data from a remote CSV, parses it with `d3.csvParse`, and builds nodes and links programmatically before passing them to the `render` function. Although the Sankey layout is not executed, the visualization relies on the D3 v5 library and the external sankey.js plugin.

Kkenny-wq
91% match
Loading thumbnail…

hw8_again

This example shows a Sankey diagram of car evaluation data, displaying proportional relationships between attributes like buying price, maintenance cost, doors, persons, luggage boot, and safety. The diagram uses a React-based D3 v4 implementation with the custom `d3.sankey` layout, where nodes can be dragged vertically within their columns to explore connections. The code reads a CSV dataset from a remote URL, calculates ratio-based link values between attribute pairs, and renders the visualization as an SVG with draggable nodes and hover tooltips showing node names and values.

Kkenny-wq
88% match
Loading thumbnail…

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.

Lling900101@gmail.com
87% match
Loading thumbnail…

Fork of Data Visualization Homework 8: Sankey Diagram

This Sankey diagram visualizes car evaluation results from the car.data dataset, showing how attributes like buying price, maintenance cost, doors, persons, luggage boot, and safety flow into final acceptability ratings. The diagram uses d3.sankey() to compute node positions and link paths, with nodes colored by attribute category and rendered as SVG rectangles. Links are grouped by source-target pairs and their thickness represents the count of cars with that combination. Interactive dragging of nodes is enabled through d3.drag(), allowing users to rearrange the visualization dynamically.

Jjerry70938@gmail.com
87% match
Loading thumbnail…

109550187_HW8

This visualization uses a Sankey diagram to show the flow of car attribute combinations from the UCI Car Evaluation dataset, sourced via a remote CSV file. It displays how categorical values for buying price, maintenance cost, doors, persons, luggage boot, and safety connect sequentially. The D3.js v4 code employs `d3.sankey()` for layout, `d3.csvParse` for data ingestion, and SVG rendering with `d3.drag()` for interactive node repositioning. Link stroke width represents frequency, while color encodes distinct source nodes.

Ppatricknicholas27@gmail.com
86% match
Loading thumbnail…

HW8_311553050

This interactive Sankey diagram visualizes the flow of car attribute combinations from the Car Evaluation dataset. Seven sequential attribute stages—buying, maintenance, doors, persons, luggage boot, safety, and overall acceptance level—are displayed as linked nodes, with link thickness representing the frequency of each attribute pair. Built with React and D3.js (version 3.5.16), the visualization uses the custom `d3.sankey` module for layout and SVG paths for links. Nodes are draggable, and hovering reveals exact counts. The underlying data is parsed from a raw CSV string, with each row contributing to the aggregated combination counts.

YYunLing
85% match
Loading thumbnail…

Data Visualization Homework 8: Sankey Diagram

This visualization is a Sankey diagram that depicts the flow of car attributes—buying price, maintenance cost, number of doors, person capacity, luggage boot size, and safety—toward a final evaluation of acceptability. The diagram uses nodes for each attribute-value combination and weighted links to show the sequential relationships between them. The code builds the graph by parsing a CSV file and then uses a custom `d3.sankey()` layout algorithm to position nodes and links, rendering the final output as SVG. Interactive dropdown menus allow the user to select which columns to compare.

Dderrick373519@gmail.com
83% match
Loading thumbnail…

SANKEY

This visualization uses a Sankey diagram to show the flow of categorical attributes from a car evaluation dataset, with nodes representing distinct values for features like buying price, maintenance, doors, people, luggage boot, and safety. The diagram is rendered using D3 v4's SVG API and a custom `d3.sankey` layout to position nodes and links. Users can drag node rectangles to rearrange the layout, which calls `sankey.relayout`, and the interactive buttons highlight the specified data columns. The dataset is loaded from a static `sankey.data` file using `d3.text` and parsed with `d3.csvParseRows`.

Sstanley.shen2003@gmail.com
83% match