Name: Meysam Abolghasemi
Three things that I have learnt:
xxxxxxxxxx
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.js"></script>
<style>
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.chart2 {
position: relative;
}
button {
position: absolute;
top:10;
left: 400;
}
</style>
</head>
<body>
<div class="chart1">
</div>
<div class="chart2">
<button type="button"onclick="transit();">Transit</button>
</div>
<script>
var svg2 = d3.select(".chart2")
.append("svg")
.attr("width", 500)
.attr("height", 300);
var star = svg2.append("path")
.attr("transform", "translate(100,120)rotate(0)")
.style("stroke", "blue")
.style("fill", "none")
.attr("d", "m 0,-60 l 20,40 l 40,20 l -40,20 l -20,40 l -20,-40 l -40,-20 l 40,-20 z");
function transit() {
var button = d3.select("button");
if(button.text() =="Transit") {
star
.style("fill", "white")
.transition()
.duration(1000)
.style("fill", "blue")
.attr("transform", "translate(440,120)rotate(180)")
.attr("d", "m 0,-60 l 40,20 l 20,40 l -20,40 l -40,20 l -40,-20 l -20,-40 l 20,-40 z")
.each("end",function() {
svg2.append("circle")
.attr("cx", 440)
.attr("cy", 120)
.attr("r",250)
.style("fill", "green")
.style("opacity", "0")
.transition()
.duration(700)
.attr("r",0)
.style("fill", "yellow")
.style("opacity",1)
.remove();});
d3.select("button").text("Reset");
} else {
d3.select("button").text("Transit");
star
.transition()
.duration(1000)
.attr("transform", "translate(100,120)rotate(0)")
.style("stroke", "blue")
.style("fill", "none")
.attr("d", "m 0,-60 l 20,40 l 40,20 l -40,20 l -20,40 l -20,-40 l -40,-20 l 40,-20 z");
}
};
/*
button.on("click", function() {
mySquare.transition().attr("x",320);
});*/
var w = 500, h = 300;
var padding = 30;
//Dynamic, random dataset
var dataset = [];
var numDataPoints = 50;
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]);
}
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]);
//Create SVG element
var svg = d3.select(".chart1")
.append("svg")
.attr("width", w)
.attr("height", h);
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]);
});
/*
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");
*/
//var formatAsPercentage = d3.format(".1%");
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
//xAxis.tickFormat(formatAsPercentage);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.js