C3 Bubble Charts

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="//rawgit.com/nbremer/801c4bb101e86d19a1d0/raw/4b9386068e5af5d8bb115381639acd7df43162b3/worldbank.js"></script>
<script src="//rawgit.com/ramnathv/7a3bb69b72492ac0d04f/raw/bc58997e35f7cae740c6a57cbb145028537aa62c/testdata.js"></script>
<div id="chart2">
    
</div>

CSS

.c3 svg {
  font-family: 'Arial' !important;
}
.c3-axis path,
.c3-axis line{
  stroke: #aaa;
}
.c3-axis text{
  fill: #aaa;
}
/* use blue background on tooltip header */
.c3-tooltip th {
  background-color: steelblue;
}
/* remove border from legend */
.c3-legend-background {
  stroke: none;
}
.c3-axis-x .tick line{
  stroke: transparent;
}
.c3-axis-y .tick line{
  stroke: transparent;
}
.c3-axis-y path{
  stroke: transparent;
}
.c3-ygrid {
  stroke-dasharray: 3 0;
  stroke: gray;
  stroke-opacity: 0.5;
}

#chart2{
  width: 400px;
  height: 200px;
}

CoffeeScript

data2 = [
  {x: 1, y1: 2, y2: 3},
  {x: 2, y1: 4, y2: 6}
]



countries.forEach (d) ->
  d.GDP_perCapita = Math.log(d.GDP_perCapita)

chart = c3.generate
  bindto: "#chart2"
  width: '80%'
  data:
    json: data2
    keys: 
      x: 'x'
      value: ['y1', 'y2']
    type: 'scatter'