fisheye “GYOGAN”?

I’m newbei of javascript.
There are lots of libraries. And I’m interested in D3.js.
D3.js is a JavaScript library for manipulating documents based on data, and lots of plug-ins are.
Today I made simple scatter plot with fisheye.
Fisheye.js is plug-in of D3.js and it can distortion magnifies the local region around the mouse,
OK Let’s try.
I wrote following code in test.html.

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="utf-8">
   <title>D3 page template</title>
   <script type="text/javascript" src="d3/d3.min.js"></script>
   <script type="text/javascript" src="d3-plugins/fisheye/fisheye.js"></script>
 
 
   </head>

  <body>
    <script type="text/javascript">
    var fisheye = d3.fisheye.circular()
	            .radius(300)
	            .distortion(2);

    var w = 400;
    var h = 400;
    var svg = d3.select("body")
                .append("svg")
		.attr("width",w)
		.attr("height",h);

    var dataset =[
                 [5,20],
		 [480,90],
		 [250,50],
		 [100,33],
		 [330,95],
		 [410,12],
		 [475,44],
		 [25,67],
		 [85,21],
		 [220,88]
		 ];
    var padding = 30;

    var xScale = d3.scale.linear()
	           .domain([0, d3.max(dataset, function(d){
					   return d[0];})])
		   .range([padding, w-padding]);
    var yScale = d3.scale.linear()
	           .domain([0, d3.max(dataset, function(d){
					   return d[1];})])
		   .range([h-padding, padding]);

    var circles = svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       .datum( function(d){
		       return{ x:xScale(d[0]), y: yScale(d[1])}
		       })
       .attr("cx", function(d){
		return d.x;
		})	
       .attr("cy", function(d){
		       return d.y;
		       })
        .attr("fill", "blue")
	.attr("r", 20);

     svg.on("mousemove", function(){
		       fisheye.focus(d3.mouse(this));	
     circles.each( function(d){ d.fisheye = fisheye(d); })
            .attr("cx", function(d){ return d.fisheye.x; })
	    .attr("cy", function(d){ return d.fisheye.y; })
	    .attr("r", function(d){ return d.fisheye.z * 20;});
	    });

    </script>


  </body >
</html>

OK, then I start up local server using python.
And access test.html.

python -m SimpleHTTPServer

Depend on mouse move, dot near the mouse cursor will zoom.
More great demo, you can get here…
http://bost.ocks.org/mike/fisheye/

normal,,,
Screen Shot 2014-08-20 at 11.30.33 PM

moving mouse1
Screen Shot 2014-08-20 at 11.30.09 PM

moving mouse2
Screen Shot 2014-08-20 at 11.30.22 PM

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中