peterlozano/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Learning d3js

This is just a file that I used for learning basic d3.js and to use bl.ocks.org.

  
## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Tests D3js</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<style>

</style>
<body>
</body>

<script>
    // Data.
    var data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

    // Scale for radius.
    var xr = d3.scale
            .linear()
            .domain([0,15])
            .range([0,50]);

    // Scale for random position.
    var ranpos = function(d) {
        return Math.random() * 600;
    }

    // Color function.
    var randol = function() {
        return "hsl(" + Math.random() * 360 + ",100%,50%)";
    }

    // Svg
    var s = d3.select('body')
    	.append('svg')
	.attr('width', 960)
	.attr('height', 500);

    var update = function() {
        var sel = s.selectAll('circle');

        // Bind data
        sel = sel.data(data);

        // Update.
        sel.transition()
                .duration(250)
                .attr('r', xr)
                .attr('cx', ranpos)
                .attr('cy', ranpos)
                .style('fill', randol);

        // Enter
        sel.enter()
                .append('circle')
                .attr('r', xr)
                .attr('cx', ranpos)
                .attr('cy', ranpos)
                .style('fill', randol);
    }

    setInterval(function() {
        update();
    }, 500);
</script>

</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<title>Tests D3js</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>
	<style>

	</style>
	<body>
	</body>

	<script>
	// Data.
	var data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

	// Scale for radius.
	var xr = d3.scale
	.linear()
	.domain([0,15])
	.range([0,50]);

	// Scale for random position.
	var ranpos = function(d) {
	return Math.random() * 600;
	}

	// Color function.
	var randol = function() {
	return "hsl(" + Math.random() * 360 + ",100%,50%)";
	}

	// Svg
	var s = d3.select('body')
	.append('svg')
	.attr('width', 960)
	.attr('height', 500);

	var update = function() {
	var sel = s.selectAll('circle');

	// Bind data
	sel = sel.data(data);

	// Update.
	sel.transition()
	.duration(250)
	.attr('r', xr)
	.attr('cx', ranpos)
	.attr('cy', ranpos)
	.style('fill', randol);

	// Enter
	sel.enter()
	.append('circle')
	.attr('r', xr)
	.attr('cx', ranpos)
	.attr('cy', ranpos)
	.style('fill', randol);
	}

	setInterval(function() {
	update();
	}, 500);
	</script>

	</html>