Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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>
Add Comment
Please, Sign In to add comment