Example - Heatmap Bar

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%

https://bl.ocks.org/Bl3f/cdb5ad854b376765fa99

body {
        margin-bottom: 10vh;
    }

.title {
    display: block;
    margin-left: auto;
    margin-right: auto; 
    width: 20vw;
    margin-top: 10vh;
    font-family: sans-serif;
    font-size: 50px;
    font-weight: bold;
    color: black;
  }

.heatmap {
            display: block;
    margin-left: auto;
    margin-right: auto;
    width: 65vw;
    }

.axis path,
  .axis line {
    fill: none;
    stroke: none;
    shape-rendering: crispEdges;
  }

.axis text {
      font-family: sans-serif;
        font-weight: bold;
      font-size: 11px;
        fill: black;
  }
  
    .tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 12px;
  padding: 8px;
  margin-top: -20px;
  font: 10px sans-serif;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

span {
        margin-right: 5px;
    }

.category {
                    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50vw;
              font-family: sans-serif;
        font-weight: bold;
      font-size: 11px;
    }

</style>
<body>
<div class="heatmap"></div>

<div class="category">
    <span style="background-color: #ffe6e6">Research </span>
    <span style="background-color: #ffa8a8">Interview</span>
    <span style="background-color: #ff7070">Ideation</span>
    <span style="background-color: #fe2d2d">Prototyping</span>
    <span style="background-color: #d00101">Testing</span>
    <span style="background-color: #700000">Developing</span>
    <span style="background-color: wheat">(Add Your Own)</span>
</div>
  
</body>

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/2]); //the height of the bar

var yAxis = d3.svg.axis()
        .scale(yScale)
        .tickFormat(function (d) {
            return d;
        })
        .orient("left");

var colorScale = d3.scale.threshold()
        .domain([2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20])
        .range([
          "#ff5722", "#ffccbc", "#ff8a65", "#ff5722", "#e64a19", 
          "#bf360c", "#ffeb3b", "#fff9c4", "#fff176", "#ffeb3b", 
          "#fbc02d", "#f57f17", "#ffff00", "#8bc34a", "#dcedc8", 
          "#9ccc65", "#7cb342", "#558b2f", "#ccff90", "#69f0ae"
          ]);
        // .range([
        //   "#e57373", "#f06292", "#ba68c8", "#9575cd", "#7986cb", 
        //   "#64b5f6", "#4fc3f7", "#4dd0e1", "#4db6ac", "#81c784", 
        //   "#aed581", "#dce775", "#fff176", "#ffd54f", "#ffb74d", 
        //   "#ff8a65", "#a1887f", "#e0e0e0", "#90a4ae", "wheat"
        //   ]);
        //.range(["red", "yellow" ,"blue", "purple", "salmon"]);
        //.range([d3.rgb("#007AFF"), d3.rgb('#FFF500')]);

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 + ")");

function mouseover() {
      div.style("display", "inline");
    }

function mousemove() {
      div.text("I feel..." + d3.event.pageX)
      //div.body(d.value) 
         .style("left", (d3.event.pageX - 34) + "px")
         .style("top", (d3.event.pageY - 12) + "px");
    }

function mouseout() {
      div.style("display", "none");
    }

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(-60)";
        });

});
</script>

https://d3js.org/d3.v3.min.js