const svg = d3.select("svg")

const colors = ["ForestGreen", "DarkGreen", "Green", "LimeGreen", "Chartreuse", "GreenYellow", "Gold", "Tomato", "Orchid", "Navy", "LightSkyBlue"];

const intervals = [0, 5, 10, 15, 20, 25, 30, 40, 200, 240, 260];

const bandsTemp = rastertools.isobands(tempData, geoTransform, intervals);

const colorScale = d3.scaleThreshold()

.domain(intervals)

.range(colors);

bandsTemp.features.forEach(function(d, i) {

svg.insert("path", ".streamline")

.datum(d)

.attr("d", path)

.style("fill", colorScale(intervals[i]))

.style("stroke", "None");

});

svg.append("g")

.attr("class", "legendLinear")

.attr("transform", "translate(20,20)");

const linear = d3.scaleLinear()

.domain(intervals)

.range(colors);

const legendLinear = legend.legendColor()

.shapeWidth(30)

.shapeHeight(20)

.shapePadding(1)

.cells(10)

.orient('horizontal')

.labelOffset(5)

.scale(linear);

svg.select(".legendLinear").call(legendLinear);

svg.selectAll(".legendLinear")

.selectAll("text")

.attr("font-size", "8px")

.attr("font-family","sans-serif")

.attr("fill","#555555");

}

// .attr("height", squareHeight)

// .attr("x", 0)

// .attr("y", 0)

// .style("fill","#ddd")

// .style("stroke", "#666");

// addGroup.append("path")

// .attr("d", "m -4.5,-20.5 0,16 -16,0 0,7 16,0 0,16 7,0 0,-16 16,0 0,-7 -16,0 0,-16 -7,0 z")

// .attr("transform","translate("+squareWidth/2+","+squareHeight/2+") scale("+(0.6*squareHeight/40)+")")

// .style("stroke", "#666")

// .style("fill", "#ffffff");

// addGroup.append("text")

// .attr("x", squareWidth + squareWidth/8)

// .attr("y", 30*squareHeight/40)

// .style("fill", "#666")

// .style("font-size", (0.425*squareHeight)+"px")

// .style("font-family", "Verdana")

// .text(addText);

// draw();

// }

// ColorScaleChooser.squareWidth = function(_){

// squareWidth = _;

// return ColorScaleChooser;

// };

// ColorScaleChooser.squareHeight = function(_){

// squareHeight = _;

// return ColorScaleChooser;

// };

// ColorScaleChooser.scaleValues = function(_){

// scaleValues = _;

// return ColorScaleChooser;

// };

// ColorScaleChooser.title = function(_){

// title = _;

// return ColorScaleChooser;

// };

// ColorScaleChooser.addText = function(_){

// addText = _;

// return ColorScaleChooser;

// };

// ColorScaleChooser.on = function(){

// var value = dispatcher.on.apply(dispatcher, arguments);

// return value === dispatcher ? ColorScaleChooser : value;

// };

// function draw(){

// var colorSelection = parent.selectAll(".step")

// .data(scaleValues.sort(function(a, b){

// return a.value-b.value;

// }), function(d) { return(d.value+d.color); });

// var colorSelectionEnter = colorSelection

// .enter()

// .append("g")

// .attr("class","step")

// .attr("transform", function(d, i){return"translate(10, "+((i+1)*squareHeight*1.1 + 10 + yOffset)+")";})

// .on("mouseover", function(){

// d3.select(this)

// .selectAll(".close")

// .style("visibility", "visible");

// })

// .on("mouseout", function(){

// d3.select(this)

// .selectAll(".close")

// .style("visibility", "hidden");

// });

// colorSelectionEnter.append("rect")

// .attr("width", squareWidth)

// .attr("height", squareHeight)

// .attr("x", 0)

// .attr("y", 0)

// .style("fill",function(d){ return d.color;})

// .style("stroke", "#000")

// .on("click", function(d){ form(d);});

// colorSelectionEnter.append("text")

// .attr("x", squareWidth + squareWidth/8)

// .attr("y", 30*squareHeight/40)

// .style("fill", "#333")

// .style("font-size", (0.425*squareHeight)+"px")

// .style("font-family", "Verdana")

// .text(function(d){return d.value;});

// colorSelectionEnter.append("path")

// .attr("class", "close")

// .attr("d", "m 20.5,1.86 a 20,20 0 0 0 -20,20 20,20 0 0 0 20,20 20,20 0 0 0 20,-20 20,20 0 0 0 -20,-20 z m -9.88,9 4.24,0 5.8,7.79 5.8,-7.79 4.23,0 -7.9,10.64 8.32,11.23 -4.23,0 -6.36,-8.59 -6.36,8.59 -4.23,0 8.49,-11.4 -7.77,-10.42 z")

// .style("fill", "#f00")

// .style("stroke", "#000")

// .style("visibility", "hidden")

// .attr("transform", "translate(3,3) scale(0.5)")

// .on("click", function(d){

// scaleValues = scaleValues.filter(function ( obj ) {

// return obj.value !== d.value;

// });

// draw();

// });

// colorSelection.exit()

// .transition()

// .duration(1000)

// .style("opacity", 0)

// .remove();

// colorSelection

// .transition()

// .delay(1000)

// .duration(1000)

// .attr("transform", function(d, i){return"translate(10, "+((i+1)*squareHeight*1.1 + 10 + yOffset)+")";});

// dispatcher.call("change", {},

// scaleValues,

// scaleValues.reduce(function(a, b){return a.value < b.value ? a : b ;}).value,

// scaleValues.reduce(function(a, b){return a.value > b.value ? a : b ;}).value);

// }

// function form(obj){

// d3.selectAll(".colorScaleForm")

// .remove();

// var formDiv = d3.select("body")

// .append("div")

// .attr("class", "colorScaleForm")

// .style("position", "absolute")

// .style("left", (20+d3.event.pageX)+"px")

// .style("top", d3.event.pageY+"px")

// .style("background-color","rgba(128, 128, 128, 0.55)")

// .style("border-radius","5px")

// .style("padding","5px");

// formDiv.append("label")

// .text("Value");

// formDiv.append("input")

// .attr("class", "valueField")

// .attr("type", "number")

// .attr("step", "any")

// .attr("size", 10)

// .attr("value", obj.value);

// formDiv.append("label")

// .text("Color");

// formDiv.append("input")

// .attr("class", "colorField")

// .attr("type", "color")

// .attr("value", obj.color);

// formDiv.append("button")

// .text("Set")

// .on("click", function(){

// scaleValues[scaleValues.indexOf(obj)] = {value: formDiv.select(".valueField").node().value,

// color: formDiv.select(".colorField").node().value};

// draw();

// formDiv.transition()

// .duration(1000)

// .style("opacity", 0)

// .remove();

// });

// }

// return ColorScaleChooser;

// }