Skip to content

Instantly share code, notes, and snippets.

@Umesh-Markande

Umesh-Markande/heatMapWithBrushable.html

Last active March 27, 2020 01:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Umesh-Markande/ea460702b34f01ab88840b62694ed41c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Umesh-Markande/ea460702b34f01ab88840b62694ed41c to your computer and use it in GitHub Desktop.
Download ZIP
HeatMap With Interactive Brushable Bar d3.js
Raw
heatMapWithBrushable.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
.toolTip {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: absolute;
display: none;
width: auto;
height: auto;
background: none repeat scroll 0 0 white;
border: 0 none;
border-radius: 8px 8px 8px 8px;
box-shadow: -3px 3px 15px #888888;
color: black;
font: 12px sans-serif;
padding: 5px;
text-align: center;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
</style>
<body>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<div id="chart" style="" class="lableText">
</div>
<script>
var divTooltip = d3.select("body").append("div").attr("class", "toolTip");
var margin = {top: 110,right: 20,bottom: 60,left: 100},
width = parseInt(d3.select('#chart').style('width'), 10) - margin.left,// - main_margin.right,
height = parseInt(d3.select('#chart').style('height'), 10) - 120 - margin.top - margin.bottom;
var width = 1085 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
var data = [{"product":"ADRUCIL","age_range":"35-49","age_range_grp":6,"patient_count":7},{"product":"ADRUCIL","age_range":"50-54","age_range_grp":7,"patient_count":5},{"product":"ADRUCIL","age_range":"55-64","age_range_grp":8,"patient_count":6},{"product":"ADRUCIL","age_range":"65+","age_range_grp":9,"patient_count":4},{"product":"ALDARA","age_range":"0-1","age_range_grp":1,"patient_count":8},{"product":"ALDARA","age_range":"2-5","age_range_grp":2,"patient_count":68},{"product":"ALDARA","age_range":"6-11","age_range_grp":3,"patient_count":176},{"product":"ALDARA","age_range":"12-17","age_range_grp":4,"patient_count":87},{"product":"ALDARA","age_range":"18-24","age_range_grp":4,"patient_count":35},{"product":"ALDARA","age_range":"25-34","age_range_grp":5,"patient_count":73},{"product":"ALDARA","age_range":"35-49","age_range_grp":6,"patient_count":71},{"product":"ALDARA","age_range":"50-54","age_range_grp":7,"patient_count":23},{"product":"ALDARA","age_range":"55-64","age_range_grp":8,"patient_count":22},{"product":"ALDARA","age_range":"65+","age_range_grp":9,"patient_count":10},{"product":"CARAC","age_range":"6-11","age_range_grp":3,"patient_count":10},{"product":"CARAC","age_range":"18-24","age_range_grp":4,"patient_count":5},{"product":"CARAC","age_range":"12-17","age_range_grp":4,"patient_count":8},{"product":"CARAC","age_range":"25-34","age_range_grp":5,"patient_count":38},{"product":"CARAC","age_range":"35-49","age_range_grp":6,"patient_count":239},{"product":"CARAC","age_range":"50-54","age_range_grp":7,"patient_count":193},{"product":"CARAC","age_range":"55-64","age_range_grp":8,"patient_count":607},{"product":"CARAC","age_range":"65+","age_range_grp":9,"patient_count":272},{"product":"EFUDEX","age_range":"2-5","age_range_grp":2,"patient_count":1},{"product":"EFUDEX","age_range":"6-11","age_range_grp":3,"patient_count":12},{"product":"EFUDEX","age_range":"18-24","age_range_grp":4,"patient_count":6},{"product":"EFUDEX","age_range":"12-17","age_range_grp":4,"patient_count":1},{"product":"EFUDEX","age_range":"35-49","age_range_grp":6,"patient_count":12},{"product":"EFUDEX","age_range":"50-54","age_range_grp":7,"patient_count":11},{"product":"EFUDEX","age_range":"55-64","age_range_grp":8,"patient_count":46},{"product":"EFUDEX","age_range":"65+","age_range_grp":9,"patient_count":62},{"product":"ERIVEDGE","age_range":"6-11","age_range_grp":3,"patient_count":2},{"product":"ERIVEDGE","age_range":"18-24","age_range_grp":4,"patient_count":4},{"product":"ERIVEDGE","age_range":"25-34","age_range_grp":5,"patient_count":13},{"product":"ERIVEDGE","age_range":"35-49","age_range_grp":6,"patient_count":79},{"product":"ERIVEDGE","age_range":"50-54","age_range_grp":7,"patient_count":100},{"product":"ERIVEDGE","age_range":"55-64","age_range_grp":8,"patient_count":198},{"product":"ERIVEDGE","age_range":"65+","age_range_grp":9,"patient_count":479},{"product":"FLUOROPLEX","age_range":"2-5","age_range_grp":2,"patient_count":8},{"product":"FLUOROPLEX","age_range":"6-11","age_range_grp":3,"patient_count":23},{"product":"FLUOROPLEX","age_range":"18-24","age_range_grp":4,"patient_count":48},{"product":"FLUOROPLEX","age_range":"12-17","age_range_grp":4,"patient_count":59},{"product":"FLUOROPLEX","age_range":"25-34","age_range_grp":5,"patient_count":20},{"product":"FLUOROPLEX","age_range":"35-49","age_range_grp":6,"patient_count":274},{"product":"FLUOROPLEX","age_range":"50-54","age_range_grp":7,"patient_count":247},{"product":"FLUOROPLEX","age_range":"55-64","age_range_grp":8,"patient_count":741},{"product":"FLUOROPLEX","age_range":"65+","age_range_grp":9,"patient_count":274},{"product":"FLUOROURACIL","age_range":"2-5","age_range_grp":2,"patient_count":86},{"product":"FLUOROURACIL","age_range":"6-11","age_range_grp":3,"patient_count":543},{"product":"FLUOROURACIL","age_range":"18-24","age_range_grp":4,"patient_count":373},{"product":"FLUOROURACIL","age_range":"12-17","age_range_grp":4,"patient_count":559},{"product":"FLUOROURACIL","age_range":"25-34","age_range_grp":5,"patient_count":626},{"product":"FLUOROURACIL","age_range":"35-49","age_range_grp":6,"patient_count":4097},{"product":"FLUOROURACIL","age_range":"50-54","age_range_grp":7,"patient_count":4206},{"product":"FLUOROURACIL","age_range":"55-64","age_range_grp":8,"patient_count":16721},{"product":"FLUOROURACIL","age_range":"65+","age_range_grp":9,"patient_count":44730},{"product":"IMIQUIMOD","age_range":"0-1","age_range_grp":1,"patient_count":50},{"product":"IMIQUIMOD","age_range":"2-5","age_range_grp":2,"patient_count":1476},{"product":"IMIQUIMOD","age_range":"6-11","age_range_grp":3,"patient_count":3790},{"product":"IMIQUIMOD","age_range":"12-17","age_range_grp":4,"patient_count":2895},{"product":"IMIQUIMOD","age_range":"18-24","age_range_grp":4,"patient_count":4079},{"product":"IMIQUIMOD","age_range":"25-34","age_range_grp":5,"patient_count":7111},{"product":"IMIQUIMOD","age_range":"35-49","age_range_grp":6,"patient_count":9911},{"product":"IMIQUIMOD","age_range":"50-54","age_range_grp":7,"patient_count":3649},{"product":"IMIQUIMOD","age_range":"55-64","age_range_grp":8,"patient_count":8014},{"product":"IMIQUIMOD","age_range":"65+","age_range_grp":9,"patient_count":13891},{"product":"ODOMZO","age_range":"25-34","age_range_grp":5,"patient_count":2},{"product":"ODOMZO","age_range":"50-54","age_range_grp":7,"patient_count":7},{"product":"ODOMZO","age_range":"55-64","age_range_grp":8,"patient_count":16},{"product":"ODOMZO","age_range":"65+","age_range_grp":9,"patient_count":35},{"product":"PICATO","age_range":"6-11","age_range_grp":3,"patient_count":8},{"product":"PICATO","age_range":"18-24","age_range_grp":4,"patient_count":8},{"product":"PICATO","age_range":"12-17","age_range_grp":4,"patient_count":2},{"product":"PICATO","age_range":"25-34","age_range_grp":5,"patient_count":52},{"product":"PICATO","age_range":"35-49","age_range_grp":6,"patient_count":881},{"product":"PICATO","age_range":"50-54","age_range_grp":7,"patient_count":797},{"product":"PICATO","age_range":"55-64","age_range_grp":8,"patient_count":2431},{"product":"PICATO","age_range":"65+","age_range_grp":9,"patient_count":2289},{"product":"SOLARAZE","age_range":"55-64","age_range_grp":8,"patient_count":3},{"product":"TOLAK","age_range":"25-34","age_range_grp":5,"patient_count":4},{"product":"TOLAK","age_range":"35-49","age_range_grp":6,"patient_count":18},{"product":"TOLAK","age_range":"50-54","age_range_grp":7,"patient_count":49},{"product":"TOLAK","age_range":"55-64","age_range_grp":8,"patient_count":150},{"product":"TOLAK","age_range":"65+","age_range_grp":9,"patient_count":359},{"product":"ZYCLARA","age_range":"0-1","age_range_grp":1,"patient_count":2},{"product":"ZYCLARA","age_range":"2-5","age_range_grp":2,"patient_count":27},{"product":"ZYCLARA","age_range":"6-11","age_range_grp":3,"patient_count":94},{"product":"ZYCLARA","age_range":"18-24","age_range_grp":4,"patient_count":132},{"product":"ZYCLARA","age_range":"12-17","age_range_grp":4,"patient_count":132},{"product":"ZYCLARA","age_range":"25-34","age_range_grp":5,"patient_count":247},{"product":"ZYCLARA","age_range":"35-49","age_range_grp":6,"patient_count":583},{"product":"ZYCLARA","age_range":"50-54","age_range_grp":7,"patient_count":344},{"product":"ZYCLARA","age_range":"55-64","age_range_grp":8,"patient_count":900},{"product":"ZYCLARA","age_range":"65+","age_range_grp":9,"patient_count":415}]
var response = {data:data};
var y_label_KEY = 'product' ;
var x_label_KEY = 'age_range'
var xScale = d3.scale.ordinal()
.rangeBands([width, 0], 0.4, 0).domain(d3.range(data.length));;
var data = response.data.map(function( item, index ) {
var newItem = {};
newItem.country = item[y_label_KEY];
newItem.product = item[x_label_KEY];
newItem.value = item['age_range_grp'];
return newItem;
})
var x_elements = d3.set(data.map(function( item ) {
return item.country;
} )).values();
y_elements = d3.set(data.map(function( item ) { return item.product; } )).values();
var itemSize = width / x_elements.length,
itemHeight = height / y_elements.length,
cellSize = itemSize - 1;
var mainItemHeight = cellSize;
var miniItemSize = 3,
minicellSize = miniItemSize - 1;
var xScale = d3.scale.ordinal()
.domain(x_elements)
.rangeBands([0, x_elements.length * itemSize]);
var xScaleMini = d3.scale.ordinal()
.domain(x_elements)
.rangeBands([0, x_elements.length * itemSize]);
var brush = d3.svg.brush().x(xScaleMini).extent([0, 100]).on("brush", brushs);
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 * itemHeight]);
var yScaleMini = d3.scale.ordinal()
.domain(y_elements)
.rangeBands([0, y_elements.length * miniItemSize]);
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('#chart')
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom+50);
var main = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")").attr('class','test');
var mini = svg.append('g').attr("transform", "translate(100,"+(height + margin.top + margin.bottom)+")");
var cells = main.selectAll('rect')
.data(data)
.enter().append('g').attr('class','box').append('rect')
.attr('class', 'cell')
.attr('stroke', 'white')
.attr('width', cellSize)
.attr('height', itemHeight)
.attr('y', function(d) {
return yScale(d.product) - 1;
})
.attr('x', function(d) {
return xScale(d.country);
})
//.append("text").text("here");
.attr('fill', function(d) { return colorScale(d.value); });
mini.selectAll('rect')
.data(data)
.enter().append('g').append('rect')
.attr('class', 'cell')
.attr('width', minicellSize)
.attr('height', minicellSize)
.attr('y', function(d) {
return yScaleMini(d.product);
})
.attr('x', function(d) {
return xScaleMini(d.country);
})
//.append("text").text("here");
.attr('fill', function(d) { return colorScale(d.value); });
//cells.append("text").text("test");
mini.append("g").attr("class", "x brush").call(brush).selectAll("rect")
.attr("y", -6).attr("height", 35);
cells.on("mousemove", function(d){
divTooltip.style("left", d3.event.pageX+10+"px");
divTooltip.style("top", d3.event.pageY-25+"px");
divTooltip.style("display", "inline-block");
var elements = document.querySelectorAll(':hover');
l = elements.length
l = l-1
element = elements[l].__data__
value = element.y1 - element.y0
divTooltip.html("<br>"+element.country+"<br>"+element.product+"<br>"+element.value+"");
});//(d.label)+
cells.on("mouseout", function(d){
divTooltip.style("display", "none");
});
main.append("g")
.attr("class", "y axis")
.call(yAxis)
.selectAll('text')
.attr('font-weight', 'normal');
main.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)";
});
function brushs() {
var selected = xScaleMini.domain().filter(
function(d) {
return (brush.extent()[0] <= xScaleMini(d))
&& (xScaleMini(d) <= brush.extent()[1]);
});
var results = [];
for (var i = 0 ; i < data.length ; i++) {
if ( selected.includes(data[i].country)) {
results.push(data[i]);
}
}
$('.box').remove();
// y_elements = d3.set(results.map(function( item ) { return item.product; } )).values();
x_elements = d3.set(results.map(function( item ) {
return item.country;
} )).values();
itemSize = width / x_elements.length,
itemHeight = height / y_elements.length,
cellSize = itemSize - 1;
xScale.domain(x_elements)
// yScale.domain(y_elements)
var cells = main.selectAll('rect')
.data(results)
.enter().append('g').attr('class','box').append('rect')
.attr('class', 'cell').attr('stroke', 'white')
.attr('width', cellSize)
.attr('height',itemHeight)
.attr('y', function(d) {
return yScale(d.product);
})
.attr('x', function(d) {
return xScale(d.country);
})
//.append("text").text("here");
.attr('fill', function(d) { return colorScale(d.value); });
main.select(".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)";
});
cells.on("mousemove", function(d){
divTooltip.style("left", d3.event.pageX+10+"px");
divTooltip.style("top", d3.event.pageY-25+"px");
divTooltip.style("display", "inline-block");
var elements = document.querySelectorAll(':hover');
l = elements.length
l = l-1
element = elements[l].__data__
value = element.y1 - element.y0
divTooltip.html("<br>"+element.country+"<br>"+element.product+"<br>"+element.value+"");
});//(d.label)+
cells.on("mouseout", function(d){
divTooltip.style("display", "none");
});
// main.select(".y.axis").call(yAxis)
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment