Skip to main content
SimilarExport ZIP
100%

109550187_HW8

✓ Published0🌍 Public
Ppatricknicholas27@gmail.com
Last edited Nov 13, 2023
Created on Nov 13, 2023
Forked from 109550187_HW1

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 312553048_HW3

This visualization is an interactive Sankey diagram built with D3.js v4 that maps the flow of categorical car attributes (buying price, maintenance cost, doors, persons, luggage boot, safety) from the Car Evaluation dataset. It shows how records transition sequentially through these attribute columns, with node widths representing counts and colored by attribute category. The implementation uses custom D3 Sankey layout functions, the `d3.csvParse` and `d3.text` APIs for data ingestion, and `d3.drag()` for interactive node repositioning. The SVG-based rendering displays attribute titles above each column and uses color scales to differentiate categories.

Jjerry70938@gmail.com
91% match
Loading thumbnail…

109705001_hw8

This interactive sankey diagram visualizes the car evaluation dataset (cars.data), showing flows between six categorical features—buy, maint, door, person, lug, and safety—and the final class outcome. Users can drag column headers horizontally to reorder features and drag individual nodes vertically to explore the hierarchy. Hovering over links displays the count of records passing between each pair of categories. Built with D3 v5, it uses `d3.sankey` for layout and `d3.drag` for interactions, rendering SVG paths with stroke-opacity for flow emphasis.

Yyihsuan
90% 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
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
88% match
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
88% 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…

Fork of Data Visualization Homework 8: Sankey Diagram

This Sankey diagram visualizes car evaluation data, showing the flow of categorical attributes (buying price, maintenance cost, doors, persons, luggage boot, safety) into the final car acceptability rating. The diagram uses D3.js v5 to render nodes and links as an SVG, where node width represents the value of each category, and link thickness indicates the quantity of cars flowing between categories. The code defines a custom `flowDiagram` module with methods like `nodeWidth`, `nodePadding`, and `layout` to manage the diagram’s geometry, while a cubic Bézier curve function draws the links. The data is loaded from the `car.data` file, which contains comma-separated rows that are parsed into nodes and links.

Jjerry70938@gmail.com
87% match
Loading thumbnail…

Sankey diagram

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.

Hhi4u2qzy@gmail.com
87% match