Skip to content

Instantly share code, notes, and snippets.

@jebeck

jebeck/index.html

Last active August 29, 2015 14:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jebeck/cb801f32fc9777a1b672 to your computer and use it in GitHub Desktop.
Save jebeck/cb801f32fc9777a1b672 to your computer and use it in GitHub Desktop.
Download ZIP
the tiniest bar chart
Raw
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
#main {
background: #FFFFFF;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
path {
fill: none;
}
.tick text {
font-family: sans-serif;
fill: gray;
}
.thisIsABar rect:hover {
fill: #00BEED;
}
</style>
<title>The Tiniest Bar Chart</title>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
// some variables
var w = 600, h = 300;
var margin = {top: 20, bottom: 50, left: 50, right: 10};
var textShift = 8;
// create an SVG
// D3's returns the SVG as a selection (i.e., a shortcut to d3.select('svg'))
var svg = d3.select('#main').append('svg')
.attr({
width: w + margin.left + margin.right,
height: h + margin.top + margin.bottom
});
// add a background rectangle to give us a visible canvas to work with
svg.append('rect')
.attr({
id: 'theCanvas',
width: w + margin.left + margin.right,
height: h + margin.top + margin.bottom,
x: 0,
y: 0,
fill: 'white'
});
// now add a group with a translation per the margin convention
svg = svg.append('g')
.attr({
id: 'withinTheMargins',
transform: 'translate(' + margin.left + ',' + margin.top + ')'
});
// show where the margins are with another rect
svg.append('rect')
.attr({
id: 'theMargins',
width: w,
height: h,
x: 0,
y: 0,
fill: 'none',
stroke: 'gray'
});
var data = [{
framework: 'Ember',
value: 2
}, {
framework: 'Backbone',
value: 4
}, {
framework: 'Angular',
value: 6
}, {
framework: 'React',
value: 8
}, {
framework: 'Pure JavaScript',
value: 10
}];
var xScale = d3.scale.ordinal()
.domain(_.pluck(data, 'framework'))
.rangeBands([0, w], 0.1, 0.2);
var yScale = d3.scale.linear()
.domain([0, d3.max(_.pluck(data, 'value')) *1.2])
.range([h, 0]);
// create a group of each datum and save the enter selection
var bars = svg.selectAll('g.thisIsABar')
.data(data)
.enter();
// add the groups
var datumGroups = bars.append('g')
.attr({
id: function(d) { return d.framework; },
'class': 'thisIsABar'
})
.on('mouseover', function(d) {
d3.select(this).transition()
.ease('bounce')
.attr({
transform: 'translate(0,-10)'
});
})
.on('mouseout', function(d) {
d3.select(this).transition()
.attr({
transform: 'translate(0,0)'
});
});
datumGroups.each(function(d) {
var thisBar = d3.select(this);
// draw bars
thisBar.append('rect')
.attr({
x: function(d) { return xScale(d.framework); },
y: function(d) { return yScale(d.value); },
width: xScale.rangeBand(),
height: function(d) { return h - yScale(d.value); },
fill: '#20479D',
'class': 'bar'
});
// annotate each bar with its value
thisBar.append('text')
.attr({
x: function(d) { return xScale(d.framework) + textShift; },
y: function(d) { return yScale(d.value) + textShift * 2.5; },
'font-family': 'sans-serif',
'font-weight': 'bold',
fill: 'white'
})
.text(function(d) { return d.value; });
});
// x-axis
var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
svg.append('g')
.attr({
id: 'xAxis',
transform: 'translate(0,' + h + ')'
})
.call(xAxis);
// y-axis
var yAxis = d3.svg.axis().scale(yScale).ticks(6).orient('left');
svg.append('g')
.attr({
id: 'yAxis'
})
.call(yAxis);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment