mayblue9/index.html

## index.html
<html>
  <head>
<style>
    .chart rect {
        fill: steelblue;
    }

        .chart rect:hover {
            fill: turquoise;
        }

    .chart .rectM {
        stroke: green;
        stroke-width: 1;
        fill: green;
        fill-opacity: .2;
    }

        .chart .rectM:hover {
            fill: green;
            fill-opacity: .5;
        }

    .chart text {
        font: 10px sans-serif;
    }

    .chart .title {
        font: 15px sans-serif;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
    </style>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</head>
<body>
<div class="chart"></div>
<script>
var height = 400;
var width = 600;
var margin = 40;
var data =[];
for(var i = 0; i < 42; i++) {
	data.push({
    	x: Math.random() * 400,
        y: Math.random() * 100,
        c: Math.round(Math.random() * 5),
        size: Math.random() * 200,
        });
}

var labelX = 'X';
var labelY = 'Y';
var svg = d3.select('.chart')
                    .append('svg')
                    .attr('class', 'chart')
                    .attr("width", width + margin + margin)
                    .attr("height", height + margin + margin)
                    .append("g")
                    .attr("transform", "translate(" + margin + "," + margin + ")");

var x = d3.scale.linear()
					            .domain([d3.min(data, function (d) { return d.x; }), d3.max(data, function (d) { return d.x; })])
					            .range([0, width]);

var y = d3.scale.linear()
					            .domain([d3.min(data, function (d) { return d.y; }), d3.max(data, function (d) { return d.y; })])
					            .range([height, 0]);

var scale = d3.scale.sqrt()
					            .domain([d3.min(data, function (d) { return d.size; }), d3.max(data, function (d) { return d.size; })])
					            .range([1, 20]);

var opacity = d3.scale.sqrt()
					            .domain([d3.min(data, function (d) { return d.size; }), d3.max(data, function (d) { return d.size; })])
					            .range([1, .5]);

var color = d3.scale.category10();

var xAxis = d3.svg.axis().scale(x);
 var yAxis = d3.svg.axis().scale(y).orient("left");

  svg.append("g")
					        .attr("class", "y axis")
					        .call(yAxis)
					        .append("text")
						        .attr("transform", "rotate(-90)")
						        .attr("x", 20)
						        .attr("y", -margin)
						        .attr("dy", ".71em")
						        .style("text-anchor", "end")
						        .text(labelY);
                          // x axis and label
                          svg.append("g")
                              .attr("class", "x axis")
                              .attr("transform", "translate(0," + height + ")")
                              .call(xAxis)
                              .append("text")
                                  .attr("x", width + 20)
                                  .attr("y", margin - 10)
                                  .attr("dy", ".71em")
                                  .style("text-anchor", "end")
                                  .text(labelX);

svg.selectAll("circle")
                              .data(data)
                              .enter()
                              .insert("circle")
                              .attr("cx", width / 2)
                              .attr("cy", height / 2)
                              .attr("opacity", function (d) { return opacity(d.size); })
                              .attr("r", function (d) { return scale(d.size); })
                              .style("fill", function (d) { return color(d.c); })
                              .on('mouseover', function (d, i) {
                                  fade(d.c, .1);
                              })
                             .on('mouseout', function (d, i) {
                                 fadeOut();
                             })
                             .transition()
                            .delay(function (d, i) { return x(d.x) - y(d.y); })
                            .duration(500)
                            .attr("cx", function (d) { return x(d.x); })
                            .attr("cy", function (d) { return y(d.y); })
                            .ease("bounce");


function fade(c, opacity) {
                              svg.selectAll("circle")
                                  .filter(function (d) {
                                      return d.c != c;
                                  })
                                .transition()
                                 .style("opacity", opacity);
                          }

                          function fadeOut() {
                              svg.selectAll("circle")
                              .transition()
                                 .style("opacity", function (d) { opacity(d.size); });
                          }
</script>
</body>
</html>
	<html>
	<head>
	<style>
	.chart rect {
	fill: steelblue;
	}

	.chart rect:hover {
	fill: turquoise;
	}

	.chart .rectM {
	stroke: green;
	stroke-width: 1;
	fill: green;
	fill-opacity: .2;
	}

	.chart .rectM:hover {
	fill: green;
	fill-opacity: .5;
	}

	.chart text {
	font: 10px sans-serif;
	}

	.chart .title {
	font: 15px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	</style>

	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
	</head>
	<body>
	<div class="chart"></div>
	<script>
	var height = 400;
	var width = 600;
	var margin = 40;
	var data =[];
	for(var i = 0; i < 42; i++) {
	data.push({
	x: Math.random() * 400,
	y: Math.random() * 100,
	c: Math.round(Math.random() * 5),
	size: Math.random() * 200,
	});
	}

	var labelX = 'X';
	var labelY = 'Y';
	var svg = d3.select('.chart')
	.append('svg')
	.attr('class', 'chart')
	.attr("width", width + margin + margin)
	.attr("height", height + margin + margin)
	.append("g")
	.attr("transform", "translate(" + margin + "," + margin + ")");

	var x = d3.scale.linear()
	.domain([d3.min(data, function (d) { return d.x; }), d3.max(data, function (d) { return d.x; })])
	.range([0, width]);

	var y = d3.scale.linear()
	.domain([d3.min(data, function (d) { return d.y; }), d3.max(data, function (d) { return d.y; })])
	.range([height, 0]);

	var scale = d3.scale.sqrt()
	.domain([d3.min(data, function (d) { return d.size; }), d3.max(data, function (d) { return d.size; })])
	.range([1, 20]);

	var opacity = d3.scale.sqrt()
	.domain([d3.min(data, function (d) { return d.size; }), d3.max(data, function (d) { return d.size; })])
	.range([1, .5]);

	var color = d3.scale.category10();

	var xAxis = d3.svg.axis().scale(x);
	var yAxis = d3.svg.axis().scale(y).orient("left");

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("x", 20)
	.attr("y", -margin)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text(labelY);
	// x axis and label
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("x", width + 20)
	.attr("y", margin - 10)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text(labelX);

	svg.selectAll("circle")
	.data(data)
	.enter()
	.insert("circle")
	.attr("cx", width / 2)
	.attr("cy", height / 2)
	.attr("opacity", function (d) { return opacity(d.size); })
	.attr("r", function (d) { return scale(d.size); })
	.style("fill", function (d) { return color(d.c); })
	.on('mouseover', function (d, i) {
	fade(d.c, .1);
	})
	.on('mouseout', function (d, i) {
	fadeOut();
	})
	.transition()
	.delay(function (d, i) { return x(d.x) - y(d.y); })
	.duration(500)
	.attr("cx", function (d) { return x(d.x); })
	.attr("cy", function (d) { return y(d.y); })
	.ease("bounce");


	function fade(c, opacity) {
	svg.selectAll("circle")
	.filter(function (d) {
	return d.c != c;
	})
	.transition()
	.style("opacity", opacity);
	}

	function fadeOut() {
	svg.selectAll("circle")
	.transition()
	.style("opacity", function (d) { opacity(d.size); });
	}
	</script>
	</body>
	</html>