{"id":15055665,"url":"https://github.com/brunomnsilva/javafxsmartgraph","last_synced_at":"2025-04-08T16:01:31.104Z","repository":{"id":48256131,"uuid":"218525951","full_name":"brunomnsilva/JavaFXSmartGraph","owner":"brunomnsilva","description":"Generic (Java FX) Graph Visualization Library","archived":false,"fork":false,"pushed_at":"2024-11-07T18:41:57.000Z","size":11865,"stargazers_count":337,"open_issues_count":6,"forks_count":56,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-08T16:00:39.846Z","etag":null,"topics":["graphs","interactive-visualizations","java","javafx"],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brunomnsilva.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-30T12:47:49.000Z","updated_at":"2025-03-22T17:48:12.000Z","dependencies_parsed_at":"2024-03-12T14:29:21.547Z","dependency_job_id":"da37206e-f76a-49ca-aa6c-17673c1c33db","html_url":"https://github.com/brunomnsilva/JavaFXSmartGraph","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunomnsilva%2FJavaFXSmartGraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunomnsilva%2FJavaFXSmartGraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunomnsilva%2FJavaFXSmartGraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunomnsilva%2FJavaFXSmartGraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brunomnsilva","download_url":"https://codeload.github.com/brunomnsilva/JavaFXSmartGraph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247878015,"owners_count":21011158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphs","interactive-visualizations","java","javafx"],"created_at":"2024-09-24T21:45:30.023Z","updated_at":"2025-04-08T16:01:31.066Z","avatar_url":"https://github.com/brunomnsilva.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# (JavaFX) SmartGraph\n\nThis project provides a generic (Java FX) **graph visualization library** that can automatically arrange the vertices' locations\nthrough a [force-directed algorithm](https://en.wikipedia.org/wiki/Force-directed_graph_drawing) in real-time.\n\n![smartgraph realtime](assets/smartgraph_realtime.gif)\n\n## Features\n\n- The visualization library can be used together with any abstract data type (ADT) that adheres to the `Graph\u003cV,E\u003e` or `Digraph\u003cV,E\u003e` interfaces. Default implementations are included, but you can devise your own;\n\n- Instead of the force-directed automatic layout, vertices can be statically placed according to other algorithms and at *runtime*;\n\n- *Actions* can be performed when clicking the vertices and/or the edges;\n\n- Vertices can be freely moved, if the configuration allows it;\n\n- Can use different shapes to represent vertices;\n\n- The default appearance of vertices and edges are determined by a *properties* and a *css stylesheet* files;\n\n- Can use *annotations* and *providers* to change some properties at runtime, e.g., shape and size of vertices;\n\n- The *styles* can be changed at *runtime* programmatically and based on click events. \n\n## Documentation\n\n### What's new?\n\nAlthough one full version number higher than the previous *stable* version (1.1.0), existing applications are expected to work with this library version without significant changes.\n\n:warning: The only exception is the necessary use of `SmartStylableNode.setStyleInline(...)` instead of `SmartStylableNode.setStyle(...)` to correctly apply inline styles to nodes (vertices and edges). Css classes are set the same way as before.\n\n- (2.0.0) :tada: Minor fixes and **stable version** release.\n\nSee the [wiki](https://github.com/brunomnsilva/JavaFXSmartGraph/wiki) for the complete changelist.\n\n### Using the library\n\nBinaries and dependency information for Maven, Gradle and others can be found at [http://search.maven.org](https://central.sonatype.com/search?q=g%3Acom.brunomnsilva++a%3Asmartgraph\u0026smo=true).\n\nExample for Maven, where `x.y.z` is the library version, e.g., `2.0.0`:\n\n```xml\n\u003cdependency\u003e\n    \u003cgroupId\u003ecom.brunomnsilva\u003c/groupId\u003e\n    \u003cartifactId\u003esmartgraph\u003c/artifactId\u003e\n    \u003cversion\u003ex.y.z\u003c/version\u003e\n\u003c/dependency\u003e\n```\n\n:warning: Please note that the files `smartgraph.css` and `smartgraph.properties` **must be added manually** to your project.\n\nYou can also find in the [releases section](https://github.com/brunomnsilva/JavaFXSmartGraph/releases) the binaries, source code and documentation.\n\n#### Accelerated graphics\n\nSince the visualization is computation-intensive during automatic force-directed layout of vertices, you should make sure that the graphics card is used to offload much of the work. \n\nIn windows the JVM machine should automatically take care of that, while in Linux you must configure it manually with the `-Dsun.java2d.opengl=True` flag.\n\n### Basic usage\n\n```java\n// Create the graph\nGraph\u003cString, String\u003e g = new GraphEdgeList\u003c\u003e();\n// ... see Examples below\n\nSmartPlacementStrategy initialPlacement = new SmartCircularSortedPlacementStrategy();\nSmartGraphPanel\u003cString, String\u003e graphView = new SmartGraphPanel\u003c\u003e(g, initialPlacement);\nScene scene = new Scene(graphView, 1024, 768);\n\nStage stage = new Stage(StageStyle.DECORATED);\nstage.setTitle(\"JavaFXGraph Visualization\");\nstage.setScene(scene);\nstage.show();\n\n//IMPORTANT! - Called after scene is displayed, so we can initialize the graph visualization\ngraphView.init();\n```\n\nThis will display the graph using the instantiated placement `strategy`. You can **create your own static placement strategies** by implementing the `SmartPlacementStrategy` *interface* (see included examples).\n\n```java\n// Even with a static initial placement of vertices, we can toggle automatic layout\n// at any time, e.g.:\ngraphView.setAutomaticLayout(true);\n```\n\n### API Reference\n\n[![javadoc](https://javadoc.io/badge2/com.brunomnsilva/smartgraph/javadoc.svg)](https://javadoc.io/doc/com.brunomnsilva/smartgraph)\n\n\n## Examples\n\nBelow are provided some graphs and the corresponding visualization, either using a static placement strategy or by the automatic force-directed layout algorithm.\n\n### Sample Graph\n\nThe following code creates a sample graph:\n\n```java\nGraph\u003cString, String\u003e g = new GraphEdgeList\u003c\u003e();\n\ng.insertVertex(\"A\");\ng.insertVertex(\"B\");\ng.insertVertex(\"C\");\ng.insertVertex(\"D\");\ng.insertVertex(\"E\");\ng.insertVertex(\"F\");\ng.insertVertex(\"G\");\n\ng.insertEdge(\"A\", \"B\", \"1\");\ng.insertEdge(\"A\", \"C\", \"2\");\ng.insertEdge(\"A\", \"D\", \"3\");\ng.insertEdge(\"A\", \"E\", \"4\");\ng.insertEdge(\"A\", \"F\", \"5\");\ng.insertEdge(\"A\", \"G\", \"6\");\n\ng.insertVertex(\"H\");\ng.insertVertex(\"I\");\ng.insertVertex(\"J\");\ng.insertVertex(\"K\");\ng.insertVertex(\"L\");\ng.insertVertex(\"M\");\ng.insertVertex(\"N\");\n\ng.insertEdge(\"H\", \"I\", \"7\");\ng.insertEdge(\"H\", \"J\", \"8\");\ng.insertEdge(\"H\", \"K\", \"9\");\ng.insertEdge(\"H\", \"L\", \"10\");\ng.insertEdge(\"H\", \"M\", \"11\");\ng.insertEdge(\"H\", \"N\", \"12\");\n\ng.insertEdge(\"A\", \"H\", \"0\");\n```\n\n#### Sample Graph circular sorted placement (static)\n\n![graph circular placement](assets/graph_circle_placement.png)\n\n#### Sample Graph automatic layout\n\n![graph automatic layout](assets/graph_automatic_layout.png)\n\n### Sample Digraph (directed graph)\n\nThe following code creates a sample digraph:\n\n```java\nDigraph\u003cString, String\u003e g = new DigraphEdgeList\u003c\u003e();\n\ng.insertVertex(\"A\");\ng.insertVertex(\"B\");\ng.insertVertex(\"C\");\ng.insertVertex(\"D\");\ng.insertVertex(\"E\");\ng.insertVertex(\"F\");\n\ng.insertEdge(\"A\", \"B\", \"AB\");\ng.insertEdge(\"B\", \"A\", \"AB2\");\ng.insertEdge(\"A\", \"C\", \"AC\");\ng.insertEdge(\"A\", \"D\", \"AD\");\ng.insertEdge(\"B\", \"C\", \"BC\");\ng.insertEdge(\"C\", \"D\", \"CD\");\ng.insertEdge(\"B\", \"E\", \"BE\");\ng.insertEdge(\"F\", \"D\", \"DF\");\ng.insertEdge(\"F\", \"D\", \"DF2\");\n\n//yep, its a loop!\ng.insertEdge(\"A\", \"A\", \"Loop\");\n```\n\nPlease note that we use the property values `edge.arrow = true` and `vertex.label = true`.\n\nGiven it's a small graph, we increased the `layout.repulsive-force = 25000`. You should use higher values for smaller graphs; inversely, use smaller values for larger graphs.\n\n\u003e See Configuration and Styling section.\n\u003e \n#### Sample Digraph circular sorted placement (static)\n\n![digraph circular placement](assets/digraph_circle_placement.png)\n\n#### Sample Digraph automatic layout\n\n![digraph automatic layout](assets/digraph_automatic_layout.png)\n\n### Updating the view\n\nWhen you make changes to the graph, you must update the visualization by calling `SmartGraphPanel#update()` or `SmartGraphPanel#updateAndWait()`. The latter version \"blocks\" the caller thread until the visualization has updated.\n\n```java\n// Any number of changes to the graph\ng.removeVertex(\"A\");\n//...\n        \n// Update the visualization\ngraphView.update();\n```\n\nthis will add/remove the corresponding vertices and edges from the visualization. If a new vertex is connected to an existing one, it will be initially placed in the vicinity of the latter. Otherwise, if it is an *isolated* vertex it will be placed in the center of the plot.\n\n### Responding to click events on vertices and/or edges\n\nYou can attach actions with:\n\n```java\ngraphView.setVertexDoubleClickAction(graphVertex -\u003e {\n    System.out.println(\"Vertex contains element: \" + graphVertex.getUnderlyingVertex().element());\n});\n\ngraphView.setEdgeDoubleClickAction(graphEdge -\u003e {\n    System.out.println(\"Edge contains element: \" + graphEdge.getUnderlyingEdge().element());\n    //dynamically change the style, can also be done for a vertex\n    graphEdge.setStyleInline(\"-fx-stroke: black; -fx-stroke-width: 2;\");\n});\n```\n\nThese actions will be performed whenever you *double-click* a vertex and/or an edge.\n\n## Configuration and Styling\n\n### SmartGraph Properties\n\n:warning: The `smartgraph.properties` file must exist in you project folder.\n\nYou can set the graph visualization properties in the `smartgraph.properties` file:\n\n```properties\n# Vertex related configurations\n#\nvertex.allow-user-move = true\nvertex.radius = 15\nvertex.shape = circle\nvertex.tooltip = true\nvertex.label = false\n\n# Edge related configurations\n#\nedge.tooltip = true\nedge.label = false\n# only makes sense if displaying an oriented graph \nedge.arrow = false\n\n# (automatic) Force-directed layout related configurations\n#\n# Notice: deprecated since version 1.1. Force directed layout strategies are now\n# instantiated and can be swapped at runtime, per the Strategy design pattern.\n# The parameters are passed as arguments or one can use the default ones described\n# in the javadoc documentation.\n#   -- You should experiment with different values for your \n#   -- particular problem, knowing that not all will achieve \n#   -- a stable state\nlayout.repulsive-force = 25000\nlayout.attraction-force = 30\nlayout.attraction-scale = 10\n```\n\n### SmartGraph CSS styling\n\n:warning: The `smartgraph.css` file must exist in you project folder. \nFor example, if all your vertices turn out black, this is because this file cannot be found.\n\nYou can set the default CSS styles in the `smartgraph.css` file; see below.\n\nThe style classes `graph`, `vertex`, `vertex-label`, `edge`, `edge-label` and `arrow` contain the default styling for the nodes and must exist in the file. You can, however, provide different classes to apply to specific elements, e.g., vertices, edges and labels.\n\nThe following example contains an additional definition for the CSS class `.myVertex`. You can apply the style individually to an existing element, e.g., vertex, as follows:\n\n```java\ngraphView.getStylableVertex(\"A\").setStyleClass(\"myVertex\");\n```\n\n```css\n.graph {\n    -fx-background-color: #F4FFFB;\n}\n\n.vertex {\n    -fx-stroke-width: 3;\n    -fx-stroke: #61B5F1;\n    -fx-stroke-type: inside; /* you should keep this for vertex.radius to hold */\n    -fx-fill: #B1DFF7;\n}\n\n.vertex:hover { /* pseudo-classes also work */\n    /*-fx-cursor: default; */ /* You can use this style to override the hand/move cursors while hovering. */\n    -fx-stroke-width: 4;\n}\n\n.vertex-label {\n    -fx-font: bold 8pt \"sans-serif\";\n}\n\n.edge {\n    -fx-stroke-width: 2;\n    -fx-stroke: #FF6D66;  \n    -fx-stroke-dash-array: 2 5 2 5; /* remove for clean edges */  \n    -fx-fill: transparent; /*important for curved edges. do not remove */\n    -fx-stroke-line-cap: round;\n    -fx-opacity: 0.8;\n}\n\n.edge-label {\n    -fx-font: normal 5pt \"sans-serif\";\n}\n\n.arrow {\n    -fx-stroke-width: 2;\n    -fx-stroke: #FF6D66;  \n    -fx-opacity: 0.8;\n}\n\n/* Custom vertex. You should revert any unwanted styling in the default element, \n   style, since custom styles will be appended to the default style */\n.myVertex {\n    -fx-stroke-width: 5;\n    -fx-stroke: green;\n    -fx-stroke-type: inside; /* you should keep this if using arrows */\n    -fx-fill: yellowgreen;\n}\n```\n\n\n\n## Contributing\n\nYou can submit a pull request. Pull requests should adhere to the existing naming and *Javadoc* conventions.\n\n## Projects that use this library\n\n- [Word Automata](https://github.com/lorenzodbr/word-automata) - *\"... a graphical tool that allows you to create and simulate automata that recognize words. You can add states, transitions, and set the initial and final states. The tool will then allow you to simulate the automaton on a given word, showing you the path that the automaton takes.\"*\n\n- [PathGraph](https://github.com/vittorioPiotti/PathGraph-JavaFX) - *\"Path Graph is a library with all the tools necessary to create and work both path and walk graphs in a stable and simple way.\"*\n  \n:star: If you use the library in your project, you can send me a message and I can showcase it in this page.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE.txt) file for details. **All derivative work should include this license**.\n\n## Authors\n\nOriginal author: **Bruno Silva** - [(GitHub page)](https://github.com/brunomnsilva) | [(Personal page)](https://www.brunomnsilva.com/)\n\n---\n\nI hope you find SmartGraph useful and look forward to seeing the projects you create with it!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunomnsilva%2Fjavafxsmartgraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrunomnsilva%2Fjavafxsmartgraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunomnsilva%2Fjavafxsmartgraph/lists"}