{"id":16466534,"url":"https://github.com/arpitnarechania/d3-screeplot","last_synced_at":"2025-10-27T13:30:38.341Z","repository":{"id":58244565,"uuid":"97078413","full_name":"arpitnarechania/d3-screeplot","owner":"arpitnarechania","description":"Open Source Javascript library to render screeplots using D3","archived":false,"fork":false,"pushed_at":"2017-07-13T07:19:17.000Z","size":195,"stargazers_count":9,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T05:41:17.805Z","etag":null,"topics":["chart","charting-library","d3-visualization","d3v4","javascript","open-source","pareto","screeplot"],"latest_commit_sha":null,"homepage":"https://arpitnarechania.github.io/d3-screeplot","language":null,"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/arpitnarechania.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":"2017-07-13T04:01:16.000Z","updated_at":"2021-12-13T22:48:11.000Z","dependencies_parsed_at":"2022-08-31T00:31:34.316Z","dependency_job_id":null,"html_url":"https://github.com/arpitnarechania/d3-screeplot","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/arpitnarechania%2Fd3-screeplot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arpitnarechania%2Fd3-screeplot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arpitnarechania%2Fd3-screeplot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arpitnarechania%2Fd3-screeplot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arpitnarechania","download_url":"https://codeload.github.com/arpitnarechania/d3-screeplot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238333460,"owners_count":19454603,"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","charting-library","d3-visualization","d3v4","javascript","open-source","pareto","screeplot"],"created_at":"2024-10-11T11:44:00.967Z","updated_at":"2025-10-27T13:30:37.952Z","avatar_url":"https://github.com/arpitnarechania.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# d3-screeplot\n\n**d3-screeplot** is an open-source JavaScript library for rendering Screeplots using the D3.js library.\n\nCheck out an [Example](https://arpitnarechania.github.io/d3-screeplot/) where you can test various configuration options.\n\n# Installation\n\nUsing Bower:\n\n```\nbower install d3-screeplot --save\n```\n\nTo use this library then, simply include d3.js, matrix.js and matrix.css:\n\n``` html\n\u003cscript src=\"/path/to/d3v4.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/jquery-3.2.1.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/dist/ScreePlot.css\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/dist/ScreePlot.js\"\u003e\u003c/script\u003e\n```\n\n# Usage\n\nTo use this library, you must create a container element and instantiate a new\nScreePlot object:\n\n```html\n\u003cdiv id=\"screePlot\"\u003e\u003c/div\u003e\n```\n\nData in .json format\n``` javascript\n    var screePlotData = [\n          {\n            \"factor\": 1,\n            \"eigenvalue\": 50,\n            \"cumulative_eigenvalue\":50\n          },\n          {\n            \"factor\": 2,\n            \"eigenvalue\": 20,\n            \"cumulative_eigenvalue\":70\n        \n          },\n          {\n            \"factor\": 3,\n            \"eigenvalue\": 10,\n            \"cumulative_eigenvalue\":80\n        \n          },\n          {\n            \"factor\": 4,\n            \"eigenvalue\": 5,\n            \"cumulative_eigenvalue\":85\n        \n          },\n          {\n            \"factor\": 5,\n            \"eigenvalue\": 5,\n            \"cumulative_eigenvalue\":90\n        \n          },\n          {\n            \"factor\": 6,\n            \"eigenvalue\": 3,\n            \"cumulative_eigenvalue\":93\n        \n          },\n          {\n            \"factor\": 7,\n            \"eigenvalue\": 3,\n            \"cumulative_eigenvalue\":96\n        \n          },\n          {\n            \"factor\": 8,\n            \"eigenvalue\": 2,\n            \"cumulative_eigenvalue\":98\n        \n          },\n          {\n            \"factor\": 9,\n            \"eigenvalue\": 1,\n            \"cumulative_eigenvalue\":99\n        \n          },\n          {\n            \"factor\": 10,\n            \"eigenvalue\": 0.5,\n            \"cumulative_eigenvalue\":99.5\n        \n          },\n          {\n            \"factor\": 11,\n            \"eigenvalue\": 0.5,\n            \"cumulative_eigenvalue\":100\n        \n          }\n        ];\n```\n\nSetting chart parameters\n``` javascript\n\n    var screePlotCSSOptions = {\n        domElement: \"#screePlot\",\n        width: $('#screePlot').parent().width(),\n        height: 550,\n        margin:{top: 20,right: 20,bottom: 20,left: 35},\n        showGridlines:true,\n        noOfGridlines:10,\n        showAxes:false,\n        svgBackground:'#FFFFFF',\n        barFill:'#3498db',\n        barStroke:'#FFFFFF',\n        barStrokeWidth:0,\n        selBarFill:'#2ECC71',\n        selBarStroke:'#FFFFFF',\n        selBarStrokeWidth:0,\n        circleFill:'#3498db',\n        circleStroke:'#FFFFFF',\n        circleStrokeWidth:1,\n        selCircleFill:'#2ECC71',\n        selCircleStroke:'#FFFFFF',\n        selCircleStrokeWidth:1,\n        lineStrokeWidth:2,\n        filterLineStrokeWidth:2,\n        nodeTextColor:\"#ffff00\"\n    };\n\n    var screePlotDataOptions = {\n        factorSelected:3\n    }\n\n    var screePlot = new ScreePlot(screePlotCSSOptions);\n    screePlot.initialize(); // initializes the SVG and UI elements\n    screePlot.render(screePlotData,screePlotDataOptions); // Use this to render as well as update with new data and configurations.\n\n```\n\n## Options\n\n| Option                     | Description                                                               | Type     | Example\n| -------------------------- | ------------------------------------------------------------------------- | -------- | ----------------------------- |\n| `domElement`               | The DOM element id/ class to append the chart to                          | string   | `#screePlot`                     |\n| `width`                    | The width of the chart in pixels                                          | number   | `900`                         |\n| `height`                   | The height of the chart in pixels                                         | number   | `500`                         |\n| `margin.top`               | The top margin                                                            | number   | `75`                          |\n| `margin.bottom`            | The bottom margin                                                         | number   | `50`                          |\n| `margin.left`              | The left margin                                                           | number   | `100`                         |\n| `margin.right`             | The right margin                                                          | number   | `50`                          |\n| `showGridlines`            | Whether the gridlines are to be shown.                                    | bool     | `true`                        |\n| `noOfGridlines`            | Approx number of gridlines to be shown                                    | number   | `10`                          |\n| `showAxes`                 | Whether X/Y axes are to be shown                                          | bool     | `true`                        |\n| `svgBackground`            | The color for the maximum value                                           | string   | `'blue'`                      |\n| `barFill`                  | Fill color of the unselected bars                                         | string   | `'yellow'`                    |\n| `barStroke`                | Stroke color of the unselected bars                                       | string   | `'#efefef'`                   |\n| `barStrokeWidth`           | Stroke width of the unselected bars                                       | number   | `4`                           |\n| `selBarFill`               | Fill color of the selected bars                                           | string   | `'#dcdcdc'`                   |\n| `selBarStroke`             | Stroke color of the selected bars                                         | string   | `'orange'`                    |\n| `selBarStrokeWidth`        | Stroke width of the selected bars                                         | number   | `4`                           |\n| `circleFill`               | Fill color of the unselected circles                                      | string   | `'white'`                     |\n| `circleStroke`             | Stroke color of the unselected circles                                    | string   | `'blue'`                      |\n| `circleStrokeWidth`        | Stroke Width of the unselected circles                                    | number   | `2`                           |\n| `selCircleFill`            | Fill color of the selected circles                                        | string   | `'blue'`                      |\n| `selCircleStroke`          | Stroke color of the selected circles                                      | string   | `'blue'`                      |\n| `selCircleStrokeWidth`     | Stroke Width of the selected circles                                      | number   | `3`                           |\n| `lineStrokeWidth`          | Stroke Width of the Pareto line                                           | number   | `2`                           |\n| `filterLineStrokeWidth`    | Stroke width of the Selector line                                         | number   | `4`                           |\n| `nodeTextColor`            | Color of the text inside the circles                                      | string   | `'black'`                     |\n| `factorSelected`           | Up to which bar to make a selection                                        | number   | `3`                           |\n\n# Author\n\nArpit Narechania\narpitnarechania@gmail.com\n\n# License\n\nMIT license.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farpitnarechania%2Fd3-screeplot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farpitnarechania%2Fd3-screeplot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farpitnarechania%2Fd3-screeplot/lists"}