Create a gist now

Instantly share code, notes, and snippets.

@Domajno /.block
Last active Feb 21, 2016

What would you like to do?
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