Protovis Bubble Scatter Chart

Reference: http://vis.stanford.edu/protovis/ex/dot.html

HTML

<script src="http://vis.stanford.edu/protovis/protovis-r3.2.js"></script>
<p>
    <h1>LG UX543 Performance</h1>    
</p>

<div id="center">
    <div id="fig">
        
    </div>

</div>

<script type="text/javascript+protovis">
            
var bullets = [
  {
    title: "",
    ranges: [666, 1300, 2000],
    measures: [400],
    markers: [600]
  }
];
            
            
var format = pv.Format.number();

var vis = new pv.Panel()
    .data(bullets)
    .width('100')
    .height(30)
    .margin(20)
    .left(100);

var bullet = vis.add(pv.Layout.Bullet)
    .orient("left")
    .ranges(function(d) d.ranges)
    .measures(function(d) d.measures)
    .markers(function(d) d.markers);

bullet.range.add(pv.Bar);
bullet.measure.add(pv.Bar);

bullet.marker.add(pv.Dot)
    .shape("triangle")
    .fillStyle("white");

bullet.tick.add(pv.Rule)
  .anchor("bottom").add(pv.Label)
    .text(bullet.x.tickFormat);

bullet.anchor("left").add(pv.Label)
    .font("bold 12px sans-serif")
    .textAlign("right")
    .textBaseline("bottom")
    .text(function(d) d.title);

bullet.anchor("left").add(pv.Label)
    .textStyle("#666")
    .textAlign("right")
    .textBaseline("top")
    .text(function(d) d.subtitle);

vis.render();
            
        </script>

CSS

body {
  margin: 0;
  font: 12px Helvetica Neue, sans-serif;
}

#center {
  vertical-align: middle;
}

#fig {
  width:100%;
  position: relative;
  margin: auto;
}

span {
  display: block !important;
  width: 100%;
  height: 70px;
  overflow: hidden;
}

h1 {
    font-size: 18px;
    font-weight: bold;
}
}