Skip to main content
SimilarExport ZIP
100%

Sankey diagram

✓ Published0🌍 Public
Hhi4u2qzy@gmail.com
Last edited Nov 9, 2023
Created on Nov 8, 2023

This Sankey diagram visualizes the flow of car attributes from the UCI Auto MPG dataset, showing how combinations of buying price, maintenance cost, doors, persons, luggage boot, and safety lead to overall acceptability ratings. Users can reorder the attribute sequence using a dropdown menu, which rearranges the flow columns accordingly. The implementation uses the `d3-sankey` extension library on top of D3 v6, rendering nodes as rectangles and links as horizontal paths within an SVG canvas. Node and link colors are assigned via `d3.scaleOrdinal`, and nodes are draggable through D3's drag behavior.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set. The user can select which columns map to X and Y using dropdown menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

SANKEY Experiment

This Sankey diagram visualizes the flow of categorical values across six attributes—buying, maintenance, doors, persons, luggage boot, and safety—from the car.data dataset. Nodes are colored by attribute using the `d3.scaleOrdinal` scheme, with labels and values displayed. The graph is constructed using a custom `d3.sankey()` implementation, with node dragging enabled via `d3.drag()`. The layout is computed through iterative breadth and depth algorithms, rendering SVG paths for links.

ZZeroKurosakii
89% 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
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
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
86% 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
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

A Sankey diagram visualizes the Car Evaluation dataset, showing how combinations of car attributes (buying price, maintenance, doors, persons, luggage boot, safety) flow to final acceptability ratings. The diagram uses color-coded nodes grouped by attribute type, with link thickness representing the count of cars with each attribute combination. The code uses d3.sankey for layout, d3.drag for interactive node repositioning, and d3.csv for data loading. The visualization renders as SVG, calculating node positions and link paths through the sankey.layout(32) function.

Dderrick373519@gmail.com
85% match
Loading thumbnail…

Data Visualization Homework 8: Sankey Diagram

A Sankey diagram of car evaluation data visualizes the flow of car attributes—buying price, maintenance cost, doors, persons, luggage boot, and safety—toward an acceptability outcome. The diagram renders nodes and curved links as SVG elements using D3.js v5, with the custom `d3.sankey` layout computing node positions and link widths. Draggable nodes allow interactive repositioning, triggering a relayout that updates link paths via `d3.sankeyLinkHorizontal`. Data is loaded from a CSV text file using `d3.csvParse`.

Dderrick373519@gmail.com
85% match