Published
Edited
Nov 8, 2020
Insert cell
Insert cell
Insert cell
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();
}


Insert cell
x_axis = d3.axisBottom( x_scale );
Insert cell
y_axis = d3.axisLeft( y_scale )
.ticks( 5 );
Insert cell
x_scale = d3.scaleLinear()
.domain([0, d3.max(mutable data, function(d){
return d[0];
})])
.range([ padding, chart_width - padding * 2 ]);
Insert cell
y_scale = d3.scaleLinear()
.domain([ 0, d3.max(mutable data, function(d){
return d[1];
})])
.range([ chart_height - padding, padding ]);
Insert cell
chart_width = 800;
Insert cell
chart_height = 400;
Insert cell
padding = 50;
Insert cell
mutable data = [
[ 400, 200 ],
[ 210, 140 ],
[ 722, 300 ],
[ 70, 160 ],
[ 250, 50 ],
[ 110, 280 ],
[ 699, 225 ],
[ 90, 220 ]
];
Insert cell
d3 = require("d3@6")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more