HeatMap.prototype.Create = function() { var obj = this; obj.hccol.splice(0); obj.colLabel.forEach(function(d,i){ obj.hccol.push(i+1); }); obj.svgM.attr("transform", "translate(" + obj.translateMiddle + ")scale(" + obj.scaleMiddle + ")"); obj.rowLabels = obj.svgMLabelsL.selectAll(".rowLabelg") .data(obj.rowLabelFrom); obj.rowLabels.enter() .append("text") .text(function (d) { return obj.mapLeft.countries[d]; }) .attr("x", states.widthML) .classed("hidden", false) .attr("y", function (d, i) { return (i/*obj.actualOrdering.indexOf(i)*/ * obj.cellSize+50); }) .style("text-anchor", "end") .attr("class", function (d,i) { return "rowLabel mono r"+i;} ) .style("opacity", function(d,i) { if(i < states.num_objs) return "1.0"; else return "0.0"; }) .on("mouseover", function(d, i) { var id1 = obj.rowLabelTo[i]; var id2 = obj.rowLabelFrom[i]; var id = id1*obj.mapLeft.countries.length+id2; if(obj.actualOrdering.indexOf(id) < states.num_objs && obj.actualOrdering.indexOf(id) < obj.num_visible) { d3.select(this).classed("text-hover",true); d3.selectAll(".rowLabel2" ).classed("text-highlight",function(r,ri){ return ri==i;}); obj.SetToolTipLabel(id1, id2); mapRight.HighlightLabel(id1); mapLeft.HighlightLabel(id2); VisualLink.HighlightLinkLabel(id, obj.actualOrdering, obj.num_visible, id1, id2); } }) .on("mouseout" , function(d, i) { d3.select("#tooltip").classed("hidden", true); d3.select(this).classed("text-hover",false); if(!states.showlines && states.enable_visuallinks === true) { visLinkLeft.HideAll(); visLinkRight.HideAll(); } var id1 = obj.rowLabelTo[i]; var id2 = obj.rowLabelFrom[i]; mapRight.DisableHighlightLabel(id1); mapLeft.DisableHighlightLabel(id2); }); obj.rowLabels.exit().remove(); obj.rowLabels2 = obj.svgMLabelsR.selectAll(".rowLabelg2") .data(obj.rowLabelTo); obj.rowLabels2.enter() .append("text") .text(function (d) { return obj.mapRight.countries[d]; }) .attr("x", 10) .attr("y", function (d, i) { return (i/*obj.actualOrdering.indexOf(i)*/ * obj.cellSize+50); }) .style("text-anchor", "start") .attr("class", function (d,i) { return "rowLabel2 mono r"+i;} ) .style("opacity", function(d,i) { if(i < states.num_objs) return "1.0"; else return "0.0"; }) .on("mouseover", function(d, i) { var id1 = obj.rowLabelTo[i]; var id2 = obj.rowLabelFrom[i]; var id = id1*obj.mapLeft.countries.length+id2; if(obj.actualOrdering.indexOf(id) < states.num_objs && obj.actualOrdering.indexOf(id) < obj.num_visible) { d3.select(this).classed("text-hover",true); d3.selectAll(".rowLabel" ).classed("text-highlight",function(r,ri){ return ri==i;}); obj.SetToolTipLabel(id1, id2); mapRight.HighlightLabel(id1); mapLeft.HighlightLabel(id2); VisualLink.HighlightLinkLabel(id, obj.actualOrdering, obj.num_visible, id1, id2); } }) .on("mouseout" , function(d, i) { d3.select("#tooltip").classed("hidden", true); d3.select(this).classed("text-hover",false); if(!states.showlines && states.enable_visuallinks === true) { visLinkLeft.HideAll(); visLinkRight.HideAll(); } var id1 = obj.rowLabelTo[i]; var id2 = obj.rowLabelFrom[i]; mapRight.DisableHighlightLabel(id1); mapLeft.DisableHighlightLabel(id2); }) obj.rowLabels2.exit().remove(); svgMColumnT.append("g") .selectAll(".colLabelg") .data(obj.colLabel) .enter() .append("text") .text(function (d) { return d; }) .attr("x", -50) .attr("y", function (d, i) { return states.widthML+obj.hccol.indexOf(i+1) * obj.cellSize; }) .style("text-anchor", "start") .attr("transform", "translate("+obj.cellSize/2 + ",-6) rotate (-90)") .attr("class", function (d,i) { return "colLabel mono c"+i;} ) .on("mouseover", function(d,i) { d3.select(this).classed("text-hover",true); var year = obj.colLabel[i]; Drawing.HighlightCountryAllColumn(i, year, mapRight, mapLeft); }) .on("mouseout" , function(d) { d3.select(this).classed("text-hover",false); mapLeft.DisableHighlightAllCountry(); mapRight.DisableHighlightAllCountry(); var minmax = [0,0]; dataObj.GetMinMax(minmax, obj.mapRight.countries, obj.mapLeft.countries); _legend.Update(minmax[0], minmax[1]); }); var heatMapGroup = svgMHeatmap .append("g") .attr("class","cellg") .attr("transform", "translate(0,0)scale(1)"); var dataCopy = dataObj.data.slice(); for(var i = dataCopy.length-1; i >= 0; i--) { if(dataCopy[i].FromKey >= mapRight.countries.length || dataCopy[i].ToKey >= mapLeft.countries.length) dataCopy.splice(i, 1); } obj.heatMap = heatMapGroup.selectAll(".cell") .data(dataCopy,function(d){return d.row+":"+d.col;}) obj.heatMap.enter() .append("rect") .attr("x", function(d) { return (obj.hccol.indexOf(d.col) * obj.cellSize) ; }) .attr("y", function(d) { return (/*obj.actualOrdering.indexOf*/(d.row-2) * obj.cellSize+50) ; }) .attr("class", function(d){return "cell cell-border cr"+(d.row-1)+" cc"+(d.col-1);}) .attr("width", obj.cellSize) .attr("height", obj.cellSize) .style("fill", function(d) { if(isNaN(d.Value) === true) return "#00ffff"; else return (states.absolut) ? (!colormapSequential) ? "#ff00ff" : colormapSequential.colorScale(d.Value) : (colormapDiverging) ? "#fff" : colormapDiverging.colorScale(obj.dataObj.difference[d.row-1][d.col-1]); }) .style("opacity", function(d,i) { if((d.row-1) < states.num_objs ) return "1.0"; else return "0.0"; }) .on("mouseover", function(d, t){ //highlight text d3.select(this).classed("cell-hover",true); d3.selectAll(".rowLabel").classed("text-highlight",function(r,ri){ return ri==(d.row-1);}); d3.selectAll(".rowLabel2").classed("text-highlight",function(r,ri){ return ri==(d.row-1);}); d3.selectAll(".colLabel").classed("text-highlight",function(c,ci){ return ci==(d.col-1);}); var id1 = d.FromKey; var id2 = d.ToKey; var id = d.FromKey * mapLeft.countries.length + d.ToKey; if(obj.actualOrdering.indexOf(id) < states.num_objs && obj.actualOrdering.indexOf(id) < obj.num_visible) { //Highlight labels mapRight.HighlightLabel(id1); mapLeft.HighlightLabel(id2); obj.SetToolTipMap(d); VisualLink.HighlightLinkMap(id, obj.actualOrdering, obj.num_visible, d); Drawing.HighlightCountryC(d, obj.mapLeft, obj.mapRight); } }) .on("mouseout", function(d, t) { d3.select(this).classed("cell-hover",false); d3.selectAll(".rowLabel").classed("text-highlight",false); d3.selectAll(".rowLabel2").classed("text-highlight",false); d3.selectAll(".colLabel").classed("text-highlight",false); d3.select("#tooltip").classed("hidden", true); var id1 = d.FromKey; var id2 = d.ToKey; if(!states.showlines && states.enable_visuallinks === true) { visLinkLeft.HideAll(); visLinkRight.HideAll(); } Drawing.HighlightCountryCClear(d, mapLeft, mapRight); mapRight.DisableHighlightLabel(id1); mapLeft.DisableHighlightLabel(id2); }) .on("dblclick", function(d,t) { if((mapLeft.zoomed === false) || (mapRight.zoomed === false)) { mapLeft.doubleClickedHeatmap( d,t, obj.rowLabelFrom) mapRight.doubleClickedHeatmap(d,t, obj.rowLabelTo) callOrdering(states.animation_duration); } else { mapLeft.reset(); mapRight.reset(); callOrdering(states.animation_duration); } }); obj.heatMap.exit().remove(); obj.Fit(); } HeatMap.prototype.CreateOrigin = function() { var obj = this; obj.hccol.splice(0); obj.colLabel.forEach(function(d,i){ obj.hccol.push(i+1); }); obj.svgM.attr("transform", "translate(0,0)scale(1.0)"); obj.svgMLabelsL.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); obj.svgMLabelsR.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); svgMHeatmap.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); svgMColumnT.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); svgMColumnT.selectAll(".colLabel") .attr("x", -50) .attr("y", function (d, i) { return states.widthML+obj.hccol.indexOf(i+1) * obj.cellSize; }) .style("font-size", function(d,i){ return 11.0+"px";}) svgMColumnT.selectAll("rect").attr("transform", "translate(0,0)scale(1)"); obj.scaleMiddle = 1.0; obj.translateMiddle = [0,0]; obj.zoom.scale(obj.scaleMiddle); obj.zoom.translate(obj.translateMiddle); var helper = new Array(); var label_left = []; var label_right = []; var rowLabelTo = []; for(var i = 0; i < obj.mapRight.countries.length; i++) { for(var j = 0; j < obj.dataObj.dataDestinitionYear[i].length; j++) helper.push({Value: obj.dataObj.dataDestinitionYear[i][j], row: (i+1), col: (j+1)}); label_right.push(obj.mapRight.countries[i]); label_left.push("All"); rowLabelTo[i] = i; } obj.heatMap = obj.heatMap .data(helper, function(d) { return d.row+":"+d.col + " - " + d.Value;}); obj.heatMap.enter() .append("svg:rect") .attr("x", function(d, i) { return ((d.col-1) * obj.cellSize); }) .attr("y", function(d, i) { return ((d.row-1) * obj.cellSize+50); }) .attr("class", function(d, i){return "cell cell-border cr"+ d.row +" cc"+d.col;}) .attr("width", obj.cellSize) .attr("height", obj.cellSize) .style("fill", function(d) { return "#fff"; }) .on("mouseover", function(d, t){ //highlight text d3.select(this).classed("cell-hover",true); d3.selectAll(".rowLabel").classed("text-highlight",function(r,ri){ return ri==(d.row-1);}); d3.selectAll(".rowLabel2").classed("text-highlight",function(r,ri){ return ri==(d.row-1);}); d3.selectAll(".colLabel").classed("text-highlight",function(c,ci){ return ci==(d.col-1);}); if(obj.actualOrdering.indexOf(d.row-1) < states.num_objs && obj.actualOrdering.indexOf(d.row-1) < obj.num_visible) { mapLeft.HighlightLabel(d.row-1, true); mapRight.HighlightLabel(d.row-1); obj.SetToolTipMap(d); VisualLink.HighlightLinkMap(d.row-1, obj.actualOrdering, obj.num_visible, d); Drawing.HighlightCountryOrigin(d, mapLeft, mapRight); } }) .on("mouseout", function(d, t) { if(states.enable_visuallinks === true && !states.showlines) { visLinkLeft.HideAll(); visLinkRight.HideAll(); } d3.select(this).classed("cell-hover",false); d3.selectAll(".rowLabel").classed("text-highlight",false); d3.selectAll(".rowLabel2").classed("text-highlight",false); d3.selectAll(".colLabel").classed("text-highlight",false); d3.select("#tooltip").classed("hidden", true); mapRight.DisableHighlightLabel(d.row-1); mapLeft.DisableHighlightLabel(d.row-1); Drawing.HighlightCountryOriginClear(d, mapLeft, mapRight); }) .on("dblclick", function(d,t) { mapRight.doubleClickedHeatmap(d,t, rowLabelTo); callOrdering(states.animation_duration); }); obj.heatMap.exit().remove(); obj.rowLabels = obj.rowLabels.data(label_left, function(d, i) {return d + " " + i;}); obj.rowLabels.enter() .append("text") .text(function (d) { return d; }) .attr("x", states.widthML) .classed("hidden", false) .attr("y", function (d, i) { return i * obj.cellSize+50; }) .style("text-anchor", "end") .attr("class", function (d,i) { return "rowLabel mono r"+i;} ) .on("mouseover", function(d, i) { if(obj.actualOrdering.indexOf(i) < states.num_objs && obj.actualOrdering.indexOf(i) < obj.num_visible) { obj.SetToolTipLabel(i); VisualLink.HighlightLinkLabel(i, obj.actualOrdering, obj.num_visible); mapLeft.HighlightLabel(i, true); mapRight.HighlightLabel(i); } }) .on("mouseout" , function(d, i) { mapRight.DisableHighlightLabel(i); mapLeft.DisableHighlightLabel(i, true); d3.select("#tooltip").classed("hidden", true); }) obj.rowLabels.exit().remove(); obj.rowLabels2 = obj.rowLabels2.data(rowLabelTo, function(d, i) {return d + " " + i;}); obj.rowLabels2.enter() .append("text") .text(function (d, i) { return label_right[i]; }) .attr("x", 10) .attr("y", function (d, i) { return i * obj.cellSize+50; }) .style("text-anchor", "start") .attr("class", function (d,i) { return "rowLabel2 mono r"+i;} ) .on("mouseover", function(d, i) { if(obj.actualOrdering.indexOf(d) < states.num_objs && obj.actualOrdering.indexOf(d) < obj.num_visible) { obj.SetToolTipLabel(i); VisualLink.HighlightLinkLabel(i, obj.actualOrdering, obj.num_visible); mapLeft.HighlightLabel(i, true); mapRight.HighlightLabel(i); } }) .on("mouseout" , function(d, i) { mapRight.DisableHighlightLabel(i); mapLeft.DisableHighlightLabel(i, true); d3.select("#tooltip").classed("hidden", true); }); obj.rowLabels2.exit().remove(); obj.Fit(); } HeatMap.prototype.CreateDestinition = function() { var obj = this; obj.hccol.splice(0); obj.colLabel.forEach(function(d,i){ obj.hccol.push(i+1); }); obj.scaleMiddle = 1.0; obj.translateMiddle = [0,0]; obj.zoom.scale(obj.scaleMiddle); obj.zoom.translate(obj.translateMiddle); obj.svgM.attr("transform", "translate(0,0)scale(1.0)"); obj.svgMLabelsL.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); obj.svgMLabelsR.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); svgMHeatmap.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); svgMColumnT.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); svgMColumnT.selectAll(".colLabel") .attr("x", -50) .attr("y", function (d, i) { return states.widthML+obj.hccol.indexOf(i+1) * obj.cellSize; }) .style("font-size", function(d,i){ return 11.0+"px";}) svgMColumnT.selectAll("rect").attr("transform", "translate(0,0)scale(1)"); var helper = new Array(); var label_left = []; var label_right = []; var rowLabelFrom = []; for(var i = 0; i < obj.dataObj.dataOriginYear.length; i++) { for(var j = 0; j < obj.dataObj.dataOriginYear[i].length; j++) helper.push({Value: obj.dataObj.dataOriginYear[i][j], row: (i+1), col: (j+1)}); label_left.push(obj.mapLeft.countries[i]); label_right.push("All"); rowLabelFrom[i] = i; } obj.heatMap = obj.heatMap.data(helper, function(d) { return d.row+":"+d.col + " - " + d.Value;}); obj.heatMap.enter() .append("rect") .attr("x", function(d, i) { return (d.col-1) * obj.cellSize; }) .attr("y", function(d, i) { return (d.row-1) * obj.cellSize+50; }) .attr("class", function(d, i){return "cell cell-border cr"+ d.row +" cc"+d.col;}) .attr("width", obj.cellSize) .attr("height", obj.cellSize) .style("fill", function(d) { return (!colormapSequential) ? "#fff" : colormapSequential.colorScale(d.Value); }) .on("mouseover", function(d, t){ //highlight text d3.select(this).classed("cell-hover",true); d3.selectAll(".rowLabel").classed("text-highlight",function(r,ri){ return ri==(d.row-1);}); d3.selectAll(".rowLabel2").classed("text-highlight",function(r,ri){ return ri==(d.row-1);}); d3.selectAll(".colLabel").classed("text-highlight",function(c,ci){ return ci==(d.col-1);}); if(obj.actualOrdering.indexOf(d.row-1) < states.num_objs && obj.actualOrdering.indexOf(d.row-1) < obj.num_visible) { mapRight.HighlightLabel(d.row-1, true); mapLeft.HighlightLabel(d.row-1); obj.SetToolTipMap(d); VisualLink.HighlightLinkMap(d.row-1, obj.actualOrdering, obj.num_visible, d); Drawing.HighlightCountryDestinition(d, mapLeft, mapRight); } }) .on("mouseout", function(d, t) { d3.select(".label"+obj.mapLeft.side+""+ (d.row-1)).classed("label-highlight", false); obj.mapRight.countries.forEach(function(d,i) { d3.select(".label"+obj.mapRight.side+""+ i).classed("label-highlight", false); }); if(states.enable_visuallinks === true && states.showlines === false) { visLinkLeft.HideAll(); visLinkRight.HideAll(); } mapRight.DisableHighlightLabel(d.row-1); mapLeft.DisableHighlightLabel(d.row-1); d3.select(this).classed("cell-hover",false); d3.selectAll(".rowLabel").classed("text-highlight",false); d3.selectAll(".rowLabel2").classed("text-highlight",false); d3.selectAll(".colLabel").classed("text-highlight",false); d3.select("#tooltip").classed("hidden", true); Drawing.HighlightCountryDestinitionClear(d, mapLeft, mapRight); }) .on("dblclick", function(d,t) { mapLeft.doubleClickedHeatmap(d,t, rowLabelFrom); callOrdering(states.animation_duration); }); obj.heatMap.exit().remove(); obj.rowLabels = obj.rowLabels.data(rowLabelFrom, function(d, i) {return d + " " + i;}); obj.rowLabels.enter() .append("text") .text(function (d, i) { return label_left[i]; }) .attr("x", states.widthML) .classed("hidden", false) .attr("y", function (d, i) { return i * obj.cellSize+50; }) .style("text-anchor", "end") .attr("class", function (d,i) { return "rowLabel mono r"+i;} ) .on("mouseover", function(d, i) { if(obj.actualOrdering.indexOf(d) < states.num_objs && obj.actualOrdering.indexOf(d) < obj.num_visible) { obj.SetToolTipLabel(i); VisualLink.HighlightLinkLabel(i, obj.actualOrdering, obj.num_visible); mapLeft.HighlightLabel(i); mapRight.HighlightLabel(i, true); } }) .on("mouseout" , function(d, i) { mapLeft.DisableHighlightLabel(i); mapRight.DisableHighlightLabel(i, true); d3.select("#tooltip").classed("hidden", true); }) obj.rowLabels.exit().remove(); obj.rowLabels2 = obj.rowLabels2.data(label_right, function(d, i) {return d + " " + i;}); obj.rowLabels2.enter() .append("text") .text(function (d) { return d; }) .attr("x", 10) .attr("y", function (d, i) { return i * obj.cellSize+50; }) .style("text-anchor", "start") .attr("class", function (d,i) { return "rowLabel2 mono r"+i;} ) .on("mouseover", function(d, i) { if(obj.actualOrdering.indexOf(i) < states.num_objs && obj.actualOrdering.indexOf(i) < obj.num_visible) { obj.SetToolTipLabel(i); VisualLink.HighlightLinkLabel(i, obj.actualOrdering, obj.num_visible); mapLeft.HighlightLabel(i); mapRight.HighlightLabel(i, true); } }) .on("mouseout" , function(d, i) { mapLeft.DisableHighlightLabel(i); mapRight.DisableHighlightLabel(i, true); d3.select("#tooltip").classed("hidden", true); }); obj.rowLabels2.exit().remove(); obj.Fit(); } HeatMap.prototype.CreateAll = function() { var obj = this; obj.scaleMiddle = 1.0; obj.translateMiddle = [0,0]; obj.zoom.scale(obj.scaleMiddle); obj.zoom.translate(obj.translateMiddle); obj.svgM.attr("transform", "translate(0,0)scale(1.0)"); obj.svgMLabelsL.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); obj.svgMLabelsR.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); svgMHeatmap.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); svgMColumnT.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); svgMColumnT.selectAll(".colLabel") .attr("x", -50) .attr("y", function (d, i) { return states.widthML+obj.hccol.indexOf(i+1) * obj.cellSize; }) .style("font-size", function(d,i){ return 11.0+"px";}) svgMColumnT.selectAll("rect").attr("transform", "translate(0,0)scale(1)"); var label = ["All"]; var helper = new Array(); for(var i = 0; i < obj.dataObj.dataYear.length; i++) helper.push({Value: obj.dataObj.dataYear[i], row: (1), col: (i+1)}); obj.heatMap = obj.heatMap.data(helper, function(d) { return d.row+":"+d.col + " - " + d.Value;}); obj.heatMap.enter() .append("rect") .attr("x", function(d, i) { return (d.col-1) * obj.cellSize; }) .attr("y", function(d, i) { return 50; }) .attr("class", function(d, i){return "cell cell-border cr"+ d.row +" cc"+d.col;}) .attr("width", obj.cellSize) .attr("height", obj.cellSize) .style("fill", function(d) { return (!colormapSequential) ? "#fff" : colormapSequential.colorScale(d.Value); }) .on("mouseover", function(d, t){ console.log("mouseover"); //highlight text d3.select(this).classed("cell-hover",true); d3.selectAll(".rowLabel").classed("text-highlight",function(r,ri){ return ri==(d.row-1);}); d3.selectAll(".rowLabel2").classed("text-highlight",function(r,ri){ return ri==(d.row-1);}); d3.selectAll(".colLabel").classed("text-highlight",function(c,ci){ return ci==(d.col-1);}); mapRight.HighlightLabel(d.row-1, true); mapLeft.HighlightLabel(d.row-1, true); obj.SetToolTipMap(d); Drawing.HighlightCountryAll(d, mapLeft, mapRight); }) .on("mouseout", function(d, t) { mapRight.DisableHighlightLabel(d.row-1); mapLeft.DisableHighlightLabel(d.row-1); d3.select(this).classed("cell-hover",false); d3.selectAll(".rowLabel").classed("text-highlight",false); d3.selectAll(".rowLabel2").classed("text-highlight",false); d3.selectAll(".colLabel").classed("text-highlight",false); d3.select("#tooltip").classed("hidden", true); Drawing.HighlightCountryAllClear(mapLeft, mapRight); }); obj.heatMap.exit().remove(); obj.rowLabels = obj.rowLabels.data(label, function(d, i) {return d + " " + i;}); obj.rowLabels.enter() .append("text") .text(function (d) { return d; }) .attr("x", states.widthML) .classed("hidden", false) .attr("y", 65) .style("text-anchor", "end") .attr("class", function (d,i) { return "rowLabel mono r"+i;} ) ; obj.rowLabels.exit().remove(); obj.rowLabels2 = obj.rowLabels2.data(label, function(d, i) {return d + " " + i;}); obj.rowLabels2.enter() .append("text") .text(function (d) { return d; }) .attr("x", 10) .attr("y", 65) .style("text-anchor", "start") .attr("class", function (d,i) { return "rowLabel2 mono r"+i;} ) obj.rowLabels2.exit().remove(); obj.Fit(); }