{"id":13991984,"url":"https://github.com/mstefaniuk/graph-viz-d3-js","last_synced_at":"2025-10-22T15:18:53.721Z","repository":{"id":58221639,"uuid":"15536828","full_name":"mstefaniuk/graph-viz-d3-js","owner":"mstefaniuk","description":"Graphviz web D3.js renderer","archived":false,"fork":false,"pushed_at":"2017-09-07T11:04:32.000Z","size":11606,"stargazers_count":312,"open_issues_count":16,"forks_count":36,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-24T19:05:06.991Z","etag":null,"topics":["animation","dot","graphviz","javascript","parse"],"latest_commit_sha":null,"homepage":"","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/mstefaniuk.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":"2013-12-30T21:20:07.000Z","updated_at":"2025-03-22T18:38:39.000Z","dependencies_parsed_at":"2022-08-31T02:51:28.668Z","dependency_job_id":null,"html_url":"https://github.com/mstefaniuk/graph-viz-d3-js","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/mstefaniuk/graph-viz-d3-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mstefaniuk%2Fgraph-viz-d3-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mstefaniuk%2Fgraph-viz-d3-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mstefaniuk%2Fgraph-viz-d3-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mstefaniuk%2Fgraph-viz-d3-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mstefaniuk","download_url":"https://codeload.github.com/mstefaniuk/graph-viz-d3-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mstefaniuk%2Fgraph-viz-d3-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266520571,"owners_count":23942288,"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-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["animation","dot","graphviz","javascript","parse"],"created_at":"2024-08-09T14:01:43.372Z","updated_at":"2025-10-22T15:18:48.672Z","avatar_url":"https://github.com/mstefaniuk.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Content"],"sub_categories":["Language Bindings"],"readme":"Graphviz *dot* in your browser\n==============================\n\nBower component `graphviz-d3-renderer` renders [Graphviz](http://graphviz.org) source in the browser with [d3.js](https://github.com/mbostock/d3).\nCheck it out on [Graphviz fiddling website](http://graphviz.it/).\n\n[![Build Status](https://travis-ci.org/mstefaniuk/graph-viz-d3-js.svg?branch=master)](https://travis-ci.org/mstefaniuk/graph-viz-d3-js)\n[![Coverage Status](https://coveralls.io/repos/mstefaniuk/graph-viz-d3-js/badge.svg?branch=master)](https://coveralls.io/r/mstefaniuk/graph-viz-d3-js?branch=master)\n![Forks](https://img.shields.io/github/forks/mstefaniuk/graph-viz-d3-js.svg)\n![Stars](https://img.shields.io/github/stars/mstefaniuk/graph-viz-d3-js.svg)\n[![Join the chat at https://gitter.im/mstefaniuk/graph-viz-d3-js](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/mstefaniuk/graph-viz-d3-js)\n\nContents\n--------\n* `dot` parser with lax mode to verify Graphviz input\n* `dot` mode for ACE editor\n* stage data renderer with `d3.js`\n\nDesign\n------\nDOT parser is written in [PEG.js](https://github.com/dmajda/pegjs) has lax mode to parse source to the end with all errors.\n[Graphviz](http://graphviz.org) is embedded in browser using [viz.js](https://github.com/mdaines/viz.js).\nInstead of using SVG directly it uses `xdot` format and parses it. Data structure of the output is drawn using\n[d3.js](https://github.com/mbostock/d3) with animations during rendering.\n\nUsage\n-----\nTo include it in your project simply use `Bower`:\n```\nbower install graphviz-d3-renderer --save\n```\n\nNote that it needs `require.js` to work. Before loading proper paths should be defined for renderer and its dependecies (`d3.js` and `worker` for `require.js` plugin):\n```javascript\nrequirejs.config({\n\t//By default load any module IDs from js/lib\n\tbaseUrl: 'js',\n\t//except, if the module ID starts with \"app\",\n\t//load it from the js/app directory. paths\n\t//config is relative to the baseUrl, and\n\t//never includes a \".js\" extension since\n\t//the paths config could be for a directory.\n\tpaths: {\n\t\td3: '/bower_components/d3/d3',\n\t\t\"dot-checker\": '/bower_components/graphviz-d3-renderer/dist/dot-checker',\n\t\t\"layout-worker\": '/bower_components/graphviz-d3-renderer/dist/layout-worker',\n\t\tworker: '/bower_components/requirejs-web-workers/src/worker',\n\t\trenderer: '/bower_components/graphviz-d3-renderer/dist/renderer'\n\t}\n});\n```\nThen you can inject it into you app:\n```javascript\nrequire([\"renderer\"],\n  function (renderer) {\n\n  dotSource = 'digraph xyz ...';\n  // initialize svg stage\n  renderer.init(\"#graph\");\n\n  // update stage with new dot source\n  renderer.render(dotSource);\n});\n```\nNow you can even zoom / drag your graph\n\n```javascript\nrequire([\"renderer\"],\n\tfunction (renderer) {\n\t\tdotSource = 'digraph xyz ...';\n\t\t// initialize svg stage. Have to get a return value from renderer.init \n\t\t//   to properly reset the image.\n\t    zoomFunc = renderer.init({element:\"#graph\", extend:[0.1, 10]});\n\n\t    // update stage with new dot source\n\t    renderer.render(dotSource);\n\t    \n\t    // for saving the image, \n\t    $('#copy-button').on('click', function(){\n\t\t    $('#copy-div').html(renderer.getImage({reset:true, zoomFunc:zoomFunc}));\n\t    });\t  \n\t    \n\t    // if do not need to reset the image before saving the image\n\t    $('#copy-button').on('click', function(){\n\t\t    $('#copy-div').html(renderer.getImage());\n\t    });\t\n});  \n```\n\nRoadmap\n-------\n* Test suite using Graphviz gallery examples (50% done)\n* Improve animations with path tweening and concatenation of arrow heads with arrow arcs\n* Custom `viz.js` compile with `xdot` output only to optimize size\n\nBuilding and contributing\n-------\nTo make controlled changes you need `node` and `grunt`. When you add a new feature you must cover it with unit tests.\n```bash\n\u003e grunt build test\n```\n\nWhen everything is ready you can build also dist version (takes some time).\n```bash\n\u003e grunt all\n```\n\nLicense\n-------\nCurrently project is available on LGPL so you can use it unmodified in free or commercial projects. If you add improvements\nto it you must share them.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmstefaniuk%2Fgraph-viz-d3-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmstefaniuk%2Fgraph-viz-d3-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmstefaniuk%2Fgraph-viz-d3-js/lists"}