{"id":13832323,"url":"https://github.com/s0md3v/Quark","last_synced_at":"2025-07-09T16:35:14.688Z","repository":{"id":108700391,"uuid":"140187397","full_name":"s0md3v/Quark","owner":"s0md3v","description":"Quark is a data visualization framework.","archived":false,"fork":false,"pushed_at":"2021-01-05T18:00:34.000Z","size":202,"stargazers_count":217,"open_issues_count":0,"forks_count":32,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-11-20T10:00:09.865Z","etag":null,"topics":["data-visualization","graph","network-graph"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/s0md3v.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-07-08T17:12:41.000Z","updated_at":"2024-11-20T00:07:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"cc13f926-720b-4f63-9aaf-bf20e5c6e4a1","html_url":"https://github.com/s0md3v/Quark","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0md3v%2FQuark","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0md3v%2FQuark/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0md3v%2FQuark/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0md3v%2FQuark/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s0md3v","download_url":"https://codeload.github.com/s0md3v/Quark/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225575316,"owners_count":17490739,"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":["data-visualization","graph","network-graph"],"created_at":"2024-08-04T10:01:59.379Z","updated_at":"2024-11-20T14:30:49.865Z","avatar_url":"https://github.com/s0md3v.png","language":"JavaScript","readme":"## Introduction\n**Quark** is framework built on top of [Linkurious.js](https://github.com/Linkurious/linkurious.js) which lets you painlessly visualize your data in form of nodes \u0026 edges. It offers a lot of features out of the box and runs in a browser so you don't need to worry about installing anything or configuring things. Just feed it some data and Quark will plot a beautiful and intractable graph out of it.\\\nHere's a screenshot if you are eager to take a look at it:\n\n![Quark UI](https://image.ibb.co/ftrKp8/Screenshot_2018_07_09_19_19_11.png)\n\n### Browser Support\nAll modern web browsers are supported, including:\n\n- Internet Explorer 10+\n- Chrome 23+ and Chromium\n- Firefox 15+\n- Safari 6+\n\nTouch events on tablet and mobile are currently supported as beta features.\n\n### Usage\n\n#### In-Graph Controls\n- `left click` Select a node\n- `right click` Highlight edges of the node\n- `drag` Move around\n- `mousewheel` zoom in \u0026 zoom out\n\n#### Keyboard Controls\n- `Keyboard Arrows` Move around\n- `spacebar + +` Zoom in\n- `spacebar + -` Zoom out\n- `spacebar + a` Select/deselect all nodes\n- `spacebar + e` Select neighbors of selected node(s)\n- `spacebar + u` Deselect nodes\n- `spacebar + i` Select nodes with no edges\n- `spacebar + l` Select nodes with 1 edge\n\n#### Features\nOptions in the sidebar are divided in sections and their documentation here follows the same style.\n\n##### Circle\nIt arranges the nodes in a circular layout.\n\n![Circle demo](https://preview.ibb.co/erc0e8/Screenshot_2018_07_09_13_50_03.png)\n\n##### Center\nClick a node and then click on the center option to place it in the center of the graph.\n\n##### Decolor\nIt resets the color of all edges and nodes.\n\n##### Lasso\nLasso tool lets you select nodes by drawing a line around them.\n\n![Lasso demo](https://preview.ibb.co/cEVLe8/Screenshot_2018_07_09_13_53_24.png)\n\n##### Stabilize\nIt optimizes the size of nodes that are too small or too big.\n\n##### Clean\nIt removes nodes \u0026 edges which are too small.\n\n##### Delete\nIt deletes the selected node(s) from the graph.\n\n------\n##### Edge Style (Dropdown)\nThe dropdown list lets you select different types of edge styles.\\\nSupported edge styles are:\n- `line` Simple straight lines\n- `Curved` Curved lines\n- `Arrow` Arrows that point towards the target of the edge\n- `cArrows` Arrows but curved\n\n![Edge style demo](https://preview.ibb.co/it7iGo/FotoJet.jpg)\n\n##### Edges {int}\nIt shows the total number of edges. You can click it to toggle edges on/off.\n\n##### Nodes {int}\nIt shows the total number of nodes. You can click it to toggle nodes on/off.\n\n##### Edge labels\nToggle edge labels on/off.\n\n##### Node labels\nToggle node labels on/off.\n\n##### Color\nThe color option lets you choose a color from a color picker and apply it to the selected node(s).\n\n##### Find\nEnter full label/id of a node and it will find and highlight it. Default color is `yellow`.\n\n------\n\n##### Make/Color Clusters\nIt helps you find \u0026 color nodes that are more densely connected together than to the rest of the network.\n![Cluster demo](https://preview.ibb.co/fXPfwo/Screenshot_2018_07_09_14_36_21.png)\n\n##### Level (Dropdown)\nIt lets you select the \"aggressiveness\" to use while coloring the communities. Lower the level, higher the number of communities.\n\n##### Reset\nIt simply resets the color change made by the cluster option. However it doesn't reset the the position of the nodes i.e. they remain in cluster form.\n\n------\n##### Export to JSON\nAs the name suggests, it lets you export your current graph to a JSON file.\n\n#### How to load a graph?\n\nBefore reading any further, take a look at my [Orbit](https://github.com/s0md3v/Orbit) which uses Quark to analyse crypto wallet relationships.\n\n##### Scenario 1\nYou have 5 points `a, b, c, d, e` and you know the relationships between them like `a` is related to `c`.\nThen create a file with the contents\n```\na,e\nc,d\ne,a\nd,e\na,c\nc,e\n```\nSave it with any name and any extension and feed it to `quark.py` as follows\n`python3 quark.py \u003cfilename\u003e`\nThat's it! Open `quark.html` and you will see your graph.\n\n###### Result\n![case 1](https://preview.ibb.co/e4TACT/Screenshot_2018_07_09_19_50_31.png)\n\nWhy are the nodes so small? Because in this *automatic mode*, the size of a node is determined by how many other nodes are connected to. For any noticeable variation in node size, your graph should have enough nodes i.e. larger than 20.\n\n##### Scenario 2\nIf you are like me and you want full control of everything like the co-ordinates and size of nodes, edge thickness and their labels etc. then you will need to arrange this information in JSON syntax as follows:\n```\n{\n\"nodes\": [{\"label\": \"a\", \"x\": 1, \"y\": 1, \"id\": \"node1\", \"size\":10}, {\"label\": \"b\", \"x\": 2, \"y\": 1, \"id\": \"node2\", \"size\":4}],\n\"edges\": [{\"source\":\"node1\", \"target\":\"node2\", \"id\":\"edge1\", \"size\":2}]\n}\n```\nSave it with any name and again, pass it to the handler and open quark.html\n\n###### Result\n\n![case 2](https://image.ibb.co/cEUYXT/Screenshot_2018_07_09_19_46_35.png)\n\n### Performance\nQuark is tested and built on a spaghetti laptop with just 3GB RAM, built-in graphic card \u0026 i3 processor. On this configuration, a graph with 7000 nodes \u0026 3000 edges was rendering just fine.\\\nA computer with better specifications will be able to handle more data smoothly. Just to be on the safe side, Quark prompts the user for using `webgl` renderer if the number of edges is more than 8000.\\\n`webgl` uses your GPU to render graphs which boosts the performance but it doesn't support interaction events.\nQuark uses `canvas` renderer by default.\n\n**Tips:**\n- Edges consume more memory than nodes.\n- Memory caused by edge styles: `line \u003c curve \u003c arrow \u003c curved arrow`\n- Delete the nodes which seem insignificant to you.\n- Hide edges/nodes when you are not dealing with them.\n- Hide node labels (you will still be able to see them on hovering over nodes).\n- Hide edge labels.\n\n### Contribution\nQuark is built on top of [Linkurious.js](https://github.com/Linkurious/linkurious.js) and the files from Linkurious.js are stored in the `libs` directory. The bugs in them are out of scope so don't open an issue here. You are welcome if you want to fix issues yourself with a pull request./\nFeel free to open issues about a bug, question or feature request.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs0md3v%2FQuark","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs0md3v%2FQuark","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs0md3v%2FQuark/lists"}