JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3plus/1.9.5/d3plus.full.js"></script>
<input type="button" id="btnUpdate" value="Update"/>

<div id="dv-container">
</div>

JavaScript

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;
        visualization.data(sample_data).draw();
        //this is where I need help to update the chart
    });
});