chart={
const svg = d3.create("svg")
.attr( 'width', chart_width )
.attr( 'height', chart_height );
svg.append( 'g' )
.attr( 'class', 'x-axis' )
.attr(
'transform',
'translate(0,' + (chart_height - padding ) + ')'
)
.call( x_axis );
svg.append( 'g' )
.attr( 'class', 'y-axis' )
.attr(
'transform',
'translate( ' + padding + ', 0 )'
)
.call( y_axis );
svg.selectAll( 'circle' )
.data(mutable data )
.enter()
.append( 'circle' )
.attr("shape-rendering",'crispEdges')
.attr("cx", function(d) {
return x_scale(d[0]);
})
.attr("cy", function(d) {
return y_scale(d[1]);
})
.attr("r", 12)
.attr( 'fill', '#D1AB0E' );
//change color of the circle
d3.select("#moveit").on("click", function() {
mutable data=[];
var max_num =Math.random()*1000;
for(var i=0; i<8; i++)
{
var new_x= Math.floor(Math.random()*max_num);
var new_y = Math.floor(Math.random()*max_num);
mutable data.push([new_x,new_y]);
}
x_scale.domain([0,d3.max(mutable data,function(d){
return d[0];
})]);
y_scale.domain([0,d3.max(mutable data,function(d){
return d[1];
})]);
//random color colleciton
var colors= ['#F26D6D','#1E6190','#7559D9','#D1AB03','red','pink']
var color_index=Math.floor( Math.random()*colors.length)
svg.selectAll('circle')
.data(mutable data)
.transition()
.duration(1000)
.attr("cx", function(d) {
return x_scale(d[0]);
})
.attr("cy", function(d) {
return y_scale(d[1]);
})
.transition()
.attr('fill',colors[color_index]);
//update axis
svg.select('.x-axis')
.transition()
.duration(1000)
.call(x_axis);
svg.select('.y-axis')
.transition()
.duration(1000)
.call(y_axis);
})
return svg.node();
}