Skip to content

Instantly share code, notes, and snippets.

@terbo

terbo/.block

Last active November 19, 2016 06:21
Show Gist options
  • Save terbo/b93668848d5ddbbca66a400f74c4c7d3 to your computer and use it in GitHub Desktop.
Save terbo/b93668848d5ddbbca66a400f74c4c7d3 to your computer and use it in GitHub Desktop.
Download ZIP
bar chart test
Raw
.block
license: mit
border: yes
scrolling: yes
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<script src='https://code.jquery.com/jquery-3.1.1.js'></script>
<script src='https://d3js.org/d3.v3.min.js'></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
#output { width: 100%; height: 100%; overflow-y: scroll; }
.pop { display: inline; float: right; clear: right;
font-size: smaller; font-weight: 100 }
</style>
</head>
<body>
<div id='output'></div>
<div id='pie'></div>
<script>
var sensors = [
{'name':'sensor1','orientation':'NW','ppm':'1.7'},
{'name':'sensor2','orientation':'SW','ppm':'0.8'},
{'name':'sensor3','orientation':'SE','ppm':'0.9'},
{'name':'sensor4','orientation':'NE','ppm':'1.2'}
]
ndiv = d3.select('#output')
names(ndiv,sensors, {})
function names(dom, data, config) {
var width = config.width || 500
var height = config.height || 500
var color20c = d3.scale.category20c()
var color10 = d3.scale.category10()
var color20b = d3.scale.category20b()
var rows = dom.selectAll('div.row')
.data(data.sort(function (a,b) {
return d3.descending(a.ppm, b.ppm) }))
rows.enter()
.append('div')
.style('width', function(d) { return d.ppm * 200 + 'px'})
.classed('row',true)
.append('span')
.style('background',function(d) { return color20c(d.ppm) })
.style('color', 'black')
.text(function(d) { return d.name })
.on('mouseover', function(d) {
d3.select(this)
.style('color','white')
.style('background',
function(d) { return color10(d.name) })
})
.on('mouseout', function(d) {
d3.select(this)
.style('color', 'black')
.style('background',
function(d) { return color20c(d.ppm) })
})
.append('span')
.classed('pop',true)
.style('background',function(d) { return color20c(d.ppm) })
.style('color', 'black')
.attr('top','5px')
.text(function(d) {return ' ppm: '+d.ppm })
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment