Positioning multiple SVG elements in div HTML

Question

I have 2 charts which looks like this:

I need to display the tag-cloud next to the bar-chart. I am using D3 to display these charts and my HTML division looks like this (svg1 displays bar-chart and svg2 displays tag-cloud):

I would appreciate any help. Here is the DEMO. In the demonstration I want circle to appear next to the bar chart.

Thanks!

Answer 1

Why not just float the elements like here on your demo

d3.select("body").append("div")
    .attr("id","area1")
    .style("width", 500)
    .style("float","left");

And

function wordCloud(){
    var wC = {};

    d3.select("body")
    .append("svg")
    .style("float","left")
    .attr("width", 50)
    .attr("height", 50).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");
    return wC;
}