svg{
  font: 12px sans-serif;
  background-color: #eee;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: #333;
}
text{
  font-weight: bolder;
  font-size: 20px;
  fill:#009900; /* テキストの色 */
  stroke: #007700; /* 枠線の色 */
  stroke-width: 1px;  /* 枠線の太さ */
}

// データをもとにcircle描画する
// <circle>の大きさをdatasetの個々のデータに対応させ, 一列に並べる
var dataset = [10, 70, 80, 40, 20, 50, 30]
//var container = d3.select('body')

//var svg = container.append('svg')
var svg = d3.select('body').append('svg')
    .attr('width', 600)
    .attr('height', 500)

svg.selectAll("circle")
    .data(dataset) // データを渡す
    .enter()
    .append('circle')
    .attr('cx', function(data, i) { return i*80} ) // dataに個々のデータ(10,70,80,40,20,50,30)、iにはデータの番号(0〜6)が渡される
    .attr('cy', 100 ) // y座標は全部のcircleで同じ100px
    .attr('r', function(data){ return data }) // 半径の大きさは個々データの値にする[10, 70, 80, 40, 20, 50, 30]
    .style('opacity', 0.3) //透明度