{"id":15612183,"url":"https://github.com/hypercubed/angular-bed-view","last_synced_at":"2025-03-29T15:12:41.031Z","repository":{"id":21658239,"uuid":"24979096","full_name":"Hypercubed/angular-bed-view","owner":"Hypercubed","description":null,"archived":false,"fork":false,"pushed_at":"2014-11-27T09:04:52.000Z","size":614,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-04T15:49:31.729Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://hypercubed.github.io/angular-bed-view/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hypercubed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-09T07:52:30.000Z","updated_at":"2016-07-18T14:55:07.000Z","dependencies_parsed_at":"2022-08-19T16:50:33.085Z","dependency_job_id":null,"html_url":"https://github.com/Hypercubed/angular-bed-view","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/Hypercubed%2Fangular-bed-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hypercubed%2Fangular-bed-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hypercubed%2Fangular-bed-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hypercubed%2Fangular-bed-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hypercubed","download_url":"https://codeload.github.com/Hypercubed/angular-bed-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246200322,"owners_count":20739566,"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-10-03T06:22:09.643Z","updated_at":"2025-03-29T15:12:41.005Z","avatar_url":"https://github.com/Hypercubed.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"angular-bed-view\n================\n\nSimple example of a bed file viewer built using [Hypercubed/angular-primer](http://github.com/Hypercubed/angular-primer/), [Hypercubed/angular-downloadsvg-directive](http://github.com/Hypercubed/angular-downloadsvg-directive/), [Hypercubed/angular-dsv](http://github.com/Hypercubed/angular-dsv/), [Hypercubed/_F](http://github.com/Hypercubed/_F/).\n\n[demo](http://hypercubed.github.io/angular-bed-view/)\n\n## Install\n\n```bash\ngit clone https://github.com/Hypercubed/angular-bed-view.git\ncd angular-bed-view\ngrunt serve\n```\n\n## Components\n\n[Hypercubed/angular-primer](https://github.com/Hypercubed/angular-primer/) is a small set of AngularJS directives useful for generating interactive SVG based visualizations of genomic features.  For example:\n\n```html\n\u003csvg width=\"100%\" shape-rendering=\"crispEdges\" \u003e\n  \u003cg primer-track transform=\"translate(0,30)\"\u003e\n    \u003cg primer-scale/\u003e\n    \u003cg primer-label anchor=\"start\"\u003e\u003ctext text-anchor=\"end\"\u003e3'\u003c/text\u003e\u003c/g\u003e\n    \u003cg primer-label anchor=\"end\"\u003e\u003ctext text-anchor=\"start\"\u003e5'\u003c/text\u003e\u003c/g\u003e\n    \u003cg primer-feature start=\"10\" end=\"25\"\u003e\n      \u003cg primer-feature-shape class=\"marker\"/\u003e\n      \u003cg primer-label=\"A\" orient=\"top\" /\u003e\n    \u003c/g\u003e\n    \u003cg primer-feature start=\"30\" end=\"55\"\u003e\n      \u003cg primer-feature-shape class=\"marker\" /\u003e\n      \u003cg primer-label=\"B\" orient=\"top\" /\u003e\n    \u003c/g\u003e\n    \u003cg primer-feature start=\"60\" end=\"95\"\u003e\n      \u003cg primer-feature-shape class=\"marker\"/\u003e\n      \u003cg primer-label=\"C\" orient=\"top\" /\u003e\n    \u003c/g\u003e\n  \u003c/g\u003e\n\u003c/svg\u003e\n```\n\n![example](https://github.com/Hypercubed/angular-primer/raw/master/README-example.png)\n\n[Hypercubed/angular-downloadsvg-directive](https://github.com/Hypercubed/angular-downloadsvg-directive/) is a AngularJS directive to download embedded `\u003csvg\u003e` graphics as an svg file... including CSS defined styles. (see [demo](http://hypercubed.github.io/angular-bed-view/) for example).\n\n[Hypercubed/angular-dsv](https://github.com/Hypercubed/angular-dsv/) is a AngularJS based version of [d3.dsv](https://github.com/mbostock/d3/wiki/CSV#dsv).  It will use d3.dsv (or shim) to parse delimiter separated  tabular formats (tab-seperator, common seperated, etc) retrieved using AngularJS' [$http](https://docs.angularjs.org/api/ng/service/$http).  For example:\n\n```js\ndsv.tsv({method: 'GET', url: '/someUrl'}, function(d) { return {key: d.key, value: +d.value}; })\n    .success(function(data, status, headers, config) {\n      // this callback will be called asynchronously\n      // when the response is available\n    })\n    .error(function(data, status, headers, config) {\n      // called asynchronously if an error occurs\n      // or server returns response with an error status.\n    });\n```\n\n[Hypercubed/_F](https://github.com/Hypercubed/_F/) is simply global shortcut for composable d3 style accessors functions.  For example:\n\n| _F                               | JS equivalent                                        |\n| -------------------------------- | ---------------------------------------------------- |\n| `_F('prop')`                     | `function(d) { return d.prop; }`                     |\n| `_F('prop').eq(value)`           | `function(d) { return d.prop === value; }`           |\n| `_F('prop').gt(10).and().lt(20)` | `function(d) { return d.prop \u003e 10 \u0026\u0026 d.prop \u003c 20; }` |\n\n## Acknowledgments\nThis work was supported by a research grant from the Japanese Ministry of Education, Culture, Sports, Science and Technology (MEXT) to the RIKEN Center for Life Science Technologies.\n\n## License\nCopyright (c) 2014 Jayson Harshbarger\n\n[MIT License](http://en.wikipedia.org/wiki/MIT_License)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypercubed%2Fangular-bed-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhypercubed%2Fangular-bed-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypercubed%2Fangular-bed-view/lists"}