{"id":36417976,"url":"https://github.com/3moly/compose-data-viz","last_synced_at":"2026-01-11T17:01:18.225Z","repository":{"id":324460473,"uuid":"1092159806","full_name":"3moly/compose-data-viz","owner":"3moly","description":"Ready-to-use Canvas and Graph visualization components similar to Miro-style canvas or Obsidian’s graph.","archived":false,"fork":false,"pushed_at":"2025-12-06T00:35:17.000Z","size":975,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-08T20:55:14.266Z","etag":null,"topics":["compose-multiplatform","compose-ui","force","graphs","ui"],"latest_commit_sha":null,"homepage":"https://composedataviz.3moly.com/","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/3moly.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-08T05:19:02.000Z","updated_at":"2025-12-06T00:35:20.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/3moly/compose-data-viz","commit_stats":null,"previous_names":["3moly/compose-data-viz"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/3moly/compose-data-viz","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3moly%2Fcompose-data-viz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3moly%2Fcompose-data-viz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3moly%2Fcompose-data-viz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3moly%2Fcompose-data-viz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/3moly","download_url":"https://codeload.github.com/3moly/compose-data-viz/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3moly%2Fcompose-data-viz/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28314254,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-11T14:58:17.114Z","status":"ssl_error","status_checked_at":"2026-01-11T14:55:53.580Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["compose-multiplatform","compose-ui","force","graphs","ui"],"created_at":"2026-01-11T17:00:36.977Z","updated_at":"2026-01-11T17:01:18.216Z","avatar_url":"https://github.com/3moly.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Maven Central Version](https://img.shields.io/maven-central/v/io.github.3moly/compose-data-viz)\n\n\u003cp align=\"middle\"\u003e\n    \u003cimg src=\"docs/media/whiteboard_demo.jpg\" width=\"49%\" /\u003e\n    \u003cimg src=\"./docs/media/graph_demo.png\" width=\"49%\" /\u003e\n\u003c/p\u003e\n\n[android, wasm, js, ios, jvm, macos]\n\n# compose-data-vizualization\n\nYou need Miro whiteboard or Graph nodes like in Obsidian App in Compose multiplatform?\n\u003cbr/\u003e\nThis library can help you. Most prepared motions and actions with Whiteboard and Graph are given.\n\nOpen demo site in wasm (mobile friendly):\n\nhttps://composedataviz.3moly.com/\n\n```gradle\nimplementation(\"io.github.3moly:compose-data-viz:0.1.0\")\n\n// The core module is needed only if you split models of this library from ui.\n// (Be aware that it includes compose.foundation for Offset and Color classes)\nimplementation(\"io.github.3moly:compose-data-viz-core:0.1.0\")\n```\n\n### Sample code\n\nIn sample module there is WhiteboardSample and GraphSample functions.\nWith them you can understand faster how to deal with the library.\n\n### Whiteboard\n\nThe key part is a shape. For library it's important to know about 3 fields.\n\n```kotlin\ninterface Shape {\n    val id: Long\n    val position: Offset\n    val size: Offset\n}\n```\n\n\nAnd you can inherit above interface for more fields you wish to use in a Drawing process.\n\n```kotlin\ndata class CustomShape(\n    override val id: Long,\n    override val position: Offset,\n    override val size: Offset,\n\n    val backgroundColor: Color?,\n    val data: ShapeData\n) : Shape\n```\n\nSo then every shape of your CustomShape will show through method in under code.\nAnd Modifier with calculated size and location will show in DrawShapeState.\nSo you can use this Modifier for drawing Shape, you can draw any shape you want.\n\n```kotlin\nonDrawBlock: @Composable (DrawShapeState\u003cShapeType, Id\u003e) -\u003e Unit\n```\n\n```kotlin\n@Composable\nfun \u003cShapeType : Shape\u003cId\u003e, Id\u003e Whiteboard(\n    consume: Boolean,\n    modifier: Modifier,\n    action: Action\u003cShapeType, Id\u003e?,\n    backgroundModifier: Modifier,\n    connectionsModifier: Modifier,\n    settings: CanvasSettings,\n    zoom: Float,\n    roundToNearest: Int?,\n    connectionDragBlankId: Id,\n    userCoordinate: Offset,\n    isDrawing: Boolean,\n    shapes: List\u003cShapeType\u003e,\n    connections: List\u003cShapeConnection\u003cId\u003e\u003e,\n    drawingPaths: List\u003cStylusPath\u003e,\n    onActionSet: (Action\u003cShapeType, Id\u003e?) -\u003e Unit,\n    onAddPath: (StylusPath) -\u003e Unit,\n    onMoveShape: (Int, Offset) -\u003e Unit,\n    onResizeShape: (Int, Offset, Offset) -\u003e Unit,\n    onAddConnection: (AddShapeConnection\u003cId\u003e) -\u003e Unit,\n    onZoomChange: (Float) -\u003e Unit,\n    onUserCoordinateChange: (Offset) -\u003e Unit,\n    settingsPanel: @Composable (position: Offset, action: Action\u003cShapeType, Id\u003e, onDoneAction: () -\u003e Unit) -\u003e Unit,\n    onDrawBlock: @Composable (DrawShapeState\u003cShapeType, Id\u003e) -\u003e Unit,\n) {\n    //...\n}\n```\n\n### Graph\n\n```kotlin\n@Composable\nfun \u003cId, Data\u003e Graph(\n    modifier: Modifier = Modifier,\n    userPosition: Offset,\n    zoom: Float,\n\n    stateNodes: List\u003cGraphNode\u003cId, Data\u003e\u003e,\n    coordinates: Map\u003cId, Offset\u003e,\n    velocities: Map\u003cId, Offset\u003e,\n    connections: Map\u003cId, List\u003cId\u003e\u003e,\n\n    viewSettings: GraphViewSettings,\n    onCentralGlobalPosition: (Offset) -\u003e Unit,\n    onZoomChange: (Float) -\u003e Unit,\n    watchNodeId: Id? = null,\n    io: CoroutineContext,\n    onNodeClick: (GraphNode\u003cId, Data\u003e) -\u003e Unit,\n    onCoordinatesUpdate: (Map\u003cId, Offset\u003e) -\u003e Unit = {},\n    onVelocitiesUpdate: (Map\u003cId, Offset\u003e) -\u003e Unit = {},\n    primaryColor: Color,\n    fontColor: Color,\n    circleColor: Color,\n    circleLineColor: Color\n) {\n    //...\n}\n```\n\n## Used in\n\n- [CedarJam](https://github.com/3moly/CedarJam)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3moly%2Fcompose-data-viz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F3moly%2Fcompose-data-viz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3moly%2Fcompose-data-viz/lists"}