D3 Plus - Dynamically changing the position of data points in Scatter Plot

Question

I need to update the X and Y coordinates of a data point on click event and move it to new position on plot.

Code:

var sample_data = [
  {"value": 100, "weight": .45, "type": "alpha"},
  {"value": 70, "weight": .60, "type": "beta"},
  {"value": 40, "weight": 0.80, "type": "gamma"},
  {"value": 15, "weight": .32, "type": "delta"}
];

$(function(){
  var visualization = d3plus.viz()
                            .container("#dv-container")
                            .data(sample_data)
                            .type("scatter")
                            .id("type")
                            .x("value")
                            .y("weight")
                            .height(400)
                            .width(600)
                            .draw();

  $("#btnUpdate").click(function(){
    //update the value of first data point
    sample_data[0].value = 50;
    sample_data[0].weight = 0.5;

    //this is where I need help to update the chart
  });
});

Fiddle

Answer 1

Do visualization.data(sample_data).draw(); for redrawing on button click:

 $("#btnUpdate").click(function(){
        //update the value of first data point
        sample_data[0].value = 50;
        sample_data[0].weight = 0.5;
        //redraw
        visualization.data(sample_data).draw();
    });

working code here