HTML/CSS/JS World map with simple animations - javascript

I need a simple visualization for events occurring over the world -- a 2d image of a world map, and a way to display visual alarms when events happen at a [lat, lng].
This is not core functionality. I'm willing to look into libraries or engines, but I don't want to add a huge learning overhead.
What's the simplest way of doing it?

I've had good experiences with google's visualization api. They have a map that will allow you to do what your looking for. It's also pretty well documented and plenty of resources online.
You can take a look at their maps documentation here: https://developers.google.com/chart/interactive/docs/gallery/map

Related

Which library to create data-visualization at a in-city level?

Hi all I'm a newbie in data-visualization. I am looking for a graphics library in JavaScript that supports data-visualization at an city level, I have found some (like D3js) but all seem to only support the creation of data at a country level and not city level (like the scale of Google map city zoom's level).
Maplace would be a great library but I am looking for something closer to common JS.
Would be great if anyone's got a hint, thanks!
If you mean BY "In-city" like geo-visualization there are plenty of options:
Cesium.js
Three.js
Leaflet.js
d3.js
raphael.js
try to search more on google but those are commonly used combinedly or individually.
A good data visualization means a good story telling

How to render point cloud data in browser with iTowns2

I am attempting to use iTowns2 (https://github.com/iTowns/itowns2) to visualize point cloud data in the browser. According to the README: "[iTowns'] first purpose was the visualisation of street view images and terrestrial lidar point cloud."
From this I glean that there should be instances of people using iTowns to visualize point cloud data somewhere online. I've been looking for days and I can't find an example of someone using iTowns2 to visualize point cloud data in the browser.
The example in the GH repo renders a globe in the browser but no point cloud. There is a iTowns/iTowns2-sample-data repo which has a bunch of point cloud data but no instructions on how to use the data or references to other resources.
Has anyone used this package to show point cloud data in the browser? Does anyone know an article or resource that demonstrates doing this with iTowns2? Does anyone know of a different library for rendering point cloud data with examples and/or better documentation?
Ideally I would be able to track down the source code for something like this: http://www.itowns-project.org/#demo
The documentation is quite ambiguous, and judgind by the Github issues it looks like the library is under heavy refactoring.
I took a quick look to this repo and realized that it is just using Potree for point cloud visualization:
http://potree.org/
So you can just use Potree directly. Wich is better documented.
In addition to this, it's quite trivial to set up your own point cloud visualizer using Three.js.
Just take a look at the Points object:
https://threejs.org/docs/#api/objects/Points
And this example:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_buffergeometry_points.html
Three.js also includes some 3D format loaders, like ply:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_ply.html
If you are interested in using las files you might also want to look at:
https://github.com/verma/plasio
Let's provide a early 2018 update! (source: I'm a maintainer)
iTowns now supports visualizing pointclouds directly. You can test it here: http://www.itowns-project.org/itowns/examples/pointcloud.html
If you want to test your own data, please visit http://www.itowns-project.org/itowns/examples/pointcloud.html?selector=1
We currently support results from PotreeConverter, and lopocs. We plan to add 3dtiles pointcloud format soon.
We indeed used potree for pointclouds before, but that was not ideal, a bit because we diverge on some technology/design choices, but mainly because using potree prevented us to tightly integrate pointcloud visualization in iTowns. For instance, iTowns stops its rendering loop when it has nothing to do (saves a lot of cpu), and potree does not. It also allows us to implement our own culling/SSE/network priority... heuristics.
Potree has currently better graphic post-treatments of pointclouds, although we also plan to add EDL and other improvements (occlusions for instance) soon. And of course, the advantage of iTowns is that it's not limited to pointclouds, but can display a variety of data type, from rasters to vectors, see the examples page and especially this example of a pointcloud on a globe.
But the main difference between these 2 projects is that Potree aims at being a standalone viewer (AFAIK), whereas iTowns is more a framework to implement your own app! Potree remains a big source of inspiration for us concerning pointclouds, big kudos to their maintainer :-)
(Btw, the github has moved to https://github.com/iTowns/itowns)

python data analysis overlay image of US

I am familiar with coding in python for the work I do in bioinformatics. I've recently been asked to do a different type of analysis -- analyzing data and then overlaying that data over a map of the US. I figure I will need to use javascript after I write the python code to do the data analysis, but I am not familiar with creating images. What is the best way to incorporate my python data analysis with code that will produce a dynamic image?
Thanks for your help.
My Solutions
1) Just as what what other people said , you could try to use the Google Map APIs and code a bit.
2) Or you can use Openstreetmap. I would perfer openstreetmap.
I did several apps and websites based on LBS. I know how to place coordinates on maps.
If you want to finish this quickly and cooler. You may try this combination:
Django as the freamwork,
PostgreSQL as the DB backend
PostgreSQL PGIS as the geolocation handler
Openstreetmap as the map viewer
My summery:
Solution 1) is quick, faster. It needs you some hard-coding efforts.
Solution 2) is bit slower but full-featured. It's very extensive for future developing.
Hope this could help you

Which direction to take for developing 3D interactive imagery features

I will keep this simple. I am looking everywhere to find something to create 3d tour of an interior similar to photosynth and gmaps street view but only with javascript.
Seadragon is the closest thing I found but its not 3d. Sorry if this is too simple but please let me know if you know any API that this can be achieved with.
Thanks a bunch
[I need this to be working with current usual web technologies so HTML5 solutions won't help]
Here are some stuff I found but not exactly my ideal:
jQuery simple panorama viewer but this is not exactly sleek/intuitive but does have a appeal as in terms of scalability, it will not require members to spend so much time taking 100s of photos to create a 3d model of a space.
of course Microsoft zoom it or seadragon which is really sleek and also doesn't need excellent photography skills but doesn't produce 3d models
Photosynth and Unity are great but even though I am thankful to Itay Moav with his/her post below I really want and need to move away from expecting people to have a plugin on their system in order to access a service as this has a huge user experience down turn.
You want to look for a 3d space-filling-curve. A 3d sfc reduces the 3d complexity to a 1d complexity. It's a bit like an octree and a fractal. For 2d you want to look for a 2d space-filling-curve. You want to look for Nick's spatial index quadtree hilbert curve blog: http://blog.notdot.net/2009/11/Damn-Cool-Algorithms-Spatial-indexing-with-Quadtrees-and-Hilbert-Curves.
I would use Unity, if you do not care about Linux users (Apple users are good).
It even has a Javascript API

JavaScript game framework

Nowadays with <canvas>, it is easy to find all kind of cool stuff around the Internet. Like emulators, demos, games, just visual
stuff, etc.
But it seems that everyone is programming using the basic primitives of canvas.
There exist any framework working over <canvas> or utility library?
You could look at something like Processing.js:
http://processingjs.org/exhibition
UPDATE:
If you want a game API, I haven't tried it, but the comments are promising, you can look at:
http://ajaxian.com/archives/gamejs-canvas-game-library
In order to keep the javascript small and optimized I tend to just access the elements directly, but, over time people will create libraries of their own, but it may not be libraries that are useful in certain situations.
UPDATE 2:
Looks like you can get a version of gamejs from here:
http://tommysmind.com/gamejs/GameJS-0.1.rar
This also was an interesting article on GameJS by the author:
http://tommysmind.com/gamejs/
A couple of sprite based canvas libraries are:
http://gamejs.org GameJs
http://lamberta.org/doodle-js Doodle-js
http://www.effectgames.com/effect/article.psp.html/docs/Getting_Started_Guide
Check it out - very cool!
The best is really Akihabara.
jsGameSoup looks good:
http://jsgamesoup.net/
Batteries included
Cross browser event handling (keyboard, mouse, touch)
Game entity management
Sprite management sprite.js
Sound effects playback with audio.js
Rudimentary polygon, box, circle collision detection collisions.js
Fast, deterministic random number generator random.js
Simple AJAX and bulk data loading with network.js
Basic cookie management cookies.js
Simple finite state machine statemachine.js
Optional auto-init to launch code attached to HTML canvases
jCanvaScript. It's very simple to use and there are many examples at the site.

Categories