Old school D3 from simpler times

All examples By author By category About

Mavromatika

Full window Github gist

Pluie croisée

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Pluie croisée</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type="text/css">
			svg {
				background-color: white;
			}
            line {
                stroke: black;
            }
            .high {
                stroke: green;
            }
		</style>
	</head>
	<body>

<svg></svg>
		<script type="text/javascript">		
            var cX = 250, cY = 250, long = 10;
            var W = 1000, H = 600;
            var stdev = 150;
            
            var svg = d3.select("svg")
                        .attr("width",W)
                        .attr("height",H);
            
            var randomizeW = d3.random.normal(W/2, stdev);
            var randomizeH = d3.random.normal(H/2, stdev);
            
            for(i=0;i<5000;i++){
                var x = randomizeW();
                var y = randomizeH();
                svg.append("line")
                    .attr("x1",x)
                    .attr("y1",y)
                    .attr("x2",x + long)
                    .attr("y2",y + long + 20);
            }
            //var lines = d3.selectAll("line").on("mouseover", function(){ d3.select(this).classed("high",true);});
            var lines = d3.selectAll("line").on("mouseover", function(){ 
                            var el = d3.select(this);
                            var chose = el.attr("x1");
                            d3.select(this).transition().duration(700).attr("x2",chose - long); 
                        });
		</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js