Screeplot

** Check out the open source library on

** Author

Arpit Narechania
arpitnarechania@gmail.com

<!DOCTYPE html>
<html lang="en">

<title>d3-screeplot</title>

</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>

</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