DOM Graphs - Horizontal Bar

HTML

<div id="domg-wrapper">

</div>

CSS

body {
  width: 100%;
  height: 100%;
  background-color: #dfdfdf;
}


/*   segmented gradient   */

.horiz-bar {
  background: repeat-y url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAUCAYAAABGUvnzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAW0lEQVRo3u3Ryw1AUBRF0cvcJ5GnGhVqzVy8gVpowhWRtQo4Z7CbZd2uSFCGGtnm7ow3lXFP/5j649G9Nvg1gQVGYARGYARGYAQWGIERGIERGIERWGAERmC+5ga6KQapn0kj5QAAAABJRU5ErkJggg==') center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/*
=============================
        DOMG Styles
=============================
*/

.hidden {
  display: none !important;
}

#domg {
  display: block;
  max-width: 800px;
  margin: 0 auto;
  -webkit-user-select: none;
  /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none;
  /* disable the IOS popup when long-press on a link */
}

.horiz-bar-wrapper,
.graph-outer-wrapper {
  padding: 10px;
}

.horiz-bar-wrapper .right {
  float: right;
}

.horiz-bar-wrapper:nth-child(odd) {
  background-color: rgb(224, 242, 247);
}

.horiz-bar,
.bar-fill {
  position: relative;
  height: 20px;
  border: 1px solid #cfcfcf;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.horiz-bar {
  margin: 20px auto 20px auto;
  background-color: #fff;
  display: block;
  border-collapse: collapse;
}

.bar-fill-wrapper {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.horiz-bar,
.bar-fill-wrapper {
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px
}

.bar-fill {
  display: inline-block;
  background-color: rgba(209, 242, 87, .40);
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -ms-transition: width 1s...

JavaScript

var data = [{
  "name": 1,
  "labels": ["left choice", "right choice"],
  "values": [{
    "label": "you",
    "value-pct": 0
  }]
}, {
  "name": 2,
  "labels": ["left choice", "right choice"],
  "values": [{
    "label": "you",
    "value-pct": 100
  }]
}, {
  "name": 3,
  "labels": ["left choice", "right choice"],
  "values": [{
    "label": "you",
    "value-pct": 50
  }]
}, {
  "name": 3,
  "labels": ["left choice", "right choice"],
  "values": [{
    "label": "you",
    "value-pct": 60
  }, {
    "label": "them",
    "value-pct": 51
  }]
}, {
  "name": 4,
  "labels": ["left choice", "right choice"],
  "values": [{
    "label": "you",
    "value-pct": 50
  }, {
    "label": "them min",
    "value-pct": 25
  }, {
    "label": "them avg",
    "value-pct": 75
  }]
}, {
  "name": 5,
  "labels": ["left choice", "right choice"],
  "values": [{
    "label": "you",
    "value-pct": 0
  }, {
    "label": "them min",
    "value-pct": 35
  }, {
    "label": "them avg",
    "value-pct": 9
  }, {
    "label": "them max",
    "value-pct": 100
  }]
}];

var domg = function(data, elem, display_type) {
  this.type = 'bar';
  if (display_type && display_type === 'marker') {
    this.type = 'marker';
  }

  $(elem).empty();
  this.$elem = $('<ol id="domg"/>').appendTo(elem);
  this.data = data;

  if (this.type === 'marker') {
    this.show_markers();
  } else {
    this.show_bars();
  }
};


domg.prototype.show_bars = function() {
  window.console.log('show_bars');
  var self = this;
  $.each(this.data, function(i, item) {
    var $bar_wrapper = $('<li/>')
      .addClass('horiz-bar-wrapper');

    var bar = $('<div/>')
      .addClass('horiz-bar')
      .data('name', item['name']).appendTo($bar_wrapper);

    var sub_label = 'bar_' + item['values'].length;

    $.each(item['values'], function(j, val) {
      var bar_fill_wrapper = $('<div/>')
        .addClass('bar-fill-wrapper')
        .addClass(sub_label)
        .text(val['label']);

      var fill = $('<div/>')
       ...