Top 50 Codepen Users By Follower Count

index.html

<h2>Top 50 Codepen Users by Follower Count</h2>
<p>As of July 26, 2015</p>
<div class="ct-chart"></div>
<h3>Chris Coyier had double the amount of the highest follower count. He's so popular we had to omit him because he was visually skewing the data.</h3>

script.js

new Chartist.Bar('.ct-chart', {
  "series": [2677, 2542, 1456, 1381, 1311, 1084, 1043, 1030, 1011, 1005, 981, 929, 838, 825, 809, 801, 800, 796, 758, 740, 694, 674, 651, 614, 570, 569, 544, 535, 531, 510, 476, 442, 434, 421, 405, 386, 381, 379, 374, 372, 367, 366, 366, 351, 348, 347, 334, 329, 322],
  "labels": ["ionic", "thebabydino", "lbebber", "hakimel", "rachsmith", "SaraSoueidan", "tholman", "GreenSock", "bradfrost", "tmrDevelops", "sdras", "dissimulate", "soulwire", "sol0mka", "chrisgannon", "suez", "HugoGiraudel", "befamous", "jackrugile", "bennettfeely", "Yakudoo", "fbrz", "desandro", "kenjiSpecial", "simurai", "grayghostvisuals", "adobe", "pixelass", "natewiley", "katydecorah", "yoksel", "noahblon", "jakealbaugh", "oknoblich", "Hornebom", "davatron5000", "joshnh", "andreasstorm", "fixcl", "TimPietrusky", "hugo", "juliangarnier", "rachelnabors", "LukyVj", "ge1doot", "jonitrythall", "dudleystorey", "paulirish", "valhead"]
}, {
  distributeSeries: true
});

var $chart = $('.ct-chart');

var $toolTip = $chart
  .append('<div class="tooltip"></div>')
  .find('.tooltip')
  .hide();

$chart.on('mouseenter', '.ct-bar', function() {
  var $point = $(this),
    value = $point.attr('ct:value'),
    seriesName = $point.parent().attr('ct:series-name');
  $toolTip.html(value).show();
});

$chart.on('mouseleave', '.ct-bar', function() {
  $toolTip.hide();
});

$chart.on('mousemove', function(event) {
  $toolTip.css({
    left: (window.pageXOffset + event.originalEvent.clientX) - $toolTip.width() / 2 - 10,
    top: (window.pageYOffset + event.originalEvent.clientY) - $toolTip.height() - 30
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.1/chartist.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/bootstrap.min.js"></script>

style.scss

/* ------------------------------
      best seen full screen:
https://codepen.io/sdras/full/XbybLo/
------------------------------ */

body {
  background: #222;
  color: #777;
  font-family: 'Oxygen';
}

// Scales for responsive SVG containers
$ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
$ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;

// Class names to be used when generating CSS
$ct-class-chart: ct-chart !default;
$ct-class-chart-line: ct-chart-line !default;
$ct-class-chart-bar: ct-chart-bar !default;
$ct-class-horizontal-bars: ct-horizontal-bars !default;
$ct-class-chart-pie: ct-chart-pie !default;
$ct-class-chart-donut: ct-chart-donut !default;
$ct-class-label: ct-label !default;
$ct-class-series: ct-series !default;
$ct-class-line: ct-line !default;
$ct-class-point: ct-point !default;
$ct-class-area: ct-area !default;
$ct-class-bar: ct-bar !default;
$ct-class-slice-pie: ct-slice-pie !default;
$ct-class-slice-donut: ct-slice-donut !default;
$ct-class-grid: ct-grid !default;
$ct-class-vertical: ct-vertical !default;
$ct-class-horizontal: ct-horizontal !default;
$ct-class-start: ct-start !default;
$ct-class-end: ct-end !default;

// Container ratio
$ct-container-ratio: (1/1.618) !default;

// Text styles for labels
$ct-text-color: #777 !default;
$ct-text-size: 0.75rem !default;
$ct-text-align: flex-start !default;
$ct-text-justify: flex-start !default;
$ct-text-line-height: 1;

// Grid styles
$ct-grid-color: rgba(0, 0, 0, 0.2) !default;
$ct-grid-dasharray: 2px !default;
$ct-grid-width: 1px !default;

// Line chart properties
$ct-line-width: 4px !default;
$ct-line-dasharray: false !default;
$ct-point-size: 10px !default;
// Line chart point, can be either round or square
$ct-point-shape: round !default;
// Area fill transparency between 0 and 1
$ct-area-opacity: 0.1 !default;

// Bar chart bar width
$ct-bar-width: 10px !default;

// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
$ct-donut-width: 60px !default;

// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
// should set this property to false
$ct-include-classes: true !default;

// If this is set to true the CSS will contain colored series. You can extend or change the color with the
// properties below
$ct-include-colored-series: $ct-include-classes !default;

// If set to true this will include all responsive container variations using the scales defined at the top of the script
$ct-include-alternative-responsive-containers: $ct-include-classes !default;

// Series names and colors. This can be extended or customized as desired. Just add more series and colors.
$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, aa, bb, cc) !default;
$ct-series-colors: (
  #d70206,
  #f05b4f,
  #f4c63d,
  #d17905,
  #59922b,
  #14846B,
  #0544d3,
  #6b0392,
  #f05b4f,
  #dda458,
  #CE123C,
  #86797d,
  #b2c326,
  #6188e2,
  #a748ca,
  #d70206,
  #f05b4f,
  #f4c63d,
  #d17905,
  #59922b,
  #14846B,
  #0544d3,
  #6b0392,
  #f05b4f,
  #dda458,
  #CE123C,
  #86797d,
  #b2c326,
  #6188e2,
  #a748ca
) !default;

@mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
  display: block;
  position: relative;
  width: $width;

  &:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: $ratio * 100%;
  }

  &:after {
    content: "";
    display: table;
    clear: both;
  }

  > svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
}

@mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
  -webkit-box-align: $ct-text-align;
  -webkit-align-items: $ct-text-align;
  -ms-flex-align: $ct-text-align;
  align-items: $ct-text-align;
  -webkit-box-pack: $ct-text-justify;
  -webkit-justify-content: left;
  -ms-flex-pack: left;
  justify-content: left;
  // Fallback to text-align for non-flex browsers
  @if($ct-text-justify == 'flex-start') {
    text-align: left;
  } @else if ($ct-text-justify == 'flex-end') {
    text-align: left;
  } @else {
    text-align: left;
  }
}

@mixin ct-flex() {
  // Fallback to block
  display: block;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {
  fill: $ct-text-color;
  color: $ct-text-color;
  font-size: $ct-text-size;
  line-height: $ct-text-line-height;
}

@mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {
  stroke: $ct-grid-color;
  stroke-width: $ct-grid-width;

  @if ($ct-grid-dasharray) {
    stroke-dasharray: $ct-grid-dasharray;
  }
}

@mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) {
  stroke-width: $ct-point-size;
  stroke-linecap: $ct-point-shape;
}

@mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) {
  fill: none;
  stroke-width: $ct-line-width;
  transition: 0.5s ease all;

  @if ($ct-line-dasharray) {
    stroke-dasharray: $ct-line-dasharray;
  }
}

@mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
  stroke: none;
  fill-opacity: $ct-area-opacity;
}

@mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
  fill: none;
  stroke-width: $ct-bar-width;
  transition: 0.8s ease-in all;
}

@mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {
  fill: none;
  stroke-width: $ct-donut-width;
}

@mixin ct-chart-series-color($color) {
  .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} {
    stroke: $color;
  }

  .#{$ct-class-slice-pie}, .#{$ct-class-area} {
    fill: $color;
  }
}

@mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) {

  .#{$ct-class-label} {
    @include ct-chart-label($ct-text-color, $ct-text-size);
  }

 .#{$ct-class-chart-line} .#{$ct-class-label},
  .#{$ct-class-chart-bar} .#{$ct-class-label} {
    @include ct-flex();
  }

  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
    @include ct-align-justify(flex-end, flex-start);
    // Fallback for browsers that don't support foreignObjects
    text-anchor: start;
  }

  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
    @include ct-align-justify(flex-start, flex-start);
    // Fallback for browsers that don't support foreignObjects
    text-anchor: start;
  }

  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
    @include ct-align-justify(flex-end, flex-end);
    // Fallback for browsers that don't support foreignObjects
    text-anchor: end;
  }

  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
    @include ct-align-justify(flex-end, flex-start);
    // Fallback for browsers that don't support foreignObjects
    text-anchor: start;
  }

  .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
    @include ct-align-justify(flex-end, center);
    // Fallback for browsers that don't support foreignObjects
    text-anchor: start;
  }

  .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
    @include ct-align-justify(flex-start, center);
    // Fallback for browsers that don't support foreignObjects
    text-anchor: start;
  }

  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
    @include ct-align-justify(flex-end, flex-start);
    // Fallback for browsers that don't support foreignObjects
    text-anchor: start;
  }

  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
    @include ct-align-justify(flex-start, flex-start);
    // Fallback for browsers that don't support foreignObjects
    text-anchor: start;
  }

  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
    //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify);
    @include ct-align-justify(left, flex-end);
    // Fallback for browsers that don't support foreignObjects
    text-anchor: end;
  }

  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
    @include ct-align-justify(left, flex-start);
    // Fallback for browsers that don't support foreignObjects
    text-anchor: end;
  }

  .#{$ct-class-grid} {
    @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
  }

  .#{$ct-class-point} {
    @include ct-chart-point($ct-point-size, $ct-point-shape);
  }

  .#{$ct-class-line} {
    @include ct-chart-line($ct-line-width);
  }

  .#{$ct-class-area} {
    @include ct-chart-area();
  }

  .#{$ct-class-bar} {
    @include ct-chart-bar($ct-bar-width);
  }

  .#{$ct-class-slice-donut} {
    @include ct-chart-donut($ct-donut-width);
  }

  @if $ct-include-colored-series {
    @for $i from 0 to length($ct-series-names) {
      .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
        $color: nth($ct-series-colors, $i + 1);

        @include ct-chart-series-color($color);
      }
    }
  }
}

@if $ct-include-classes {
  @include ct-chart();

  @if $ct-include-alternative-responsive-containers {
    @for $i from 0 to length($ct-scales-names) {
      .#{nth($ct-scales-names, $i + 1)} {
        @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
      }
    }
  }
}

.ct-label.ct-horizontal.ct-end {
  transform: rotate(90deg) translateX(10px);
  transition: 0.35 all ease;
  &:hover {
    color: #999;
    transition: 0.5 all ease;
    cursor: pointer;
  }
}

svg {
  height: 530px !important;
  width: 96% !important;
  margin: 30px;
  padding-bottom: 40px;
}

h2 {
  margin-top: 25px;
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 0;
}

p {
  text-align: center;
  margin-top: 6px;
  color: #444;
}

h3 {
  margin: 80px auto 100px;
  text-align: center;
  margin-left: 15%;
  width: 70%;
}

.ct-bar:hover {
  stroke-width: 15px;
  transition: 0.3s ease-out all;
  cursor: pointer;
}

.ct-series {
  transform-origin: 50% 100%;
}

@for $i from 1 through 50 {
  .ct-series:nth-child(#{$i}) { 
    animation: grow 1s (0.05s * $i) ease-out both;
  }
}

@keyframes grow {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@for $i from 1 through 50 {
  .ct-label.ct-horizontal.ct-end { 
    animation: appear 5s ease-out both;
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.tooltip {
  display: block;
  background: black;
  color: white;
  font-size: 12px;
  width: auto;
  position: absolute;
  border-radius: 3px;
  padding: 10px;
  pointer-events: none;
}

.ct-bar:hover + .ct-label {
  color: #999;
  transition: 0.5 all ease;
  cursor: pointer;
}

svg:not(:root) {
    overflow: visible !important; //silly IE
}

top-50-codepen-users-by-follower-count.markdown

Top 50 Codepen Users By Follower Count

There's been a lot of stat data on codepen users data lately, and some people were curious about follower count. @dizzyd did all the hard stuff and heavy lifting of database-scraping, I just presented the data in a silly fun format.

Best viewed in Chrome.

A Pen by Sarah Drasner on CodePen.

License.