{"id":18354680,"url":"https://github.com/nextbitlabs/ternary-plot","last_synced_at":"2025-04-06T12:31:52.574Z","repository":{"id":34923810,"uuid":"190802484","full_name":"nextbitlabs/ternary-plot","owner":"nextbitlabs","description":"Web component for the implementation of a ternary plot.","archived":false,"fork":false,"pushed_at":"2023-01-05T12:03:43.000Z","size":1000,"stargazers_count":6,"open_issues_count":9,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T14:49:50.156Z","etag":null,"topics":["chart","js","plot","svg","ternary","webcomponent"],"latest_commit_sha":null,"homepage":"https://github.com/nextbitlabs/ternary-plot","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/nextbitlabs.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":"2019-06-07T20:07:26.000Z","updated_at":"2023-09-15T13:16:23.000Z","dependencies_parsed_at":"2023-01-15T10:31:01.209Z","dependency_job_id":null,"html_url":"https://github.com/nextbitlabs/ternary-plot","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextbitlabs%2Fternary-plot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextbitlabs%2Fternary-plot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextbitlabs%2Fternary-plot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextbitlabs%2Fternary-plot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nextbitlabs","download_url":"https://codeload.github.com/nextbitlabs/ternary-plot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247484329,"owners_count":20946384,"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":["chart","js","plot","svg","ternary","webcomponent"],"created_at":"2024-11-05T22:04:51.243Z","updated_at":"2025-04-06T12:31:52.205Z","avatar_url":"https://github.com/nextbitlabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u0026lt;ternary-plot\u0026gt;\n\n![Latest Release](https://badgen.net/github/release/nextbitlabs/ternary-plot) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/ternary-plot)\n\nWeb component to implement a ternary plot.\n\n\u003cdiv align=\"center\"\u003e\n\n\n\u003cimg width=\"400px\" src=\"image.png\"\u003e\n\u003c/div\u003e\n\n\n## Usage\n\nIn an html file\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript type=\"module\"\u003e\n      import 'https://unpkg.com/ternary-plot@latest/dist/ternary-plot.umd.js';\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cstyle\u003e\n    @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700\u0026display=swap');\n    /*\n      CSS custom properties penetrate the Shadow DOM,\n      they are useful to provide custom styling.\n      The ternary-plot webcomponent exposes font-size and font-family custom properties.\n    */\n    ternary-plot {\n      --font-size: 13px;\n      --font-family: 'Roboto Mono', monospace;\n    }\n  \u003c/style\u003e\n  \u003cbody\u003e\n    \u003c!-- Set SVG width and height in pixels with the side attribute --\u003e\n    \u003cternary-plot side=\"400\"\u003e\u003c/ternary-plot\u003e\n  \u003c/body\u003e\n  \u003cscript\u003e\n    const element = document.querySelector('ternary-plot');\n    // Set data as a dynamic property.\n    element.data = {\n      titles: {\n        bottom: \"Variable A\",\n        right: \"Variable B\",\n        left: \"Variable C\",\n      },\n      data: [\n        // The sum of bottom, right and left should be 1.\n        {\n          bottom: 0.3,\n          right: 0.4,\n          left: 0.3\n        },\n        {\n          bottom: 0.1,\n          right: 0.5,\n          left: 0.4\n        },\n      ]\n    };\n  \u003c/script\u003e\n\u003c/html\u003e\n```\n\nWith npm:\n\n```\nnpm i ternary-plot\n```\n\nSee [demo1](https://stackblitz.com/edit/ternary-plot-example) and [demo2](https://stackblitz.com/edit/ternary-plot-example-random-data).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextbitlabs%2Fternary-plot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextbitlabs%2Fternary-plot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextbitlabs%2Fternary-plot/lists"}