Looking for a good web framework for data visualization - web

Just wondering if anyone can point me to a good web framework for displaying large-scaled network
Need the ability to display only a small portion of the network, but allowing the possibility to drill down on certain node/portion of the network interactively.
Optionally the ability to allow interactive editing of the network/graph; e.g., connecting nodes or breaking edges.
The simpler the better!

There's our library, mxGraph. If you want open source you could try JIT or D3.

I had similar requirements and I tested about four libraries including d3 and infoVis/JIT.
I was using force-directed layout in both d3 and infoVis.
Both of them are quite close but I ended up choosing infoVis/JIT because I had some problems in d3, solutions of which were not easy.
1: When you have a graph with many nodes in d3, the graph will keep moving/animating for quite longer time. I found that it was because d3 graph animates per tick. I found some solutions here and in forums but it was not easy to solve this problem and they did not work for me.
2: Once the graph is rendered, if you try and drag a node, the whole graph would move and animate itself. Whereas my requirement was to be able to drag and position individual nodes independently, keeping the graph as it is, so that user can re-arrange nodes if he/she wants to. I could not find any simple solution for this one in d3.
Both of these problems were solved in infoVis/JIT.
#"Need the ability to display only a small portion of the network, but allowing the possibility to drill down on certain node/portion of the network interactively."
I have implemented this functionality using infoVis.

Related

How do i work with .osm files in terms of creation of nodes and edges so i can put it on a Djikstra Algorithm?

I have a MetroManila.osm file and i parse it so it can read roads only using this command: --keep = --keep-nodes=highway --keep-ways=. Is this the right command for filtering only the roads? What i want after parsing is to create a node where there's intersections or curves, or is it possible with just using the whole nodes in MetroManila.osm? Can i create an edge using it and how do i do it? Currently, i'm really lost on what to do since i'm fairly new on android studio and in osmdroid.
This hasn't really anything to do with Android or osmdroid.
For learning how to create a routing graph from an OSM file see the related answer at help.openstreetmap.org. Quoting from it:
parse all ways; throw away those that are not roads, and for the others, remember the node IDs they consist of, by incrementing a "link counter" for each node referenced.
parse all ways a second time; a way will normally become one edge, but if any nodes apart from the first and the last have a link counter greater than one, then split the way into two edges at that point. Nodes with a link counter of one and which are neither first nor last can be thrown away unless you need to compute the length of the edge.
(if you need geometry for your graph nodes) parse the nodes section of the XML now, recording coordinates for all nodes that you have retained.
Also take a look at routing in the OSM wiki to get some general hints and existing tools and libraries.
Regarding osmdroid: If you don't rely on offline routing then take a look at osmbonuspack, it supports online routing.
If you don't want to reinvent the wheel then just use one of the existing offline routing tools mentioned in the OSM wiki.

Best and optimized way to create web based Interactive Choropleth Map

I am going to build an interactive Choropleth map for Bangladesh. The goal of this project is to build a map system and populate different type of data. I read the documentations of the Openlayers, Leaflet and D3. I need some advice to find the right path. The solution must be optimized enough.
The map i am going to create will be something like the following http://nasirkhan.github.io/bangladesh-gis/asset/base_files/bd_admin_3.html. It is prepared based on leaflet js. But it is not mandatory to work with this library. I tried with Leaflet because it is easy to use and found the expected solution within a very short time.
The requirement of the project is to prepare a Choropleth map where i can display the related data. for example i have to show the population of all the divisions of Bangladesh. at the same time there should be some options so that i can show the literacy rate, male-female ratio and so on.
the solution i am working now have some issues. like the load time is huge and if i want to load the 2nd dataset then i have to load the same huge geolocation data, how can i optimize or avoid this situation?
Leaflet has a layers control feature. If you cut down your data to just what is required, split it into different layers and allow the user to select that layers they are interested in viewing that might cut down on the loading of the data. Another option is to simplify the shape of the polygons.

Directed acyclic graph in web UI

I need to display a Directed Acyclic Graph in a web page. I am not looking for an off-the-shelf library or solution. I am looking for suggestions, recommendations or a push in the right direction.
1. DAG Visualization
I am not sure of how the nodes and relations will be represented. Viable solutions may be Treemaps, the good old node & line or a combination of that two. I don't have a problem if one node appears more than once on the screen.
I don't need all the nodes to appear on the screen from the start. The user may expand a node by double clicking or zooming for example.
I am open to all suggestions and advices.
2. Technology
There are some functionalities that the implementation must have:
drag & drop
zoom
events on mouse interaction with nodes
From my point of view, I have 2 options (Flash is out of the question):
a. HTML5 Canvas
Disadvantages: no vectors, basically just an image; no implicit mouse events on nodes;
Advantages: speed; popularity; animations
b. SVG
Disadvantages: low speed when there are many nodes;
Advantages: vector graphics; elements are in the DOM so you can have events and so on;
c. A mix of HTML5 Canvas & SVG
Assuming you want to dynamically update your graph, you could probably use python on the server with the pydot GraphViz module.
I have not tried this, but it's something worth looking into.

Newb: WPF custom graphic control - where to start

Apologies if there is a thread for this already, I couldn't find one that I could get my teeth into.
Anyway, I'm new to WPF and want to create a custom control that will be a sort of graphic control. The graphic will always consist of a circle, containing a matrix of several squares (from several hundred to several thousand actually) The squares need to respond to mouse click and mouse over events (and ideally be possible to navigate/select via keyboard.) Each square will represent an object I've coded.
In the past I've used a grid control to display the coloured squares (with VCL in CBuilder) but I would like to make a graphical version. (Actually, another question I'd like to ask is, is there a WPF grid control where I can set the colours of individual cells?)
The question is, where to start? Do I start with a canvas and draw on it? Do I derive from an existing object? I'm just a little lacking on ideas on implementation so any pointers or advice you can offer will be greatly received.
BBz
First off I would suggest getting a decent handle on WPF and how it approaches the problem set. It is vastly different from previous .NET Desktop technologies such as WinForms. Once you have a decent understanding in regards to the separation of logic from UI and how WPF approaches the problem then you can dive in and begin making the right decisions based upon what you encounter.
The problem you mention can be solved in multiple ways. In regards to your question about making use of a Grid, that could be done as that is a layout type. It is vastly superior to the Canvas in terms of arranging your visual structure. The defined rows/columns are nothing more then containers which can hold varying UI objects. Therefore pushing a Rectangle into the Grid and coloring as desired would give you the effect you are looking for. This Rectangle could then become a custom control which would allow you to define varying properties on, as well as specific triggers for mouse overs, etc...
At a higher level you will want to encapsulate this logic as a UserControl which will also hold your custom control. Perhaps the UserControl contains the Grid which will make use of your custom control.
Hopefully this gives you some ideas around how to get started, however getting a better understanding of WPF will help you immensely in achieving your goal.

How does Nike's website do this Flash effect when the user selects a choice

I was wondering how does Nike website make the change you can see when selecting a color or a sole. At first I thought they were only using images and when the user picked a color you just replaced that part, but when I selected a different sole I noticed it didn't changed like an image it looked a bit more as if it was being rendered. Does anybody happens to know how this is made? Or where can I get further info about making this effect :)?
It's hard to know for sure, but my guess would be that they're using a rendering service similar to that provided by Adobe's Scene7.
It's a product that is used to colorize/customize a base product image based on user choices.
If you're interested in using the service, I'd suggest signing up for their weekly webinar. I attended one a while back and was very impressed with their offering. They showed the Converse site (which had functionality almost identical functionality to the Nike site) as a demo.
A lot of these tools are built out in Flash using a variety of techniques:
1) You can use Flash's BitmapData object to directly shift the hues of the pixels in your item. This is probably the simplest technique but often limits you to simple color transformations.
2) You can pre-render transparent PNG's (or photos, I guess) containing the various textures you would want to show on your object (for instance patterns or textures) and have them dynamically added to your stage at runtime. This, I think, offers the highest fidelity but means you need all of your items rendered upfront.
3) You can create 3D collada files and load them via a library like Papervision3D. Then dynamically change the texture at runtime. This is the most memory intensive technique and tends to result in far worse fidelity, but for that you get a full 3D object that you can view in space.
I'm sure there are other techniques but those are the top 3 I can think of. I hope that helps!

Resources