{"id":47844379,"url":"https://github.com/epiviz/epiviz-chart","last_synced_at":"2026-04-03T21:06:25.050Z","repository":{"id":10650595,"uuid":"66284988","full_name":"epiviz/epiviz-chart","owner":"epiviz","description":"Epiviz-chart: Component library for genomic data visualization","archived":false,"fork":false,"pushed_at":"2023-03-01T06:11:58.000Z","size":23951,"stargazers_count":5,"open_issues_count":17,"forks_count":2,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-17T06:57:36.416Z","etag":null,"topics":["data-visualization","epiviz","genomics","polymer","visualization","webcomponents"],"latest_commit_sha":null,"homepage":"http://epiviz.github.io/components","language":"HTML","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/epiviz.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,"governance":null}},"created_at":"2016-08-22T15:35:54.000Z","updated_at":"2023-07-08T03:14:36.000Z","dependencies_parsed_at":"2023-01-11T20:14:51.721Z","dependency_job_id":"e9b95c2c-0758-4a97-a487-aeff3d3af92c","html_url":"https://github.com/epiviz/epiviz-chart","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/epiviz/epiviz-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epiviz%2Fepiviz-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epiviz%2Fepiviz-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epiviz%2Fepiviz-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epiviz%2Fepiviz-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/epiviz","download_url":"https://codeload.github.com/epiviz/epiviz-chart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epiviz%2Fepiviz-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31377446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-03T17:53:18.093Z","status":"ssl_error","status_checked_at":"2026-04-03T17:53:17.617Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["data-visualization","epiviz","genomics","polymer","visualization","webcomponents"],"created_at":"2026-04-03T21:06:24.434Z","updated_at":"2026-04-03T21:06:25.045Z","avatar_url":"https://github.com/epiviz.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Documentation\n\nDocumentation for the web components is available at \n\nhttps://epiviz.github.io/components/\n\n# Usage from cdn\n\nAdd this to HTML head (loads dependencies)\n\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/epiviz/epiviz-chart/cdn/jquery/dist/jquery.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/epiviz/epiviz-chart/cdn/jquery-ui/jquery-ui.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/epiviz/epiviz-chart/cdn/renderingQueues/renderingQueue.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/epiviz/epiviz-chart/cdn/webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n\n    \u003clink rel=\"import\" href=\"https://cdn.jsdelivr.net/gh/epiviz/epiviz-chart/cdn/epiviz-components.html\"\u003e\n\n# For development\n\nTo locally setup `epiviz-chart`\n\n- Clone the repo \n  `git clone https://github.com/epiviz/epiviz-chart`\n- Install Bower from bower.io\n- install bower dependencies \n  `bower install`\n- Install polymer-cli\n  `polymer server`\n\n# Dependency in an application\n\n`bower install --save epiviz/epiviz-chart`\n\n# Demos\n\ndemo folder contains examples of various epiviz components\n\n- `index-json.html` should work as it contains static data in the html\n\nmost other examples, require an instance of EFS running. \n\nTo run a local instance of polymer-server\n\n`polymer serve -p 8080`\n\nThen navigate to any files inside the demo folder\n\nhttp://localhost:8080/components/epiviz-charts/demo/\u003cFILE_NAME.html\u003e\n\n# Epiviz-environment or Epiviz-nav elements\n\n(also checkout `demo/index-readme.html`)\n\nImagine a html page containing a navigational element (a genome browser)\n\n```\n\u003cepiviz-navigation \n    id=\"nav\" \n    chr=\"chr11\" \n    start=101322295 \n    end=131454659\u003e\n\u003c/epiviz-navigation\u003e\n```\n\nWe can add a visualization with static data assigned to the element.\n\n```\nelem = document.createElement('epiviz-scatter-plot'); \nelem.setAttribute('json-data', '{ \\\n  \"rows\": { \\\n         \"end\": [101454659,0,417130,0,0,83502,0,148863,0,0], \\\n         \"start\": [101322295,0,463451,0,0,132428,0,63018,0,0], \\\n         \"chr\": [\"chr11\",\"chr11\",\"chr11\",\"chr11\",\"chr11\",\"chr11\",\"chr11\",\"chr11\",\"chr11\",\"chr11\"] \\\n  }, \\\n  \"cols\": { \\\n         \"ExpressionA\": [-0.188,0.153,-0.762,0.53,-0.776,-0.32,-0.731,6.503,11.087,10.569], \\\n         \"ExpressionB\": [-0.325,-0.289,-0.523,1.417,-0.636,-0.89,-0.786,4.885,9.112,8.862] \\\n  } \\\n}'); \nelem.setAttribute('dim-s', '[\"ExpressionA\", \"ExpressionB\"]');\n// instead can also set `json-data` on the component\nelem.slot=\"charts\"\n```\n\nAdd the plot to the dom\n\n```\nnav = document.querySelector('#nav')\nnav.appendChild(elem)\n```\n\nWe can programmatically update any of the attributes on the visualization. This should be similar to updating attributes in JS.\n\n```\n// get chart\nchart = document.querySelector(\"epiviz-scatter-plot\")\n\n// get current chart settings\ncurrentSettings = chart.chartSettings;\n// modify chart settings\ncurrentSettings[\"circleRadiusRatio\"] = 0.1;\n\n// set settings back to chart\nchart.setAttribute(\"chart-settings\", JSON.stringify(currentSettings));\n```\n\nSimilarly, can also update `chart-colors`  \u0026 other attributes\n\n\n# Optimize elements for production \n```\nnpm install -g polymer-bundler\n\npolymer-bundler --inline-scripts --inline-css --strip-comments epiviz-charts.html \u003e dist/epiviz-charts.html\n```\n\n# Docker Instructions\n\nThe docker setup, runs polymer server to serve the components and/or app pages, and nginx as a proxy.\n\nTo build,\n\n`docker build . -t epiviz-chart`\n\n`--no-cache` for rebuilding during development\n\nTo run,\n\n`docker run -p 80:80 -dt epiviz-chart`\n\n## Development\n\nFor development, also expose port 8081 on the container. \n\n`docker run -p 80:80 -p 8081:8081 -dt epiviz-chart`\n\nTo use the container for serving app pages,\n\ncopy html files to /app/, \nthere's an nginx route (\\\u003cHOSTNAME\\\u003e/app/) configured to serve these pages. \nThe included `index.html` uses the loader.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepiviz%2Fepiviz-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fepiviz%2Fepiviz-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepiviz%2Fepiviz-chart/lists"}