GraphViz is an interactive graph visualization tool that allows users to create, edit, and visualize both directed and undirected graphs. Built using D3.js, HTML, and CSS, this tool is perfect for educational purposes and visualizing complex networks.
- Interactive Graphs: Add nodes and edges dynamically and see real-time updates.
- Directed and Undirected Graphs: Toggle between directed and undirected graph modes.
- Drag and Drop Nodes: Easily rearrange nodes by dragging them to desired positions.
- Customizable UI: Visually appealing design with a gradient background and modern UI elements.
- Responsive Design: Optimized for various screen sizes and devices.
- D3.js: For creating and manipulating the SVG graph elements.
- HTML5 & CSS3: For the structure and styling of the application.
- JavaScript: For the interactive functionality.
To run this project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/pvbgeek/graphviz.git cd graphviz -
Open
index.htmlin your browser:open index.html
Check out the live demo here.
-
Add Nodes and Edges:
- Enter the edges in the "Graph Data" textarea in the format
source target. - Click "Update Graph" to visualize the graph.
- Enter the edges in the "Graph Data" textarea in the format
-
Toggle Graph Type:
- Use the "Undirected" and "Directed" buttons to switch between graph types.
-
Drag and Drop Nodes:
- Hover over a node until the cursor changes.
- Click and drag the node to reposition it.
Feel free to customize the styles and functionality as per your needs. The styles are defined in styles.css, and the interactive logic is in script.js.
Contributions are welcome! Please fork the repository and submit a pull request for any features, bug fixes, or improvements.
This project is licensed under the MIT License.
For any questions or suggestions, feel free to open an issue or contact me at pvbcod@gmail.com.
Thank you for using GraphViz! Happy Visualizing! 🎉