Screeplot
** Check out the open source library on
** Author
- Arpit Narechania
- arpitnarechania@gmail.com
Screeplot
** Check out the open source library on
** Author
<!DOCTYPE html> | |
<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://rawgit.com/arpitnarechania/d3-screeplot/master/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://rawgit.com/arpitnarechania/d3-screeplot/master/dist/ScreePlot.js"></script> | |
<script type="text/javascript" src="ScreePlotData.js"></script> | |
<script type="text/javascript" src="main.js"></script> | |
</html> |
function changeSVGBgColor(element){ | |
screePlot.changeSVGBgColor(element.value); | |
} | |
function showAxes(element){ | |
screePlot.showAxes(element.checked); | |
} | |
function showAxesLabels(element){ | |
screePlot.showAxesLabels(element.checked); | |
} | |
function showGridlines(element){ | |
screePlot.showGridlines(element.checked); | |
} | |
function changeNoOfGridlines(element){ | |
screePlot.changeNoOfGridlines(element.value); | |
} | |
function changeNodeTextColor(element){ | |
screePlot.changeNodeTextColor(element.value); | |
} | |
function changeBarFill(element){ | |
screePlot.changeBarFill(element.value); | |
} | |
function changeBarStroke(element){ | |
screePlot.changeBarStroke(element.value); | |
} | |
function changeBarStrokeWidth(element){ | |
screePlot.changeBarStrokeWidth(element.value); | |
} | |
function changeSelBarFill(element){ | |
screePlot.changeSelBarFill(element.value); | |
} | |
function changeSelBarStroke(element){ | |
screePlot.changeSelBarStroke(element.value); | |
} | |
function changeSelBarStrokeWidth(element){ | |
screePlot.changeSelBarStrokeWidth(element.value); | |
} | |
function changeCircleFill(element){ | |
screePlot.changeCircleFill(element.value); | |
} | |
function changeCircleStroke(element){ | |
screePlot.changeCircleStroke(element.value); | |
} | |
function changeCircleStrokeWidth(element){ | |
screePlot.changeCircleStrokeWidth(element.value); | |
} | |
function changeSelCircleFill(element){ | |
screePlot.changeSelCircleFill(element.value); | |
} | |
function changeSelCircleStroke(element){ | |
screePlot.changeSelCircleStroke(element.value); | |
} | |
function changeSelCircleStrokeWidth(element){ | |
screePlot.changeSelCircleStrokeWidth(element.value); | |
} | |
function changeLineStrokeWidth(element){ | |
screePlot.changeLineStrokeWidth(element.value); | |
} | |
function getRandomInt(min, max) { | |
min = Math.ceil(min); | |
max = Math.floor(max); | |
return Math.floor(Math.random() * (max - min)) + min; | |
} | |
var screePlotCSSOptions = { | |
domElement: "#screePlot", | |
width: $('#screePlot').parent().width(), | |
height: 300, | |
margin:{top: 20,right: 20,bottom: 20,left: 35}, | |
showGridlines:true, | |
noOfGridlines:10, | |
showAxes:false, | |
svgBackground:'#FFFFFF', | |
barFill:'#3498db', | |
barStroke:'#FFFFFF', | |
barStrokeWidth:0, | |
selBarFill:'#2ECC71', | |
selBarStroke:'#FFFFFF', | |
selBarStrokeWidth:0, | |
circleFill:'#3498db', | |
circleStroke:'#FFFFFF', | |
circleStrokeWidth:1, | |
selCircleFill:'#2ECC71', | |
selCircleStroke:'#FFFFFF', | |
selCircleStrokeWidth:1, | |
lineStrokeWidth:2, | |
filterLineStrokeWidth:2, | |
nodeTextColor:"#ffff00" | |
}; | |
var screePlotDataOptions = { | |
factorSelected:3 | |
} | |
var screePlot = new ScreePlot(screePlotCSSOptions); | |
screePlot.initialize(); | |
screePlot.render(screePlotData,screePlotDataOptions); | |
function refreshData(){ | |
screePlotData = []; | |
no_of_factors = getRandomInt(3,25) | |
var randomNo=60; | |
for(var i=0; i< no_of_factors;i++){ | |
screePlotData.push({factor:i+1, eigenvalue:randomNo-Math.sqrt(i*70), cumulative_eigenvalue:randomNo+Math.sqrt(i*70)}); | |
} | |
screePlotDataOptions.factorSelected = 3; | |
screePlot.render(screePlotData,screePlotDataOptions); | |
} |
var screePlotData = [ | |
{ | |
"factor": 1, | |
"eigenvalue": 50, | |
"cumulative_eigenvalue":50 | |
}, | |
{ | |
"factor": 2, | |
"eigenvalue": 20, | |
"cumulative_eigenvalue":70 | |
}, | |
{ | |
"factor": 3, | |
"eigenvalue": 10, | |
"cumulative_eigenvalue":80 | |
}, | |
{ | |
"factor": 4, | |
"eigenvalue": 5, | |
"cumulative_eigenvalue":85 | |
}, | |
{ | |
"factor": 5, | |
"eigenvalue": 5, | |
"cumulative_eigenvalue":90 | |
}, | |
{ | |
"factor": 6, | |
"eigenvalue": 3, | |
"cumulative_eigenvalue":93 | |
}, | |
{ | |
"factor": 7, | |
"eigenvalue": 3, | |
"cumulative_eigenvalue":96 | |
}, | |
{ | |
"factor": 8, | |
"eigenvalue": 2, | |
"cumulative_eigenvalue":98 | |
}, | |
{ | |
"factor": 9, | |
"eigenvalue": 1, | |
"cumulative_eigenvalue":99 | |
}, | |
{ | |
"factor": 10, | |
"eigenvalue": 0.5, | |
"cumulative_eigenvalue":99.5 | |
}, | |
{ | |
"factor": 11, | |
"eigenvalue": 0.5, | |
"cumulative_eigenvalue":100 | |
} | |
]; |
a { | |
color: #1e6bb8; | |
text-decoration: none; | |
} | |
a:hover { | |
text-decoration: underline; | |
} | |
.page-header { | |
color: #fff; | |
text-align: center; | |
background-color: #3498db; | |
background-image: linear-gradient(120deg, #2c3e50, #3498db); | |
} | |
.project-name { | |
margin-top: 0; | |
margin-bottom: 0.1rem; | |
} | |
.project-tagline { | |
margin-bottom: 2rem; | |
font-weight: normal; | |
opacity: 0.7; | |
} | |
.btn { | |
display: inline-block; | |
margin-bottom: 1rem; | |
color: rgba(255, 255, 255, 0.7); | |
background-color: rgba(255, 255, 255, 0.08); | |
border-color: rgba(255, 255, 255, 0.2); | |
border-style: solid; | |
border-width: 1px; | |
border-radius: 0.3rem; | |
transition: color 0.2s, background-color 0.2s, border-color 0.2s; | |
} | |
.btn:hover { | |
color: rgba(255, 255, 255, 0.8); | |
text-decoration: none; | |
background-color: rgba(255, 255, 255, 0.2); | |
border-color: rgba(255, 255, 255, 0.3); | |
} | |
.btn + .btn { | |
margin-left: 1rem; | |
} | |
@media screen and (min-width: 64em) { | |
.btn { | |
padding: 0.75rem 1rem; | |
margin-right: 2rem; | |
} | |
.project-name { | |
font-size: 2.25rem; | |
} | |
.project-tagline { | |
font-size: 1.25rem; | |
} | |
.page-header { | |
padding: 4rem 3rem; | |
} | |
} | |
@media screen and (min-width: 42em) and (max-width: 64em) { | |
.btn { | |
padding: 0.6rem 0.9rem; | |
font-size: 0.9rem; | |
} | |
.project-tagline { | |
font-size: 1.15rem; | |
} | |
.page-header { | |
padding: 3rem 4rem; | |
} | |
.project-name { | |
font-size: 3.25rem; | |
} | |
.project-name { | |
font-size: 2.25rem; | |
} | |
} | |
@media screen and (max-width: 42em) { | |
.project-tagline { | |
font-size: 1rem; | |
} | |
.project-name { | |
font-size: 1.75rem; | |
} | |
.btn { | |
display: block; | |
width: 100% - 2em; | |
padding: 0.75rem; | |
font-size: 0.9rem; | |
} | |
.btn + .btn { | |
margin-top: 1rem; | |
margin-left: 0; | |
} | |
.page-header { | |
padding: 2rem 1rem; | |
} | |
} | |
table, th, tr, td{ | |
border: 1px solid black; | |
} | |
table, th, tr, td{ | |
border: 1px solid black; | |
padding: 5px; | |
} | |
table{ | |
width: 100%; | |
border-collapse: collapse; | |
} | |
input{ | |
width:30px; | |
} | |
td{ | |
padding: 8px; | |
border: 1px solid black; | |
text-align: center; | |
font-size:12px; | |
} |