Simple D3.js heatmap representing a value achievement over a couple (country, product). Here the products are commons fruits.
Colors are:
- Green for value > 100%
- Orange for value > 85%
- Blue < 85%
license: WTFPL |
x | y | value | |
---|---|---|---|
France | Apricot | 2.3129545439964723 | |
France | Avocado | 3.1610140317890965 | |
France | Lemon | 0.9075695440623942 | |
France | Date | 1.1296454803177811 | |
France | Strawberry | ||
France | Mandarin | 2.6193568568512493 | |
France | Chestnut | 0.08748279136251946 | |
France | Nuts | 2.943858242639327 | |
France | Olive | 1.3356914547843943 | |
France | Mirabelle | 0.31390905400247027 | |
France | Orange | 0.5709024568447734 | |
France | Fig | 0.8689875977541086 | |
France | Raisin | ||
France | Pear | ||
France | Potato | ||
France | Khaki | ||
France | Kiwi | 6.026783469350332 | |
France | Pumpkin | 0.5472217416389179 | |
France | Mango | ||
France | Cherry | 1.9472375734686518 | |
Italy | Apricot | 2.250335336990016 | |
Italy | Avocado | 1.4472931892677967 | |
Italy | Lemon | 1.7163168911863054 | |
Italy | Date | 0.6222770814456479 | |
Italy | Strawberry | ||
Italy | Mandarin | 1.9378611429750559 | |
Italy | Goyave | ||
Italy | Chestnut | 0.35446193006796944 | |
Italy | Nuts | 0.37199215156032084 | |
Italy | Olive | 1.05979039016384 | |
Italy | Orange | 1.9087621718437413 | |
Italy | Fig | 4.632439392448328 | |
Italy | Raisin | ||
Italy | Pear | ||
Italy | Potato | ||
Italy | Khaki | ||
Italy | Banana | ||
Italy | Blackcurrant | ||
Italy | Kiwi | 1.673923311217576 | |
Italy | Pumpkin | 0.8029920360319587 | |
Italy | Cherry | 1.9453249240219272 | |
Germany | Apricot | 0.24786564820472912 | |
Germany | Avocado | 1.13545847239482 | |
Germany | Lemon | 0.6388067539810734 | |
Germany | Date | 1.626323182055196 | |
Germany | Strawberry | ||
Germany | Mandarin | 0.4239980281990543 | |
Germany | Chestnut | 1.4341389749588975 | |
Germany | Nuts | 0.7392983316104583 | |
Germany | Olive | 1.6630071601899028 | |
Germany | Mirabelle | 4.759329801939115 | |
Germany | Orange | 3.718673834416696 | |
Germany | Fig | 2.458679694479642 | |
Germany | Raisin | ||
Germany | Pear | ||
Germany | Potato | ||
Germany | Prune | ||
Germany | Khaki | ||
Germany | Banana | ||
Germany | Ananas | ||
Germany | Kiwi | 1.3234705953824204 | |
Germany | Pumpkin | 0.0770059996293927 | |
Germany | Cherry | 1.7111604775075815 | |
United Kingdom | Apricot | 0.17924671480874477 | |
United Kingdom | Avocado | 0.022885648078082133 | |
United Kingdom | Lemon | 1.7152082470441878 | |
United Kingdom | Date | 1.752070575653172 | |
United Kingdom | Mandarin | 3.4281163770331387 | |
United Kingdom | Goyave | ||
United Kingdom | Chestnut | 0.19739811992921974 | |
United Kingdom | Nuts | 1.0070422960846344 | |
United Kingdom | Olive | 2.228287010523628 | |
United Kingdom | Orange | 0.9304979227921532 | |
United Kingdom | Fig | 0.5953329645659061 | |
United Kingdom | Cerise | ||
United Kingdom | Raisin | ||
United Kingdom | Potato | ||
United Kingdom | Prune | ||
United Kingdom | Khaki | ||
United Kingdom | Ananas | ||
United Kingdom | Kiwi | 3.9494022464067755 | |
United Kingdom | Pumpkin | 2.2009939178127476 | |
United Kingdom | Mango | ||
United Kingdom | Cherry | 0.20063602688693316 | |
Spain | Apricot | 0.9989751140631283 | |
Spain | Avocado | 1.3798561037495776 | |
Spain | Lemon | 4.621063369745371 | |
Spain | Date | 2.715496746864414 | |
Spain | Strawberry | ||
Spain | Mandarin | 4.655686656785712 | |
Spain | Chestnut | 2.0830024325290624 | |
Spain | Nuts | 3.8907348191368603 | |
Spain | Olive | 0.4593907900702838 | |
Spain | Mirabelle | 0.8657861030686699 | |
Spain | Orange | 3.431725506748977 | |
Spain | Fig | 6.387945884767135 | |
Spain | Raisin | ||
Spain | Pear | ||
Spain | Potato | ||
Spain | Khaki | ||
Spain | Kiwi | 1.1520183768223036 | |
Spain | Pumpkin | 1.9614971869756583 | |
Spain | Cherry | 1.7489279548209826 |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: black; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-family: sans-serif; | |
font-size: 11px; | |
} | |
</style> | |
<div class="heatmap"></div> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var itemSize = 22, | |
cellSize = itemSize - 1, | |
margin = {top: 120, right: 20, bottom: 20, left: 110}; | |
var width = 750 - margin.right - margin.left, | |
height = 300 - margin.top - margin.bottom; | |
var formatDate = d3.time.format("%Y-%m-%d"); | |
d3.csv('data.csv', function ( response ) { | |
var data = response.map(function( item ) { | |
var newItem = {}; | |
newItem.country = item.x; | |
newItem.product = item.y; | |
newItem.value = item.value; | |
return newItem; | |
}) | |
var x_elements = d3.set(data.map(function( item ) { return item.product; } )).values(), | |
y_elements = d3.set(data.map(function( item ) { return item.country; } )).values(); | |
var xScale = d3.scale.ordinal() | |
.domain(x_elements) | |
.rangeBands([0, x_elements.length * itemSize]); | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.tickFormat(function (d) { | |
return d; | |
}) | |
.orient("top"); | |
var yScale = d3.scale.ordinal() | |
.domain(y_elements) | |
.rangeBands([0, y_elements.length * itemSize]); | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.tickFormat(function (d) { | |
return d; | |
}) | |
.orient("left"); | |
var colorScale = d3.scale.threshold() | |
.domain([0.85, 1]) | |
.range(["#2980B9", "#E67E22", "#27AE60", "#27AE60"]); | |
var svg = d3.select('.heatmap') | |
.append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
var cells = svg.selectAll('rect') | |
.data(data) | |
.enter().append('g').append('rect') | |
.attr('class', 'cell') | |
.attr('width', cellSize) | |
.attr('height', cellSize) | |
.attr('y', function(d) { return yScale(d.country); }) | |
.attr('x', function(d) { return xScale(d.product); }) | |
.attr('fill', function(d) { return colorScale(d.value); }); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.selectAll('text') | |
.attr('font-weight', 'normal'); | |
svg.append("g") | |
.attr("class", "x axis") | |
.call(xAxis) | |
.selectAll('text') | |
.attr('font-weight', 'normal') | |
.style("text-anchor", "start") | |
.attr("dx", ".8em") | |
.attr("dy", ".5em") | |
.attr("transform", function (d) { | |
return "rotate(-65)"; | |
}); | |
}); | |
</script> |