Google Maps 'heatmap' that can handle density AND data values? - javascript

I have locations that have quality 'X', where X can be a negative or positive value. I would like to plot negative values of X as red, and positive values as green. Intermediate values will be yellow. The opacity of the color will correspond to local density of data.
Issue 85 proves that fusion tables alone can't do this yet. Is there a viable extension that can handle this style of heatmapping?
I've made a mockup of what I want here.
I don't know if variable transparency will be an inherent problem. Would that even be possible for a Google Map overlay?

It is indeed possible, though I was only able to solve this problem with custom heatmap code. You can see the result here.
I hope to add the ability to handle both density and data values simultaneously in this API I created. Keep checking.

Related

Simple Regression Prediction Algorithm in JavaScript

I am trying to do a simple forecast of future profit of an organization based on the past records by using regression. I am following this link. For testing purpose, I have changed the sample data and it produced these results:
My actual data will be date and profit, and they will be going up and down rather than in a contiguous increment way. I realized that the method above works for sample data which keep on increasing as the prediction is quite accurate. However, when I changed the data to the one in the screenshot which goes up and down crazily, the prediction is not so accurate anymore.
Just wondering if there is any way to increase the accuracy for the regression as my data will be going up and down.
Thanks!
When you do a regression you are fitting a model to the data. In other words you are saying "here is an equation that describes roughly how the data behaves". In the linear regression case the model / equation is:
y = a * x + b
Where x is the input and y is the output. By doing a linear regression you are saying "my data follows a straight line, here is my data, what are the parameters a and b that best fit the data?".
Obviously if your data does not follow a straight line this will work badly. For instance look at this image I found on Google Images.
Clearly you can see the data has some kind of complex wavy shape - it goes up and down and then up again. The linear model is not complex enough to express this shape (it can only do straight lines). So it doesn't fit well.
Since you need a more complex model you have to choose one. There are dozens of standard ones and you can make up your own. All the model is is an equation with some fixed parameters that can be adjusted so that the equation fits your data.
I suggest you play around with the trend line options in Excel or Google Sheets to get a feel for this. See the Trendline Types bit here for some common models.
Note that none of those will work well for monthly profit because none of them are really cyclical. You probably want a model that is a combination of some repeating multipliers to capture month-to-month variations, and then a linear or polynomial component to capture the fact that yearly profit is increasing or decreasing over time.
You don't want a model that is too expressive however, otherwise you will overfit the data (basically it will see patterns in the noise).

How to build a noise pollution map with heatmap.js

I have to build something like a heatmap but representing the noise sources in a colour, and in the noise expansion radious keep gradient to low level. My problem is that the heapmap.js library takes sense of the points concentration.
I want that the colorize depends on the noise level, and not on the concentration of noise sources.
Also I want to use it not only over a map, also over plant plains and images.
I don't know how can I do it with heatmap.js. If anyone knows or some other libraries...
Thanks in advance!
To show heatmap based on noise level first you will have to define lower and upper bounds of your data. For example, 0 = 0dB lower bound; 10 = 200dB upper bound.
heatmapInstance.setDataMax(10);
// setting the minimum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMin(0);
Then assign weight Values to each of your data point based on the noise level.
You can assign 0 values to the sources which are quiet and 7-8 to the noisy ones. It should produce nice heatmap of the noise intensity.
Also I want to use it not only over a map, also over plant plains and
images. I don't know how can I do it with heatmap.js
AFAIK, heatmap.js uses pixel position values to plot the data, so it won't be a problem to show heatmap on anything on your screen; be it an image, map or any other canvas.
If you are talking about Google Heatmap apis, I think then it only applies for maps.
Check documentation of Heatmap.js, it is pretty straightforward.

How can I show data equal to zero on a log scale?

What I'm working with
I have data that I want to chart showing the intensity of rainfall over a period of time. The API documentation that I'm getting this data from says the following:
A very rough guide is that a value of 0 in./hr. corresponds to no precipitation, 0.002 in./hr. corresponds to very light precipitation, 0.017 in./hr. corresponds to light precipitation, 0.1 in./hr. corresponds to moderate precipitation, and 0.4 in./hr. corresponds to heavy precipitation.
Therefore, it seems logical to use a log scale for most of the data (otherwise everything less than moderate rain would be imperceptible), but this obviously causes a problem for when there is no rain predicted.
Possible Solution
The answer to this question suggested adding a small amount to the data and modifying the tooltip to match the original data.
Problem
This would work very nicely, but I don't know how to modify just the data that the tooltip of a Google Chart (the charting tool I'm using) references.
The Google Chart help documents here and here describe several possible roles columns from the chart's data table can play, and one of them is to be the HTML that is rendered in the tooltip. However, I was really hoping to not have to rewrite the HTML for that. Is there anyone here that knows an easy way to just modify the data shown in the tooltip?
The second link you provide gives you the easiest way to modify your tooltip content, Link. Just add another column like dataTable.addColumn({type: 'string', role: 'tooltip'});and then provide your own tooltip, like looping through all your rows and checking for zero values and replacing the tooltips where needed.

Google Heat Map intensity based on value

I want to create a heat map using Google API (Javascript). The problem is that Heatmaps use colors to represent the density of points. But, in my case the density of points is irrelevant. I want to create a map using a specific set of values. The colors on the map will be determined by that value only for that location. My set of values is Latency (ms).
Example: If a value is low it will appear on the map with green color. If a value is high it will appear with red color.
I´ve searched the API documentation, but the only thing i found was using "weighted locations". This is not a suitable solution, because the density of points is still considered.

Merging colors between points

I have a web application with several points placed on a map. Every point is associated with a value, good values are green,ok values yellow and bad values red. If two values are close enough I would like them to merge colours between them e.g. One point is red and the other point is yellow the area between them should be orange.
I have looked into heat maps but not found anything that works for my needs.
Anyone know of any good libraries that solve this problem?
Just make the images for these points being PNGs with alpha channels set to 0.5 or other suitable value.

Categories

Resources