Threshold scale for coloring rasters (low res not classified) / Ariel Núñez

Ariel Núñez

Workspace

Published

Edited

Apr 17, 2018

Fork of Threshold scale for coloring rasters (high res classified)

•

1 fork

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

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

plot = {

const svg = d3.select(DOM.svg(width, height))

.style("width", "100%")

.style("height", "auto");

const countries = topojson.feature(topojsonData, topojsonData.objects.countries);

const basemapGroup = svg.append("g").attr("class", "base");

const bandsGroup = svg.append("g").attr("class", "bands");

const scaleGroup = svg.append("g").attr("class", "scale");

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

const colorScale = d3.scaleThreshold()

.domain(intervals)

.range(colors);

//return bandsTemp;

return ready(svg, countries, basemapGroup, bandsTemp, path, colorScale, intervals).node()

}

ready = function(svg, countries, basemapGroup, bandsTemp, path, colorScale, intervalsTemp){

basemapGroup.insert("path", ".map")

.datum(countries)

.attr("d", path)

.style("opacity", "0.4")

.style("fill", "#eee")

.style("stroke", "#999")

.style("stroke-width", "1px")

const states =

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

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

.datum(d)

.attr("d", path)

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

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

});

return svg

}

Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

path = d3.geoPath().projection(projection)

projection = d3.geoAzimuthalEqualArea()

.rotate([80, -40, 15])

.scale(800)

tiffData = d3.buffer("https://sample-data-anihpywxjw.now.sh/MRMS_MergedReflectivityQCComposite.latest.low.res.tif")

//https://otro-cpnooxboun.now.sh/

rastertools = require("raster-marching-squares")

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.

Learn more