{"id":22712227,"url":"https://github.com/buildit/twig","last_synced_at":"2025-10-26T01:38:34.332Z","repository":{"id":15730132,"uuid":"76578552","full_name":"buildit/twig","owner":"buildit","description":"Network diagramming since 2016","archived":false,"fork":false,"pushed_at":"2022-01-15T01:07:39.000Z","size":7060,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-07-07T14:59:59.318Z","etag":null,"topics":["d3js","graph","single-page-applications"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/buildit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-15T16:53:16.000Z","updated_at":"2019-06-19T20:27:39.000Z","dependencies_parsed_at":"2022-07-20T22:54:48.717Z","dependency_job_id":null,"html_url":"https://github.com/buildit/twig","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/buildit/twig","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildit%2Ftwig","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildit%2Ftwig/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildit%2Ftwig/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildit%2Ftwig/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buildit","download_url":"https://codeload.github.com/buildit/twig/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildit%2Ftwig/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281047794,"owners_count":26435124,"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","status":"online","status_checked_at":"2025-10-25T02:00:06.499Z","response_time":81,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["d3js","graph","single-page-applications"],"created_at":"2024-12-10T13:09:42.760Z","updated_at":"2025-10-26T01:38:34.302Z","avatar_url":"https://github.com/buildit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Twig\n\nTwig is a browser-based single-page application using [D3](https://d3js.org/) to render graph visualisations.\n\n## Table of Contents\n\n* [Quick Start for Twig](#quick-start)\n* [Quick Start for Twig API](#quick-start-for-twig-api)\n* [Why Twig?](#why-twig)\n* [What Can Twig Do?](#what-can-twig-do)\n* [Demo](#demo)\n* [Where is Twig Deployed?](#where-is-it-deployed)\n* [Getting Started](#getting-started)\n  * [Development](#development)\n  * [Build](#build)\n  * [Unit Tests](#unit-tests)\n  * [End-to-End Tests](#end-to-end-tests)\n  * [API Documentation](#twig-api-documentation)\n* [User Notes](#user-notes)\n  * [How To Contribute](#how-to-contribute)\n  * [Tools](#tools)\n  * [Team](#team)\n  * [License](#license)\n  * [Further Help](#further-help)\n* [Living Style Guide](https://buildit.github.io/twig/)\n\n## Quick Start\n\nClone the [Twig API](https://github.com/buildit/twig-api) locally. From the twig-api root run a Docker command to\ncreate the back-end.\n\n```Shell\ngit clone git@github.com:buildit/twig-api.git\ncd twig-api\ndocker-compose up\n\n# Make sure to run `docker-compose down` to turn off the API when you're done\n```\n\nClone this repo. Set the proper Node version ([Node Version Manager](https://github.com/creationix/nvm) is recommended). \nNavigate to the root and install the dependencies. Then run the app.\n\n```Shell\nnvm use\nnpm install\nnpm run serve\n```\n\nThis builds the app and runs it on a dev server. Navigate to [localhost:4200](http://localhost:4200/). \nThe app will automatically reload if you change any of the source files.\n\n## Why Twig?\n\nThe world is becoming a more complex and interconnected space. The relationships between things are as (if not more) important than the things themselves.\n\nWe believe the ability to identify how and where people, ideas, and technology converge enables us to ask **why!?**\n\nOur thinking in terms of how we should be able to visualise is inspired in part by [Powers of Ten](https://youtu.be/0fKBhvDjuy0).\n\n**We want a tool that will allow us to:**\n\n* model complex environments without artificial (hierarchical or domain) constraints\n* create relationships between things that echo the real world\n* create a visual way to explore and traverse these environments\n* be able to see changes to the modelled environments over time\n\nThere are a lot of domain specific and commercial products out there. We could not find one that met our specific needs so we started building Twig.\n\n## What Can Twig Do?\n\nTwig allows users to:\n\n* create a graph model (Twiglet)\n* define node (vertex) types (including attributes)\n* define link (edge) types (including attributes)\n* filter a view of the Twiglet based on a node entity type and attributes\n* create views that show the Twiglet from a particular aspect devoid of 'noise'\n* add, change, and remove nodes and links via the UI\n* assign colour and images to node types\n* size images (manual and automatic) based on a node's type or attribute value\n* create models with nodes and attributes for future Twiglets\n* edit the model for a particular Twiglet\n* add gravity points to float nodes to particular areas of the force graph\n* create events to save a snapshot of a Twiglet at a particular moment\n* create a sequence to play a collection of events to view how a Twiglet has changed\n\nAll Twig data is persisted in a [CouchDB](http://couchdb.apache.org/) instance.\n\n## Demo\n\nClick the link to watch an awesome demo of the basics of Twig:\n\n[Video demo (Part 1)](https://youtu.be/q4LWoQUeRjc)\n\n## Where is it deployed?\n\nIn the Buildit Riglet:\n\n**Staging Environment**: [https://builditstaging-twig.buildit.tools/](https://builditstaging-twig.buildit.tools/) - must be connected to Buildit Tools VPN/VPC to Sign In \n\n**Production Environment (OLD - v. 3.4.0 only)**: [https://builditproduction-twig.buildit.tools/](https://builditproduction-twig.buildit.tools/)\n\n**Production Environment**: [https://twig.buildit.tools/](https://twig.buildit.tools/)\n\n## Getting Started\n\n### Development\n\n#### Logging In\n\nOnce you have set up Twig and Twig API, Twig is read only while logged out. On localhost, there are three ways to log in to Twig to start creating\ntwiglets, editing twiglets, etc.\n\n1. If you are not logged in to the Buildit VPN, you can use the dummy user with email: local@user.com and password: password. Note that this login will only work locally, not on staging or production.\n1. With your VPN credentials\n1. Using your Mothership corporate email address\n\n#### Linting\n\nTwig uses linting rules as defined in tslint.json. By default all .ts files are linted.\n\n#### Testing\n\nTwig uses [Karma](https://karma-runner.github.io) to run unit tests. Want to make a change? Write a test. Write code until it passes. Make sure you didn't break any other tests.\n\nTwig uses [Protractor](http://www.protractortest.org/) for end-to-end tests. End to end tests require that an instance of Twig API is running. Want to make a change? See the paragraph above for directions.\n\nPrior to checking in code, be sure to run both unit and end-to-end tests following the instructions outlined below.\n\n#### CI/CD\n\nTwig CI/CD uses the Bare Metal rig.\n\n### Build\n\nRun `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.\n\n### Unit Tests\n\nRun `npm run test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n### End-to-End Tests\n\nBefore running the tests make sure you are serving the app via `npm run serve` as well as Twig API.\nRun `npm run test:e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\n\n### Twig API Documentation\n\nThe Twig API is documented using Swagger. If running Twig API locally, navigate to [http://localhost:3000/documentation](http://localhost:3000/documentation) to view the documentation.\n\n## User Notes\n\n### How to Contribute\n\n#### Opening an issue\n\nIf you find a bug, please open an issue [here](https://github.com/buildit/twig/issues). Please include the expected behavior, actual behavior, and detailed steps to reproduce the bug.\n\n### Tools\n\n* [Angular 4](https://angular.io/)\n* [D3](https://d3js.org/)\n* [Karma](https://karma-runner.github.io/1.0/index.html)\n* [Protractor](http://www.protractortest.org/#/)\n\nThis project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.22-1 and updated to use the latest 1.0.0.\n\n### Team\n\nHap Pearman ([@spotted-dog](https://github.com/spotted-dog))\n\nAndy Ochsner ([@aochsner](https://github.com/aochsner))\n\nLizzie Szoke ([@lizziesz](https://github.com/lizziesz))\n\nBen Hernandez ([@BenAychh](https://github.com/BenAychh))\n\nMike Thomas ([@mathomas](https://github.com/mathomas))\n\nEmily Burns ([@emjane])\n\nShahzain Badruddin\n\nDavid Moss\n\nAndrew Urmston\n\n### License\n\nSee the [LICENSE](LICENSE.md) file for license rights and limitations (Apache 2.0).\n\n### Further help\n\nTo get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuildit%2Ftwig","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuildit%2Ftwig","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuildit%2Ftwig/lists"}