Screeplot
** Check out the open source library on
** Author
xxxxxxxxxx<html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" type="image/png" href="assets/favicon.png"/> <title>d3-screeplot</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <meta name="description" content="An open source javascript library to render Screeplots using D3.js"> <link rel="stylesheet" href="style.css"></head><body><main class="page-content" aria-label="Content"> <div class="wrapper" id="container"> <div> <div id="screePlot"></div> </div> <div id="controls"><div id="controls" style="overflow-x:auto; text-align:center;"> <table> <tr> <td><span>SVG Bg</span></td> <td><span>XY Axes</span></td> <td><span>XY Axes Labels</span></td> <td><span>Gridlines</span></td> <td><span># Gridlines</span></td> <td><span>Circle Fill</span></td> <td><span>Circle Stroke</span></td> <td><span>Circle Stroke Width</span></td> <td><span>Circle Fill (selected)</span></td> <td><span>Circle Stroke (selected)</span></td> <td><span>Circle Stroke Width (selected)</span></td> <td><span>Bar Fill</span></td> <td><span>Bar Stroke</span></td> <td><span>Bar Stroke Width</span></td> <td><span>Bar Fill (selected)</span></td> <td><span>Bar Stroke (selected)</span></td> <td><span>Bar Stroke Width (selected)</span></td> <td><span>Line Stroke Width</span></td> <td><span>Node Text Color</span></td> <td><span>Refresh Data</span></td> </tr> <tr> <td><input id="svg_bg_color" type="color" value="#ffffff" onchange="changeSVGBgColor(this)"></td> <td><input id="axes" type='checkbox' onclick='showAxes(this);' checked></td> <td><input id="axes_labels" type='checkbox' onclick='showAxesLabels(this);' checked></td> <td><input id="gridlines" type='checkbox' onclick='showGridlines(this);' checked></td> <td><input id="no_of_gridlines" type='number' value="10" onclick='changeNoOfGridlines(this);'></td> <td><input id="circle_fill" type='color' value="#3498db" onchange='changeCircleFill(this);'></td> <td><input id="circle_stroke" type='color' value="#FFFFFF" onchange='changeCircleStroke(this);'></td> <td><input id="circle_stroke_width" type='number' value="1" onclick='changeCircleStrokeWidth(this);'></td> <td><input id="circle_sel_fill" type='color' value="#4CAE50" onchange='changeSelCircleFill(this);'></td> <td><input id="circle_sel_stroke" type='color' value="#FFFFFF" onchange='changeSelCircleStroke(this);'></td> <td><input id="circle_sel_stroke_width" type='number' value="1" onclick='changeSelCircleStrokeWidth(this);'></td> <td><input id="bar_fill" type='color' value="#3498db" onchange='changeBarFill(this);'></td> <td><input id="bar_stroke" type='color' value="#FFFFFF" onchange='changeBarStroke(this);'></td> <td><input id="bar_stroke_width" type='number' value="0" onclick='changeBarStrokeWidth(this);'></td> <td><input id="sel_bar_fill" type='color' value="#4CAE50" onchange='changeSelBarFill(this);'></td> <td><input id="sel_bar_stroke" type='color' value="#FFFFFF" onchange='changeSelBarStroke(this);'></td> <td><input id="sel_bar_stroke_width" type='number' value="0" onclick='changeSelBarStrokeWidth(this);'></td> <td><input id="line_stroke_width" type='number' value="2" onclick='changeLineStrokeWidth(this);'></td> <td><input id="node_text_color" type='color' value="#FFFF00" onchange='changeNodeTextColor(this);'></td> <td><input type="button" onclick="refreshData()" value="Go"/></td> </tr> </table></div> </div> </div></main></body><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/arpitnarechania/d3-screeplot/dist/libs/d3v4.js"></script><link rel="stylesheet" type="text/css" href="https://rawgit.com/arpitnarechania/d3-screeplot/master/dist/ScreePlot.css"/><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/arpitnarechania/d3-screeplot/dist/screeplot.js"></script><script type="text/javascript" src="ScreePlotData.js"></script><script type="text/javascript" src="main.js"></script></html> Updated missing url https://rawgit.com/arpitnarechania/d3-screeplot/master/dist/libs/d3v4.js to https://cdn.jsdelivr.net/gh/arpitnarechania/d3-screeplot/dist/libs/d3v4.js
Updated missing url https://rawgit.com/arpitnarechania/d3-screeplot/master/dist/ScreePlot.js to https://cdn.jsdelivr.net/gh/arpitnarechania/d3-screeplot/dist/screeplot.js
https://code.jquery.com/jquery-3.1.1.min.js
https://rawgit.com/arpitnarechania/d3-screeplot/master/dist/libs/d3v4.js
https://rawgit.com/arpitnarechania/d3-screeplot/master/dist/ScreePlot.js