html`<svg width="600" height="400"><svg>`
plot = {
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");
}
// ColorScaleChooser = function(){
// var squareWidth = 80, squareHeight = 30;
// var scaleValues = [];
// var parent = null;
// var dispatcher = d3.dispatch("change");
// var title = null;
// var addText = "Add";
// var yOffset = 0;
// function ColorScaleChooser(g){
// parent = g;
// if(title){
// g.append("text")
// .attr("x", 5)
// .attr("y", 15)
// .style("fill", "#666")
// .style("font-size", (0.6*squareHeight)+"px")
// .style("font-family", "Verdana")
// .text(title);
// yOffset = 0.6*squareHeight;
// }
// var addGroup = g.append("g")
// .attr("transform","translate(10, "+(10+yOffset)+")")
// .on("click", function(){
// var newValue = {value: 0, color: "#ffffff"};
// scaleValues.push(newValue);
// draw();
// form(newValue);
// });
// addGroup.append("rect")
// .attr("width", squareWidth)
// .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;
// }
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
