Adding d3 script to div - html

Question

I have different <div> and i am trying to put in some d3 <script>
Here are my div
<div id="pagepiling">
<div id = "frequence" class="section" id="section1"></div>
<div id = "menu" class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
</div>
and here my d3 for #frequence
<script>
var frequ = [];
d3.xml("database_menus.xml", "application/xml", function(xml) {
var dataset = [];
var data = xml.documentElement,
sections = data.getElementsByTagName("menubar");
for (var i = 0, lenS = sections.length; i < lenS; i++) {
nom = sections[i].getAttribute("appname");
dataset.push(nom);
frequ[nom] = (Math.random()*20)+15;
}
var fill = d3.scale.category20b();
var width = window.innerWidth,
height = window.innerHeight;
d3.layout.cloud().size([width,height])
.words(dataset.map(function(d) {return {text: d, size: frequ[d]}}))
.padding(5)
.rotate(function() { return ~~(Math.random() * 2)})
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
function draw(words) {
words.sort(compare);
var text = d3.select("#frequence").append("svg")
.attr("width", width)
.attr("height", height)
.attr("x", 500)
.append("g")
.attr("transform", "translate("+(width/2)+","+(height/2)+")")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Berlin Sans Fb")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.style("text-anchor", "middle")
.on("click", function(d){ var url ='strt_visu_boxes.html?app=';
//modifier " " en "_"
var t ="";
for (var i=0; i<d.text.length;i++){
if (d.text[i]==" "){
t += "_";
} else {
t += d.text[i];
}
}
url += t;
//window.location = url;
})
.on("mouseover", function(d) {
d3.select(this).style("font-size", function(d) {
if (d.size>20){
return d.size*1.5 + "px";
} else {
return d.size*2 + "px";
} })})
.on("mouseout", function(d) { d3.select(this).style("font-size", function(d) { return d.size + "px"; })})
.text(function(d) { return d.text; });
//fly-in animation
text.transition().duration(3000).attr("transform", function(d) {return "translate(" + [d.x, d.y] + ")";}).ease("elastic")
}
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.style("font-size", 50);
}
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.style("font-size", 10);
}
function compare(a,b) {
if (a.text < b.text)
return -1;
if (a.text > b.text)
return 1;
return 0;
}
});
</script>
I can not see what i am doing wrong...
(I have my code in this order between ..)