xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title Here</title>
<script type="text/javascript" src="../d3.v3/d3.v3.js"></script>
<style type="text/css">
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text{
font-family:sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script type="text/javascript">
var dataset;
var points;
var w=1200;
var h=605;
var padding=40;
var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);
var dataset=[];
var xRange = Math.random()*1000;
var yRange = Math.random()*1000;
var xAxis;
var yAxis;
for(var i =0; i<100; i++){
pointArray=[];
pointArray.push(Math.floor(Math.random()*xRange+padding));
pointArray.push(Math.floor(Math.random()*yRange));
dataset.push(pointArray);
}
var xScale = d3.scale.linear()
.domain([0,d3.max(dataset,function(d){
return d[0];
})])
.range([padding+5,w-padding]);
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset,function(d){
return d[1];
})])
.range([h-padding-10,padding]);
xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left"); //orientation for labels
svg.append("g")
.attr("class","x axis")
.attr("transform","translate("+padding+","+(h-padding)+")")
.call(xAxis);
svg.append("g")
.attr("class","y axis")
.attr("transform", "translate("+padding+","+-10+")")
.call(yAxis);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d){
return xScale(d[0]);
})
.attr("cy",function(d){
return yScale(d[1]);
})
.attr("r",function(d){
return Math.sqrt(h-yScale(d[1]));
})
.attr("fill",function(d){
return "rgb("+d[0]*2+",0,0)";
});
svg.selectAll("circle")
.on("click",function(d){
xRange2 = Math.random()*1000;
yRange2 = Math.random()*1000;
newData = []
for(var i =0; i<100; i++){
pArray=[];
pArray.push(Math.floor(Math.random()*xRange2));
pArray.push(Math.floor(Math.random()*yRange2));
newData.push(pArray);
}
yScale2 = d3.scale.linear().domain([0,d3.max(newData,function(d){
return d[1];
})])
.range([h-padding-10,padding]);
var maxRadius = d3.max(newData,function(d){
return Math.sqrt(h-yScale2(d[1]));
});
xScale2 = d3.scale.linear().domain([0,d3.max(newData,function(d){
return d[0];
})])
.range([padding+maxRadius,w-padding]);
xAxis = d3.svg.axis()
.scale(xScale2)
.orient("bottom");
yAxis = d3.svg.axis()
.scale(yScale2)
.orient("left"); //orientation for labels
svg.select(".x.axis")
.transition()
.duration(100)
.call(xAxis);
svg.select(".y.axis")
.transition()
.duration(100)
.call(yAxis);
svg.selectAll("circle")
.data(newData)
.transition()
.duration(1000)
.attr("fill",function(d){
return "rgb(0,0,"+d[0]*2+")";
})
.attr("cx",function(d){
return xScale2(d[0]);
})
.attr("cy",function(d){
if(d[1]>=0){
return yScale2(d[1]);
}
else{
return h-50;
}
})
.attr("r",function(d){
if(d[1]>=0){
return Math.sqrt(h-yScale2(d[1]));
}
else{
return 0;
}
});
});
</script>
</body>
</html>