D3 Examples - Example

xxxxxxxxxx
 
​
<meta charset="utf-8">
<style>
​
    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>
​
<script src="//d3js.org/d3.v3.min.js"></script>
​
<script>
  var itemSize = 52,
      cellSize = itemSize - 5,
      margin = {top: 100, right: 20, bottom: 20, left: 80};
      
  var width = 900 - margin.right - margin.left,
      height = 400 - 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/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 + ")");
​
    
​
    
    
    var cells = svg.selectAll('rect')
        .data(data)
        .enter().append('g').append('rect')
        .attr('class', 'cell')
        .attr('width', cellSize)
        .attr('height', cellSize/2)
        .attr('y', function(d) { return yScale(d.country); })
        .attr('x', function(d) { return xScale(d.product); })
        .attr('fill', function(d) { return colorScale(d.value); })  
        .on("mouseover", mouseover)
            .on("mousemove", mousemove)
            .on("mouseout", mouseout);
    
    var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("display", "none");
​
    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>
    