nivas8292 · August 29, 2015 14:22
diff --git a/index.html b/index.html
 <html>
    <head>
        <title>D3 Particle System</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        
    </head>
    <body>
        <script>
            var w = '100%';
            var h = '100%';

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

            var colorScale = d3.scale.category20();

            var force = d3.layout.force()
                    .size([w, h])
                    .charge(0)
                    .gravity(0)
                    .on("tick", tick);

            function tick() {
                svg.selectAll("circle").attr("cx", function (d) {
                    return d.x;
                })
                        .attr("cy", function (d) {
                            return d.y;
                        });
            }

            svg.on("mousemove", function () {
                node = {x: d3.event.x, y: d3.event.y};
                console.log(node);
                svg.append("circle")
                        .data([node])
                        .attr("cx", node.x)
                        .attr("cy", node.y)
                        .attr("r", 5)
                        .attr("fill", colorScale(node.x + node.y))
                        .transition()
                        .delay(2000)
                        .attr("r", 0)
                        .each("end", function () {
                            force.nodes().shift();
                        })
                        .remove();

                force.nodes().push(node);
                force.start();
            })
        </script>
    </body>
 </html>
	<html>
	<head>
	<title>D3 Particle System</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

	</head>
	<body>
	<script>
	var w = '100%';
	var h = '100%';

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

	var colorScale = d3.scale.category20();

	var force = d3.layout.force()
	.size([w, h])
	.charge(0)
	.gravity(0)
	.on("tick", tick);

	function tick() {
	svg.selectAll("circle").attr("cx", function (d) {
	return d.x;
	})
	.attr("cy", function (d) {
	return d.y;
	});
	}

	svg.on("mousemove", function () {
	node = {x: d3.event.x, y: d3.event.y};
	console.log(node);
	svg.append("circle")
	.data([node])
	.attr("cx", node.x)
	.attr("cy", node.y)
	.attr("r", 5)
	.attr("fill", colorScale(node.x + node.y))
	.transition()
	.delay(2000)
	.attr("r", 0)
	.each("end", function () {
	force.nodes().shift();
	})
	.remove();

	force.nodes().push(node);
	force.start();
	})
	</script>
	</body>
	</html>