Skip to content

Instantly share code, notes, and snippets.

@Domajno
Last active February 21, 2016 13: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 Domajno/64d132eba16a9f1510d4 to your computer and use it in GitHub Desktop.
Save Domajno/64d132eba16a9f1510d4 to your computer and use it in GitHub Desktop.
Histogram with labels
license: mit

As a traditional histogram it shows the distribution of a single variable in form of the column chart. In addition to that histogram with labels shows the label of each data point displayed in the column itself so you can see to which histogram bin each data point belongs. As an example a distribution of the employment to population ratio across different countries is plotted. Data source

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Histogram with labels</title>
<style>
rect {
fill: #0ff
}
text {
text-transform: uppercase;
font-family: sans-serif;
font-weight: 100;
opacity: 1;
transition: opacity 0.1s ease-in;
}
text:hover {
opacity: 0.5;
cursor: pointer;
}
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="main.js"></script>
</body>
</html>
'use strict';
// Employment to population ratio
var data = [
['Qatar', 86.9],
['Ethiopia', 79.4],
['Cayman Islands', 77.8],
['Iceland', 77],
['Viet Nam', 76],
['Tanzania', 75.7],
['Thailand', 71],
['Norway', 68.7],
['China', 68.6],
['Paraguay', 66.8],
['Sweden', 65.7],
['Switzerland', 65.3],
['Malaysia', 65],
['Russian Federation', 64.8],
['New Zealand', 64.1],
['Indonesia', 62.7],
['Canada', 61.8],
['Australia', 61.3],
['Brazil', 61.2],
['Netherlands', 60.8],
['Finland', 60.1],
['El Salvador', 59.9],
['Israel', 59.7],
['Colombia', 59.6],
['Ecuador', 59.5],
['Korea', 59.5],
['Uruguay', 59.5],
['Philippines', 59.4],
['Hong Kong', 59.1],
['Trinidad Tobago', 59.1],
['Barbados', 58.9],
['United States', 58.6],
['Austria', 58.5],
['United Kingdom', 58.4],
['Guatemala', 58.3],
['Denmark', 58],
['Mexico', 57.5],
['Kyrgyzstan', 57.3],
['Germany', 57.1],
['Japan', 56.9],
['Chile', 56],
['Estonia', 56],
['Luxembourg', 55.9],
['Czech Republic', 55.2],
['Costa Rica', 54.7],
['Dominican Republic', 54.6],
['Cyprus', 53.3],
['Ireland', 52.4],
['Latvia', 52.4],
['Hungary', 51.6],
['Slovenia', 51.5],
['Lithuania', 51.2],
['Romania', 51.1],
['Saudi Arabia', 51.1],
['France', 50.9],
['Slovakia', 50.9],
['Poland', 50.2],
['Namibia', 50],
['Malta', 49.8],
['Portugal', 49.7],
['Lesotho', 49.2],
['Belgium', 49],
['Bulgaria', 46.9],
['Turkey', 45.9],
['Albania', 44.5],
['Spain', 44.4],
['Italy', 43],
['Croatia', 42.1],
['Egypt', 42.1],
['South Africa', 40],
['Macedonia', 39.7],
['Greece', 38.4],
['Serbia', 37.7],
['Palestine', 33.4]
];
var margin = {
top: 20,
right: 10,
bottom: 20,
left: 10
};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var columnPadding = 10;
var columnMargin = 1;
var chart = d3
.select('svg')
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var histogram = d3
.layout
.histogram()
.value(function (d) {
return d[1];
})(data);
var itemHeight = height / Math.max.apply(null, histogram.map(function (d) {
return d.length;
}));
var itemWidth = width / histogram.length;
var columns = chart
.selectAll('g')
.data(histogram)
.enter()
.append('g');
columns.selectAll('text')
.data(function (d) {
return d;
})
.enter()
.append('text')
.attr('y', function (_, i) {
return itemHeight * (i + 1);
})
.attr('textLength', itemWidth - columnPadding)
.attr('lengthAdjust', 'spacingAndGlyphs')
.attr('x', columnPadding / 2)
.text(function (d) {
return d[0];
})
.append('title')
.text(function (d) {
return d[1];
});
columns.each(function (column, i) {
var columnHeight = column.length * itemHeight;
d3
.select(this)
.attr('transform', function () {
return 'translate(' + (itemWidth * i) + ', ' + (height - columnHeight) + ')';
})
.insert('rect', 'text')
.attr('width', itemWidth - (2 * columnMargin))
.attr('height', columnHeight + (4 * columnMargin))
.attr('x', columnMargin);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment