Scalable Vector Graphics (SVG) can be rendered using markup similar to html.
This makes them ideal for rendering graphics based using D3. An SVG element is added to the document, then the data is turned into image elements like circles, lines etc, with attributes like center position, radius, fill color, and opacity.
var w = 500;
var h = 200;
data1 = [50, 60, 70, 30, 20, 10];
data2 = [30, 80, 20, 40];
dataIndex = 1;
var colors = d3.scale.category10();
//Create SVG element
var svg = d3.select("#draw_here")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(data1)
.enter()
.append("circle")
.attr("cx", function (d, i) {
return 75 + (i * 80);
})
.attr("cy", h / 2)
.attr("r", function (d, i) {
return d;
})
.attr("fill", function(d, i) {
return colors(i);
})
.attr("opacity", "0.5");
d3.select("#buttons_here").append("button")
.text("change data")
.on("click",function(){
if (dataIndex==1) {
dataIndex=2;
} else {
dataIndex=1;
}
var circle = svg.selectAll("circle")
.data(eval("data"+dataIndex));
circle.exit().remove();//remove unneeded circles
circle.enter().append("circle")
.attr("r",0);//create any new circles needed
circle.transition()
.duration(500)
.attr("cx", function (d, i) {
return 75 + (i * 80);
})
.attr("cy", h / 2)
.attr("r", function (d, i) {
return d;
})
.attr("fill", function(d, i) {
return colors(i);
});
});//end click function