Last active
March 27, 2020 01:09
-
-
Save Umesh-Markande/ea460702b34f01ab88840b62694ed41c to your computer and use it in GitHub Desktop.
HeatMap With Interactive Brushable Bar d3.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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