Are there any JavaScript libraries out there that allow you to create heatmaps using in-browser graphic rendering features such as <canvas> or SVG?
I know about HeatMapAPI.com, but their heat maps are generated on the server side. I think that in the era of <canvas> element we don't need that anymore!
If there is nothing like this yet, are there any volunteers to participate in creating such a tool?
I created a demo including a real-time heatmap with the <canvas> element and javascript. I also added the documented code next to the heatmap sample. The heatmap generation process is based on an alpha map in the canvas element which depends on the users mouse movement.
You can take a look at my demo right here:
http://www.patrick-wied.at/static/heatmap/
I created a hit map with the help of Google Visualization API [http://code.google.com/apis/visualization/documentation/]. It uses SVG & VML, and also cross browser compatible. Hope it'll help.
I have some js/canvas/web worker code here though there's plenty of work that could be done with it. It's also pushed online at http://heatmapthing.heroku.com/. Your browser needs to support web workers for this.
Please send pull requests if you improve it. The pseudo-gaussian smoothing is slooooooooow as hell right now.
I also gave it a try, but without doing the Gaussian smoothing my self, I let canvas do that for me. Basically I draw a radial gradient for every point in gray scale and then colorize this gray scale image (see "Creating Heat Maps with .NET 2.0 (C#)" for a detailed explanation, my implementation differs a bit).
The result looks like this:
(source: bitbucket.org)
The rendering time isn't that bad on Chrome/Chromium. I think the most time consuming part is the colorizing, because I am looping over every pixel.
You can find the code here: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js
I played with heatmap a few years ago. See http://www.urbigene.com/treemapphp/, the algorithm came from here: http://www.cs.umd.edu/hcil/treemap-history/
Heatcanvas looks quite good. It also has a leaflet extension to run on top of openstreetmaps
https://github.com/sunng87/heatcanvas
It runs quite well on few points (< 200) or so, but gets a bit slow on many thousands of points. I think it might also recalculate more often than necessary after pan and zoom, and I had some problems with changing the heatmap on the fly (replacing heatmap with another using javascript), guess I need to experiment a bit more with it, or contact the author
Related
I found this page https://www.bridgersteel.com/metal-colors/roof-visualizer where there is an interactive way to change the color of a demo house and see how it looks like.
As far as I know, they used a pretty straightforward and simple way of doing this.
However, what I don't understand is how did they produced the exact super-precise polygon points. Is there a non-manual way of doing this?
Otherwise, even basic, this job requires ton of days to be made...
Do you have any hints?
I'm going to guess they used vector graphics software, like Adobe Illustrator, to create the svg. Depending on the software, you can even see the code it generates. You can also convert an svg image to code using javascript on the website itself.
I visited the page and came up with the following in the link below.
https://drive.google.com/open?id=1PQimeXKGyCJd1lNZHHHuOkOhLc3oq97v
I have a SVG generated map for the game I am developing. I have no problems with the game being open-source and it uses open web technologies such as HTML and SVG. No problems there.
But at the same time I want the players not to be able to see or reverse engineer a map of the whole world (to retain true exploration). For now I generate map using a seed that is secret and not version controlled. So even though the algorithm is known curious players can use open-sourced code to generate "game-like worlds" but not that exact one. This solves the "global" problem.
But since SVG is rendered on a page as a single Voronoi diagram all the data (I don't mind the coordinates of points) would be extractable. Data like resources, land types, biomes, climate etc. could be fetched from SVG to gain an upper hand in finding good locations for settlements.
Any idea how to prevent that? Players have limited vision so I thought about either:
not rendering the whole Voronoi diagram at all (just the visible part), but that could be potentially tricky to do (maybe, haven't looked into it yet),
inserting the resource/land tile data into SVG graph only to visible locations
I can see the benefits of both approaches and if done correctly it could even boost the performance (not rendering the whole thing/rendering with less data) and lead to bigger worlds without impacting performance.
Any other ideas/programming/architectural approaches to help with the issue?
(I am using Vue.js, d3.js, svg-pan-zoom and Laravel backend just in case it helps.)
The ideas that you gave are perfect, but for implementing them, you need to make hard work, and spend much time.
I have a suggestion. Is will work for most of the users. Maybe some users will "hack" it. But I believe it will work for 95% of the times.
You can create a very big rectangle, from the top left point 0,0 until the right bottom point. The rectangle will be white, and it will be over all other shapes.
This way if someone will download the SVG, we will see nothing. Just a big white rectangle.
In you game HTML, you can add a CSS selector, to hide this rectangle.
If you following this method, most of the users (who don't have a photo editing software) will not be able to see the map.
Users who knows how to inspect elements in HTML may see the map. But I believe that most of them who will see a white box, will not believe that there is something behind.
I think that this is a simple temporary approach that you can do, before doing other more defensive ways.
I'm very new to three.js, so please forgive me if my question has already been answered some place else or is obvious.
What I'm trying to do is the following: I have data from a motion capture system. This data consists of frames where each frame has the Cartesian coordinates of multiple markers. I'd like to visualise this data using three.js in a web browser.
So far so good. My initial thought was to simply use geometric primitives for each marker and connect some markers to create a sort of 3D "stickman". However, I found out that three.js has a concept called Skeleton, which consists of a set of Bones. That seems precisely like what I want. However, I do not have any sort of "skin" that I would like to use (e.g. a SkinnedMesh).
My question therefore is two-fold: 1) Should I even use Skeleton for my intentions or is the primitive approach described earlier the way to go and 2) if I'm to use the Skeleton stuff, how do I present it in a scene without using any skin?
Any help here is greatly appreciated!
To answer my own question: The easiest solution that I found was simply using spheres for the markers and connecting them with lines. This has some shortcomings (e.g. lines do not scale with the zoom level), but overall it works quite well.
If you are interested in doing the same, I've put together a simple demo, which is also available on Github.
I'm about to develop a UI for medical research application. I need to make a time series line graph. Main issue is the amount of data:
5,000 points per graph, with a few of them displayed simultaneity. I’m expecting 50,000 points processed all together.
The question is what presentation library?
The main features I’m looking for are: Handles huge data sets, Zoom, annotations, live update.
I’m already looking into http://dygraphs.com/ and http://meteorcharts.com/
I wouldn't want any library that renders the data as DOM elements, or that uses SVG (from performance perspective)
Well, I think I'll give everyone my own answer to my question:
Dygraphs (http://dygraphs.com/) seems to be on the spot. The documentation, although a lot of apparent efforts, leaves a lot to be desired. But from performance, features and flexibility, it's the best I've seen. At least for my current project needs.
Way to go, Dygraphs!
Have you checked out D3? I'm using that for a lot of graph visualization. It looks like this example renders to svg.
My stuff renders to a SVG for force graph visualizations too, but it looks like D3 might be able to use either a canvas or SVG, but I'm not positive about what all can be rendered to which. Honestly, I'd give D3 a try even with SVG, it might be fast enough. I remember reading something about someone simulating thousands of particles using D3's force graph visualizations without issues. It's SUPER easy to get your data into the right format for it to use.
Good luck!
I am developing a very similar application.
I am currently using Flot for the chart rendering. It handles annotations and zoom, take a look at their plugin library.
I recommend this downsampling plugin which will speed up graph rendering. Rendering 5000 points on your graph is useless: you have less vertical pixels on your screen than that! so this library will only render those that actually have a visual importance.
This only gives you the graph. You may want some kind of dashboard to present all that... I am currently looking at Grafana, which is used for a totally different purpose but makes awesome dashboards. It may be possible to "rip out" their dashboarding features (it uses Flot as well).
Another option is Hightcharts, but that's not free.
Check raphael js Library
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
I'd like to be able to write an application in HTML5 that is similar to the following.
HTML5 Canvas Animals on the Beach Game with KineticJS
The problem with that demo though is the mouse over event is only accurate to the rectangle surrounding the animal. Is there any way to do this with more accuracy, be it in KinectJS or otherwise?
There are generally two ways:
Using custom paths with each image as hitboxes (that you manually define) then using an is-point-in-path algorithm
Using a ghost-canvas (or whatever you like to call it) as I detailed in this old tutorial. Ignore the link to the new tutorial, the old one uses what you'd want.
The first method here is much faster but requires a lot more code and manual work. The second method is pixel-perfect but much slower. Still, if you don't have an enormous amount of objects it may suit your needs.