d3 js transition not working - ajax

Question

i'm trying to create a graph in d3.js after taking data from views.py in Django:
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="x_panel tile fixed_height_320 overflow_hidden">
<div class="x_title">
<h2>Power</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>Settings 1
</li>
<li>Settings 2
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table class="" style="width:100%">
<tr>
<td id="area1" role="button">
<script>
$('#area1').ready(function(){
$.ajax({
type:'GET',
url:'/',
contentType: "application/json; charset=utf-8",
dataType: 'json',
success : function(data)
{
var width = 250,
height = 250,
twoPi = 2 * Math.PI;
var arc1 = d3.svg.arc()
.innerRadius(100)
.outerRadius(120)
.startAngle(0);
var svg1 = d3.select("#area1").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var meter1 = svg1.append("g")
.attr("class", "season-progress");
var background = meter1.append("path")
.datum({endAngle: twoPi})
.style("fill", "#ffb74d")
.attr("d", arc1);
var foreground = meter1.append("path")
.datum({endAngle:0})
.style("fill", "#e65100")
.attr("class", "foreground")
.attr("d", arc1);
foreground.transition()
.duration(1000)
.ease("linear")
.attrTween("d", function(d) {
var interpolate = d3.interpolate(d.endAngle, twoPi * data['ITPOWER'] / data['AVAILABLEPOWER']);
return function(t) {
d.endAngle = interpolate(t);
return arc1(d);
}
});
var text = meter1.append("text")
.attr("text-anchor", "middle")
.attr("dy", "1.5em")
.attr("font-size", "18")
.style('fill','#4B515D')
.text('PuE');
var line2 = meter1.append("text")
.attr("text-anchor", "middle")
.attr("dy", ".10em")
.attr("font-size", "30")
.style('fill','#4B515D')
.text(Math.round(data["PuE"]*100)/100);
}
});
});
</script>
</td>
<td>
<table class="tile_info">
<tr>
<td>
<p> </p>
</td>
<td></td>
</tr>
<tr>
<td>
<p style="color:#e65100;">Used </p>
</td>
<td >{{ power.ITPOWER }}kWh</td>
</tr>
<tr>
<td>
<p style="color:#ffb74d;">Available </p>
</td>
<td>{{ power.AVAILABLEPOWER }}kWh</td>
</tr>
<tr>
<td>
<p style="color:#4B515D;">Usage </p>
</td>
<td>15%</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
I'm getting this :
my complete web page
but when I try the same thing with just the graph on the html page, I get what I wanted:
the transition is getting executed here,but not in the first case
Please explain why I'm able to see the transition when the graph is the only element on the html page and not otherwise.

Answer 1

I was using a bootstrap template available online.This template was using Jquery for other elements on the web page.These were messing my d3.js graph. I deleted those elements as I did not need them.