steveharoz/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    Move the mouse smoothly from side to side to see a lag in the circle's position.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<svg></svg>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>

var width = 960,
    height = 500;
var mouseLocation = [0,0];

var svg = d3.select("body").select("svg")
    .attr("width", width)
    .attr("height", height);

var cursor = svg.append('circle')
    .attr("r", 2)
    .attr("fill", 'darkblue');

// update mouse location
d3.select(window).on("mousemove", () => { mouseLocation = d3.mouse(svg.node()); });

// show mouse
d3.timer(function() {
  cursor.attr("transform", 'translate(' + mouseLocation + ')');
});

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<svg></svg>
	<script src="http://d3js.org/d3.v4.min.js"></script>
	<script>

	var width = 960,
	height = 500;
	var mouseLocation = [0,0];

	var svg = d3.select("body").select("svg")
	.attr("width", width)
	.attr("height", height);

	var cursor = svg.append('circle')
	.attr("r", 2)
	.attr("fill", 'darkblue');

	// update mouse location
	d3.select(window).on("mousemove", () => { mouseLocation = d3.mouse(svg.node()); });

	// show mouse
	d3.timer(function() {
	cursor.attr("transform", 'translate(' + mouseLocation + ')');
	});

	</script>