Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple bars with hover event
item num change
Basetables 44 2
Fields 941 159
File Access 2 1
File References 0
Base Directories 0
Tables 73 -93
Relationships 208 60
Value Lists 47 21
[{"item":"Basetables","num":"44","change":"2"},{"item":"Fields","num":"941","change":"159"},{"item":"File Access","num":"2","change":"1"},{"item":"File References","num":"0","change":""},{"item":"Base Directories","num":"0","change":""},{"item":"Tables","num":"73","change":"-93"},{"item":"Relationships","num":"208","change":"60"},{"item":"Value Lists","num":"47","change":"21"}]
<!DOCTYPE html>
<html>
<head>
<title>Simple Example</title>
<!-- d3.js : https://github.com/mbostock/d3/wiki/ -->
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<!-- Underscore.js : http://documentcloud.github.com/underscore/ -->
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<style>
#chart {
position: relative;
}
#chart .item {
width: 20px;
padding: 0 1px;
height: 200px;
float: left;
position: relative;
}
#chart .bar {
width: 20px;
position: absolute;
}
#tooltip {
position: absolute;
left: 200px;
top: 94px;
}
#baseline {
height: 1px;
background: #e2e2e2;
position: absolute;
top: 100px;
left: 0px;
}
</style>
</head>
<body>
<div id="chart"><div id="baseline"></div></div>
<div id="tooltip"></div>
<div style="clear:both"></div>
<script type="text/javascript">
d3.json('data.json', function(data) {
console.log(data);
// construct a scale
var changes = _(data)
.chain()
.pluck('change')
.map(function(d) { return Math.abs(parseInt(d)); })
.value();
var scale = d3.scale.linear()
.domain([0, d3.max(changes)])
.range(["0px", "100px"]);
// render the chart
d3.select('#chart')
.selectAll('.item')
.data(data)
.enter().append('div')
.attr('class', 'item')
.on("mouseover", hover)
.append('div')
.attr('class', 'bar')
.style('height', function(d) { return scale(Math.abs(d.change)); })
.style('background', colorize)
.each(position);
// add a baseline
d3.select('#baseline')
.style('width', data.length*22 + 'px');
// tooltip
function hover(d) {
var num = 0,
color = 'black';
if (d.change > 0) {
color = 'green';
num = "+" + d.change;
} else if (d.change < 0) {
color = 'red';
num = d.change;
}
d3.select("#tooltip")
.html(d.item + "<br/><span style='color:" + color + "'>" + num + "</span>");
}
// position above or below axis
function position(d) {
if (d.change > 0) {
d3.select(this).style('bottom', '100px');
} else if (d.change < 0) {
d3.select(this).style('top', '100px');
}
}
// red/green coloring
function colorize(d) {
if (d.change > 0) {
return 'green';
} else if (d.change < 0) {
return 'red';
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment