|
|
|
//Part II: transition |
|
var h = 200, |
|
w = 600, |
|
z = 20, |
|
x = w / z, |
|
y = h / z, |
|
barWidth = 50, |
|
barOffset = 5; |
|
|
|
var svgline1 = d3.select('#chart1').append('svg') |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
//Draw some gridline |
|
drawLine(svgline1); |
|
|
|
|
|
|
|
var poly1 = [{"x": 100, "y": 100}, |
|
{"x": 140,"y": 120}, |
|
{"x": 160,"y": 160}, |
|
{"x": 180,"y": 120}, |
|
{"x": 220,"y": 100}, |
|
{"x": 180,"y": 80}, |
|
{"x": 160,"y": 40}, |
|
{"x": 140,"y": 80}]; |
|
|
|
var poly2 = [ |
|
{"x": 210,"y": 70}, |
|
{"x": 230,"y": 80}, |
|
{"x": 250,"y": 70}, |
|
{"x": 260,"y": 50}, |
|
{"x": 250,"y": 30}, |
|
{"x": 230,"y": 20}, |
|
{"x": 210,"y": 30}, |
|
{"x": 200, "y": 50}, |
|
{"x": 210,"y": 70}]; |
|
|
|
|
|
a1 = svgline1.selectAll("rect1") |
|
.attr('class', 'rect1') |
|
.data([poly1]) |
|
.enter().append("polygon") |
|
.attr("points",function(d) { |
|
return d.map(function(d) { |
|
return [d.x ,d.y ].join(","); |
|
}).join(" "); |
|
}) |
|
.attr("fill","blue") |
|
.attr("stroke-width",2); |
|
|
|
a1.on('click',FuncTran); |
|
|
|
var tt = 1; |
|
|
|
function FuncTran() |
|
{ |
|
tt++; |
|
if ( (tt % 2) == 0) |
|
{ |
|
a1.transition() |
|
.duration(1000) |
|
.attr("points",function(d) { |
|
return d.map(function(d,i) { |
|
|
|
return [poly2[i].x * 2 ,poly2[i].y * 2 ].join(","); }).join(" ");}) |
|
|
|
var s_circle = svgline1.append("circle") |
|
.attr("cx",230 * 2) |
|
.attr("cy",50 * 2) |
|
.attr("r",300) |
|
.style("opacity", 0) |
|
.attr('fill','yellow'); |
|
|
|
s_circle.transition() |
|
.duration(1000) |
|
.delay(600) |
|
.style("opacity", 1) |
|
.attr('r',0); |
|
|
|
} |
|
else |
|
{ |
|
a1.transition() |
|
.duration(1000) |
|
.attr("points",function(d) { |
|
return d.map(function(d,i) { |
|
//console.log(poly1[i].x); |
|
return [poly1[i].x ,poly1[i].y ].join(","); }).join(" ");}) |
|
} |
|
|
|
|
|
} |
|
//draw grid line - Hung Do |
|
function drawLine(aaa) |
|
{ |
|
for (i = 0; i < (w/20) + 1; i++) { |
|
aaa.append("line") |
|
.attr("x1", (i * 20)).attr("y1", 0) |
|
.attr("x2", (i * 20)).attr("y2", h) |
|
.attr("stroke", "#eeeeee"); |
|
} |
|
//Draw the grid line - Hung Do |
|
for (i = 0; i < (h/20) + 1; i++) { |
|
aaa.append("line") |
|
.attr("y1", (i * 20)).attr("x1", 0) |
|
.attr("y2", (i * 20)).attr("x2", w) |
|
.attr("stroke", "#eeeeee"); |
|
} |
|
|
|
} |
|
//Part I |
|
//Create SVG element |
|
var w = 600; |
|
var h = 300; |
|
var padding = 30; |
|
|
|
//Dynamic, random dataset |
|
var dataset = []; |
|
var numDataPoints = 20; |
|
var xRange = Math.random() * 1000; |
|
var yRange = Math.random() * 1000; |
|
for (var i = 0; i < numDataPoints; i++) { |
|
var newNumber1 = Math.round(Math.random() * xRange); |
|
var newNumber2 = Math.round(Math.random() * yRange); |
|
dataset.push([newNumber1, newNumber2]); |
|
} |
|
|
|
//Create scale functions |
|
var xScale = d3.scale.linear() |
|
.domain([0, d3.max(dataset, function(d) { return d[0]; })]) |
|
.range([padding, w -padding*2]); |
|
|
|
var yScale = d3.scale.linear() |
|
.domain([0, d3.max(dataset, function(d) { return d[1]; })]) |
|
.range([h - padding, padding]); |
|
|
|
var rScale = d3.scale.linear() |
|
.domain([0, d3.max(dataset, function(d) { return d[1]; })]) |
|
.range([2, 5]); |
|
|
|
|
|
var xAxis = d3.svg.axis() |
|
.scale(xScale) |
|
.orient("bottom") |
|
.ticks(5); //Set rough # of ticks |
|
|
|
//Define Y axis |
|
var yAxis = d3.svg.axis() |
|
.scale(yScale) |
|
.orient("left") |
|
.ticks(5); |
|
|
|
//Create SVG element |
|
|
|
|
|
|
|
var svg = d3.select('#scale').append('svg') |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
|
|
//Create circles |
|
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 rScale(d[1]); |
|
}); |
|
|
|
|
|
//Create labels |
|
svg.selectAll("text") |
|
.data(dataset) |
|
.enter() |
|
.append("text") |
|
.text(function(d) { |
|
return d[0] + "," + d[1]; |
|
}) |
|
.attr("x", function(d) { |
|
return xScale(d[0]); |
|
}) |
|
.attr("y", function(d) { |
|
return yScale(d[1]); |
|
}) |
|
.attr("font-family", "sans-serif") |
|
.attr("font-size", "11px") |
|
.attr("fill", "red"); |
|
|
|
//Create X axis |
|
svg.append("g") |
|
.attr("class", "axis") |
|
.attr("transform", "translate(0," + (h - padding) + ")") |
|
.call(xAxis); |
|
|
|
//Create Y axis |
|
svg.append("g") |
|
.attr("class", "axis") |
|
.attr("transform", "translate(" + padding + ",0)") |
|
.call(yAxis); |
