Skip to content

Instantly share code, notes, and snippets.

@hyonschu
Created April 21, 2016 01:10
Show Gist options
  • Save hyonschu/d2909d7eebac1199933a0aca7e2b61bc to your computer and use it in GitHub Desktop.
Save hyonschu/d2909d7eebac1199933a0aca7e2b61bc to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<title>Page Titles</title>
<script src='lib/d3.min.js'>
</script>
<style>
div.bar {
display: inline-block;
width: 20px;
height: 75px;
margin-right: 2px;
background-color: teal;
}
</style>
</head>
<body>
<script>
var h = 400
var w = 800
var max = h
var canvas = d3.select("body")
.append('svg')
.attr("width", w)
.attr('height', h);
colorarray = ['blue', 'red', 'purple','pink','orange','silver','green', 'DarkSlateGray','cornflowerblue','blueviolet','brown','burlywood','aqua']
var numarray = []
for (var i = 0; i < 25; i++) {
var tmp = Math.random()*max
numarray.push(tmp)
}
canvas.selectAll('thisisthename')
.data(numarray)
.enter()
.append('rect')
.attr({
'x': function(d, i) { return i*22; },
'y': function(d) { return h-d; },
'width': 20,
'height': function(d, i) {
if (i >= 10){return h; }
else { return (d/max)*h; }
},
'fill': function() {
return colorarray[Math.round(Math.random()*colorarray.length)]
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment