{"id":13941244,"url":"https://github.com/julie-ng/newtonjs-graph","last_synced_at":"2025-07-20T04:30:59.171Z","repository":{"id":34996401,"uuid":"160625600","full_name":"julie-ng/newtonjs-graph","owner":"julie-ng","description":"Cloud Architecture Graphs for Humans","archived":true,"fork":false,"pushed_at":"2022-12-10T16:41:50.000Z","size":4649,"stargazers_count":96,"open_issues_count":34,"forks_count":22,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-02T12:49:15.190Z","etag":null,"topics":["architecture","cloud-native","d3","graph","microservices","network"],"latest_commit_sha":null,"homepage":"https://julie-ng.github.io/newtonjs-graph/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/julie-ng.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-06T05:50:52.000Z","updated_at":"2024-10-29T15:39:26.000Z","dependencies_parsed_at":"2023-01-15T11:42:43.919Z","dependency_job_id":null,"html_url":"https://github.com/julie-ng/newtonjs-graph","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/julie-ng/newtonjs-graph","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julie-ng%2Fnewtonjs-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julie-ng%2Fnewtonjs-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julie-ng%2Fnewtonjs-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julie-ng%2Fnewtonjs-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/julie-ng","download_url":"https://codeload.github.com/julie-ng/newtonjs-graph/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julie-ng%2Fnewtonjs-graph/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266067256,"owners_count":23871324,"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":["architecture","cloud-native","d3","graph","microservices","network"],"created_at":"2024-08-08T02:01:14.742Z","updated_at":"2025-07-20T04:30:58.563Z","avatar_url":"https://github.com/julie-ng.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Newton Graph Library \n\n[![Build Status](https://travis-ci.org/julie-ng/newtonjs-graph.svg?branch=main)](https://travis-ci.org/julie-ng/newtonjs-graph)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/7a3975197c576202fe08/test_coverage)](https://codeclimate.com/github/julie-ng/newtonjs-graph/test_coverage)\n[![Maintainability](https://api.codeclimate.com/v1/badges/7a3975197c576202fe08/maintainability)](https://codeclimate.com/github/julie-ng/newtonjs-graph/maintainability)\n[![Known Vulnerabilities](https://snyk.io/test/github/julie-ng/newtonjs-graph/badge.svg?targetFile=package.json)](https://snyk.io/test/github/julie-ng/newtonjs-graph?targetFile=package.json)\n[![Build Status](https://dev.azure.com/julie-ng/newtonjs/_apis/build/status/julie-ng.newtonjs-graph?branchName=main)](https://dev.azure.com/julie-ng/newtonjs/_build/latest?definitionId=2\u0026branchName=main)\n\nThis repository contains learning and prototype code for a high-level dashboard for architects and stakeholders. The goal is to visualize architectures in large organizations as organisms that live and breathe with deployments, problems, etc. These real-time visualizations could instead reveal insights about how [Conway's Law](https://en.wikipedia.org/wiki/Conway%27s_law) applies to the organization.\n\nThis [`newtonjs-graph`](https://github.com/julie-ng/newtonjs-graph) library is **just the frontend**. For details, see the [explanation](#architecture---where-is-the-backend) at the bottom.\n\n#### Readme Contents\n\n- [Live Demo \u0026rarr;](https://newton-demo.azurewebsites.net/?data-server=https://newton-demo-data-editor.azurewebsites.net/)  \t\n\t- [Graph Frontend \u0026rarr;](https://newton-demo.azurewebsites.net/?data-server=https://newton-demo-data-editor.azurewebsites.net/)  \t\n\t- [Data Editor (interactive BFF mock) \u0026rarr;](https://newton-demo-data-editor.azurewebsites.net/)\n- [Install](#install)\n\t- [For Browsers](#for-browsers)\n\t- [For Webpack](#for-webpack)\n- [API Documentation \u0026rarr;](https://julie-ng.github.io/newtonjs-graph/)\n\t- [Network](#network---data-wrapper)\n\t- [Graph](#graph---visualization)\n\t- [Customize Styles](#customize-styles)\n- [Architecture - where is the backend?](#architecture---where-is-the-backend) \n\n### Example Graphs\n\nThe following show two different renders from the same demo data set:\n\n| D3.js Engine | Webcola Engine |\n|:--|:--|\n| \u003cimg src=\"./images/screenshots/demo-d3-layout.png\" alt=\"Example Graph with d3.js Layout Engine\" width=\"350\" style=\"max-width:100%\"\u003e | \u003cimg src=\"./images/screenshots/demo-cola-layout.png\" alt=\"Example Graph with webcola Layout Engine\" width=\"400\" style=\"max-width:100%\"\u003e | \n| [d3-force](https://github.com/d3/d3-force) creates a \"harmonious\" distribution of nodes | [cola.js](https://ialab.it.monash.edu/webcola/) can create directional graphs |\n\n### Highlight Relationships with Colors\n\nIn both examples above, the \"Documents Service\" is the **_highlighted node_**. The colors indicate a relationship to this node:\n\n| Color | Relationship | Description |\n|:--|:--|:--|\n| Green | | In this example, the node had a status of `up`, so it is still green. |\n| Red | `is-source` | These nodes directly depend on \"Documents Service\". |\n| Orange | `is-deep-source` | These nodes do not _directly_ require \"Documents Service\", but may still be impacted. |\n| Yellow | `is-target` | These nodes do not require \"Documents Service\", but may still be effected, e.g. decrease in incoming traffic. |\n| Faded Out | `has-no-relationship` | No releationship to highlighted node. |\n\nFor more information **[view API Documentation \u0026rarr;](https://julie-ng.github.io/newtonjs-graph/)**\n\n## Install\n\n### For Browsers\n\nGrab the [`newton.bundle.min.js`](./dist/newton.bundle.min.js) and [`newton.css`](./dist/newton.css) files from the [`dist/`](./dist) folder. Then include them in your HTML file.\n\n```html\n\u003c!-- import library as `Newton` global --\u003e\n\u003cscript src=\"./newton.bundle.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n\tconst network = new Newton.Network(…)\n\tconst graph = new Newton.Graph(…)\n\u003c/script\u003e\n```\n\nNote: the documentation refers to module syntax. If you are using the pre-built distribution, you will need to remember to use the `Newton.Graph` instead of `Graph`, etc.\n\nThen continue directions below to define your [`Network`](#network---data-wrapper) and [`Graph`](#graph---visualization).\n\n### For Webpack\n\nFirst, install the library\n\n```\nnpm install --save @newtonjs/graph\n```\n\nThen in your javascript, include them as you would any other library:\n\n```javascript\nconst Graph = require('@newtonjs/graph').Graph\nconst Network = require('@newtonjs/graph').Network\n```\n\nAnd for CSS, you can include the pre-built styles in an SCSS file like so:\n\n```scss\n@import \"~@newtonjs/graph/dist/newton.css\";\n```\n\n## Network - Data Wrapper\n\nA `Network` is essentially a data wrapper. Its biggest advantage is that it dynamically calculating links between nodes, based on a unique identifier `uid`, instead of array indexes.\n\nHere is an example data set from the [demo](./demo/data/3a.data.js):\n\n```javascript\nconst data = {\n\tnodes: [\n\t\t{ id: 'w', label: 'Web Frontend' },\n\t\t{ id: 'm', label: 'Mobile Device' },\n\t\t{ id: 'b', label: 'Monolith Backend' },\n\t\t{ id: 'd', label: 'Database' },\n\t],\n\tlinks: [\n\t\t{ source: 'w', target: 'b' },\n\t\t{ source: 'm', target: 'b' },\n\t\t{ source: 'b', target: 'd' }\n\t]\n}\n```\n\n## Graph - Visualization\n\nWhile `Network` handles the data, `Graph` handles the visualizations, including layout, animations, etc.\n\n\n```javascript\nconst network = new Network(data.nodes, data.links)\nconst graph = new Graph({\n\twidth: window.innerWidth,\n\theight: window.innerHeight,\n\tflow: 'horizontal',\t\n\tdraggable: true,\n\tnetwork: network // required\n})\n\ngraph.init()\ngraph.on('node:click', (n) =\u003e {\n\tgraph.highlightDependencies(n, { arrows: true })\n})\n```\n\n## Customize Styles\n\nStarting in version 0.2.0, you can use CSS variables to customize your graph. You should not need to edit the pre-built `newton.css` file.\n\nFor example, in your CSS, you can just include the following variables and change them as needed:\n\n```css\n:root {\n\t--graph-bg-color: --var(--navy-darker);\n\t--label-font-family: 'Roboto', sans-serif;\n\t--label-font-size: 14px;\n\t--label-text-shadow: 1px 1px 5px rgba(0,0,0,0.2);\n\t--link-stroke-width: 1px;\n\t--node-stroke-width: 3px;\n}\n```\n\nFor a list of all available variables, please see [`newton/graph/css/variables.scss`](./newton/graph/css/variables.scss)\n\n## Development\n\n### Clone this repository\n\n```\ngit clone https://github.com/julie-ng/newtonjs-graph\n```\n\n### Install dependencies\n\nFirst install the dependencies required:\n\n```bash\nnpm install\n```\n\n### Preview\n\nTo view the prototype in the browser, run\n\n```bash\nnpm run demo:dev\n```\n\nwhich starts the webpack dev server and automatically opens [http://localhost:9000](http://localhost:9000) in a browser window.\n\n## Architecture - where is the backend?\n\nSo how will this work? This project is very much a work in progress, but the current concept is illustrated below. This repository `newton-graph` is \"Newton UI\" in the diagram.\n\n![Newton Vision](./images/newton-vision.svg)\n\n| Component | Part of Newton? | Description |\n|:--|:--|:--|\n| **Frontend** | Yes | This is this component [`newtonjs-graph`](https://github.com/julie-ng/newtonjs-graph), which can be a simple single page application frontend. It expects JSON data with `nodes` and `links` so it knows what to draw.  |\n| **BFF** | Maybe? | This component feeds the data to the frontend. Theoretically you can use another service or software for this, as long as you provide data in the JSON format [`newtonjs-graph`](https://github.com/julie-ng/newtonjs-graph) needs to draw the visualization. |\n| **Services** | No | These are services _you_ consider to be part of your architecture. They must expose endpoints that can be polled. |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjulie-ng%2Fnewtonjs-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjulie-ng%2Fnewtonjs-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjulie-ng%2Fnewtonjs-graph/lists"}