martinjc/.block

## .block
license: mit
border: no

## README.md

      
      Raw
    
  
              README.md
            
          
    Simple example using D3 to generate content in a webpage

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3 example</title>

    <script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
</head>
<body>
    <input type="button" onclick="update()" value="Update"/>
    <div id="vis">
    </div>
    <script src="script.js">
    </script>
</body>
</html>

## preview.png

      
      Raw
    
  
              preview.png
            
          
## script.js
function createRandomData() {
    var numDataItems = Math.floor((Math.random() * 10) + 1);
    var d = [];
    for (var i = 0; i < numDataItems; i++) {
        d.push(Math.floor((Math.random() * 50) + 1));
    }
    return d;
}


function update() {
    var exampleData = createRandomData();

    var visElement = d3.select('#vis');

    var paras = visElement.selectAll('p')
        .data(exampleData);

    paras
        .exit()
        .remove();

    var new_paras = paras
        .enter()
        .append('p');

    new_paras.merge(paras)
        .text(function(d, i) {
            return "this is paragraph " + i + " and the data value is " + d;
        });

}

update();

## thumbnail.png

      
      Raw
    
  
              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>D3 example</title>

	<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
	</head>
	<body>
	<input type="button" onclick="update()" value="Update"/>
	<div id="vis">
	</div>
	<script src="script.js">
	</script>
	</body>
	</html>
	function createRandomData() {
	var numDataItems = Math.floor((Math.random() * 10) + 1);
	var d = [];
	for (var i = 0; i < numDataItems; i++) {
	d.push(Math.floor((Math.random() * 50) + 1));
	}
	return d;
	}


	function update() {
	var exampleData = createRandomData();

	var visElement = d3.select('#vis');

	var paras = visElement.selectAll('p')
	.data(exampleData);

	paras
	.exit()
	.remove();

	var new_paras = paras
	.enter()
	.append('p');

	new_paras.merge(paras)
	.text(function(d, i) {
	return "this is paragraph " + i + " and the data value is " + d;
	});

	}

	update();