{"id":13837099,"url":"https://github.com/nylen/d3-process-map","last_synced_at":"2025-04-06T01:08:44.955Z","repository":{"id":13066148,"uuid":"15746706","full_name":"nylen/d3-process-map","owner":"nylen","description":"Web application to illustrate the relationships between objects in a process using d3.js.","archived":false,"fork":false,"pushed_at":"2017-06-29T09:15:37.000Z","size":1467,"stargazers_count":415,"open_issues_count":9,"forks_count":191,"subscribers_count":41,"default_branch":"master","last_synced_at":"2025-03-30T00:07:38.791Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","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/nylen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-08T20:09:49.000Z","updated_at":"2025-01-31T10:37:03.000Z","dependencies_parsed_at":"2022-09-23T10:53:09.427Z","dependency_job_id":null,"html_url":"https://github.com/nylen/d3-process-map","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/nylen%2Fd3-process-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nylen%2Fd3-process-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nylen%2Fd3-process-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nylen%2Fd3-process-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nylen","download_url":"https://codeload.github.com/nylen/d3-process-map/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247419860,"owners_count":20936012,"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":[],"created_at":"2024-08-04T15:01:01.045Z","updated_at":"2025-04-06T01:08:44.939Z","avatar_url":"https://github.com/nylen.png","language":"PHP","funding_links":[],"categories":["PHP"],"sub_categories":[],"readme":"# d3 process map\n\nThis is a PHP web application that displays a directed acyclic graph in a\nmodern web browser using [d3.js](http://d3js.org/).  It is designed for\nillustrating the relationships between objects in a process.\n\n### Examples\n\n#### Data manipulation and reporting process:\n\n\n[![Default dataset](https://nylen.io/d3-process-map/img/thumb-default.png)](https://nylen.io/d3-process-map/)\n\u003cbr\u003ehttps://nylen.io/d3-process-map/\n\n#### Co-occurrences of Les Miserables characters:\n\n[![Les Mis dataset](https://nylen.io/d3-process-map/img/thumb-les-mis.png)](https://nylen.io/d3-process-map/?dataset=les-mis)\n\u003cbr\u003ehttps://nylen.io/d3-process-map/?dataset=les-mis\n\n### Features\n\n* Hover over a node to see that object's relationships.  (Unrelated objects and\n  links will be made partially transparent.)\n* Click on a node to show the documentation for that object.\n* Click the \"View list\" button to view the documentation for all objects (good\n  for printing).\n\n### Data format\n\nThe application can display one or more datasets located in the `data/` folder.\nEach dataset gets its own folder.  There are two datasets bundled with the\napplication (one for each of the examples above).  Switch between datasets by\nappending `?dataset=folder-name` to the URL.  If no dataset name is given, the\ndataset in the `default` folder will be displayed.\n\nEach dataset should contain the following files:\n\n* `objects.json`\n* `config.json`\n* `*.mkdn` (one per object)\n\n#### `objects.json`\n\nAn array of data objects to be displayed as graph nodes, each with the\nfollowing properties:\n\n* `name`: The name of this object\n* `type`: The type of this object (e.g. `view`, `table`, etc.)\n* `depends`: An array of object names that this object depends on.\n* `group` (optional): This could be thought of as a \"subtype\".\n\n#### `config.json`\n\nA JSON object which contains the following fields:\n\n* `title`: The page title.\n* `graph`: The parameters for the graph and the d3.js force layout.\n  * `linkDistance`: The\n    [link distance](https://github.com/mbostock/d3/wiki/Force-Layout#wiki-linkDistance)\n    for the d3.js force layout.\n  * `charge`: The\n    [charge](https://github.com/mbostock/d3/wiki/Force-Layout#wiki-charge)\n    for the d3.js force layout.\n  * `height`: The height of the graph, in pixels.  (The width of the graph is\n    determined by the width of the browser window when the page is loaded.)\n  * `numColors`: The number of colors to display (between **3** and **12**).\n  * `labelPadding`: The padding inside the node rectangles, in pixels.\n  * `labelMargin`: The margin outside the node rectangles, in pixels.\n* `types`: Descriptions of the object types displayed in this graph, each with\n  a `long` and a `short` field that describe the object type for documentation\n  and for the graph legend, respectively.\n* `constraints`: An array of objects that describe how to position the nodes.\n  Each constraint should have a `type` field whose value should be either\n  `'position'` or `'linkStrength'`, and a `has` field that specifies the\n  conditions an object must meet for the constraints to be applied.\n  * **Position constraints**:  These constraints should have the properties\n    `weight`, `x` (optional) and `y` (optional).  On each iteration of the\n    force layout, node positions will be \"nudged\" towards the `x` and/or `y`\n    values given, with a force proportional to the `weight` given.\n  * **Link strength constraints**:  These constraints should have the property\n    `strength`, which is a multiplier on the link strength of the links to and\n    from the objects that the constraint applies to.  This can be used to relax\n    the position of certain nodes.\n\n#### `*.mkdn`\n\nEach object can have a Markdown file associated with it for additional\ndocumentation.  The syntax is\n[standard Markdown](https://daringfireball.net/projects/markdown/syntax) with\none addition:  object names can be enclosed in `{{brackets}}` to insert a link\nto that object.\n\nIf an object's name contains a slash (`/`), replace it with an underscore (`_`)\nin the documentation filename.\n\n### Other details\n\nThe code uses a\n[d3.js force layout](https://github.com/mbostock/d3/wiki/Force-Layout) to\ncompute object positions, with\n[collision detection](http://bl.ocks.org/mbostock/3231298) to prevent nodes\nfrom overlapping each other.\n\nNodes are colored by the\n[ColorBrewer Set3 scheme](http://colorbrewer2.org/?type=qualitative\u0026scheme=Set3\u0026n=12),\nwith colors assigned by the combination of the object's `type` and `group`.\n\nTo ensure that the arrows on the ends of the links remain visible, the links\nonly extend to the outer edge of the target object's node.\n\n### Browser support\n\nWorks in recent versions of Chrome and Firefox.  Other browsers have not been\ntested, but Internet Explorer doesn't stand a chance until at least version 9.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnylen%2Fd3-process-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnylen%2Fd3-process-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnylen%2Fd3-process-map/lists"}