Skip to main content
SimilarExport ZIP
100%

Fork of Data Visualization Homework 8: Sankey Diagram

✓ Published0🌍 Public
Jjerry70938@gmail.com
Last edited Oct 29, 2024
Created on Oct 28, 2024

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.

AI-generated description
MIT Licensed

Similar vizzes

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
96% 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
95% 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
94% 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
94% match
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
89% 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 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.

Lling900101@gmail.com
87% 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