Mavromatika/index.html

## index.html
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Melting clouds - Mavromatika</title>
</head>

<style>
body{
    background-color: white;
}
circle {
    stroke-width: 0;
}
text{
    text-anchor : end;
    font-family : helvetica;
    font-size : 10px;
}
</style>
<body>
    <div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript">
    var w = 1200, h = 1200;

    var svg = d3.select("#container")
                .append("svg")
                .attr("viewBox", "0 0 " + w + " " + h );

    var donnees = [];

    var population = 11;
    var nbCol = 17, nbLig = 13;

    var rScale = d3.scale.linear()
                    .domain([0, population])
                    .range([5, 0.75 * w/(nbCol)]);

    var cScale = d3.scale.linear()
                    .domain([0, population])
                    .range(["black","white"]);

    for (var i = population; i >= 0; i--){
        donnees.push(i);
    }

    var tableau = [];

    for (i = 0; i < (nbCol + 1); i++){
        for (j = 0; j < (nbLig + 1); j++){
            tableau.push({"x":w/nbCol * (i + 0.5),"y": w/nbCol * (j - 0.5) + (w/nbCol * 0.5 * (i%2))});
        }
    }

    for (i = 0; i < tableau.length; i++){
        svg.selectAll(".wave" + i.toString())
            .data(donnees)
            .enter()
            .append("g")
            .append("circle")
            .attr("cx",tableau[i].x)
            .attr("cy",tableau[i].y)
            .attr("r",function(d){return rScale(d);})
            .attr("fill",function(d){return cScale(d);});
    }

    svg.selectAll("circle").on("mouseover",function(){
        d3.select(this).transition().duration(900).attr("cy",h + 200);
        console.log("yes");
    });
    svg.append("text").text("Created by Mavromatika, 2015.")
        .attr("x",w)
        .attr("y",h-10);
</script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>Melting clouds - Mavromatika</title>
	</head>

	<style>
	body{
	background-color: white;
	}
	circle {
	stroke-width: 0;
	}
	text{
	text-anchor : end;
	font-family : helvetica;
	font-size : 10px;
	}
	</style>
	<body>
	<div id="container"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script type="text/javascript">
	var w = 1200, h = 1200;

	var svg = d3.select("#container")
	.append("svg")
	.attr("viewBox", "0 0 " + w + " " + h );

	var donnees = [];

	var population = 11;
	var nbCol = 17, nbLig = 13;

	var rScale = d3.scale.linear()
	.domain([0, population])
	.range([5, 0.75 * w/(nbCol)]);

	var cScale = d3.scale.linear()
	.domain([0, population])
	.range(["black","white"]);

	for (var i = population; i >= 0; i--){
	donnees.push(i);
	}

	var tableau = [];

	for (i = 0; i < (nbCol + 1); i++){
	for (j = 0; j < (nbLig + 1); j++){
	tableau.push({"x":w/nbCol * (i + 0.5),"y": w/nbCol * (j - 0.5) + (w/nbCol * 0.5 * (i%2))});
	}
	}

	for (i = 0; i < tableau.length; i++){
	svg.selectAll(".wave" + i.toString())
	.data(donnees)
	.enter()
	.append("g")
	.append("circle")
	.attr("cx",tableau[i].x)
	.attr("cy",tableau[i].y)
	.attr("r",function(d){return rScale(d);})
	.attr("fill",function(d){return cScale(d);});
	}

	svg.selectAll("circle").on("mouseover",function(){
	d3.select(this).transition().duration(900).attr("cy",h + 200);
	console.log("yes");
	});
	svg.append("text").text("Created by Mavromatika, 2015.")
	.attr("x",w)
	.attr("y",h-10);
	</script>
	</body>