Skip to content

Instantly share code, notes, and snippets.

@arpitnarechania

arpitnarechania/README.md

Last active July 26, 2017 16:23
Show Gist options
  • Save arpitnarechania/03d8e7974fc2912f9f9a47de7e7f236f to your computer and use it in GitHub Desktop.
Save arpitnarechania/03d8e7974fc2912f9f9a47de7e7f236f to your computer and use it in GitHub Desktop.
Download ZIP
Screeplot
Raw
README.md
Raw
index.html
<!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>
Raw
main.js
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);
}
Raw
ScreePlotData.js
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
}
];
Raw
style.css
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment