This is a heatmap inspired by this Trulia recreation, with the following additions:
forked from ilanman's block: Heat map with tool-tip and random values.
xxxxxxxxxx<meta charset="utf-8"><html> <head> <style> rect.bordered { stroke: #bbb; stroke-width:3px; } text.mono { font-size: 9pt; font-family: verdana; fill: #aaa; } text.mono:hover { font-size: 12pt; font-family: verdana; fill: #aaa; font-weight: bold; } .square { opacity: 0.5; } .square:hover { opacity: 1.0; } .d3-tip { font-family: Verdana; background: rgba(0, 0, 0, 0.8); padding: 8px; color: #fff; z-index: 5070; } </style> <button type="button" id="Normal">Normal</button> <button type="button" id="Logistic">Logistic</button> <button type="button" id="Exponential">Exponential</button><br> <script src="https://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="https://d3js.org/d3.v3.js"></script> <script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> <script src="https://d3js.org/colorbrewer.v1.min.js"></script> <script src="rand.js"></script> </head> <body> <script type="text/javascript"> var margin = { top: 50, right: 0, bottom: 100, left: 30 }, width = 960 - margin.left - margin.right, height = 430 - margin.top - margin.bottom, gridSize = Math.floor(width / 25), legendWidth = (gridSize/2 + 4), dim_1 = ['Acir Gurgacz (PDT-RO)','Aécio Neves (PSDB-MG)','Aloysio Nunes Ferreira (PSDB-SP)','Alvaro Dias (PV-PR)','Ana Amélia (PP-RS)','Angela Portela (PT-RR)','Antonio Anastasia (PSDB-MG)','Antonio Carlos Valadares (PSB-SE)','Armando Monteiro (PTB-PE)','Ataídes Oliveira (PSDB-TO)','Benedito de Lira (PP-AL)','Cássio Cunha Lima (PSDB-PB)','Cidinho Santos (PR-MT)','Ciro Nogueira (PP-PI)','Cristovam Buarque (PPS-DF)','Dalirio Beber (PSDB-SC)','Dário Berger (PMDB-SC)','Davi Alcolumbre (DEM-AP)','Edison Lobão (PMDB-MA)','Eduardo Amorim (PSC-SE)','Eduardo Braga (PMDB-AM)','Eduardo Lopes (PRB-RJ)','Elmano Férrer (PTB-PI)','Eunício Oliveira (PMDB-CE)','Fátima Bezerra (PT-RN)','Fernando Bezerra Coelho (PSB-PE)','Fernando Collor (PTC-AL)','Flexa Ribeiro (PSDB-PA)','Garibaldi Alves Filho (PMDB-RN)','Gladson Cameli (PP-AC)','Gleisi Hoffmann (PT-PR)','Hélio José (PMDB-DF)','Humberto Costa (PT-PE)','Ivo Cassol (PP-RO)','Jader Barbalho (PMDB-PA)','João Alberto Souza (PMDB-MA)','João Capiberibe (PSB-AP)','Jorge Viana (PT-AC)','José Agripino (DEM-RN)','José Aníbal (PSDB-SP)','José Maranhão (PMDB-PB)','José Medeiros (PSD-MT)','José Pimentel (PT-CE)','Kátia Abreu (PMDB-TO)','Lasier Martins (PDT-RS)','Lídice da Mata (PSB-BA)','Lindbergh Farias (PT-RJ)','Lúcia Vânia (PSB-GO)','Magno Malta (PR-ES)','Maria do Carmo Alves (DEM-SE)','Marta Suplicy (PMDB-SP)','Omar Aziz (PSD-AM)','Otto Alencar (PSD-BA)','Paulo Bauer (PSDB-SC)','Paulo Paim (PT-RS)','Paulo Rocha (PT-PA)','Pedro Chaves (PSC-MS)','Raimundo Lira (PMDB-PB)','Randolfe Rodrigues (REDE-AP)','Regina Sousa (PT-PI)','Reguffe (S/PARTIDO-DF)','Renan Calheiros (PMDB-AL)','Ricardo Ferraço (PSDB-ES)','Roberto Muniz (PP-BA)','Roberto Requião (PMDB-PR)','Roberto Rocha (PSB-MA)','Romário (PSB-RJ)','Romero Jucá (PMDB-RR)','Ronaldo Caiado (DEM-GO)','Rose de Freitas (PMDB-ES)','Sérgio Petecão (PSD-AC)','Simone Tebet (PMDB-MS)','Tasso Jereissati (PSDB-CE)','Telmário Mota (PDT-RR)','Valdir Raupp (PMDB-RO)','Vanessa Grazziotin (PCdoB-AM)','Vicentinho Alves (PR-TO)','Waldemir Moka (PMDB-MS)','Wellington Fagundes (PR-MT)','Wilder Morais (PP-GO)','Zeze Perrella (PTB-MG)',], dim_2 = ["Votação 1", "Votação2"], buckets = 3; mu = 81, sigma = 5, lambda = 0.1; var svg = d3.select("body").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 + ")"); d3.tsv("heat.tsv", function(d,i) { return { dim1: +d.dim1, dim2: +d.dim2, value: +Math.random()*10 }; }, function(error, data) { var maxNum = Math.round(d3.max(data,function(d){ return d.value; })); var colors = colorbrewer.RdYlGn[buckets]; var colorScale = d3.scale.quantile() .domain([0, buckets - 1, maxNum]) .range(colors); var tip = d3.tip() .attr('class', 'd3-tip') .style("visibility","visible") .offset([-20, 0]) .html(function(d) { return "Value: <span style='color:red'>" + Math.round(d.value); }); tip(svg.append("g")); var dim1Labels = svg.selectAll(".dim1Label") .data(dim_1) .enter().append("text") .text(function (d) { return d; }) .attr("x", 0) .attr("y", function (d, i) { return i * gridSize; }) .style("text-anchor", "end") .attr("transform", "translate(-6," + gridSize / 1.5 + ")") .attr("class","mono"); var dim2Labels = svg.selectAll(".dim2Label") .data(dim_2) .enter().append("text") .text(function(d) { return d; }) .attr("x", function(d, i) { return i * gridSize; }) .attr("y", 0) .style("text-anchor", "middle") .attr("transform", "translate(" + gridSize / 2 + ", -6)") .attr("class","mono"); var heatMap = svg.selectAll(".dim2") .data(data) .enter().append("rect") .attr("x", function(d) { return (d.dim2 - 1) * gridSize; }) .attr("y", function(d) { return (d.dim1 - 1) * gridSize; }) .attr("rx", 4) .attr("ry", 4) .attr("class", "dim2 bordered") .attr("width", gridSize-2) .attr("height", gridSize-2) .style("fill", colors[0]) .attr("class", "square") .on('mouseover', tip.show) .on('mouseout', tip.hide); heatMap.transition() .style("fill", function(d) { return colorScale(d.value); }); heatMap.append("title").text(function(d) { return d.value; }); var legend = svg.selectAll(".legend") .data([0].concat(colorScale.quantiles()), function(d) { return d; }) .enter().append("g") .attr("class", "legend"); legend.append("rect") .attr("x", function(d, i) { return gridSize * 11; }) .attr("y", function(d, i) { return (i * legendWidth + 7); }) .attr("width", gridSize/2) .attr("height", gridSize/2) .style("fill", function(d, i) { return colors[i]; }) .attr("class", "square"); legend.append("text") .attr("class", "mono") .text(function(d) { return "≥ " + Math.round(d); }) .attr("x", function(d, i) { return gridSize * 11 + 25; }) .attr("y", function(d, i) { return (i * legendWidth + 20); }) var title = svg.append("text") .attr("class", "mono") .attr("x", gridSize * 11) .attr("y", - 6) .style("font-size", "14px") .text("Legend"); // when user updates, change values d3.select("#Normal").on("click", function(d) { update(data, "norm"); } ); d3.select("#Logistic").on("click", function(d) { update(data, "logi"); } ); d3.select("#Exponential").on("click", function(d) { update(data, "expo"); } ); function update(data, dist){ d3.selectAll("class","d3-tip").remove(); newVal = new Array(100); for (var i =0; i < 100; i++){ if(dist == "norm"){ newVal[i] = box_muller(mu, sigma); } else if (dist == "logi"){ newVal[i] = generate_logistic(mu, sigma); } else if (dist == "expo"){ newVal[i] = generate_exp(lambda); } } var tip = d3.tip() .attr('class', 'd3-tip') .style("visibility","visible") .offset([-20, 0]) .html(function(d,i) { return "Value: <span style='color:red'>" + Math.round(newVal[i]); }); tip(svg.append("g")); var heatMap = svg.selectAll(".dim2") .data(data) .enter().append("rect") .attr("x", function(d) { return (d.dim2 - 1) * gridSize; }) .attr("y", function(d) { return (d.dim1 - 1) * gridSize; }) .attr("rx", 4) .attr("ry", 4) .attr("class", "dim2 bordered") .attr("width", gridSize-2) .attr("height", gridSize-2) .style("fill", colors[0]) .attr("class", "square") .on('mouseover', tip.show) .on('mouseout', tip.hide); heatMap.transition().style("fill", function(d,i) { return colorScale( newVal[i] ); }); heatMap.append("title").text(function(d) { return newVal[i]; }); }; } ); </script> </body></html> Modified http://code.jquery.com/jquery.js to a secure url
Modified http://d3js.org/d3.v3.js to a secure url
Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url
Modified http://d3js.org/colorbrewer.v1.min.js to a secure url
https://code.jquery.com/jquery.js
https://d3js.org/d3.v3.js
https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js
https://d3js.org/colorbrewer.v1.min.js