Best and optimized way to create web based Interactive Choropleth Map - web

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.

Related

Are there groups of entities in VTK format?

I would like to use paraview for postprocessing of FE models. However, I am missing an essential feature in VKT format, which probably exists, but I don't know its name or how it is implemented in VTK.
In FE models it is common to group some nodes/elements. Depending on the program these are named differently: Groups, Sets, Selections, ... . Basically they are just an array with the reference numbers for quick selection. For example: A tube could have the selections "inlet", "outlet" and "wall". Is there any possibility to store such a selection in VTK format? The goal would be to be able to apply filters only to this node selection, for example to get results only from certain nodes.
By the way, I do the export of my calculated data to VTK on my own, because my FE program does not have native support for the VTK format. So I am more interested in the required data structure than in a workflow for program XY.
In VTK, you cannot apply filters only on subset of a data object. What you need is to be able to split your data into several ones for processing.
I see two ways for that:
create one object per selection and then use a MultiBlockDataSet with one part per block. Then you can use vtkExtractBlock to apply filters on a specific part.
Add a PartId array to your data. Then you can use thresholding to extract the region of interest.
I advise to use 1. as it has more semantic.

Is it possible to import bokeh figures from the html file they have been saved in?

I've produced a few Bokeh output files as the result of a fairly time intensive process. It would be really cool to pull the plots together from their respective files and build a new output file where i could visualize them all in a column. I know I should have thought to do this earlier on before producing all the individual plots, but, alas, i did not.
Is there a way to import the preexisting figures so that I can aggregate them together into new multi-multi plot output file?
As of Bokeh 1.0.2, there is not any existing API for this, and I don't think there is any simple technique that could accomplish this either. I think the only options are: some kind of (probably somewhat fragile) text scraping of the HTML files, or distributing all the HTML files and using something like <iframe> to collect the individual subplot files into one larger view.
Going forward, for reference there is autoload_static that allows plots to be encapsulated in "sidecar" JS files that can be individually distributed and embedded, or there is json_item that produces and isolated JSON representation of the document that can also be individually distributed and embedded.

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.

Looking for a good web framework for data visualization

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.

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