Heatmap using d3.js

forked from nanu146's block: Heatmap using d3.js

<!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;
  }
      .heatmap{
        top:110px;
        position: relative;
    }
</style>

window.onload=function(){
      d3.csv('data.csv', function ( response ) {

data = response.map(function( item ) {
        var newItem = {};
        newItem.country = item.x;
        newItem.product = item.y;
        newItem.value = +item.value;

return newItem;
    })
    
    
    invertcolors=0;
    // Inverting color scale
    if(invertcolors){
        colorHold.reverse();
        
        
    }

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.scaleBand()
        .domain(x_elements)
        .range([0, x_elements.length * itemSize])
        .paddingInner(20).paddingOuter(cellSize/2)

var xAxis = d3.axisBottom()
        .scale(xScale)
    .tickSizeOuter(0)
        .tickFormat(function (d) {
            return d;
        });

var yScale = d3.scaleBand()
        .domain(y_elements)
        .range([0, y_elements.length * itemSize])
        .paddingInner(.2).paddingOuter(.2);

colorScale = d3.scaleOrdinal()
        .domain([-3,-2,-1,1,2,3])
        .range(colorHold);

svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .selectAll('text')
        .attr('font-weight', 'normal');

svg.append("g")
        .attr("class", "x axis")
        .attr("transform","translate(0,"+(y_elements.length * itemSize +cellSize/2)+")")
        .call(xAxis)
        .selectAll('text')
        .attr('font-weight', 'normal')
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", "-.5em")
        .attr("transform", function (d) {
            return "rotate(-65)";
        });
          
    // Legends section
    
          
    legends=svg.append("g").attr("class","legends")
    .attr("transform","translate("+((width+margin.right)/2-lPatchWidth/2 -margin.left/2)+","+(height+margin.bottom-35-20)+")");
    
    // Legend traingle pointer generator
    var symbolGenerator = d3.symbol()
    .type(d3.symbolTriangle)
    .size(64);
    
    legends.append("g").attr("transform","rotate(180)").append("g").attr("class","trianglepointer")
    .attr("transform","translate("+(-lPatchWidth/colorScale.range().length)/2+")")
    .append("path").attr("d",symbolGenerator());
    //Legend Rectangels
    legends.append("g").attr("class","LegRect")
    .attr("transform","translate(0,"+15+")")
    .selectAll("rect").data(colorScale.range()).enter()
    .append("rect").attr("width",lPatchWidth/colorScale.range().length+"px").attr("height","10px").attr("fill",function(d){ return d})
    .attr("x",function(d,i){ return i*(lPatchWidth/colorScale.range().length) })
    
    // legend text
    legends.append("g").attr("class","LegText")
    .attr("transform","translate(0,45)")
    .append("text")
    .attr("x",lPatchWidth/2)
    .attr('font-weight', 'normal')
    .style("text-anchor", "middle")
    .text(colorLText[0])
     
    // Heading 
    rootsvg.append("g")
    .attr("transform","translate(0,30)")
    .append("text")
    .attr("x",(width+margin.right+margin.left)/2)
    .attr('font-weight', 'bold')
    .attr('font-size', '22px')
    .attr('font-family', 'Segoe UI bold')
    .style("text-anchor", "middle")
    .text("Sales Heatmap")
    
    
  });
  }
</script>

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