Skip to content

Instantly share code, notes, and snippets.

@Moximillian
Last active March 23, 2017 10:01
Show Gist options
  • Save Moximillian/e893655a8ec9f2934fa8ce4f1320050e to your computer and use it in GitHub Desktop.
Save Moximillian/e893655a8ec9f2934fa8ce4f1320050e to your computer and use it in GitHub Desktop.
bar chart
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var canvasWidth = 700
var canvasHeight = 500
var margins = { top: 10, bottom: 30, left: 30, right: 20 }
var translate = "translate(" + margins.left +", " + margins.top + ")"
// grab the svg tag
var svg = d3.select("body").append("svg")
.attr("width", canvasWidth)
.attr("height", canvasHeight)
.style("background-color", "lightgrey")
var data = [{ x: 'A', y: 20, color: '#334499' },
{ x: 'B', y: 40, color: '#994455' },
{ x: 'C', y: 10, color: '#339999' },
{ x: 'D', y: 50, color: '#444499' },
{ x: 'E', y: 30, color: '#994455' }
];
canvasHeight -= (margins.top + margins.bottom)
canvasWidth -= (margins.left + margins.right)
// use "group" to move bars into margins
var g = svg.append('g').attr("transform", translate)
var maxY = d3.max(data, function(d,i) {return d.y })
var y_scale = d3.scale.linear()
.domain([0, maxY])
.range([canvasHeight, 0]);
var x_scale = d3.scale.ordinal()
.domain(data.map(function(d) { return d.x } ))
.rangeRoundBands([0, canvasWidth], 0.1, 0.4)
// create "bars"
var bars = g.selectAll('rect').data(data)
bars.enter().append('rect')
bars.attr({ x: function (d,i) { return x_scale(d.x) },
y: function (d,i) { return y_scale(d.y) },
width: x_scale.rangeBand(),
height: function (d,i) { return canvasHeight - y_scale(d.y) }
})
bars.style('fill', function (d,i) { return d.color })
bars.exit().remove();
var yAxis = d3.svg.axis()
.scale(y_scale)
.orient("left")
var xAxis = d3.svg.axis()
.scale(x_scale)
.orient("bottom")
g.append("g")
.attr("class", "y axis")
.call(yAxis)
var axisTranslate = "translate(0, " + canvasHeight + ")"
g.append("g")
.attr("class", "x axis")
.attr("transform", axisTranslate)
.call(xAxis)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment