{"id":13481864,"url":"https://github.com/bmschmidt/D3-trail","last_synced_at":"2025-03-27T12:31:40.409Z","repository":{"id":17979286,"uuid":"20982136","full_name":"bmschmidt/D3-trail","owner":"bmschmidt","description":"Trail layout for D3","archived":false,"fork":false,"pushed_at":"2015-01-05T21:38:32.000Z","size":153,"stargazers_count":139,"open_issues_count":0,"forks_count":7,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-20T22:15:00.504Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/bmschmidt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-06-19T00:09:38.000Z","updated_at":"2024-10-13T20:59:36.000Z","dependencies_parsed_at":"2022-09-24T20:23:51.259Z","dependency_job_id":null,"html_url":"https://github.com/bmschmidt/D3-trail","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/bmschmidt%2FD3-trail","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmschmidt%2FD3-trail/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmschmidt%2FD3-trail/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmschmidt%2FD3-trail/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bmschmidt","download_url":"https://codeload.github.com/bmschmidt/D3-trail/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245845051,"owners_count":20681822,"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-07-31T17:00:56.889Z","updated_at":"2025-03-27T12:31:40.096Z","avatar_url":"https://github.com/bmschmidt.png","language":"JavaScript","funding_links":[],"categories":["Utils"],"sub_categories":[],"readme":"D3 Trail layout\n================\n\nThis is a layout function for creating paths in D3 where (unlike the native d3.svg.line() element) you need to apply specific aesthetics to each element of the line.\n\nDemos\n======\n\nThe original use case was trails with decaying opacity to represent movement: here's a sample image:![](http://benschmidt.org/maury2.png) (interactive versions forthcoming).\n\nFor a classical example, see how variable-width, staggered entry lines [make it possible to reproduce Minard's famous Napoleon map in motion](http://benschmidt.org/D3-trail/minard.html). Here's a screenshot, although the whole point is the animation. ![](http://benschmidt.org/minard.png)\n\n\nFor a more straightforward demo of staggered entry ([see this demo of a random walk](http://benschmidt.org/D3-trail/pathdemo.html)).\n\n\nFeatures include:\n\n1. Controls to define multiple groups of simultaneous lines by setting `grouping`.\n2. Options to return data either with `x1`,`x2`,`y1`, and `y2` elements to use with svg lines *or* with a `coordinates` object to use with geoprojections by setting `coordType`.\n3. Inbuilt methods to easily define `opacity` in the data as an evaporating trail in time like the frames in [my maps of shipping routes](http://sappingattention.blogspot.com/2012/04/visualizing-ocean-shipping.html).\n4. Control over sorting.\n5. Access to both points in the bound data, so that appearance of a segment can be defined by data about the destination point, the origin, or some interaction of them.\n\n\nUsage\n=====\n\nYou instantiate it by calling the function: once parameters are set, run the `layout()` method to get values back.\n\n\nA bare bones example might be:\n\n``` {js}\ntrail = d3.layout.trail().coordType('xy')\n\nnew = trail.data(whatever).layout()\n\npaths = svg.selectAll(\"line\").data(new)\n\npaths.enter()\n.append('line')\n.attr(\"x1\",function(d) {return d.x1}) \n.attr(\"y1\",function(d) {return d.y1}) \n.attr(\"y2\",function(d) {return d.y2}) \n.attr(\"x2\",function(d) {return d.x2}) \n\n```\n\nAPI\n===\n\nCreation\n--------\n\nCreate a trail object\n```\ntrail = d3.layout.trail()\n```\n\ntrail.data()\n-----------\n\nSet (or with no arguments, return) the data to be plotted. Each object in the return values will correspond to two consecutive points in this array.\n\n\ntrail.positioner()\n-------------------\n\nSet (or with no arguments, return) a function used to specify the x and y values for each **point**.\n\nBy default, it returns simply [x,y] for the data:\n\n```\n   positioner = function(datum) {        return [datum.x,datum.y]    }\n```\n\nYou can also drop in any map projection as the positioner.\n\n\ntrail.coordType()\n-----------------\n\nSet (or with no arguments, return) the format of positions for the return values. Can be either\n\n1. `\"xy\"`, in which case you'll get `x1`,`x2`,`y1`, and `y2` elements suitable for use with svg lines, or\n2. `\"coordinates\"`, in which case the objection will get a `coordinates` element consisting of an array of points so you can simply create a d3.geo.path() element. (Useful if you want to preserve great circle arcs for your paths, for instance; in this case the positioner should return lat and lon, not the projected values, so you don't project them twice.)\n\n\ntrail.grouping()\n----------------\n\nSet (or with no arguments, return) the grouping \n\n\n\ntrail.sort()\n-------------\n\nSet (or with no arguments, return) the function used to order the points.\n\nIf not set, points will be ordered in the direction they went in.\n\n\n\n\n\n\n\nAnd then set the parameters\n\n\n\n\nTime-specific elements\n-----------------------\n\n### trail.time()\n\nSet (or with no arguments, return) a function that returns how to access the time data. (Must be numeric: dates not yet supported).\n\n### trail.currentTime()\n\nSet (or with no arguments, return) the current time (ie, that for which opacity should be 1); all times after this will be dropped from the returned set.\n\n### trail.decayRange()\n\nSet (or with no arguments, return) the number of time units to be displayed: The opacity of segments ending at `trail.currentTime() - trail.decayRange()` will be zero, and all earlier segments will not be displayed\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmschmidt%2FD3-trail","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbmschmidt%2FD3-trail","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmschmidt%2FD3-trail/lists"}