706 lines
19 KiB
JavaScript
Executable File
706 lines
19 KiB
JavaScript
Executable File
/*
|
|
* Class SVGMap
|
|
*
|
|
* @elementId - the html DOM id
|
|
*
|
|
*
|
|
* Requires project.js, heatmap.js
|
|
*/
|
|
|
|
var SVGMap = function(elementId, mapConf) {
|
|
|
|
var vBoxWidth = 1200,
|
|
vBoxHeight = 900,
|
|
bgWidth = 900,
|
|
bgHeight = 1500,
|
|
overlayID = "telemetry",
|
|
tooltip = new CustomTooltip(elementId + "-tooltip"),
|
|
clicked,
|
|
heatmapOptionsId;
|
|
|
|
// Initialise the map
|
|
loadSvg();
|
|
|
|
function loadSvg() {
|
|
//block();
|
|
$.ajax({
|
|
url: mapConf.svgFile,
|
|
type: "GET",
|
|
data: {},
|
|
dataType: "xml",
|
|
async: false,
|
|
|
|
success: function(xml, textStatus, jqXHR) {
|
|
var importedNode;
|
|
try {
|
|
importedNode = document.importNode(xml.documentElement, true);
|
|
}
|
|
catch(e) {
|
|
// IE case
|
|
importedNode = ieImportNode(xml.documentElement, document);
|
|
}
|
|
|
|
$("#" + elementId).append(importedNode);
|
|
},
|
|
error: function (xhr, ajaxOptions, thrownError){
|
|
console.error(this.url + "\n" + ajaxOptions + " " + xhr.status + " " + thrownError );
|
|
},
|
|
complete: function() {
|
|
var svg = d3.select("#" + elementId + " svg")
|
|
.attr("width", $("#" + elementId).width())
|
|
.attr("height", $("#" + elementId).height())
|
|
.attr("enable-background", "new 0 0 " + bgWidth + " " + bgHeight)
|
|
.call(svg_interact);
|
|
|
|
drawGrid();
|
|
}
|
|
});
|
|
//unBlock();
|
|
}
|
|
|
|
function drawGrid() {
|
|
var gridStep = 500/mapConf.scale; // The step of the grid in map coordinates
|
|
|
|
var grid = d3.select("#" + elementId + " svg")
|
|
.append("svg:g")
|
|
.attr("id", "grid");
|
|
|
|
var xAxisDataNeg = d3.range(convert2WebXCoord(0), 0, -gridStep);
|
|
var xAxisDataPos = d3.range(convert2WebXCoord(0), bgWidth, gridStep);
|
|
|
|
var yAxisDataNeg = d3.range(convert2WebYCoord(0), 0, -gridStep);
|
|
var yAxisDataPos = d3.range(convert2WebYCoord(0), bgHeight, gridStep);
|
|
|
|
grid.selectAll("line.vertical")
|
|
.data(xAxisDataNeg.concat(xAxisDataPos))
|
|
.enter()
|
|
.append("svg:line")
|
|
.attr("x1", function(d) {return d;})
|
|
.attr("y1", 0)
|
|
.attr("x2", function(d) {return d;})
|
|
.attr("y2", bgHeight)
|
|
.attr("class", "map-grid");
|
|
|
|
grid.selectAll("line.horizontal")
|
|
.data(yAxisDataNeg.concat(yAxisDataPos))
|
|
.enter()
|
|
.append("svg:line")
|
|
.attr("x1", 0)
|
|
.attr("y1", function(d) {return d;})
|
|
.attr("x2", bgWidth)
|
|
.attr("y2", function(d) {return d;})
|
|
.attr("class", "map-grid");
|
|
}
|
|
|
|
function drawLayers(layersElementId) {
|
|
$("#" + layersElementId)
|
|
.append(
|
|
$("<fieldset>")
|
|
.attr("id", "map-layers")
|
|
.append(
|
|
$("<legend>").text("Map Layers")
|
|
)
|
|
)
|
|
|
|
mapConf.layers.push(overlayID);
|
|
|
|
$.each(mapConf.layers, function(i, layer) {
|
|
$("#map-layers")
|
|
.append(
|
|
$("<input>")
|
|
.attr("type", "checkbox")
|
|
.attr("id", "map-layer-" + layer)
|
|
.attr("checked", true)
|
|
.val(layer)
|
|
)
|
|
.append(
|
|
$("<label>")
|
|
.attr("for", "map-layer-" + layer)
|
|
.text(capitaliseString(layer))
|
|
)
|
|
.append($("<br />"));
|
|
});
|
|
|
|
$("#map-layers input[type=checkbox]").click(function() {
|
|
var layer = d3.select("#" + elementId + " svg").select("g#" + $(this).val());
|
|
|
|
if ($(this).is(":checked")) {
|
|
layer
|
|
.transition()
|
|
.attr("opacity", 1);
|
|
}
|
|
else {
|
|
layer
|
|
.transition()
|
|
.attr("opacity", 0.01);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function show() {
|
|
$("#" + elementId)
|
|
.removeClass("hidden");
|
|
}
|
|
|
|
function hide() {
|
|
$("#" + elementId)
|
|
.addClass("hidden");
|
|
}
|
|
|
|
function removeOverlay() {
|
|
d3.select("#" + elementId + " svg")
|
|
.selectAll("g#" + overlayID)
|
|
.transition()
|
|
.attr("opacity", 0.01)
|
|
.remove();
|
|
}
|
|
|
|
function drawCircles(dataObjects, dataFunctions) {
|
|
var minPercent = 2,
|
|
maxPercent = 12;
|
|
|
|
var svgOverlay = d3.select("#" + elementId + " svg")
|
|
.append("svg:g")
|
|
.attr("id", overlayID);
|
|
|
|
svgOverlay.append("svg:rect")
|
|
.attr("fill", "#000000")
|
|
.attr("fill-opacity", "0.5")
|
|
.attr("width", bgWidth)
|
|
.attr("height", bgHeight);
|
|
|
|
var valuesSum = d3.sum(dataObjects, function(d) {
|
|
return dataFunctions.getValue(d);
|
|
});
|
|
|
|
svgOverlay
|
|
.selectAll("circle")
|
|
.data(dataObjects)
|
|
.enter()
|
|
.append("svg:circle")
|
|
.attr("id", function(d, i) {return "circle_" + i;})
|
|
.attr("cx", function(d) {
|
|
return convert2WebXCoord(dataFunctions.getX(d));
|
|
})
|
|
.attr("cy", function(d) {
|
|
return convert2WebYCoord(dataFunctions.getY(d));
|
|
})
|
|
.attr("r", function(d, i) {
|
|
var radius = 50/mapConf.scale;
|
|
if (dataFunctions.getValue(d)) {
|
|
radius = (dataFunctions.getValue(d)/valuesSum) * 100;
|
|
|
|
radius = (radius < minPercent) ? minPercent : radius;
|
|
radius = (radius > maxPercent) ? maxPercent : radius;
|
|
}
|
|
|
|
return radius;
|
|
})
|
|
.attr("fill", function(d) {return dataFunctions.getColour(d)})
|
|
//.attr("fill-opacity", 0.85)
|
|
.attr("stroke", "rgba(0, 0, 0, 0.5)")
|
|
.attr("stroke-width", 0.2)
|
|
.attr("opacity", 0.85)
|
|
.on("mouseover", function(d, i) {
|
|
tooltip.showTooltip(dataFunctions.getTooltipContent(d), d3.event);
|
|
})
|
|
.on("mouseout", function(d, i) {
|
|
tooltip.hideTooltip();
|
|
});
|
|
/*
|
|
.append("title")
|
|
.text(function(d, i) {
|
|
var title = ""
|
|
+ "Name: " + dataFunctions.getName(d)
|
|
+ ", \nLocation: (x=" + dataFunctions.getX(d)
|
|
+ ", y="
|
|
+ dataFunctions.getY(d)
|
|
+ ")";
|
|
|
|
return title;
|
|
|
|
});
|
|
*/
|
|
|
|
}
|
|
|
|
function drawHeatmap(dataObjects, dataFunctions, isInverted) {
|
|
|
|
var min = 0, max = 0;
|
|
$.each(dataObjects, function(i, d) {
|
|
min = ((dataFunctions.getValue(d) < min) ? dataFunctions.getValue(d) : min);
|
|
max = ((dataFunctions.getValue(d) > max) ? dataFunctions.getValue(d) : max);
|
|
});
|
|
var med = ((min+max)/2);
|
|
|
|
var colourInterpolator;
|
|
if (heatmapOptionsId) {
|
|
// var thresholdSlider = $("#" + domElement + " div.threshold-slider");
|
|
// thresholdSlider.slider("option", "min", min);
|
|
// thresholdSlider.slider("option", "max", max);
|
|
// thresholdSlider.slider("refresh");
|
|
|
|
var valuesSlider = $("#" + heatmapOptionsId + " div.value-slider");
|
|
valuesSlider.slider("option", "min", min);
|
|
valuesSlider.slider("option", "max", max);
|
|
$("#" + heatmapOptionsId + " span.value-min").text(min.toFixed(2));
|
|
$("#" + heatmapOptionsId + " span.value-max").text(max.toFixed(2));
|
|
|
|
if ((valuesSlider.slider("values")[0] == min) && (valuesSlider.slider("values")[1] == min)) {
|
|
valuesSlider.slider("values", 0, min);
|
|
valuesSlider.slider("values", 1, max);
|
|
}
|
|
valuesSlider.slider("refresh");
|
|
|
|
rangeSliderValues = valuesSlider.slider("values");
|
|
var heatmapSliderValues = $("#" + heatmapOptionsId + " div.heatmap-slider-placeholder").slider("values");
|
|
|
|
var colourInterpolator = getColourInterpolator(rangeSliderValues[0], rangeSliderValues[1],
|
|
(isInverted) ? heatmapSliderValues[1] : heatmapSliderValues[0],
|
|
(isInverted) ? heatmapSliderValues[0] : heatmapSliderValues[1]
|
|
);
|
|
|
|
//var colourInterpolator = getColourInterpolator(min, max, 0, 120);
|
|
|
|
$("#" + heatmapOptionsId + " span.heatmap-gradient" + " span.heatmap-min").text(rangeSliderValues[0].toFixed(2));
|
|
$("#" + heatmapOptionsId + " span.heatmap-gradient" + " span.heatmap-med").text(
|
|
((rangeSliderValues[0] + rangeSliderValues[1]) / 2).toFixed(2)
|
|
);
|
|
$("#" + heatmapOptionsId + " span.heatmap-gradient" + " span.heatmap-max").text(rangeSliderValues[1].toFixed(2));
|
|
|
|
}
|
|
else {
|
|
colourInterpolator = getColourInterpolator(min, max, 0, 120);
|
|
}
|
|
|
|
var heatmap = d3.select("#" + elementId + " svg").append("svg:g")
|
|
.attr("id", overlayID)
|
|
//.attr("opacity", 0.01);
|
|
|
|
heatmap
|
|
.selectAll("rect")
|
|
.data(dataObjects)
|
|
.enter()
|
|
.append("svg:rect")
|
|
.attr("x", function(d) {
|
|
return convert2WebXCoord(dataFunctions.getX(d));
|
|
})
|
|
.attr("y", function(d) {
|
|
return convert2WebYCoord(dataFunctions.getY(d) + dataFunctions.getResolution());
|
|
})
|
|
.attr("width", dataFunctions.getResolution()/project.map.scale)
|
|
.attr("height", dataFunctions.getResolution()/project.map.scale)
|
|
.attr("fill", function(d) {
|
|
return colourInterpolator(dataFunctions.getValue(d));
|
|
})
|
|
//.attr("visibility", function(d) { // Hide if below the threshold limit
|
|
// return (valueFunc(d) >= thresholdSlider.slider("value")) ? "visible" : "hidden";
|
|
//})
|
|
.on("click", heatmapHighlight)
|
|
.append("title")
|
|
.text(dataFunctions.getTitle);
|
|
|
|
heatmap
|
|
.transition()
|
|
.attr("opacity", 1);
|
|
|
|
function heatmapHighlight(d) {
|
|
|
|
if (d && clicked !== d) {
|
|
clicked = d;
|
|
}
|
|
else {
|
|
clicked = null;
|
|
}
|
|
|
|
heatmap.selectAll("rect")
|
|
.classed("clicked", clicked && function(d) { return d === clicked; });
|
|
}
|
|
|
|
}
|
|
// end of drawHeatmap
|
|
|
|
function addHeatmapOptions(parentElementId, graphRedrawFunction, isInverted) {
|
|
var optionsId = "heatmap-options";
|
|
var optionsLabel = "Heatmap Options";
|
|
|
|
$("#" + parentElementId)
|
|
.append(
|
|
$("<fieldset>")
|
|
.attr("id", optionsId)
|
|
.append(
|
|
$("<legend>").text(optionsLabel)
|
|
)
|
|
);
|
|
|
|
|
|
$("#" + optionsId).append(
|
|
$("<div>")
|
|
.addClass("heatmap-options")
|
|
.append(
|
|
$("<div>")
|
|
.append(
|
|
$("<span>").text("Gradient Colour Range")
|
|
)
|
|
.append(
|
|
$("<br />")
|
|
)
|
|
.append(
|
|
$("<span>")
|
|
.addClass("heatmap-slider")
|
|
.append(
|
|
$("<div>")
|
|
.addClass("heatmap-slider-placeholder")
|
|
.append(
|
|
$("<canvas>")
|
|
)
|
|
)
|
|
)
|
|
)
|
|
.append(
|
|
$("<br />")
|
|
)
|
|
.append(
|
|
$("<div>")
|
|
.append(
|
|
$("<span>").text("Gradient Value Range")
|
|
)
|
|
.append(
|
|
$("<div>").addClass("value-slider")
|
|
)
|
|
.append(
|
|
$("<span>").html("<- Min -")
|
|
)
|
|
.append(
|
|
$("<span>").addClass("value-min")
|
|
)
|
|
.append(
|
|
$("<span>").html(" Max -> ")
|
|
)
|
|
.append(
|
|
$("<span>").addClass("value-max")
|
|
)
|
|
)
|
|
.append(
|
|
$("<br />")
|
|
)
|
|
.append(
|
|
$("<div>")
|
|
.append(
|
|
$("<span>").text("Heatmap Gradient")
|
|
)
|
|
.append(
|
|
$("<span>").addClass("heatmap-units")
|
|
)
|
|
.append(
|
|
$("<br />")
|
|
)
|
|
|
|
.append(
|
|
$("<span>")
|
|
.addClass("heatmap-gradient")
|
|
.append(
|
|
$("<canvas>")
|
|
)
|
|
.append(
|
|
$("<br />")
|
|
)
|
|
.append(
|
|
$("<span>").addClass("heatmap-min")
|
|
)
|
|
.append(
|
|
$("<span>").addClass("heatmap-med")
|
|
)
|
|
.append(
|
|
$("<span>").addClass("heatmap-max")
|
|
)
|
|
)
|
|
)
|
|
);
|
|
|
|
var defaultMinHue = 0, // Hue angle starts from Red
|
|
defaultMaxHue = 240, // and interpolates to Blue
|
|
defaultMinHueSlider = 0, //
|
|
defaultMaxHueSlider = 120; //
|
|
|
|
$("#" + optionsId + " div.heatmap-slider-placeholder").slider({
|
|
range: true,
|
|
min: defaultMinHue,
|
|
max: defaultMaxHue,
|
|
values: [defaultMinHueSlider, defaultMaxHueSlider],
|
|
stop: function(event, ui ) { // fire when mouse is released
|
|
generateHeatmapGradient(optionsId + " span.heatmap-gradient",
|
|
(isInverted) ? ui.values[1] : ui.values[0],
|
|
(isInverted) ? ui.values[0] : ui.values[1]
|
|
);
|
|
typewatch(graphRedrawFunction, 200);
|
|
}
|
|
});
|
|
|
|
$("#" + optionsId + " div.value-slider").slider({
|
|
range: true,
|
|
min: 0,
|
|
max: 0,
|
|
values: [0, 0],
|
|
stop: function(event, ui ) { // fire when mouse is released
|
|
typewatch(graphRedrawFunction, 200);
|
|
}
|
|
});
|
|
|
|
/*
|
|
$("#" + optionsId + " div.threshold-slider").slider({
|
|
min: 0,
|
|
max: 0,
|
|
value: 0,
|
|
stop: function(event, ui ) { // fire when mouse is released
|
|
//$(this).next().text(ui.value.toFixed(2));
|
|
//generateCustomOverlay(true);
|
|
graphRedrawFunction();
|
|
}
|
|
});
|
|
*/
|
|
|
|
generateHeatmapGradient(optionsId + " span.heatmap-slider", defaultMinHue, defaultMaxHue);
|
|
|
|
generateHeatmapGradient(optionsId + " span.heatmap-gradient",
|
|
(isInverted) ? defaultMaxHueSlider : defaultMinHueSlider,
|
|
(isInverted) ? defaultMinHueSlider : defaultMaxHueSlider
|
|
);
|
|
//defaultMaxHueSlider, defaultMinHueSlider);
|
|
|
|
// Save to global
|
|
heatmapOptionsId = optionsId;
|
|
}
|
|
|
|
function generateHeatmapGradient(elementID, minHue, maxHue) {
|
|
var canvas = $("#" + elementID + " canvas")[0];
|
|
var context = canvas.getContext("2d");
|
|
|
|
context.rect(0, 0, canvas.width, canvas.height);
|
|
|
|
// add linear gradient
|
|
var grd = context.createLinearGradient(0, 0, canvas.width, 0);
|
|
|
|
var s = 0.9, v = 0.9;
|
|
var hueStep = (maxHue - minHue) / 5;
|
|
|
|
grd.addColorStop(0, hsv2hsl(minHue, s, v));
|
|
grd.addColorStop(0.167, hsv2hsl(minHue+hueStep, s, v));
|
|
grd.addColorStop(0.333, hsv2hsl(minHue+2*hueStep, s, v));
|
|
grd.addColorStop(0.5, hsv2hsl(minHue+3*hueStep, s, v));
|
|
grd.addColorStop(0.667, hsv2hsl(minHue+4*hueStep, s, v));
|
|
grd.addColorStop(0.833, hsv2hsl(minHue+5*hueStep, s, v));
|
|
grd.addColorStop(1, hsv2hsl(maxHue, s, v));
|
|
|
|
context.fillStyle = grd;
|
|
context.fill();
|
|
}
|
|
|
|
function exportToImage() {
|
|
var canvasId = "viewport-canvas";
|
|
|
|
$("#" + canvasId).remove();
|
|
|
|
$("#" + elementId)
|
|
.append(
|
|
$("<canvas>")
|
|
.attr("id", canvasId)
|
|
.addClass("hidden")
|
|
.css("width", 1000)
|
|
.css("height", 1000)
|
|
);
|
|
|
|
var svgMarkup = $("<div>").append(
|
|
$("#" + elementId + " svg")
|
|
.clone()
|
|
.attr("width", 1000)
|
|
.attr("height", 1000)
|
|
)
|
|
.html()
|
|
//.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '') // IE fixes
|
|
//.replace(/xmlns:NS1=\"\"/, '')
|
|
//.replace(/xmlns:NS2=\"\"/, '')
|
|
//.replace(/NS2:xml:space=\"preserve\"/, '')
|
|
//.replace(/NS1:xmlns:xlink=\"http:\/\/www\.w3\.org\/1999\/xlink\"/, '');
|
|
|
|
canvg(canvasId, svgMarkup);
|
|
|
|
var canvas = document.getElementById(canvasId);
|
|
var img = canvas.toDataURL("image/png");
|
|
|
|
window.open(img);
|
|
}
|
|
|
|
function convert2WebXCoord(x) {
|
|
return ((x + mapConf.coords.x)/mapConf.scale);
|
|
}
|
|
|
|
function convert2WebYCoord(y) {
|
|
return (((-1)*y + mapConf.coords.y)/mapConf.scale);
|
|
}
|
|
|
|
function convert2WebCoords(p) {
|
|
return [convert2WebXCoord(p[0]), convert2WebYCoord(p[1])];
|
|
}
|
|
|
|
/* Copied from ie-hacks.js */
|
|
function ieImportNode(node, allChildren) {
|
|
// Manually imports node to the provided document
|
|
switch (node.nodeType) {
|
|
case document.ELEMENT_NODE:
|
|
var newNode = document.createElementNS(node.namespaceURI, node.nodeName);
|
|
if(node.attributes && node.attributes.length > 0) {
|
|
for(var i = 0, il = node.attributes.length; i < il; i++) {
|
|
newNode.setAttribute(node.attributes[i].nodeName, node.getAttribute(node.attributes[i].nodeName));
|
|
}
|
|
}
|
|
if(allChildren && node.childNodes && node.childNodes.length > 0) {
|
|
for(var i = 0, il = node.childNodes.length; i < il; i++){
|
|
newNode.appendChild(ieImportNode(node.childNodes[i], allChildren));
|
|
}
|
|
}
|
|
|
|
return newNode;
|
|
break;
|
|
|
|
case document.TEXT_NODE:
|
|
|
|
case document.CDATA_SECTION_NODE:
|
|
|
|
case document.COMMENT_NODE:
|
|
return document.createTextNode(node.nodeValue);
|
|
break;
|
|
}
|
|
}
|
|
|
|
/* Copied from svg_interact.js */
|
|
function svg_interact(svg,p) {
|
|
return new svg_interactObj(svg,p);
|
|
}
|
|
|
|
function svg_interactObj(svg,p) {
|
|
var p = p ? p : {},
|
|
zoom_speed = p.zoom_speed ? p.zoom_speed : 1.15,
|
|
viewBox = svg[0][0].viewBox.baseVal;
|
|
panning = null,
|
|
current_mouse = null;
|
|
|
|
/* Panning moves the viewbox */
|
|
|
|
function mousemove(){
|
|
//console.log(current_mouse);
|
|
if (d3.mouse)
|
|
current_mouse = d3.mouse(this);
|
|
else
|
|
current_mouse = d3.svg.mouse(this);
|
|
if (panning) {
|
|
viewBox.x += (panning[0] - current_mouse[0]);
|
|
viewBox.y += (panning[1] - current_mouse[1]);
|
|
|
|
updateViewBoxAttr(viewBox);
|
|
}
|
|
};
|
|
|
|
function mousedown() {
|
|
if (d3.mouse)
|
|
panning = d3.mouse(this);
|
|
else
|
|
panning = d3.svg.mouse(this);
|
|
}
|
|
|
|
/* Zoom with mousewheel - keeping mouse position in same location*/
|
|
|
|
function wheel(event) {
|
|
var delta = 0;
|
|
|
|
if (event.wheelDelta) {
|
|
delta = event.wheelDelta/120;
|
|
}
|
|
else if (event.detail) {
|
|
delta = -event.detail/3;
|
|
}
|
|
move = (delta<0) ? -delta * zoom_speed : 1/(delta*zoom_speed);
|
|
|
|
viewBox.x = (current_mouse[0] - (current_mouse[0]-viewBox.x) * move);
|
|
viewBox.y = (current_mouse[1] - (current_mouse[1]-viewBox.y) * move);
|
|
viewBox.height = viewBox.height * move;
|
|
viewBox.width = viewBox.width * move;
|
|
|
|
updateViewBoxAttr(viewBox);
|
|
};
|
|
|
|
// Webkit fix - otherwise the viewbox is't always picking up the changes and zoom/pan fails
|
|
function updateViewBoxAttr(viewBox) {
|
|
svg[0][0].setAttribute("viewBox", viewBox.x + " " + viewBox.y + " " + viewBox.width + " " + viewBox.height);
|
|
}
|
|
|
|
if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1)
|
|
svg[0][0].addEventListener("DOMMouseScroll", wheel, false);
|
|
else
|
|
svg[0][0].addEventListener("mousewheel", wheel, false);
|
|
svg[0][0].onmousewheel = wheel;
|
|
svg.onmousewheel = wheel;
|
|
|
|
svg.on("mousemove", mousemove);
|
|
svg.on("mousedown", mousedown);
|
|
|
|
d3.select(window).on("mouseup", function () { panning = null;})
|
|
svg[0][0].ondragstart = function() { return false } // Firefox fix
|
|
|
|
return svg;
|
|
}
|
|
|
|
function getColourInterpolator(minVal, maxVal, minHue, maxHue) {
|
|
// copying Michael Taschler's code of interpolation
|
|
|
|
return function (val) {
|
|
// Give the values outside the limits the limit colours
|
|
if (val < minVal)
|
|
val = minVal;
|
|
else if (val > maxVal)
|
|
val = maxVal;
|
|
|
|
// 0.0 to 1.0 scale convertion
|
|
val -= minVal;
|
|
if ((maxVal - minVal) != 0) // avoid division by zero
|
|
val /= (maxVal - minVal);
|
|
else
|
|
val = 0;
|
|
|
|
var lowHue = minHue / 360.0;
|
|
var highHue = maxHue / 360.0;
|
|
var diffHue = highHue - lowHue;
|
|
|
|
var h = (lowHue + (val * diffHue)) * 360;
|
|
var s = 0.9;
|
|
var v = 0.9;
|
|
|
|
return hsv2hsl(h, s, v);
|
|
}
|
|
}
|
|
|
|
function hsv2hsl(h, s, v) {
|
|
// Hue stays the same
|
|
// Saturation is very different between the two color spaces
|
|
// If (2-s)*v < 1 set it to s*v/((2-s)*v)
|
|
// Otherwise s*v/(2-(2-s)*v)
|
|
// Conditional is not operating with hue, it is reassigned!
|
|
s = (s * v) / ((((2-s) * v) < 1) ? ((2-s) * v) : 2-((2-s) * v));
|
|
l = (2-s)*v/2; // Lightness is (2-s)*v/2
|
|
|
|
return d3.hsl(h, s, l).toString();
|
|
}
|
|
|
|
return {
|
|
removeOverlay: removeOverlay,
|
|
drawCircles: drawCircles,
|
|
drawHeatmap: drawHeatmap,
|
|
addHeatmapOptions: addHeatmapOptions,
|
|
drawLayers: drawLayers,
|
|
show: show,
|
|
hide: hide,
|
|
exportToImage: exportToImage,
|
|
};
|
|
|
|
} |