{"id":30107049,"url":"https://github.com/benignware/visualist","last_synced_at":"2025-08-10T01:33:01.322Z","repository":{"id":27772526,"uuid":"31260997","full_name":"benignware/visualist","owner":"benignware","description":"Minimalist svg dom library","archived":false,"fork":false,"pushed_at":"2016-03-24T16:43:41.000Z","size":1927,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-10T19:33:12.655Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://benignware.github.io/visualist","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/benignware.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":"2015-02-24T13:22:33.000Z","updated_at":"2016-03-31T16:19:25.000Z","dependencies_parsed_at":"2022-07-25T21:18:10.427Z","dependency_job_id":null,"html_url":"https://github.com/benignware/visualist","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/benignware/visualist","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fvisualist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fvisualist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fvisualist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fvisualist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benignware","download_url":"https://codeload.github.com/benignware/visualist/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fvisualist/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269663321,"owners_count":24455796,"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-08-09T02:00:10.424Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":[],"created_at":"2025-08-10T01:32:04.116Z","updated_at":"2025-08-10T01:33:01.287Z","avatar_url":"https://github.com/benignware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"visualist\n=========\n\n\u003e Minimalist svg dom library\n\n[Demo](http://benignware.github.io/visualist)\n\n## Usage\n\nAdd the library to your stack:\n\n```html\n\u003cscript src=\"visualist.min.js\"\u003e\u003c/script\u003e\n```\n\nProvide an empty svg element in the document:\n\n```html\n\u003csvg id=\"example\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n```\n\nUse visualist to render svg:\n```js\n_v('#example', 375, 100)\n  .g({transform: 'skewX(-45) skewY(-10) translate(90, 40)'})\n    .rect(10,20,245,50, {fill: '#c2f'})\n    .text(20, 55, \"visualist\", {fontSize: 42, fontFamily: 'Courier New', fill: '#fff'});\n```\n\n## API\n\n### Constructor\n\n#### _v(selector, width, height, [attrs]);\n\n*Create from an existing selector*\n```js\n_v(\"#svg\", 400, 300);\n```\n\n*Create a new svg canvas and append to container*\n```js\nvar div = document.createElement('div');\n_v(400, 300).appendTo(div);\n```\n\n### Components\n\n#### append( child )\nAppends the specified child to the first element in the set.\n\n#### appendTo( parent )\nAppends the current set of elements to the specified parent\n\n#### arc( x, y, r, sAngle, eAngle, counterclockwise, [attrs] )\nThe arc() method creates an arc/curve (used to create circles, or parts of circles).\n\n```html\n\u003csvg id=\"arc\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n```\n\n```js\n_v('#arc', 200, 200)\n  .arc(100, 100, 80, Math.PI * 0.25, Math.PI * 1.75, 1, {fill: 'blue'});\n```\n\n#### attr( name, [value] )\nGet the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.\n\n#### bbox()\nRetrieves the bounding box of the first element in the set.\n\n#### clear()\nRemoves all children from every element in the set.\n\n#### circle( cx, cy, r, [attrs])\nDraws a circle on every element in the set.\n\n```html\n\u003csvg id=\"circle\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n```\n\n```js\n_v('#circle', 100, 100)\n  .circle(50, 50, 40, {stroke: 'green', strokeWidth: 4, fill: 'yellow'});\n```\n\n#### computedTextLength()\nRetrieves the computed text length of the first element in the set if applicable and the element has been rendered.\n\n#### create( tagName, [attrs] )\nCreates and returns a new element with the specifed tagname.\n\n#### css( name, [value] )\nGet the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.\n\n#### ellipse( cx, cy, rx, ry, [attrs] )\nDraws an ellipse on every element in the set.\n\n```html\n\u003csvg id=\"ellipse\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n```\n\n```js\n_v('#ellipse', 500, 140)\n  .ellipse(200, 80, 100, 50, {style: \"fill:yellow;stroke:purple;stroke-width:2\"});\n```\n\n#### g( [attrs] )\nCreates and returns a group layer on the first element in the set\n\n#### graph( points, [options] )\nRenders a graph on every element in the set. Set option `smooth` to true to render a curved graph. You can also provide a `tension`-option as floating point and a bool-flag `approximate`-options to control smoothiness.\n\n```html\n\u003csvg id=\"graph\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n```\n\n```js\n_v('#graph', 500, 210)\n  .graph([{x: 20, y: 20}, {x: 40, y: 25}, {x: 60, y: 40}, {x: 80, y: 120}, {x: 120, y: 140}, {x: 200, y: 180}], {style: \"fill:none;stroke:black;stroke-width:3\"});\n```\n\n#### get( [index] )\nRetrieve one or all elements in the set.\n\n#### index()\nSearch for a given element from among the matched elements.\n\n#### line( x1, y1, x2, y2, [attrs] )\nDraws a line on every element in the set.\n\n```html\n\u003csvg id=\"line\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n```\n\n```js\n_v('#line', 500, 210)\n  .line(0, 0, 200, 200, {style: \"stroke:rgb(255,0,0);stroke-width:2\"});\n```\n\n#### list( x, y, items, [options] )\nRenders an unordered list.\n\n```html\n\u003csvg id=\"list\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n```\n\n```js\n_v('#list', 200, 100)\n  .list(10, 10, [{label: \"Item 1\"}, {label: \"Item 2\"}]);\n```\n\n#### listbox( x, y, width, height, items, [options] ) {\nRenders an unordered list into the specified bounds.\n\n```html\n\u003csvg id=\"listbox\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n```\n\n```js\n_v('#listbox', 200, 240)\n  .rect(0, 0, 200, 240, {style: \"fill:darkgray;stroke-width:1;stroke:rgb(0,0,0)\"})\n  .listbox(10, 10, 180, 220, [\"Lorem ipsum dolor sit amet\", \"Consectetuer adipiscing elit\", \"Aenean commodo ligula eget dolor. Aenean massa.\", \"Cum sociis natoque penatibus et magnis dis parturient montes\"], {fill: \"ghostwhite\"});\n```\n\n#### parent()\nReturns the parent node of the first element in the set.\n\n#### path( d, [attrs] )\nDraws a path on every element in the set.\n\n```html\n\u003csvg id=\"path\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n```\n\n```js\n_v('#path', 400, 200)\n  .path(\"M150 0 L75 200 L225 200 Z\");\n```\n\n#### polygon( points, [attrs] )\nDraws a polygon on every element in the set.\n\n```html\n\u003csvg id=\"polygon\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n```\n\n```js\n_v('#polygon', 500, 210)\n  .polygon([{x: 200, y: 10}, {x: 250, y: 190}, {x: 160, y: 210}], {style: \"fill:lime;stroke:purple;stroke-width:1\"});\n```\n\n#### polyline( points, [attrs] )\nDraws a polyline on every element in the set.\n\n```html\n\u003csvg id=\"polyline\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n```\n\n```js\n_v('#polyline', 500, 210)\n  .polyline([{x: 20, y: 20}, {x: 40, y: 25}, {x: 60, y: 40}, {x: 80, y: 120}, {x: 120, y: 140}, {x: 200, y: 180}], {style: \"fill:none;stroke:black;stroke-width:3\"});\n```\n\n#### prepend( child )\nPrepends the specified child to the first element in the set.\n\n#### prependTo( parent )\nPrepends the current set of elements to the specified parent.\n\n#### rectangle( x, y, width, height [attrs] )\nDraws a rectangle on every element in the set.\n\n```html\n\u003csvg id=\"rectangle\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n```\n\n```js\n_v('#rectangle', 400, 110)\n  .rect(0, 0, 300, 100, {style: \"fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)\"});\n```\n\n#### remove( [child] )\nRemoves all elements in the set or removes the specified child from the set of matched elements.\n\n#### size()\nReturn the number of elements in the set.\n\n#### text( x, y, string, attrs )\nRenders text on every element in the set.\n\n```html\n\u003csvg id=\"text\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n```\n\n```js\n_v('#text', 200, 30)\n  .text(0, 15, \"I love SVG!\", {fill: 'red'});\n```\n\n#### textbox( x, y, width, height, string, [attrs] ) {\nRenders text into a bounding box by wrapping lines at spaces.\n\n```html\n\u003csvg id=\"textbox\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n```\n\n```js\n_v('#textbox', 350, 200)\n  .rect(0, 0, 350, 200, {style: \"fill:darkgray;stroke-width:1;stroke:rgb(0,0,0)\"})\n  .textbox(10, 10, 330, 180, \"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\", {fill: 'ghostwhite'});\n```\n\n#### toArray()\nRetrieve all the elements contained in the set as an array.\n\n## Changelog\n\n* v0.0.4 - Round pixels to significant digit\n* v0.0.3 - Fixed bbox null pointer\n* v0.0.2 - Added bower.json\n* v0.0.1 - Initial Release\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenignware%2Fvisualist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenignware%2Fvisualist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenignware%2Fvisualist/lists"}