var data = { "red" : [ { "cx" : 50, "cy" : 50, "r" : 20, "fill" : "red" } ],
             "blue" : [ { "cx" : 100, "cy" : 100, "r" : 30, "fill" : "blue" } ],
             "green" : [ { "cx" : 150, "cy" : 150, "r" : 40, "fill" : "green" } ]
           }
var w = 250
var h = 250

var body = d3.select('body')

body.append('select')
  .on('change',updateCircles)
  .selectAll('option')
    .data(d3.keys(data))
    .enter()
  .append('option')
    .attr('value',function (d) { return d })
    .text(function (d) { return d })

body.append('br')

var svg = body.append('svg')
  .attr('width',w)
  .attr('height',h)

var circles = svg.selectAll('circle')
    .data(data.red)
    .enter()
  .append('circle')
    .attr('cx', function (d) { return d.cx })
    .attr('cy', function (d) { return d.cy })
    .attr('r', function (d) { return d.r })
    .attr('fill', function (d) { return d.fill })

function updateCircles() {
  var selectValue = d3.select('select').property('value')
  var data2 = data[selectValue]
  svg.selectAll('circle')
      .data(data2)
      .transition()
      .duration(1000)
      .attr('cx', function (d) { return d.cx })
      .attr('cy', function (d) { return d.cy })
      .attr('r', function (d) { return d.r })
      .attr('fill', function (d) { return d.fill })
}