{"id":13630243,"url":"https://github.com/dianaow/d3-network-time","last_synced_at":"2025-10-10T23:17:59.818Z","repository":{"id":42829049,"uuid":"266098776","full_name":"dianaow/d3-network-time","owner":"dianaow","description":"d3 plugin to create a temporal network visualization","archived":false,"fork":false,"pushed_at":"2023-01-06T06:40:17.000Z","size":8233,"stargazers_count":18,"open_issues_count":9,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-27T16:11:13.365Z","etag":null,"topics":["d3","d3-module","d3js","d3v4","data-visualization","graph","graph-drawing","network-visualization","temporal-graphs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dianaow.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":"2020-05-22T11:55:28.000Z","updated_at":"2024-07-25T15:31:01.000Z","dependencies_parsed_at":"2023-02-05T13:31:37.856Z","dependency_job_id":null,"html_url":"https://github.com/dianaow/d3-network-time","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/dianaow%2Fd3-network-time","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dianaow%2Fd3-network-time/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dianaow%2Fd3-network-time/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dianaow%2Fd3-network-time/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dianaow","download_url":"https://codeload.github.com/dianaow/d3-network-time/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248809051,"owners_count":21164896,"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":["d3","d3-module","d3js","d3v4","data-visualization","graph","graph-drawing","network-visualization","temporal-graphs"],"created_at":"2024-08-01T22:01:35.385Z","updated_at":"2025-10-10T23:17:54.759Z","avatar_url":"https://github.com/dianaow.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# d3-network-time\n\nThis is a d3 plugin to create a temporal network visualization.\n\n[d3-force](https://github.com/d3/d3-force) is used to construct the graph layout. This plugin can be used in two ways:\n\n- dynamic: animates the evolution of the network over time, with the option to display each iteration between dates, or just a single step transition between two dates\n- static: only displays the network at a specific point in time\n\n![alt text](https://github.com/dianaow/d3-network-time/raw/master/d3-network-time-gif.gif \"Example GIF\")\n\n## Examples\n\n- an [example](https://github.com/dianaow/d3-network-time/blob/master/example/index.html) for a highly connected graph\n- an [example](https://github.com/dianaow/d3-network-time/blob/master/example/index1.html) for a disjointed graph, showing how to use the API with element styling\n- [Observable notebook](https://observablehq.com/@dianaow/temporal-network-visualization/3)\n\n## Installing\n\nIf you use NPM, `npm install d3-network-time` and import it with\n\n```js\nimport { network } from \"d3-network-time\"\n```\n\nOtherwise, download the [latest build](https://github.com/dianaow/d3-network-time/tree/master/build). AMD, CommonJS, and vanilla environments are supported. In vanilla, you must include a script tag with the d3 library before including `d3-network-time.js`, and a d3 global is exported:\n\n```html\n\u003cscript src=\"https://d3js.org/d3.v4.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"d3-network-map.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var network = d3.network()\n\n  var simulation = d3.forceSimulation()\n\n  var radiusScale = d3.scaleSqrt().domain([1, 50]).range([3, 25])\n  var radiusAccessor = (d) =\u003e radiusScale(d.value)\n\n  network(simulation)\n    .selector(\".Network\")\n    .width(1200)\n    .height(800)\n    .start(1217567877000)\n    .end(1218036494000)\n    .animation({ mode: \"auto\", step: \"day\", show_time: true })\n    .style({ radiusAccessor })(data)\n\u003c/script\u003e\n```\n\n## API Reference\n\n\u003ca href=\"#network\" name=\"network\"\u003e#\u003c/a\u003e d3.\u003cb\u003enetwork\u003c/b\u003e()\n\nConstructs a new network generator with the default configuration values.\n\n\u003ca href=\"#_network\" name=\"_network\"\u003e#\u003c/a\u003e \u003ci\u003enetwork\u003c/i\u003e(\u003ci\u003edata\u003c/i\u003e)\n\nCreates a network layout with the specified _data_. The animation starts automatically.\n\nThe dataset must contain an object of nodes and links with the following attributes:\n\nTimestamps of nodes and links must be in \u003cb\u003eUNIX Epoch time\u003c/b\u003e.\n\n```js\nvar data = {\n  nodes: [\n    {\n      id: \"1\",\n      date: 1217567877000,\n    },\n    {\n      id: \"2\",\n      date: 1217567877000,\n    },\n    {\n      id: \"3\",\n      date: 1218036494000,\n    },\n  ],\n  links: [\n    {\n      start_id: \"1\",\n      end_id: \"2\",\n      date: 1217567877000,\n    },\n    {\n      start_id: \"1\",\n      end_id: \"3\",\n      date: 1218036494000,\n    },\n  ],\n}\n```\n\n\u003ca href=\"#network\" name=\"network\"\u003e#\u003c/a\u003e \u003ci\u003enetwork\u003c/i\u003e([\u003ci\u003esimulation\u003c/i\u003e])\n\nThis is the new simulation to initialize. Users can specify forces to layout the graph according to their requirements. Nodes and edges should not be specified here.\n\n\u003ca href=\"#network_selector\" name=\"network_selector\"\u003e#\u003c/a\u003e \u003ci\u003enetwork\u003c/i\u003e.\u003cb\u003eselector\u003c/b\u003e([\u003ci\u003eselector\u003c/i\u003e])\n\nThis is the CSS selector for the div element containing the svg element in which the network is rendered in.\n\n\u003ca href=\"#network_height\" name=\"network_height\"\u003e#\u003c/a\u003e \u003ci\u003enetwork\u003c/i\u003e.\u003cb\u003eheight\u003c/b\u003e([\u003ci\u003eheight\u003c/i\u003e])\n\nThis _height_ gives the height of the svg element in which the network is rendered in. If height is not specified, it defaults to 800 pixels.\n\n\u003ca href=\"#network_width\" name=\"network_width\"\u003e#\u003c/a\u003e \u003ci\u003enetwork\u003c/i\u003e.\u003cb\u003ewidth\u003c/b\u003e([\u003ci\u003ewidth\u003c/i\u003e])\n\nThis _width_ gives the width of the svg element in which the network is rendered in. If width is not specified, it defaults to 800 pixels.\n\n\u003ca href=\"#network_start\" name=\"network_start\"\u003e#\u003c/a\u003e \u003ci\u003enetwork\u003c/i\u003e.\u003cb\u003estart\u003c/b\u003e([\u003ci\u003estart\u003c/i\u003e])\n\n_start_ represents the date (a UNIX Epoch timestamp) which the animation begins at. If _start_ is not specified, returns the first date found in data.links.\n\n\u003ca href=\"#network_end\" name=\"network_end\"\u003e#\u003c/a\u003e \u003ci\u003enetwork\u003c/i\u003e.\u003cb\u003eend\u003c/b\u003e([\u003ci\u003eend\u003c/i\u003e])\n\n_end_ represents the date (a UNIX Epoch timestamp) which the animation stops. If _end_ is not specified, returns the last date found in data.links.\n\n\u003ca href=\"#network_animation\" name=\"network_\"\u003e#\u003c/a\u003e \u003ci\u003enetwork\u003c/i\u003e.\u003cb\u003eanimation\u003c/b\u003e([\u003ci\u003eanimation\u003c/i\u003e])\n\nThe _animation_ represents the animation parameters. If _animation_ is not specified, it defaults to `{mode: null, step: 'day', show_time: false}`. This is a static render of graph only at the specified _start_ value, ignoring the _end_ value, if provided.\n\nIf _animation.mode_ is \u003cb\u003e'auto'\u003c/b\u003e, the animation runs upon function invocation, displaying each iteration between a range of dates between _start_ and _end_ value. If _style.mode_ is \u003cb\u003e'step'\u003c/b\u003e, then only a transition between _start_ and _end_ value is displayed.\n\n_animation.step_: represents the time iteration gap and has to be any of the following values: `['year', 'month', 'day', 'week', 'hour', 'minute', 'second', 'millisecond']`\n\n_animation.show_time_: allows user to show or hide the timestamp header\n\n\u003ca href=\"#network_style\" name=\"network_\"\u003e#\u003c/a\u003e \u003ci\u003enetwork\u003c/i\u003e.\u003cb\u003estyle\u003c/b\u003e([\u003ci\u003estyle\u003c/i\u003e])\n\nThe _style_ represents the style of the graph elements. If _style_ is not specified, it defaults to the styles specified in [consts.js](https://github.com/dianaow/d3-network-time/blob/master/src/consts.js). Some attributes such as node and edge color and opacity have to be represented as accessors, while some attributes such as text size and color are represented as a single value.\n\nnpm version history:\n\n0.0.1-0.0.3: Time iteration based on YYYY-MM-DD datetime string\n0.1.0: Time iteration based on UNIX epoch timstamp\n0.2.0: Allow user to style graph elements and customize force-directed layout\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdianaow%2Fd3-network-time","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdianaow%2Fd3-network-time","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdianaow%2Fd3-network-time/lists"}