martinjc/.block

## .block
license: mit
border: no

## README.md

      
    Raw
  

              README.md
            
          
    A simple example of visualising some data using div elements, sized by CSS.
This is an alternative to creating SVG elements using D3

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Visualisation without D3</title>
    <style>
        #vis {
            width: 500px;
            height: 500px;
        }

        .bar {
            background-color: red;
            text-align: right;
            color: white;
            padding: 3px;
            margin: 1px;
        }
    </style>
  </head>
  <body>
    <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;
}

var data = createRandomData();

var visElement = document.getElementById('vis');

for(i = 0; i < data.length; i++) {

    var bar = document.createElement('div');
    var textContent = document.createTextNode(data[i]);
    bar.appendChild(textContent);
    bar.className += 'bar';

    bar.style.width = (data[i] * 10) + 'px';

    visElement.appendChild(bar);

}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Visualisation without D3</title>
	<style>
	#vis {
	width: 500px;
	height: 500px;
	}

	.bar {
	background-color: red;
	text-align: right;
	color: white;
	padding: 3px;
	margin: 1px;
	}
	</style>
	</head>
	<body>
	<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;
	}

	var data = createRandomData();

	var visElement = document.getElementById('vis');

	for(i = 0; i < data.length; i++) {

	var bar = document.createElement('div');
	var textContent = document.createTextNode(data[i]);
	bar.appendChild(textContent);
	bar.className += 'bar';

	bar.style.width = (data[i] * 10) + 'px';

	visElement.appendChild(bar);

	}