39 | {% endhighlight %}
40 |
41 | * The tooltip *div* is styled with css
42 | * Note that opacity is set to 0 by default
43 | * A *div* is added to contain the tooltip information
44 |
45 | {% highlight js %}
46 | canvas.on("click", function() {
47 | var screenCoords = d3.mouse(this);
48 | var coords = projection.invert(screenCoords);
49 | var xTiff = (coords[0] - geoTransform[0])/geoTransform[1];
50 | var yTiff = (coords[1] - geoTransform[3])/geoTransform[5];
51 | var tempValue = tempData[Math.round(yTiff)][Math.round(xTiff)];
52 |
53 | d3.select("#tooltip")
54 | .style("left", screenCoords[0] + "px")
55 | .style("top", screenCoords[1] + "px")
56 | .style("opacity", 1)
57 | .html("850 hPa temp: " + tempValue.toFixed(1) + " C");
58 |
59 | });
60 | {% endhighlight %}
61 |
62 | * An *onClick* event is added on the canvas element
63 | * The x, y coordinates of the canvas are get with *d3.mouse*
64 | * *projection.invert(screenCoords)* convert from x, y in pixels to longitude-latitude
65 | * The inverse [GeoTransform]({{ site.baseurl }}{% post_url 2016-12-30-geotransform %}) is used to get the position in the data Array
66 | * The position is rounded to get the nearest neighbour. An interpolation with the four nearest pixels could be used instead
67 | * The tooltip is set to *opacity=1*, the position is the one clicked and the text is set to the selected value
68 |
--------------------------------------------------------------------------------
/_posts/2016-12-09-color-scales.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: "Color scales"
4 | category: intr
5 | date: 2016-12-09 10:29:02
6 | disqus: 1
7 | ---
8 | When drawing lines or areas, we usually want to color them depending on the value they represent.
9 |
10 | To get nice already made color scales, you can check [ColorBrewer2](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) or [cpt-city](http://soliton.vm.bytemark.co.uk/pub/cpt-city/).
11 |
12 | D3js
13 | ----
14 | D3js provides (of course) an easy way to create color scales, called [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic). Many color scales are already created, and accessing to their colors is easy:
15 |
16 | {% highlight js %}
17 |
18 |
19 |
24 | {% endhighlight %}
25 |
26 | * Just choose the color scale function [from the docs](https://github.com/d3/d3-scale-chromatic)
27 | * There are sequential, diverging and categorical color schemes. The last ones are just an array
28 | * Call the function passing a value from 0 to 1 to get the color in all the domain
29 | * To calculate this value from 0 to 1 given the actual value, just call a *d3.scaleSequential* function, and don't forget to clamp it
30 |
31 | {% highlight js %}
32 | var color = d3.scaleSequential(d3.interpolatePiYG)
33 | .domain([12, 23])
34 | .clamp(true);
35 | {% endhighlight %}
36 |
37 | Using canvas
38 | ------------
39 | When [drawing canvas pixel by pixel]({{ site.baseurl }}{% post_url 2016-12-07-drawing-raster-data %}), using the D3js scales can be really unefficient. An alternative must be used. The tutorial will be using the method taken from the [plotty library](https://github.com/santilland/plotty):
40 |
41 | * Create an object with the scale definitions ([the source code](https://github.com/santilland/plotty/blob/master/src/plotty.js) has many of them already done)
42 | * Create a small hidden canvas with 255 columns and one line. Each column will represent a scale value, and could be larger for a smoother gradient
43 | * Create a gradient for each change in the color scale
44 | * When the hidden canvas is created, get its data and query it to get the colours
45 |
46 | The code is:
47 | {% highlight js %}
48 | var cs_def = {positions:[0, 0.25, 0.5, 0.75, 1], colors:["#0571b0", "#92c5de", "#f7f7f7", "#f4a582", "#ca0020"]};
49 | var scaleWidth = 256;
50 | var canvasColorScale = d3.select("body").append("canvas")
51 | .attr("width", scaleWidth)
52 | .attr("height", 1)
53 | .style("display","none");
54 | var contextColorScale = canvasColorScale.node().getContext("2d");
55 | var gradient = contextColorScale.createLinearGradient(0, 0, scaleWidth, 1);
56 |
57 | for (var i = 0; i < cs_def.colors.length; ++i) {
58 | gradient.addColorStop(cs_def.positions[i], cs_def.colors[i]);
59 | }
60 | contextColorScale.fillStyle = gradient;
61 | contextColorScale.fillRect(0, 0, scaleWidth, 1);
62 |
63 | var csImageData = contextColorScale.getImageData(0, 0, scaleWidth-1, 1).data;
64 | {% endhighlight %}
65 |
66 | The resulting color scale, that you can see if the *.style("display","none")* is removed, is:
67 |
68 | 
69 |
70 | * The color scale definition *cs_def* takes the colors and the position of each color in the scale from 0 to 1.
71 | * The scale is created 256 pixels width and 1 height, to act as an array with the colors. The width could be higher.
72 | * *createLinearGradient* will create the color gradient and *gradient.addColorStop* will add a color change at each position
73 | * The *getImageData().data* method returns an array with all the colors. The size will be 256 * 4, since it holds the RGBA values
74 |
75 | The color for each value is calculated using this code:
76 | {% highlight js %}
77 | var c = Math.round((scaleWidth-1) * ((value - domain[0])/(domain[1]-domain[0])));
78 | var alpha = 255;
79 | if (c<0 || c > (scaleWidth-1)){
80 | alpha = 0;
81 | }
82 | var rValue = csImageData[c*4];;
83 | var gValue = csImageData[c*4+1];
84 | var bValue = csImageData[c*4+2];
85 | var aValue = alpha;
86 | {% endhighlight %}
87 |
88 | * The fisrt line calculates the position from 0 to 255. *domain[0]* is the minimum value, and *domain[1]* the maximum
89 | * The alpha part is necessary to avoid strange colors if the value is below or above the extremes of the scale. It will set the transparency to 100%
90 | * *csImageData* has all the colours, ocupying four positions each.
91 | * The alpha value could be read and set the same way
92 | * Usually, this chunk of code will be inside a loop to set all the pixels, as you can see in the [drawing raster data section]({{ site.baseurl }}{% post_url 2016-12-07-drawing-raster-data %})
93 |
--------------------------------------------------------------------------------
/_posts/2016-12-13-isobands.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: "Isobands"
4 | category: plot
5 | date: 2016-12-13 12:45:32
6 | disqus: 1
7 | ---
8 | Isobands are the regions where the raster values are in an interval. It's useful to simplify the visualized data, since the method shown at the [drawing raster data]({{ site.baseurl }}{% post_url 2016-12-07-drawing-raster-data %}) section can create confusing images.
9 |
10 | Calculating these isobands can be a bit difficult, that's why I adapted the [MarchingSquares.js](https://github.com/RaumZeit/MarchingSquares.js) library to use with a [geoPath](https://github.com/d3/d3-geo#paths): [raster-marching-squares](https://github.com/rveciana/raster-marching-squares)
11 |
12 |
13 |
14 | The important code parts are these. You can find [the whole code here]({{ site.baseurl }}/code_samples/isobands-page.html).
15 |
16 | {% highlight js %}
17 | var projection = d3.geoAzimuthalEqualArea()
18 | .rotate([-55.5, -24])
19 | .scale(1100);
20 | {% endhighlight %}
21 | * The projection is set to *geoAzimuthalEqualArea*, but the nice thing about D3js is that this could be changed and the result would change accordingly
22 | {% highlight js %}
23 | d3.request("tz850.tiff")
24 | .responseType('arraybuffer')
25 | .get(function(error, tiffData){
26 | d3.json("world-110m.json", function(error, topojsonData) {
27 | {% endhighlight %}
28 | * Note that, as explained in the [reading a raster]({{ site.baseurl }}{% post_url 2016-12-31-reading-raster-data %}) page, the request is a bit different for the GeoTIFF
29 | {% highlight js %}
30 | var tiff = GeoTIFF.parse(tiffData.response);
31 | var image = tiff.getImage();
32 | var rasters = image.readRasters();
33 | var tiepoint = image.getTiePoints()[0];
34 | var pixelScale = image.getFileDirectory().ModelPixelScale;
35 | var geoTransform = [tiepoint.x, pixelScale[0], 0, tiepoint.y, 0, -1*pixelScale[1]];
36 | var invGeoTransform = [-geoTransform[0]/geoTransform[1], 1/geoTransform[1],0,-geoTransform[3]/geoTransform[5],0,1/geoTransform[5]];
37 |
38 | var tempData = new Array(image.getHeight());
39 | for (var j = 0; j
14 |
15 | You can find [the whole code here]({{ site.baseurl }}/code_samples/streamlines-page.html)
16 |
17 | Basically, after [reading the GeoTIFF data]({{ site.baseurl }}{% post_url 2016-12-31-reading-raster-data %}), the code is
18 |
19 | {% highlight js %}
20 | var lines = rastertools.streamlines(uData,vData, geoTransform);
21 | lines.features.forEach(function(d) {
22 | context.beginPath();
23 | context.strokeStyle = "#000000";
24 | path(d);
25 | context.stroke();
26 | });
27 | {% endhighlight %}
28 |
29 | * The *streamlines* function returns an array of paths
30 | * The array is iterated for each element and directly drawn
31 |
32 | These streamlines have the problem that the direction isn't indicated. To do it, the easiest way is using the [svg-path-properties](https://github.com/rveciana/svg-path-properties) library:
33 |
34 |
35 | You can find [the whole code here]({{ site.baseurl }}/code_samples/streamlines-arrows-page.html)
36 |
37 | The important part of the code grows to:
38 | {% highlight js %}
39 | var path2 = d3.geoPath()
40 | .projection(projection);
41 | var lines = rastertools.streamlines(uData,vData, geoTransform);
42 | lines.features.forEach(function(d) {
43 | var properties = spp.svgPathProperties(path2(d));
44 | var arrowPos = properties.getPropertiesAtLength(properties.getTotalLength()/2);
45 | var arrowDegrees = Math.atan(arrowPos.tangentY/arrowPos.tangentX);
46 | context.beginPath();
47 | context.strokeStyle = "#000000";
48 | path(d);
49 | context.stroke();
50 | context.beginPath();
51 | context.moveTo(arrowPos.x, arrowPos.y);
52 | context.lineTo(arrowPos.x-10*arrowPos.tangentX + 6*arrowPos.tangentY,arrowPos.y-10*arrowPos.tangentY - 6*arrowPos.tangentX);
53 | context.moveTo(arrowPos.x, arrowPos.y);
54 | context.lineTo(arrowPos.x-10*arrowPos.tangentX - 6*arrowPos.tangentY,arrowPos.y-10*arrowPos.tangentY + 6*arrowPos.tangentX);
55 | context.stroke();
56 | });
57 | {% endhighlight %}
58 |
59 | * Since the defined *geoPath* included the context, a ne path is created with the name *path2*. This will make easy to get the svg path for every streamline
60 | * The *svgPathProperties* function allows us to get the position of the middle of the line and the direction. Note that the problems of the barbs with direction doesn't exist here
61 | * The streamline is written with the direction of the wind directly
62 | * There is a [parameter to change it](https://github.com/rvec(iana/raster-streamlines) called *flip*
63 | * The arrows are drawn using the basic [Canvas lineTo function](http://www.w3schools.com/tags/canvas_lineto.asp)
64 |
65 | ### SVG
66 |
67 | Of course, it's possible to get the same result but using SVG instead of Canvas.
68 |
69 | You can find [the whole code here]({{ site.baseurl }}/code_samples/streamlines-arrows-svg-page.html)
70 |
71 | The important part is:
72 |
73 | {% highlight js %}
74 | var lines = rastertools.streamlines(uData,vData, geoTransform);
75 | lines.features.forEach(function(d) {
76 | var properties = spp.svgPathProperties(path(d));
77 | var arrowPos = properties.getPropertiesAtLength(properties.getTotalLength()/2);
78 | var arrowDegrees = Math.atan(arrowPos.tangentY/arrowPos.tangentX);
79 |
80 | svg.insert("path", ".streamline")
81 | .datum(d)
82 | .attr("d", path)
83 | .style("fill", "None")
84 | .style("stroke", "#777");
85 |
86 | svg.insert("path", ".streamline")
87 | .attr("d", "M"+arrowPos.x+","+arrowPos.y
88 | +"L"+(arrowPos.x-10*arrowPos.tangentX + 6*arrowPos.tangentY)+","+(arrowPos.y-10*arrowPos.tangentY - 6*arrowPos.tangentX)
89 | +"M"+arrowPos.x+","+arrowPos.y
90 | +"L"+(arrowPos.x-10*arrowPos.tangentX - 6*arrowPos.tangentY)+","+(arrowPos.y-10*arrowPos.tangentY + 6*arrowPos.tangentX))
91 | .style("fill", "None")
92 | .style("stroke", "#777");
93 | });
94 | {% endhighlight %}
95 |
96 | * The stramline is inserted directly, since is an SVG paths
97 | * To create the small arrow, an [SVG path](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) is used wint lineTo and moveTo instructions
98 |
--------------------------------------------------------------------------------
/_posts/2016-12-30-geotransform.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: "GeoTransform"
4 | category: intr
5 | date: 2016-12-30 18:19:49
6 | disqus: 1
7 | ---
8 | In all the examples and functions the word *GeoTransform* will appear. It's a word that doesn't appear when talking about vectorial data. A *raster band* is a two dimension matrix with the magnitude value at each position or pixel. Since it's geographical data, each pixel is located somewhere on the Globe. The formula that converts the pixel position on the matrix to the map coordinates is called the *GeoTransform*.
9 |
10 | I've been using the names and formulae taken from the [GDAL library](http://www.gdal.org/gdal_datamodel.html), which is the most used library in GIS. The formula is this one:
11 |
12 | Xgeo = GT(0) + Xpixel*GT(1) + Yline*GT(2)
13 | Ygeo = GT(3) + Xpixel*GT(4) + Yline*GT(5)
14 |
15 | Where GT is the GeoTransform array, which has six positions:
16 |
17 | * GT(0) and GT(3) set the image origin
18 | * The origin is the top left corner of the top left pixel in the raster
19 | * Note that the Y axis will usually go downwards (GT(5) is negative), since the map coordinates go usually upwards
20 | * Xpixel is the column of the matrix and Yline the line
21 | * All the parameters are in the raster projection (lat-lom, UTM, Mercator, etc)
22 |
23 | 
24 |
25 | The figure shows the most common case, where the GT(2) and GT(4) terms are zero, so there is no rotation of the image. The formula would be:
26 |
27 | Xgeo = GT(0) + Xpixel*GT(1)
28 | Ygeo = GT(3) + Yline*GT(5)
29 |
30 | So, if you need the inverse equation to calculate the raster pixel given the map coordinates, just use:
31 |
32 | Xpixel = (Xgeo - GT(0))/GT(1)
33 | Ypixel = (Ygeo - GT(3))/GT(5)
34 |
35 |
36 | example
37 | -------
38 |
39 | If the coordinates are lat-lon, a possible GeoTransform could be:
40 |
41 | GT = [33, 0.1, 0, 45, 0, -0.1]
42 |
43 | So the pixel at column 10 and line 10 would be *Xgeo = 34* and *Ygeo = 44*.
44 |
--------------------------------------------------------------------------------
/_posts/2016-12-31-reading-raster-data.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: "Reading raster data"
4 | category: intr
5 | date: 2016-12-31 18:04:19
6 | disqus: 1
7 | ---
8 |
9 | All this documentation is about representing raster data. In GIS, a [raster](https://en.wikipedia.org/wiki/Raster_graphics#Geographic_information_systems) is basically a 2-dimension matrix with the value of a magnitude in each point. The position over the Globe for each pixel (or matrix position) is given by the [GeoTransform]({{ site.baseurl }}{% post_url 2016-12-30-geotransform %}), and those positions are in a specific [projection]({{ site.baseurl }}{% post_url 2016-12-01-projections %}).
10 |
11 | There are different ways to use a 2D matrix in JavaScript, and here I'll be using the easiest one, an array of arrays. So, if the data is in a 1D array, can be transformed by:
12 |
13 | {% highlight js %}
14 | var tempData = new Array(geotiffHeight);
15 | for (var j = 0; j File.dirname(File.dirname(__FILE__))
9 | }
10 |
11 | parser = OptionParser.new do |opt|
12 | opt.banner = 'usage: jekyll-page TITLE CATEGORY [FILENAME] [OPTIONS]'
13 | opt.separator ''
14 | opt.separator 'Options'
15 | opt.on('-e', '--edit', 'Edit the page') do |edit|
16 | options[:edit] = true
17 | end
18 | opt.on('-l', '--link', 'Relink pages') do |link|
19 | options[:link] = true
20 | end
21 | opt.on('-p PATH', '--path PATH', String, 'Path to project root') do |path|
22 | options[:path] = path
23 | end
24 | opt.separator ''
25 | end
26 |
27 | parser.parse!
28 |
29 | title = ARGV[0]
30 | category = ARGV[1]
31 | filename = ARGV[2]
32 |
33 | # Resolve any relative links
34 | BASE_DIR = File.expand_path(options[:path])
35 | POSTS_DIR = "#{BASE_DIR}/_posts"
36 | PAGES_DIR = "#{BASE_DIR}/_pages"
37 |
38 | # Ensure the _posts directory exists (we are in the correct directory)
39 | if not Dir.exists?(POSTS_DIR)
40 | puts "#{POSTS_DIR} directory does not exists"
41 | exit
42 | end
43 |
44 | # Create _pages directory if it doesn't exist
45 | if not Dir.exists?(PAGES_DIR)
46 | Dir.mkdir(PAGES_DIR)
47 | end
48 |
49 | if options[:link]
50 | Dir.foreach(POSTS_DIR) do |name|
51 | next if name[0] == '.'
52 | nodate = name[/\d{4}-\d{2}-\d{2}-(?.*)/, 'rest']
53 | if File.symlink?("#{PAGES_DIR}/#{nodate}")
54 | File.delete("#{PAGES_DIR}/#{nodate}")
55 | end
56 | abspath = File.absolute_path("#{POSTS_DIR}/#{name}")
57 | File.symlink(abspath, "#{PAGES_DIR}/#{nodate}")
58 | end
59 | end
60 |
61 | if not title or not category
62 | # This flag can be used by itself, exit silently if no arguments
63 | # are defined
64 | if not options[:link]
65 | puts parser
66 | end
67 | exit
68 | end
69 |
70 | if not filename
71 | filename = title.downcase.gsub(/[^a-z0-9\s]/, '').gsub(/\s+/, '-')
72 | end
73 |
74 | today=Date.today().strftime('%F')
75 | now=DateTime.now().strftime('%F %T')
76 |
77 | filepath = "#{POSTS_DIR}/#{today}-#{filename}.md"
78 | symlink = "#{PAGES_DIR}/#{filename}.md"
79 |
80 | if File.exists?(filepath)
81 | puts "File #{filepath} already exists"
82 | exit
83 | end
84 |
85 | content = <
11 |
12 | {% highlight js %}
13 |
14 |
15 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
122 |
123 |
124 | {% endhighlight %}
125 |
--------------------------------------------------------------------------------
/code_samples/color-scale-isobands.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
110 |
111 |
112 |
--------------------------------------------------------------------------------
/code_samples/color-scale-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Color scale"
4 | ---
5 | I didn't find a tool to edit the colors on a map, so I created a small JavaScript library to help doing it: *Color scale chooser*. The [source code is here]({{ site.baseurl }}/code_samples/color-scale.js).
6 |
7 | Using it is easy:
8 |
9 | {% highlight js %}
10 | var svg = d3.select("body")
11 | .append("svg")
12 | .attr("width", 200)
13 | .attr("height", 400);
14 |
15 | var scaleValues = [{value: 0, color: "#c9d5a6"},
16 | {value: 100, color: "#7fa67a"},
17 | {value: 300, color: "#79750a"},
18 | {value: 400, color: "#7ab5e3"},
19 | {value: 500, color: "#fefefe"},
20 | {value: 200, color: "#976a2f"}];
21 |
22 | var scale = d3.ColorScaleChooser()
23 | .scaleValues(scaleValues);
24 |
25 | svg.call(scale);
26 | {% endhighlight %}
27 |
28 | * Create an SVG (or a group in an SVG) to append the color scale chooser
29 | * Create an instance of the *color scale chooser*
30 | * There are many options to pass. In this case, an initial color scale is passed
31 | * Call the *color scale chooser* instance from the SVG (or an element in the SVG)
32 |
33 | This will draw a scale like the one in the example below. Clicking on the colors will open an edit dialog, where the color and scale value can be changed. Also, by clicking on the cross sign over each color, the interval is removed. More intervals can be added with the upper rectangle.
34 |
35 | There are some options to pass to the instance:
36 |
37 | * *.squareWidth(width)* sets the width of each square in pixels. The default is 80
38 | * *.squareHeight(height)* sets the height of each square in pixels. The default is 40
39 | * *.scaleValues(obj)* sets the initial color scale. The array must be in the format shown in the example
40 | * Each element must be an object with the *value* and the *color* keys
41 | * *.title(title)* adds a title with the text above the scale. The default is *null*, so no title is added
42 | * *.addText(add text)* changes the text of the *add button*. By default is *add*
43 | * *.on("change", function)* adds a function to trigger when a change on the scale occurs
44 | * The triggered event is *change*, but more events could be added
45 |
46 | Example
47 | -------
48 | For more complicated (and useful) examples, check the [color scale isobands]({{ site.baseurl }}/code_samples/color-scale-isobands-page.html) and the [color scale interpolation]({{ site.baseurl }}/code_samples/color-scale-interpolation-page.html) examples.
49 |
50 |
51 |
52 | The important part of the example is the function in the *on* part of the instance. Generates a canvas with the gradient as explained in the [color scales]({{ site.baseurl }}{% post_url 2016-12-09-color-scales %}) section.
53 |
54 | {% highlight js %}
55 |
56 |
57 |
60 |
61 |
62 |
63 |
102 | {% endhighlight %}
103 |
--------------------------------------------------------------------------------
/code_samples/color-scale.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
48 |
--------------------------------------------------------------------------------
/code_samples/dem-colors-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "DEM colors"
4 | ---
5 |
6 | This example shows a simple way to represent DEM data. The way to draw it is the same as in the [raster interpolation example]({{ site.baseurl }}/code_samples/raster-interpolation-page.html). The way to show only the region of interest is using the [canvas clip](http://www.w3schools.com/tags/canvas_clip.asp) method.
7 |
8 | The DEM data is taken from the SRTM web, and the Swiss contour from [this swiss-maps page](https://github.com/interactivethings/swiss-maps). More information [here]({{ site.baseurl }}/code_samples/swiss-page.html).
9 |
10 |
11 |
12 | {% highlight js %}
13 |
14 |
15 |
18 |
19 |
20 |
21 |
22 |
23 |
145 |
146 |
147 | {% endhighlight %}
148 |
--------------------------------------------------------------------------------
/code_samples/dem-colors.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
10 |
11 |
133 |
134 |
135 |
--------------------------------------------------------------------------------
/code_samples/geotiff.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
34 |
--------------------------------------------------------------------------------
/code_samples/gfs.tiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/code_samples/gfs.tiff
--------------------------------------------------------------------------------
/code_samples/isobands-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing isobands"
4 | ---
5 | Drawing isobands
6 | ----------------
7 | Canvas example from the [drawing isobands]({{ site.baseurl }}{% post_url 2016-12-13-isobands %}) section.
8 |
9 |
10 |
11 | {% highlight js %}
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
87 |
88 |
89 | {% endhighlight %}
90 |
--------------------------------------------------------------------------------
/code_samples/isobands-svg-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing isobands"
4 | ---
5 | Drawing isobands - SVG
6 | ----------------------
7 | SVG example from the [drawing isobands]({{ site.baseurl }}{% post_url 2016-12-13-isobands %}) section.
8 |
9 |
10 |
11 | {% highlight js %}
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
83 |
84 |
85 | {% endhighlight %}
86 |
--------------------------------------------------------------------------------
/code_samples/isobands-svg.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/code_samples/isobands-tooltip-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing isobands"
4 | ---
5 | Drawing isobands
6 | ----------------
7 | Canvas example from the [tooltips]({{ site.baseurl }}{% post_url 2016-12-01-tooltips %}) section. Click on any part of the image to see the GeoTIFF value on a tooltip
8 |
9 |
10 |
11 | {% highlight js %}
12 |
13 |
14 |
36 |
37 |
69 |
70 | * The color scale definition *cs_def* takes the colors and the position of each color in the scale from 0 to 1.
71 | * The scale is created 256 pixels width and 1 height, to act as an array with the colors. The width could be higher.
72 | * *createLinearGradient* will create the color gradient and *gradient.addColorStop* will add a color change at each position
73 | * The *getImageData().data* method returns an array with all the colors. The size will be 256 * 4, since it holds the RGBA values
74 |
75 | The color for each value is calculated using this code:
76 | {% highlight js %}
77 | var c = Math.round((scaleWidth-1) * ((value - domain[0])/(domain[1]-domain[0])));
78 | var alpha = 255;
79 | if (c<0 || c > (scaleWidth-1)){
80 | alpha = 0;
81 | }
82 | var rValue = csImageData[c*4];;
83 | var gValue = csImageData[c*4+1];
84 | var bValue = csImageData[c*4+2];
85 | var aValue = alpha;
86 | {% endhighlight %}
87 |
88 | * The fisrt line calculates the position from 0 to 255. *domain[0]* is the minimum value, and *domain[1]* the maximum
89 | * The alpha part is necessary to avoid strange colors if the value is below or above the extremes of the scale. It will set the transparency to 100%
90 | * *csImageData* has all the colours, ocupying four positions each.
91 | * The alpha value could be read and set the same way
92 | * Usually, this chunk of code will be inside a loop to set all the pixels, as you can see in the [drawing raster data section]({{ site.baseurl }}{% post_url 2016-12-07-drawing-raster-data %})
93 |
--------------------------------------------------------------------------------
/_posts/2016-12-13-isobands.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: "Isobands"
4 | category: plot
5 | date: 2016-12-13 12:45:32
6 | disqus: 1
7 | ---
8 | Isobands are the regions where the raster values are in an interval. It's useful to simplify the visualized data, since the method shown at the [drawing raster data]({{ site.baseurl }}{% post_url 2016-12-07-drawing-raster-data %}) section can create confusing images.
9 |
10 | Calculating these isobands can be a bit difficult, that's why I adapted the [MarchingSquares.js](https://github.com/RaumZeit/MarchingSquares.js) library to use with a [geoPath](https://github.com/d3/d3-geo#paths): [raster-marching-squares](https://github.com/rveciana/raster-marching-squares)
11 |
12 |
13 |
14 | The important code parts are these. You can find [the whole code here]({{ site.baseurl }}/code_samples/isobands-page.html).
15 |
16 | {% highlight js %}
17 | var projection = d3.geoAzimuthalEqualArea()
18 | .rotate([-55.5, -24])
19 | .scale(1100);
20 | {% endhighlight %}
21 | * The projection is set to *geoAzimuthalEqualArea*, but the nice thing about D3js is that this could be changed and the result would change accordingly
22 | {% highlight js %}
23 | d3.request("tz850.tiff")
24 | .responseType('arraybuffer')
25 | .get(function(error, tiffData){
26 | d3.json("world-110m.json", function(error, topojsonData) {
27 | {% endhighlight %}
28 | * Note that, as explained in the [reading a raster]({{ site.baseurl }}{% post_url 2016-12-31-reading-raster-data %}) page, the request is a bit different for the GeoTIFF
29 | {% highlight js %}
30 | var tiff = GeoTIFF.parse(tiffData.response);
31 | var image = tiff.getImage();
32 | var rasters = image.readRasters();
33 | var tiepoint = image.getTiePoints()[0];
34 | var pixelScale = image.getFileDirectory().ModelPixelScale;
35 | var geoTransform = [tiepoint.x, pixelScale[0], 0, tiepoint.y, 0, -1*pixelScale[1]];
36 | var invGeoTransform = [-geoTransform[0]/geoTransform[1], 1/geoTransform[1],0,-geoTransform[3]/geoTransform[5],0,1/geoTransform[5]];
37 |
38 | var tempData = new Array(image.getHeight());
39 | for (var j = 0; j
24 |
25 | The figure shows the most common case, where the GT(2) and GT(4) terms are zero, so there is no rotation of the image. The formula would be:
26 |
27 | Xgeo = GT(0) + Xpixel*GT(1)
28 | Ygeo = GT(3) + Yline*GT(5)
29 |
30 | So, if you need the inverse equation to calculate the raster pixel given the map coordinates, just use:
31 |
32 | Xpixel = (Xgeo - GT(0))/GT(1)
33 | Ypixel = (Ygeo - GT(3))/GT(5)
34 |
35 |
36 | example
37 | -------
38 |
39 | If the coordinates are lat-lon, a possible GeoTransform could be:
40 |
41 | GT = [33, 0.1, 0, 45, 0, -0.1]
42 |
43 | So the pixel at column 10 and line 10 would be *Xgeo = 34* and *Ygeo = 44*.
44 |
--------------------------------------------------------------------------------
/_posts/2016-12-31-reading-raster-data.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: "Reading raster data"
4 | category: intr
5 | date: 2016-12-31 18:04:19
6 | disqus: 1
7 | ---
8 |
9 | All this documentation is about representing raster data. In GIS, a [raster](https://en.wikipedia.org/wiki/Raster_graphics#Geographic_information_systems) is basically a 2-dimension matrix with the value of a magnitude in each point. The position over the Globe for each pixel (or matrix position) is given by the [GeoTransform]({{ site.baseurl }}{% post_url 2016-12-30-geotransform %}), and those positions are in a specific [projection]({{ site.baseurl }}{% post_url 2016-12-01-projections %}).
10 |
11 | There are different ways to use a 2D matrix in JavaScript, and here I'll be using the easiest one, an array of arrays. So, if the data is in a 1D array, can be transformed by:
12 |
13 | {% highlight js %}
14 | var tempData = new Array(geotiffHeight);
15 | for (var j = 0; j
38 |
39 |
40 |
41 |
42 |
43 |
44 |
120 |
121 |
122 | {% endhighlight %}
123 |
--------------------------------------------------------------------------------
/code_samples/isobands-tooltip.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/code_samples/isobands.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
76 |
77 |
78 |
--------------------------------------------------------------------------------
/code_samples/isolines-labels-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing with labels"
4 | ---
5 | Drawing isolines with labels
6 | ----------------------------
7 | Canvas example from the [drawing isolines]({{ site.baseurl }}{% post_url 2016-12-13-isolines %}) section.
8 |
9 |
10 |
11 | {% highlight js %}
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
124 |
125 |
126 |
127 | {% endhighlight %}
128 |
--------------------------------------------------------------------------------
/code_samples/isolines-labels-svg-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing with labels"
4 | ---
5 | Drawing isolines with labels
6 | ----------------------------
7 | SVG example from the [drawing isolines]({{ site.baseurl }}{% post_url 2016-12-13-isolines %}) section.
8 |
9 |
10 |
11 | {% highlight js %}
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
137 |
138 |
139 | {% endhighlight %}
140 |
--------------------------------------------------------------------------------
/code_samples/isolines-labels-svg.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
127 |
128 |
129 |
--------------------------------------------------------------------------------
/code_samples/isolines-labels.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
113 |
114 |
115 |
--------------------------------------------------------------------------------
/code_samples/isolines-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing isolines"
4 | ---
5 | Drawing isolines
6 | ----------------
7 | Canvas example from the [drawing isolines]({{ site.baseurl }}{% post_url 2016-12-13-isolines %}) section.
8 |
9 |
10 |
11 | {% highlight js %}
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
85 |
86 |
87 | {% endhighlight %}
88 |
--------------------------------------------------------------------------------
/code_samples/isolines-svg-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing isolines"
4 | ---
5 | Drawing isolines
6 | ----------------
7 | SVG example from the [drawing isolines]({{ site.baseurl }}{% post_url 2016-12-13-isolines %}) section.
8 |
9 |
10 |
11 | {% highlight js %}
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
84 |
85 |
86 | {% endhighlight %}
87 |
--------------------------------------------------------------------------------
/code_samples/isolines-svg.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/code_samples/isolines.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/code_samples/raster-interpolation-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing GeoTIFF pixels"
4 | ---
5 | Drawing GeoTIFF pixels
6 | --------------------------
7 | Example from the [drawing raster data]({{ site.baseurl }}{% post_url 2016-12-07-drawing-raster-data %}) section.
8 |
9 |
10 |
11 | {% highlight js %}
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
140 |
141 |
142 | {% endhighlight %}
143 |
--------------------------------------------------------------------------------
/code_samples/raster-interpolation-projected.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
162 |
163 |
164 |
--------------------------------------------------------------------------------
/code_samples/raster-interpolation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
10 |
11 |
129 |
130 |
131 |
--------------------------------------------------------------------------------
/code_samples/raster-pixels-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing GeoTIFF pixels"
4 | ---
5 | Drawing GeoTIFF pixels
6 | --------------------------
7 | Example from the [drawing raster data]({{ site.baseurl }}{% post_url 2016-12-07-drawing-raster-data %}) section.
8 |
9 |
10 |
11 | {% highlight js %}
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
125 |
126 |
127 | {% endhighlight %}
128 |
--------------------------------------------------------------------------------
/code_samples/raster-pixels.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
10 |
11 |
113 |
114 |
115 |
--------------------------------------------------------------------------------
/code_samples/raster-streamlines.min.js:
--------------------------------------------------------------------------------
1 | // raster-streamlines Version 0.0.1. Copyright 2016 Roger Veciana i Rovira.
2 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.rastertools=t.rastertools||{})}(this,function(t){"use strict";function e(t,e){if(t.length<=1||e.length<=1||t[0].length<=1||e[0].length<=1)throw new Error("Raster is too small");this.uData=t,this.vData=e,this.usedPixels=[];for(var a=0;a=this.usedPixels[0].length||e<0||e>=this.usedPixels.length)return!1;for(var h=-a;h<=a;h++)for(var i=-a;i<=a;i++)if(e+i>=0&&e+i=0&&t+h=0&&o=0&&r=this.uData[0].length||r>=this.uData.length||this.usedPixels[Math.floor(r)][Math.floor(o)])break;l.push([o,r]),i=!0,this.usedPixels[Math.floor(r)][Math.floor(o)]=!0}for(o=t,r=e;o>=0&&o=0&&r=this.uData[0].length||r>=this.uData.length||this.usedPixels[Math.floor(r)][Math.floor(o)])break;l.unshift([o,r]),i=!0,this.usedPixels[Math.floor(r)][Math.floor(o)]=!0}return!!i&&(this.usedPixels[e][t]=!0,l)},e.prototype.applyGeoTransform=function(t,e){for(var a=[],h=0;h
10 |
11 | {% highlight js %}
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
95 |
96 |
97 | {% endhighlight %}
98 |
--------------------------------------------------------------------------------
/code_samples/streamlines-arrows-svg-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing streamlines with arrows"
4 | ---
5 | Drawing streamlines with arrows
6 | -------------------------------
7 | SVG example from the [drawing streamlines]({{ site.baseurl }}{% post_url 2016-12-13-streamlines %}) section.
8 |
9 |
10 |
11 | {% highlight js %}
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
96 |
97 |
98 | {% endhighlight %}
99 |
--------------------------------------------------------------------------------
/code_samples/streamlines-arrows-svg.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/code_samples/streamlines-arrows.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
84 |
85 |
86 |
--------------------------------------------------------------------------------
/code_samples/streamlines-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing streamlines"
4 | ---
5 | Drawing streamlines
6 | -------------------
7 | Example from the [drawing streamlines]({{ site.baseurl }}{% post_url 2016-12-13-streamlines %}) section.
8 |
9 |
10 |
11 | {% highlight js %}
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
84 |
85 |
86 | {% endhighlight %}
87 |
--------------------------------------------------------------------------------
/code_samples/streamlines.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/code_samples/swiss-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Swiss data"
4 | ---
5 |
6 | The data from the Swiss region used in some examples is taken from two sources.
7 |
8 | DEM
9 | ---
10 |
11 | The [SRTM page offers the interface](http://srtm.csi.cgiar.org/SELECTION/inputCoord.asp
12 | ) to select the zone. In this case, the zones are *srtm_38_03* and *srtm_39_03*.
13 |
14 | To merge the zones and downscaling the resulting image, I resulting
15 |
16 | gdalwarp -te 5.7 45.7 10.7 47.9 -ts 1000 0 *tif swiss.tiff
17 |
18 | Which will create a width=1000 pixels image.
19 |
20 | Contour
21 | -------
22 |
23 | The border of switzerland is taken from this project: https://github.com/interactivethings/swiss-maps
24 |
25 | Clone the project and run:
26 |
27 | make topo/ch-country.json REPROJECT=true
28 |
--------------------------------------------------------------------------------
/code_samples/swiss.tiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/code_samples/swiss.tiff
--------------------------------------------------------------------------------
/code_samples/tz850.tiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/code_samples/tz850.tiff
--------------------------------------------------------------------------------
/code_samples/vardah.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Vardah cyclone file"
4 | ---
5 |
6 | vardah.tiff
7 | -----------
8 |
9 | vardah.tiff is the GFS model output for 12-des-2016, the day that [Vardah cyclone](https://en.wikipedia.org/wiki/Cyclone_Vardah) made landfall in India.
10 |
11 | This data is used in some examples, and was taken from: http://www.ftp.ncep.noaa.gov/data/nccf/com/gfs/prod/gfs.2016121200/
12 |
13 | Using gdalinfo I got the bands of interest, but, since the pressure is at the land surface, not corrected to the sea level, which is the common data to see, I made this small script to get the fields:
14 |
15 | {% highlight python %}
16 | import gdal
17 | import osr
18 | ds = gdal.Open("gfs.t00z.sfluxgrbf00.grib2")
19 | gph = ds.GetRasterBand(84).ReadAsArray()
20 | press = ds.GetRasterBand(54).ReadAsArray() / 100
21 | temp = ds.GetRasterBand(52).ReadAsArray()
22 | u = ds.GetRasterBand(50).ReadAsArray()
23 | v = ds.GetRasterBand(51).ReadAsArray()
24 |
25 | corr_press = press * (1 - (0.0065*gph/(0.0065*gph + temp + 273.15)))**-5.257
26 |
27 | driver = gdal.GetDriverByName('GTiff')
28 | outRaster = driver.Create("/tmp/vardah.tiff", ds.RasterXSize, ds.RasterYSize, 4, gdal.GDT_Float32)
29 | outRaster.SetGeoTransform(ds.GetGeoTransform())
30 |
31 | outband = outRaster.GetRasterBand(1)
32 | outband.WriteArray(corr_press)
33 | outband.SetMetadata({'name': 'press'})
34 |
35 | outband = outRaster.GetRasterBand(2)
36 | outband.WriteArray(temp)
37 | outband.SetMetadata({'name': 'temp'})
38 |
39 | outband = outRaster.GetRasterBand(3)
40 | outband.WriteArray(u)
41 | outband.SetMetadata({'name': 'u'})
42 |
43 | outband = outRaster.GetRasterBand(4)
44 | outband.WriteArray(v)
45 | outband.SetMetadata({'name': 'v'})
46 |
47 | outRasterSRS = osr.SpatialReference()
48 | outRasterSRS.ImportFromEPSG(4326)
49 | outRaster.SetProjection(outRasterSRS.ExportToWkt())
50 | outband.FlushCache()
51 |
52 | {% endhighlight %}
53 |
54 | Finally, runned
55 |
56 | gdal_translate -projwin 70 20 92 4 /tmp/gfs.tiff /tmp/vardah.tiff
57 |
58 | To clip the image around the cyclone and decrease the file size.
59 |
--------------------------------------------------------------------------------
/code_samples/vardah.tiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/code_samples/vardah.tiff
--------------------------------------------------------------------------------
/code_samples/wind-arrows-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing wind arrows"
4 | ---
5 | Drawing wind arrows
6 | -------------------
7 | Canvas example from the [arrows and barbs]({{ site.baseurl }}{% post_url 2016-12-11-arrows-and-barbs %}) section. The data and the code are based on this [wind barbs example]({{ site.baseurl }}/code_samples/wind-barbs-page.html).
8 |
9 |
10 |
11 | {% highlight js %}
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
118 |
119 |
120 | {% endhighlight %}
121 |
--------------------------------------------------------------------------------
/code_samples/wind-arrows-svg-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing wind arrows"
4 | ---
5 | Drawing wind arrows
6 | --------------------------
7 | SVG example from the [arrows and barbs]({{ site.baseurl }}{% post_url 2016-12-11-arrows-and-barbs %}) section. The data and the code are based on this [wind barbs example]({{ site.baseurl }}/code_samples/wind-barbs-svg-page.html).
8 |
9 |
10 |
11 | {% highlight js %}
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
105 |
106 | {% endhighlight %}
107 |
--------------------------------------------------------------------------------
/code_samples/wind-arrows-svg.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
94 |
95 |
--------------------------------------------------------------------------------
/code_samples/wind-arrows.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
107 |
108 |
109 |
--------------------------------------------------------------------------------
/code_samples/wind-barbs-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing wind barbs"
4 | ---
5 | Drawing wind barbs
6 | --------------------------
7 | Canvas example from the [arrows and barbs]({{ site.baseurl }}{% post_url 2016-12-11-arrows-and-barbs %}) section.
8 |
9 | The data is taken from the GFS model, following these steps:
10 |
11 | * Download at a link like this one (dates may not be available): http://www.ftp.ncep.noaa.gov/data/nccf/com/gfs/prod/gfs.2016112400/
12 | * Running *gdalinfo gfs.t00z.sfluxgrbf00.grib2*, see that the bands 50 and 51 are UGRD and VGRD at 10-HTGL (surface wind)
13 | * Run *gdal_translate -b 50 -b 51 -projwin 17 50 47 29 gfs.t00z.sfluxgrbf00.grib2 /tmp/gfs.tiff*
14 | * Note that the [geotiff-js](https://github.com/constantinius/geotiff.js) library has some problems with compression
15 | * This image, taken from [weatheronline](http://www.weatheronline.co.uk), shows that the barbs are coherent with other source images
16 |
17 | 
18 |
19 |
20 |
21 | {% highlight js %}
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
139 |
140 |
141 |
142 | {% endhighlight %}
143 |
--------------------------------------------------------------------------------
/code_samples/wind-barbs-projected.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
156 |
157 |
158 |
--------------------------------------------------------------------------------
/code_samples/wind-barbs-svg-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing wind barbs"
4 | ---
5 | Drawing wind barbs
6 | --------------------------
7 | SVG example from the [arrows and barbs]({{ site.baseurl }}{% post_url 2016-12-11-arrows-and-barbs %}) section.
8 |
9 | The data is taken from the GFS model, following these steps:
10 |
11 | * Download at a link like this one (dates may not be available): http://www.ftp.ncep.noaa.gov/data/nccf/com/gfs/prod/gfs.2016112400/
12 | * Running *gdalinfo gfs.t00z.sfluxgrbf00.grib2*, see that the bands 50 and 51 are UGRD and VGRD at 10-HTGL (surface wind)
13 | * Run *gdal_translate -b 50 -b 51 -projwin 17 50 47 29 gfs.t00z.sfluxgrbf00.grib2 /tmp/gfs.tiff*
14 | * Note that the [geotiff-js](https://github.com/constantinius/geotiff.js) library has some problems with compression
15 | * This image, taken from [weatheronline](http://www.weatheronline.co.uk), shows that the barbs are coherent with other source images
16 |
17 |
18 |
19 |
20 |
21 | {% highlight js %}
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
149 |
150 |
151 | {% endhighlight %}
152 |
--------------------------------------------------------------------------------
/code_samples/wind-barbs-svg.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/code_samples/wind-barbs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
118 |
119 |
120 |
--------------------------------------------------------------------------------
/code_samples/wrf.tiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/code_samples/wrf.tiff
--------------------------------------------------------------------------------
/css/abzu.js:
--------------------------------------------------------------------------------
1 | console.log("Go Abzu go");
2 |
--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-weight: 400;
3 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
4 | }
5 |
6 | pre, code, pre code {
7 | border: none;
8 | border-radius: 0;
9 | background-color: #f9f9f9;
10 | font-size: 0.85em;
11 | }
12 |
13 | .highlight {
14 | background-color: #f9f9f9;
15 | }
16 |
17 | pre {
18 | font-size: 1em;
19 | }
20 |
21 | code {
22 | color: inherit;
23 | }
24 |
25 | #header {
26 | border-bottom: 1px solid #eee;
27 | margin-bottom: 20px;
28 | }
29 |
30 | #header a:hover {
31 | text-decoration: none;
32 | }
33 |
34 | #footer {
35 | margin: 20px 0;
36 | font-size: 0.85em;
37 | color: #999;
38 | text-align: center;
39 | }
40 |
41 | #content > .page-header:first-child {
42 | margin-top: 0;
43 | }
44 |
45 | #content > .page-header:first-child h2 {
46 | margin-top: 0;
47 | }
48 |
49 |
50 | #navigation {
51 | font-size: 0.9em;
52 | }
53 |
54 | #navigation li a {
55 | padding-left: 10px;
56 | padding-right: 10px;
57 | }
58 |
59 | #navigation .nav-header {
60 | padding-left: 0;
61 | padding-right: 0;
62 | }
63 |
64 | body.rtl {
65 | direction: rtl;
66 | }
67 |
68 | body.rtl #header .brand {
69 | float: right;
70 | margin-left: 5px;
71 | }
72 | body.rtl .row-fluid [class*="span"] {
73 | float: right !important;
74 | margin-left: 0;
75 | margin-right: 2.564102564102564%;
76 | }
77 | body.rtl .row-fluid [class*="span"]:first-child {
78 | margin-right: 0;
79 | }
80 |
81 | body.rtl ul, body.rtl ol {
82 | margin: 0 25px 10px 0;
83 | }
84 |
85 | table {
86 | margin-bottom: 1rem;
87 | border: 1px solid #e5e5e5;
88 | border-collapse: collapse;
89 | }
90 |
91 | td, th {
92 | padding: .25rem .5rem;
93 | border: 1px solid #e5e5e5;
94 | }
95 |
96 |
97 | /**
98 | * Links
99 | */
100 | a {
101 | color: #6c916c;
102 | text-decoration: none;
103 |
104 | &:visited {
105 | color: #618261;
106 | }
107 |
108 | &:hover {
109 | color: #111;
110 | text-decoration: underline;
111 | }
112 | }
113 |
114 | .green-separator {
115 | border-top: 5px solid #5f805f;
116 | border-bottom: 1px solid #afebaf;
117 | min-height: 56px;
118 |
119 |
120 | // Positioning context for the mobile navigation icon
121 | position: relative;
122 | }
123 | .abzu{
124 | color:red;
125 | }
126 |
--------------------------------------------------------------------------------
/css/syntax.css:
--------------------------------------------------------------------------------
1 | .highlight .hll { background-color: #ffffcc }
2 | .highlight { background: #ffffff; }
3 | .highlight .c { color: #888888 } /* Comment */
4 | .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
5 | .highlight .k { color: #008800; font-weight: bold } /* Keyword */
6 | .highlight .cm { color: #888888 } /* Comment.Multiline */
7 | .highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
8 | .highlight .c1 { color: #888888 } /* Comment.Single */
9 | .highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
10 | .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
11 | .highlight .ge { font-style: italic } /* Generic.Emph */
12 | .highlight .gr { color: #aa0000 } /* Generic.Error */
13 | .highlight .gh { color: #333333 } /* Generic.Heading */
14 | .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
15 | .highlight .go { color: #888888 } /* Generic.Output */
16 | .highlight .gp { color: #555555 } /* Generic.Prompt */
17 | .highlight .gs { font-weight: bold } /* Generic.Strong */
18 | .highlight .gu { color: #666666 } /* Generic.Subheading */
19 | .highlight .gt { color: #aa0000 } /* Generic.Traceback */
20 | .highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
21 | .highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
22 | .highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
23 | .highlight .kp { color: #008800 } /* Keyword.Pseudo */
24 | .highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
25 | .highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
26 | .highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
27 | .highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
28 | .highlight .na { color: #336699 } /* Name.Attribute */
29 | .highlight .nb { color: #003388 } /* Name.Builtin */
30 | .highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
31 | .highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
32 | .highlight .nd { color: #555555 } /* Name.Decorator */
33 | .highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
34 | .highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
35 | .highlight .nl { color: #336699; font-style: italic } /* Name.Label */
36 | .highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
37 | .highlight .py { color: #336699; font-weight: bold } /* Name.Property */
38 | .highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
39 | .highlight .nv { color: #336699 } /* Name.Variable */
40 | .highlight .ow { color: #008800 } /* Operator.Word */
41 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */
42 | .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
43 | .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
44 | .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
45 | .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
46 | .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
47 | .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
48 | .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
49 | .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
50 | .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
51 | .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
52 | .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
53 | .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
54 | .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
55 | .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
56 | .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
57 | .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
58 | .highlight .vc { color: #336699 } /* Name.Variable.Class */
59 | .highlight .vg { color: #dd7700 } /* Name.Variable.Global */
60 | .highlight .vi { color: #3333bb } /* Name.Variable.Instance */
61 | .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
62 |
--------------------------------------------------------------------------------
/images/color-scale/sample-scale.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/color-scale/sample-scale.png
--------------------------------------------------------------------------------
/images/examples/arrows.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/arrows.png
--------------------------------------------------------------------------------
/images/examples/barbs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/barbs.png
--------------------------------------------------------------------------------
/images/examples/color-scale-interpolation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/color-scale-interpolation.png
--------------------------------------------------------------------------------
/images/examples/color-scale-isobands.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/color-scale-isobands.png
--------------------------------------------------------------------------------
/images/examples/dem-colors.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/dem-colors.png
--------------------------------------------------------------------------------
/images/examples/dem-shaded.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/dem-shaded.png
--------------------------------------------------------------------------------
/images/examples/howtocrop:
--------------------------------------------------------------------------------
1 | convert -crop 240x120+100+100 isolines-labels.png /home/darjiso/Software/d3-raster-tools-docs/images/examples/isolines-labels.png
2 |
--------------------------------------------------------------------------------
/images/examples/isobands.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/isobands.png
--------------------------------------------------------------------------------
/images/examples/isolines-labels.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/isolines-labels.png
--------------------------------------------------------------------------------
/images/examples/isolines.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/isolines.png
--------------------------------------------------------------------------------
/images/examples/leaflet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/leaflet.png
--------------------------------------------------------------------------------
/images/examples/projection.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/projection.png
--------------------------------------------------------------------------------
/images/examples/raster-interpolate-projection.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/raster-interpolate-projection.png
--------------------------------------------------------------------------------
/images/examples/raster-interpolate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/raster-interpolate.png
--------------------------------------------------------------------------------
/images/examples/raster-pixel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/raster-pixel.png
--------------------------------------------------------------------------------
/images/examples/streamlines.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/streamlines.png
--------------------------------------------------------------------------------
/images/examples/vardah-layers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/vardah-layers.png
--------------------------------------------------------------------------------
/images/examples/vardah-streamlines.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/vardah-streamlines.png
--------------------------------------------------------------------------------
/images/projections/august.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/projections/august.png
--------------------------------------------------------------------------------
/images/projections/conicConformal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/projections/conicConformal.png
--------------------------------------------------------------------------------
/images/projections/equirectangular.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/projections/equirectangular.png
--------------------------------------------------------------------------------
/images/vectors-barbs/16112400_2400.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/vectors-barbs/16112400_2400.gif
--------------------------------------------------------------------------------
/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "D3js raster tools docs"
4 | disqus: 1
5 | ---
6 |
7 | D3js raster tools docs
8 | ======================
9 |
10 | This small documentation explains how to work with raster data and the [d3js](https://d3js.org/) to create dynamic data visualizations.
11 |
12 | Usually, the examples show how to place points or polygons on a map. Those examples are working with [vectorial data](http://gis.stackexchange.com/questions/57142/what-is-the-difference-between-vector-and-raster-data-models ). But many datasets are rasters, so the lack of examples and libraries made difficult to use [d3js](https://d3js.org/) with meteorological data, [DEM data](https://en.wikipedia.org/wiki/Digital_elevation_model), etc.
13 |
14 | Some common representations could be easily done with existing libraries, others didn't have available tools. This tutorial will show how to use:
15 |
16 | * [geotiff](https://github.com/constantinius/geotiff.js): Reading the GeoTIFF data (not the projectiopn, which would be cool)
17 | * [raster-streamlines](https://github.com/rveciana/raster-streamlines): Drawing [streamlines](https://en.wikipedia.org/wiki/Streamlines,_streaklines,_and_pathlines) from vectorial fields
18 | * [raster-marching-squares](https://github.com/rveciana/raster-marching-squares): Creating the isobands with the wind speed
19 | * [reproject](https://github.com/perliedman/reproject): Reprojecting the generated GeoJSON
20 | * [proj4js](http://proj4js.org/): Reprojecting points
21 |
22 | And examples for all the common raster visualizations covered by the [Basemap library](http://basemaptutorial.readthedocs.io/en/latest/). All the examples have the *Canvas* and the *SVG* version so it's easy to use the most convenient.
23 |
24 | I would really appreciate all the feedback. Disqus comments are available on each page.
25 |
26 | Section Examples list
27 | ---------------------
28 |
29 | |----------|:-------------:|
30 | |[
Wind arrows]({{ site.baseurl }}/code_samples/wind-arrows-page.html) | [
Wind barbs]({{ site.baseurl }}/code_samples/wind-barbs-page.html) |
31 | |[
Raster interpolation]({{ site.baseurl }}/code_samples/raster-interpolation-page.html) | [
Raster original pixels]({{ site.baseurl }}/code_samples/raster-pixels-page.html) |
32 | |[
Isolines]({{ site.baseurl }}/code_samples/isolines-page.html) | [
Isolines with labels]({{ site.baseurl }}/code_samples/isolines-labels-page.html) |
33 | |[
Isobands]({{ site.baseurl }}/code_samples/isobands-page.html) | [
Streamlines]({{ site.baseurl }}/code_samples/streamlines-arrows-page.html) |
34 | |[
Projected GeoTIFF]({{ site.baseurl }}/code_samples/wind-barbs-projected-page.html) | [
Projected raster interpolation]({{ site.baseurl }}/code_samples/raster-interpolation-projected-page.html) |
35 | |[
Leaflet]({{ site.baseurl }}/code_samples/leaflet-page.html) | [
Shaded relief]({{ site.baseurl }}/code_samples/dem-shaded-page.html)|
36 |
37 | Other visualization examples
38 | ----------------------------
39 |
40 | |----------|:-------------:|
41 | |[
Layer selection]({{ site.baseurl }}/code_samples/vardah-layers-page.html) | [
Animated streamlines]({{ site.baseurl }}/code_samples/vardah-streamlines-page.html) |
42 | |[
Color scale isobands]({{ site.baseurl }}/code_samples/color-scale-isobands-page.html) | [
Color scale shaded relief]({{ site.baseurl }}/code_samples/color-scale-interpolation-page.html) |
43 |
--------------------------------------------------------------------------------
18 |
19 |
20 |
21 | {% highlight js %}
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
139 |
140 |
141 |
142 | {% endhighlight %}
143 |
--------------------------------------------------------------------------------
/code_samples/wind-barbs-projected.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
156 |
157 |
158 |
--------------------------------------------------------------------------------
/code_samples/wind-barbs-svg-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "Drawing wind barbs"
4 | ---
5 | Drawing wind barbs
6 | --------------------------
7 | SVG example from the [arrows and barbs]({{ site.baseurl }}{% post_url 2016-12-11-arrows-and-barbs %}) section.
8 |
9 | The data is taken from the GFS model, following these steps:
10 |
11 | * Download at a link like this one (dates may not be available): http://www.ftp.ncep.noaa.gov/data/nccf/com/gfs/prod/gfs.2016112400/
12 | * Running *gdalinfo gfs.t00z.sfluxgrbf00.grib2*, see that the bands 50 and 51 are UGRD and VGRD at 10-HTGL (surface wind)
13 | * Run *gdal_translate -b 50 -b 51 -projwin 17 50 47 29 gfs.t00z.sfluxgrbf00.grib2 /tmp/gfs.tiff*
14 | * Note that the [geotiff-js](https://github.com/constantinius/geotiff.js) library has some problems with compression
15 | * This image, taken from [weatheronline](http://www.weatheronline.co.uk), shows that the barbs are coherent with other source images
16 |
17 |
18 |
19 |
20 |
21 | {% highlight js %}
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
149 |
150 |
151 | {% endhighlight %}
152 |
--------------------------------------------------------------------------------
/code_samples/wind-barbs-svg.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/code_samples/wind-barbs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
118 |
119 |
120 |
--------------------------------------------------------------------------------
/code_samples/wrf.tiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/code_samples/wrf.tiff
--------------------------------------------------------------------------------
/css/abzu.js:
--------------------------------------------------------------------------------
1 | console.log("Go Abzu go");
2 |
--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-weight: 400;
3 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
4 | }
5 |
6 | pre, code, pre code {
7 | border: none;
8 | border-radius: 0;
9 | background-color: #f9f9f9;
10 | font-size: 0.85em;
11 | }
12 |
13 | .highlight {
14 | background-color: #f9f9f9;
15 | }
16 |
17 | pre {
18 | font-size: 1em;
19 | }
20 |
21 | code {
22 | color: inherit;
23 | }
24 |
25 | #header {
26 | border-bottom: 1px solid #eee;
27 | margin-bottom: 20px;
28 | }
29 |
30 | #header a:hover {
31 | text-decoration: none;
32 | }
33 |
34 | #footer {
35 | margin: 20px 0;
36 | font-size: 0.85em;
37 | color: #999;
38 | text-align: center;
39 | }
40 |
41 | #content > .page-header:first-child {
42 | margin-top: 0;
43 | }
44 |
45 | #content > .page-header:first-child h2 {
46 | margin-top: 0;
47 | }
48 |
49 |
50 | #navigation {
51 | font-size: 0.9em;
52 | }
53 |
54 | #navigation li a {
55 | padding-left: 10px;
56 | padding-right: 10px;
57 | }
58 |
59 | #navigation .nav-header {
60 | padding-left: 0;
61 | padding-right: 0;
62 | }
63 |
64 | body.rtl {
65 | direction: rtl;
66 | }
67 |
68 | body.rtl #header .brand {
69 | float: right;
70 | margin-left: 5px;
71 | }
72 | body.rtl .row-fluid [class*="span"] {
73 | float: right !important;
74 | margin-left: 0;
75 | margin-right: 2.564102564102564%;
76 | }
77 | body.rtl .row-fluid [class*="span"]:first-child {
78 | margin-right: 0;
79 | }
80 |
81 | body.rtl ul, body.rtl ol {
82 | margin: 0 25px 10px 0;
83 | }
84 |
85 | table {
86 | margin-bottom: 1rem;
87 | border: 1px solid #e5e5e5;
88 | border-collapse: collapse;
89 | }
90 |
91 | td, th {
92 | padding: .25rem .5rem;
93 | border: 1px solid #e5e5e5;
94 | }
95 |
96 |
97 | /**
98 | * Links
99 | */
100 | a {
101 | color: #6c916c;
102 | text-decoration: none;
103 |
104 | &:visited {
105 | color: #618261;
106 | }
107 |
108 | &:hover {
109 | color: #111;
110 | text-decoration: underline;
111 | }
112 | }
113 |
114 | .green-separator {
115 | border-top: 5px solid #5f805f;
116 | border-bottom: 1px solid #afebaf;
117 | min-height: 56px;
118 |
119 |
120 | // Positioning context for the mobile navigation icon
121 | position: relative;
122 | }
123 | .abzu{
124 | color:red;
125 | }
126 |
--------------------------------------------------------------------------------
/css/syntax.css:
--------------------------------------------------------------------------------
1 | .highlight .hll { background-color: #ffffcc }
2 | .highlight { background: #ffffff; }
3 | .highlight .c { color: #888888 } /* Comment */
4 | .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
5 | .highlight .k { color: #008800; font-weight: bold } /* Keyword */
6 | .highlight .cm { color: #888888 } /* Comment.Multiline */
7 | .highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
8 | .highlight .c1 { color: #888888 } /* Comment.Single */
9 | .highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
10 | .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
11 | .highlight .ge { font-style: italic } /* Generic.Emph */
12 | .highlight .gr { color: #aa0000 } /* Generic.Error */
13 | .highlight .gh { color: #333333 } /* Generic.Heading */
14 | .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
15 | .highlight .go { color: #888888 } /* Generic.Output */
16 | .highlight .gp { color: #555555 } /* Generic.Prompt */
17 | .highlight .gs { font-weight: bold } /* Generic.Strong */
18 | .highlight .gu { color: #666666 } /* Generic.Subheading */
19 | .highlight .gt { color: #aa0000 } /* Generic.Traceback */
20 | .highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
21 | .highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
22 | .highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
23 | .highlight .kp { color: #008800 } /* Keyword.Pseudo */
24 | .highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
25 | .highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
26 | .highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
27 | .highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
28 | .highlight .na { color: #336699 } /* Name.Attribute */
29 | .highlight .nb { color: #003388 } /* Name.Builtin */
30 | .highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
31 | .highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
32 | .highlight .nd { color: #555555 } /* Name.Decorator */
33 | .highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
34 | .highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
35 | .highlight .nl { color: #336699; font-style: italic } /* Name.Label */
36 | .highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
37 | .highlight .py { color: #336699; font-weight: bold } /* Name.Property */
38 | .highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
39 | .highlight .nv { color: #336699 } /* Name.Variable */
40 | .highlight .ow { color: #008800 } /* Operator.Word */
41 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */
42 | .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
43 | .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
44 | .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
45 | .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
46 | .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
47 | .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
48 | .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
49 | .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
50 | .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
51 | .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
52 | .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
53 | .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
54 | .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
55 | .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
56 | .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
57 | .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
58 | .highlight .vc { color: #336699 } /* Name.Variable.Class */
59 | .highlight .vg { color: #dd7700 } /* Name.Variable.Global */
60 | .highlight .vi { color: #3333bb } /* Name.Variable.Instance */
61 | .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
62 |
--------------------------------------------------------------------------------
/images/color-scale/sample-scale.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/color-scale/sample-scale.png
--------------------------------------------------------------------------------
/images/examples/arrows.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/arrows.png
--------------------------------------------------------------------------------
/images/examples/barbs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/barbs.png
--------------------------------------------------------------------------------
/images/examples/color-scale-interpolation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/color-scale-interpolation.png
--------------------------------------------------------------------------------
/images/examples/color-scale-isobands.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/color-scale-isobands.png
--------------------------------------------------------------------------------
/images/examples/dem-colors.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/dem-colors.png
--------------------------------------------------------------------------------
/images/examples/dem-shaded.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/dem-shaded.png
--------------------------------------------------------------------------------
/images/examples/howtocrop:
--------------------------------------------------------------------------------
1 | convert -crop 240x120+100+100 isolines-labels.png /home/darjiso/Software/d3-raster-tools-docs/images/examples/isolines-labels.png
2 |
--------------------------------------------------------------------------------
/images/examples/isobands.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/isobands.png
--------------------------------------------------------------------------------
/images/examples/isolines-labels.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/isolines-labels.png
--------------------------------------------------------------------------------
/images/examples/isolines.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/isolines.png
--------------------------------------------------------------------------------
/images/examples/leaflet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/leaflet.png
--------------------------------------------------------------------------------
/images/examples/projection.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/projection.png
--------------------------------------------------------------------------------
/images/examples/raster-interpolate-projection.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/raster-interpolate-projection.png
--------------------------------------------------------------------------------
/images/examples/raster-interpolate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/raster-interpolate.png
--------------------------------------------------------------------------------
/images/examples/raster-pixel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/raster-pixel.png
--------------------------------------------------------------------------------
/images/examples/streamlines.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/streamlines.png
--------------------------------------------------------------------------------
/images/examples/vardah-layers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/vardah-layers.png
--------------------------------------------------------------------------------
/images/examples/vardah-streamlines.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/examples/vardah-streamlines.png
--------------------------------------------------------------------------------
/images/projections/august.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/projections/august.png
--------------------------------------------------------------------------------
/images/projections/conicConformal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/projections/conicConformal.png
--------------------------------------------------------------------------------
/images/projections/equirectangular.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/projections/equirectangular.png
--------------------------------------------------------------------------------
/images/vectors-barbs/16112400_2400.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rveciana/d3-raster-tools-docs/d88c8db967d4762ef8b550366b9c5d9a7794ec06/images/vectors-barbs/16112400_2400.gif
--------------------------------------------------------------------------------
/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: "D3js raster tools docs"
4 | disqus: 1
5 | ---
6 |
7 | D3js raster tools docs
8 | ======================
9 |
10 | This small documentation explains how to work with raster data and the [d3js](https://d3js.org/) to create dynamic data visualizations.
11 |
12 | Usually, the examples show how to place points or polygons on a map. Those examples are working with [vectorial data](http://gis.stackexchange.com/questions/57142/what-is-the-difference-between-vector-and-raster-data-models ). But many datasets are rasters, so the lack of examples and libraries made difficult to use [d3js](https://d3js.org/) with meteorological data, [DEM data](https://en.wikipedia.org/wiki/Digital_elevation_model), etc.
13 |
14 | Some common representations could be easily done with existing libraries, others didn't have available tools. This tutorial will show how to use:
15 |
16 | * [geotiff](https://github.com/constantinius/geotiff.js): Reading the GeoTIFF data (not the projectiopn, which would be cool)
17 | * [raster-streamlines](https://github.com/rveciana/raster-streamlines): Drawing [streamlines](https://en.wikipedia.org/wiki/Streamlines,_streaklines,_and_pathlines) from vectorial fields
18 | * [raster-marching-squares](https://github.com/rveciana/raster-marching-squares): Creating the isobands with the wind speed
19 | * [reproject](https://github.com/perliedman/reproject): Reprojecting the generated GeoJSON
20 | * [proj4js](http://proj4js.org/): Reprojecting points
21 |
22 | And examples for all the common raster visualizations covered by the [Basemap library](http://basemaptutorial.readthedocs.io/en/latest/). All the examples have the *Canvas* and the *SVG* version so it's easy to use the most convenient.
23 |
24 | I would really appreciate all the feedback. Disqus comments are available on each page.
25 |
26 | Section Examples list
27 | ---------------------
28 |
29 | |----------|:-------------:|
30 | |[ Wind arrows]({{ site.baseurl }}/code_samples/wind-arrows-page.html) | [ Wind barbs]({{ site.baseurl }}/code_samples/wind-barbs-page.html) |
31 | |[ Raster interpolation]({{ site.baseurl }}/code_samples/raster-interpolation-page.html) | [ Raster original pixels]({{ site.baseurl }}/code_samples/raster-pixels-page.html) |
32 | |[ Isolines]({{ site.baseurl }}/code_samples/isolines-page.html) | [ Isolines with labels]({{ site.baseurl }}/code_samples/isolines-labels-page.html) |
33 | |[ Isobands]({{ site.baseurl }}/code_samples/isobands-page.html) | [ Streamlines]({{ site.baseurl }}/code_samples/streamlines-arrows-page.html) |
34 | |[ Projected GeoTIFF]({{ site.baseurl }}/code_samples/wind-barbs-projected-page.html) | [ Projected raster interpolation]({{ site.baseurl }}/code_samples/raster-interpolation-projected-page.html) |
35 | |[ Leaflet]({{ site.baseurl }}/code_samples/leaflet-page.html) | [ Shaded relief]({{ site.baseurl }}/code_samples/dem-shaded-page.html)|
36 |
37 | Other visualization examples
38 | ----------------------------
39 |
40 | |----------|:-------------:|
41 | |[ Layer selection]({{ site.baseurl }}/code_samples/vardah-layers-page.html) | [ Animated streamlines]({{ site.baseurl }}/code_samples/vardah-streamlines-page.html) |
42 | |[ Color scale isobands]({{ site.baseurl }}/code_samples/color-scale-isobands-page.html) | [ Color scale shaded relief]({{ site.baseurl }}/code_samples/color-scale-interpolation-page.html) |
43 |
--------------------------------------------------------------------------------