A Pen by Michael Calkins.

A-Pen-by-Michael-Calkins.markdown

A Pen by Michael Calkins

A Pen by Michael Calkins on CodePen.

License.

index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">  

<div id="status" style="z-index:1000;position:fixed;right:100px;"></div>

<div class='container-fluid' style='margin: auto 20px;'>
	<div class='row-fluid'>
		<div class='span12'>
			<div class='module grass-light'>
				<div class='module-content'>
					<div
						id="container"
						style="min-width: 310px; height: 300px; margin: 0 auto"></div>
				</div>
			</div>
		</div>
	</div>

	<div class='row-fluid'>
		<div class='span8'>
			<div class='module module-hidden aqua-light'>
				<i class='icon-star module-background-icon'></i>

				<div class='module-foreground'>
					<div class='module-content-small mtm mbn'>
						<h4>Leaderboard</h4>
					</div>
					<table id='table' class='table'>
						<thead>
							<tr>
                <th>Name</th>
								<th>Level</th>
								<th>Focus Level</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
		</div>
    <div class='span4'>
      <div class='module'>
        <div class='module lavender-light'>
          <div class='module-content'>
            <h4>Codeivation Playlist</h4>
            <iframe src="https://embed.spotify.com/?uri=spotify:user:1213250937:playlist:527OXOCPE1DRbKUbhwPXEd" width="100%" height="380" frameborder="0" class=' mtl mbl' allowtransparency="true"></iframe>
          </div>
        </div>
      </div>
    </div>
	</div>
</div>

script.js

function loadLeaderboard() {
		var message = $('<span>').html('loading..');
		$('#status').append(message);
		message.hide('slow');

		var names = [
			'michaeljcalkins',
			'paul',
			'jbrooksuk',
			'poseidon4o',
			'alexpereap',
			'WanderingMonad',
			'neamar',
			'efernie',
			'bhappyz',
			'mirceam94',
		];

		var table = $('table').find('tbody');
		table.html('');

		var i = 0,
			limit = names.length,
			tableData = [],
			chartData = [];

		function SortByLevel(a, b){
			var aLevel = parseFloat(a.level);
			var bLevel = parseFloat(b.level);
			//reverse sort
			var result = ((aLevel > bLevel) ? -1 : ((aLevel < bLevel) ? 1 : 0));

			return result;
		}

		function renderTable(tableData) {
			tableData.sort(SortByLevel);

			$.each(tableData, function(key,data) {
				var tr = $('<tr>');
				tr.append("<td>" + data.name +
					(data.programming_now ? " <span data-toggle='tooltip' title='Programming now' class='badge grass-light'>&nbsp;</span> " : "") +
					(data.streaking_now ? " <span data-toggle='tooltip' title='In the flow' class='badge lavender-light'>&nbsp;</span> " : "") +
					(data.current_language ? " <span data-toggle='tooltip' title='Currently language' class='badge cloud-light'>" + data.current_language + "</span> " : '') +
					"</td>");
				tr.append("<td class='sortnr'>" + data.level + "</td>");
				tr.append("<td>" + data.focus_level + "</td>");
				table.append(tr);
			});

			$(document).tooltip({
		      selector: "[data-toggle=tooltip]"
		    });
		}

		function renderChart(chartData) {
      chartData.sort(SortByLevel);
      var series = $.map(chartData, function(data) {
        return {
            name: data.name,
            data: [
              [
                +data.level, 
                +data.focus_level
              ]
            ]
          };
      });
      
      var chart = $('#container').highcharts({
				chart: {
					type: 'scatter',
					zoomType: 'xy'
				},
				title: {
					text: 'Level Vs. Focus Level (Programming Efficiency)'
				},
				xAxis: {
					title: {
						enabled: true,
						text: 'Level'
					},
					startOnTick: true,
					endOnTick: true,
					showLastLabel: true
				},
				yAxis: {
					title: {
						text: 'Focus Level'
					}
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'middle',
					backgroundColor: '#FFFFFF',
					borderWidth: 0,
					itemMarginTop: 5,
					itemMarginBottom: 5,
				},
				plotOptions: {
					scatter: {
						marker: {
							radius: 6,
							states: {
								hover: {
									radius: 10,
									enabled: true,
									lineColor: 'rgb(100,100,100)'
								}
							}
						},
						states: {
							hover: {
								marker: {
									enabled: false
								}
							}
						},
						tooltip: {
							headerFormat: '<b>{series.name}</b><br>',
							pointFormat: 'Level: {point.x}<br>Focus Level: {point.y}'
						}
					}
				},
				series: series
			});
		}

		$.each(names, function(key, name) {
			$.getJSON('http://codeivate.com/users/' + name + '.json?callback=?', function(data) {
				i++;

				tableData.push(data);

				if(i == limit) {
					renderTable(tableData);
					renderChart(tableData);
				}
			});
		});
	}

	$(document).ready(function(){
		loadLeaderboard();
		setInterval(function() {
			loadLeaderboard();
		}, 120000);
	});

style.css

body {
  padding: 20px 0 0 0;  
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 300 !important;
  margin: 0 0 10px 0 !important;
}

hr {
  margin: 10px 0 !important;
}

.table-fixed {
  float: left;
  table-layout: fixed;
  width: 100%;
}

  table.text-center td {
    text-align: center !important;
  }

    .row-slide td {
      padding: 0;
      vertical-align: top;
    }

.module {
  border-radius: 6px;
  margin-bottom: 15px;
  position: relative;
  width: 100%;
}

.module.module-hidden {
  overflow: hidden;
}

.module.module-medium, .module.module-large, .module.module-xlarge {
  display: block;
  float: left;
}

.module.module-medium {
  width: 163px;
}

.module.module-large {
  width: 224px;
}

.module.module-xlarge {
  width: 283px;
}

  .module .module-image {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 6px 0 0 6px;
    position: absolute;
    top: 0;
    bottom: 0;
  }

  .module .module-image-top {
    height: 150px;
    position: relative;
  }

  .module i.module-background-icon {
    position: absolute;
    font-size: 250px;
    top: -70px;
    left: -70px;
    z-index: 0;
  }

  .module .module-foreground {
    position: relative;
    z-index: 1;
  }

  .module .module-image-top.module-image-large {
    height: 200px;
  }

  .module .module-image-top.module-image-xlarge {
    height: 250px;
  }

  .module .module-image-top.module-image-xxlarge {
    height: 300px;
  }

    .module .module-image-top .module-image {
      border-radius: 6px 6px 0 0;
      left: 0;
      right: 0;
    }

  .module .module-content {
    padding: 15px;
  }

  .module .module-content-small {
    padding: 5px 15px;
  }

  .module .module-content.module-content-large {
    padding: 50px 20px;
  }

  .module input, .module textarea {
    box-shadow: none !important;
    border: 1px solid #eee !important;
  }

.module .nav-tabs a {
  border: 0 !important;
  color: white !important;
}

.module .btn {
  background-image: none;
  background-gradient: none;
  border: 0;
  padding: 8px 12px;
}

.module > *:last-child,
.module > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child {
  margin: 0 !important;
}

.progress-small {
  margin: 0 !important;
  border-radius: 0 !important;
}

.module > .progress-small {
  height: 22px !important;
  border-radius: 0 0 6px 6px !important;
}

.module.module-square {
  border-radius: 0;
}

  .module.module-square > .progress-small {
    border-radius: 0 !important;
  }

.colorblock {
  height: 80px;
  line-height: 80px;
  font-weight: 300;
  font-size: 1.5em;
  text-align: center;
  float: left;
  width: 50%;
}

.row-slide {
  overflow-x: scroll;
  overflow-y: hidden;
  max-height: 200px !important;
}


/**
 *
 *  Grass
 *
 */
.btn.grass-light, .btn.grass-dark,
.btn.bittersweet-light, .btn.bittersweet-dark,
.btn.lavender-light, .btn.lavender-dark,
.btn.aqua-light, .btn.aqua-dark,
.btn.cloud-dark {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
}

.grass-light {
  background: #A0D468 !important;
  color: #f3f4f5 !important;
}

.grass-dark {
  background: #8CC152 !important;
  color: white !important;
}

.module.grass-light .nav-tabs a:hover,
.module.grass-light .nav-tabs a.active {
  background: #8CC152 !important;
}

.module.grass-dark .nav-tabs a:hover,
.module.grass-dark .nav-tabs a.active {
  background: #A0D468 !important;
}

.module.grass-light i.module-background-icon {
  color: #8CC152 !important;
}

.module.grass-dark i.module-background-icon {
  color: #A0D468 !important;
}


/**
 *
 *  Bittersweet
 *
 */
.bittersweet-light {
  background: #f06e51 !important;
  color: white !important;
}

.bittersweet-dark {
  background: #e9573f !important;
  color: white !important;
}

.module.bittersweet-light .nav-tabs a:hover,
.module.bittersweet-light .nav-tabs a.active {
  background: #e9573f !important;
}

.module.bittersweet-dark .nav-tabs a:hover,
.module.bittersweet-dark .nav-tabs a.active {
  background: #f06e51 !important;
}

.module.bittersweet-light i.module-background-icon {
  color: #e9573f !important;
}

.module.bittersweet-light i.module-background-icon {
  color: #f06e51 !important;
}


/**
 *
 *  lavender
 *
 */
.lavender-light {
  background: #ac92ec !important;
  color: white !important;
}

.lavender-dark {
  background: #967adc !important;
  color: white !important;
}

.module.lavender-light .nav-tabs a:hover,
.module.lavender-light .nav-tabs a.active {
  background: #967adc !important;
}

.module.lavender-dark .nav-tabs a:hover,
.module.lavender-dark .nav-tabs a.active {
  background: #ac92ec !important;
}

.module.lavender-light i.module-background-icon {
  color: #967adc !important;
}

.module.lavender-dark i.module-background-icon {
  color: #ac92ec !important;
}


/**
 *
 *  Cloud
 *
 */
.cloud-light {
  background: #ecf0f1 !important;
  color: #474747 !important;
}

.cloud-dark {
  background: #bdc3c7 !important;
  color: white !important;
}

.module.cloud-light .nav-tabs a:hover,
.module.cloud-light .nav-tabs a.active {
  background: #ecf0f1 !important;
}

.module.cloud-dark .nav-tabs a:hover,
.module.cloud-dark .nav-tabs a.active {
  background: #bdc3c7 !important;
}

.module.cloud-light i.module-background-icon {
  color: #ecf0f1 !important;
}

.module.cloud-dark i.module-background-icon {
  color: #bdc3c7 !important;
}


/**
 *
 *  Aqua
 *
 */
.aqua-light {
  background: #4dc1e9 !important;
  color: white !important;
}

.aqua-dark {
  background: #3bafda !important;
  color: white !important;
}

.module.aqua-light .nav-tabs a:hover,
.module.aqua-light .nav-tabs a.active {
  background: #3bafda !important;
}

.module.aqua-dark .nav-tabs a:hover,
.module.aqua-dark .nav-tabs a.active {
  background: #4dc1e9 !important;
}

.module.aqua-light i.module-background-icon {
  color: #3bafda !important;
}

.module.aqua-dark i.module-background-icon {
  color: #4dc1e9 !important;
}


/* Margin Bottom Small/Medium/Large */
.mbn { margin-bottom: 0px !important; }
.mbs { margin-bottom: 5px; }
.mbm { margin-bottom: 10px; }
.mbl { margin-bottom: 15px; }

/* Margin Top Small/Medium/Large */
.mtn { margin-top: 0px !important; }
.mts { margin-top: 5px; }
.mtm { margin-top: 10px; }
.mtl { margin-top: 15px; }

/* Margin Right Small/Medium/Large */
.mrn { margin-right: 0px !important; }
.mrs { margin-right: 5px; }
.mrm { margin-right: 10px; }
.mrl { margin-right: 15px; }

/* Margin Right Small/Medium/Large */
.mln { margin-left: 0px !important; }
.mls { margin-left: 5px; }
.mlm { margin-left: 10px; }
.mll { margin-left: 15px; }