https://github.com/kisaa-fatima/data-visualization
Its all about creating visualizations from big data using extensive library that is D3.js. My objective is to create a dashboard for graph layout from scratch using d3.js. The purpose of this is to train myself to be able to create custom layouts as per my own choice. The dashboard should enable users to upload a file containing an adjacency matrix
https://github.com/kisaa-fatima/data-visualization
acyclic-graphs chord-diagram cyclic-graphs d3js html iciclegraph ui visualization
Last synced: 17 days ago
JSON representation
Its all about creating visualizations from big data using extensive library that is D3.js. My objective is to create a dashboard for graph layout from scratch using d3.js. The purpose of this is to train myself to be able to create custom layouts as per my own choice. The dashboard should enable users to upload a file containing an adjacency matrix
- Host: GitHub
- URL: https://github.com/kisaa-fatima/data-visualization
- Owner: Kisaa-Fatima
- Created: 2023-12-16T16:05:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-16T16:37:37.000Z (over 1 year ago)
- Last Synced: 2025-02-17T16:41:39.618Z (3 months ago)
- Topics: acyclic-graphs, chord-diagram, cyclic-graphs, d3js, html, iciclegraph, ui, visualization
- Language: HTML
- Homepage:
- Size: 5.67 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Data-visualization
Its all about creating visualizations from big data using extensive library that is D3.js
Without using D3.js buildin functions I have done created different layouts using d3.js.
The details about the work I have done is below :
My objective is to create a dashboard for graph layout from scratch using d3.js. The purpose of this is to train myself to be able to create custom layouts as per my own choice.
The dashboard should enable users to upload a file containing an adjacency matrix. After loading file I have to identify cycles, determining connectivity, classifying the graph as a General Graph, Directed Acyclic Graph (DAG) or a Tree, and laying
out (visualizing it) appropriately it on the screen. The user will be provided with layout options according
to the determined type of the graph. FOR EASE dividing the code in different html files(each layout having different html file).
Note: For laying out graphs, you CANNOT use any pre-built layout algorithm in d3 or any other
source. You must lay out the graph from scratch using d3.js.
1. UI Design & Development (.html )
Creating a user-friendly design of my Intelligent Graph Layout webpage. The UI must contain the following features i.e., Develop a user-friendly file upload feature, allowing users to upload a file that contains an adjacency matrix. Analyze the
uploaded graph data to identify cycles. As a first step, determine the graph’s connectivity. If the
graph has disconnected components, ask the user to upload a connected graph. For a connected
graph, determine if the graph is one of these special types i.e., a Directed Acyclic Graph (DAG) or
a Tree or is it a general graph. Based on the type of the graph, the UI should intelligently offer the
users appropriate layout options on the screen to select how they want to visualize the graph.
The following options layout options should be shown as per the graph are as follows:
• General Graph:
1. Grid Layout
2. Chord Diagram
• Directed Acyclic Graph:
1. Sugiyama Layout
2. Radial Sugiyama Layout
• Tree:
1. Rheingold Tilford Layout
2. Icicle Tree Layout
NOTE: making html file for each layout for ease.
Then the user can select any layout it want to be displayed. for instance in i want chord layout then I will select chord option and and chord page will be displayed oh that page i will have to upload a file and chord layout will be made from that respective input uploaded csv file.