Skip to content

Instantly share code, notes, and snippets.

@martinjc

martinjc/.block

Last active March 24, 2017 22:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save martinjc/ea58e13d5808523c19f3cca37dea6d15 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save martinjc/ea58e13d5808523c19f3cca37dea6d15 to your computer and use it in GitHub Desktop.
Download ZIP
Visualisation without D3 (Data: randomly generated)
Raw
.block
license: mit
border: no
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

Raw
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>
Raw
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment