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">
   <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>

    <script type="text/javascript">
    var fisheye = d3.fisheye.circular()

    var w = 400;
    var h = 400;
    var svg ="body")

    var dataset =[
    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")
       .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(){
     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;});


  </body >

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…

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


Published by iwatobipen

I'm medicinal chemist in mid size of pharmaceutical company. I love chemoinfo, cording, organic synthesis, my family.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: