I'm trying to create a geochoropleth that maps subregions, but also includes outlines of larger regions. (You can think of it like mapping counties, but then wanting to include thicker outlines of states). Not all subregions are part of larger regions that need to be outlined. (Most aren't.) You can see an example of what I'm trying to replicate here:
What's the best way to add this regional outline to my map? I've tried keeping the regions and subregions as two separate files, with two overlaygeojsons calls in my geochoropleth call (with added d3 styling to change the fill and stroke to just be an outline). But when I do - the projection of the regional outline layer is strangely offset from the lower one.
I've also considered having both sets of boundaries in just the one geojson. However, I wasn't sure how to work with this.
While it would be nice to be able to mouseover the boundaries of the larger regions and get a tooltip before crossing over into the individual subregions and getting their tooltips, this isn't a must. I could live with just outlines around the regions. Please advise on the best way to do this. Happy to provide more detail, and thanks so much!
EDIT: I discovered that I had a misplaced transform tag which is what offset the second layer. Fixed now!
Related
I am building a website where users can search for specific places or areas on a map with some filters like "park", "supermarket", "cafe", etc. For example, a user should be able to find all suitable areas in a city that are near a park but also are at least 1 km away from a highway (for some reason). To do so, after the user has specified some filters, I want to add an overlay that masks all areas that don't satisfy these filters while still allowing the user to zoom and pan freely. I am using MapboxGL for building the map.
My first attempt was to use Turf on my geojson data to perform the necessary operations, i.e. converting the current viewport to a bounding box polygon, union all needed geojson features to one polygon and mask the difference between them and then simply add the result as a Fill-Layer on the mapbox map as seen in the image below.
While this approach does work for simple overlays it doesn't scale and needs a lot of time to perform the necessary operations on the data when used with a lot of geojson data and more filters.
Instead of working with the geojson directly I thought it might be better to use a canvas overlay and render the mask layer with webgl to improve the performance. I found a mapbox example for overlaying a custom style layer on a map, but unfortunately, I have never used webgl before and I'm not really sure how I would render such an overlay with this custom layer.
Is using a custom overlay with webgl the right approach to solve my problem? Or is there an obvious option (or another library) for this task I haven't considered yet?
I am placing icons with a fixed diameter/radius on a line using d3.scaleTime. This works well except for the case in which dates are close to one another, leading to an unwanted overlap.
In that specific case, I would want the icons to "relax" and not touch.
My code rather complex, including animations etc. — so I drew the problem here:
These are my attempts:
I looked at d3-force for collision prevention, but I was not quite sure how to merge such an approach with an existing time scale. Could this be helpful? http://jsbin.com/gist/fee5ce57c3fc3e94c3332577d1415df4 However, it may occur that the icons then do not align on a horizontal straight line anymore, which is a disadvantage, because I do not want them to spread vertically.
I also thought about calculating overlaps and then manually adjusting the data so that the overlap does not occur. That, however seems a bit more complex because I would have to somehow recursively find the best position for every icon.
Could interpolation help me? I thought there must be something like "snap to grid", but then two icons could snap to the same position, couldn't they?
Which d3 concept makes most sense to solve this problem?
My graphs currently indicate "no data" by calculating the holes in my datasets, then generating a new fake dataset that ranges from nil to max(all-y-values), thus making it look like a full-height background. I make it an "area" dataset and apply an SVG pattern to make it look like this:
The problem arises when the y-axis scale is greater than the data, in other words when max(all-y-values) doesn't coincide with the top of the graph.
I need to make these shaded background intervals always the full height of the graph, and I'm willing to rethink the whole process of adding them.
My recent attempts have been trying to follow the "filling an area above the line" example described in D3 Tips and Tricks as well as the NVD3 documentation and various other resources, but I haven't seen anything working.
This is the "filling an area above the line" example from that link:
Any solution must either use ClojureScript and Om or at least be directly compatible with them, since I already have a proof of concept in the above links and I am looking for more.
We are given a rather complex image map, like the one linked below. Except that the layout, shapes of each booth are more irregular, and we have lots of image maps to process.
The requirement is that the software is able to detect which booth (the boxes) is being clicked on. Once having identified the booth, we have to fetch its ID and do some processing. So we need a way to map the physical data on the map to its logical counterpart.
Usually, there are two ways I would approach the problem.
Pragmatically determine where the hotspot are - however in this case, there is no consistency in the layout of booths - some are a small rectangle, some are a squares
Manually figure out the coordinates of each booth and program it into a giant lookup. This is very time consuming, considering the number of booths (the image below is not from the project - it's just a demo). There's an estimate of at least 5000 booths spread across different maps.
Besides the two usual methods of creating hotspots for an image map, what other ways could I use to determine which booth is being clicked?
Platform used is LimeJS, but this problem should be generic enough...
You could separate the map into booths using flood-fills, a new color for each region. You want to flood a known "corridor" spot first to eliminate that. 0,0 should work for that on most maps, I'd imagine.
This would create the hotspots you need. To cope with the print inside the boxes messing with the fill, you can just use the far corners of each region to create a rectangle. This assumes the booths are actually rectangular on the map, of course. For L-shaped booths, a little extra work might be necessary.
To get the ID from each booth, you can feed each region(from above) into an OCR, but you'll have to be able to distinguish between the ID numbers and the dimensions, etc.
I need some advice about how to improve the visualization of cartographic information.
User can select different species and the webmapping app shows its geographical distribution (polygonal degree cells), each specie with a range of color (e.g darker orange color where we find more info, lighter orange where less info).
The problem is when more than one specie overlaps. What I am currently doing is just to calculate the additive color mix of two colors using http://www.xarg.org/project/jquery-color-plugin-xcolor/
As you can see in the image below, the resulting color where two species overlap (mixed blue and yellow) is not intuitive at all.
Someone has any idea or knows similar tools where to get inspiration? for creating the polygons I use d3.js, so if more complex SVG features have to be created I can give a try.
Some ideas I had are...
1) The more data on a polygon, the thicker the border (or each part of the border with its corresponding color)
2) add a label at the center of polygon saying how many species overlap.
3) Divide polygon in different parts, each one with corresponding species color.
thanks in advance,
Pere
My suggestion is something along the lines of option #3 that you listed, with a twist. Rather painting the entire cell with species colors, place a dot in each cell, one for each species. You can vary the color of each dot in the same way that you currently are: darker for more, ligher for less. This doesn't require you to blend colors, and it will expose more of your map to provide more context to the data. I'd try this approach with the border of the cell and without, and see which one works best.
Your visualization might also benefit from some interactivity. A tooltip providing more detailed information and perhaps a further breakdown of information could be displayed when the user hovers his mouse over each cell.
All of this is very subjective. However one thing's for sure: when you're dealing with multi-dimensional data as you are, the less you project dimensions down onto the same visual/perceptual axis, the better. I've seen some examples of "4-dimensional heatmaps" succeed in doing this (here's an example of visualizing latency on a heatmap, identifying different sources with different colors), but I don't think any attempt's made to combine colors.
My initial thoughts about what you are trying to create (a customized variant of a heat map for a slightly crowded data set, I believe:
One strategy is to employ a formula suggested for
n + 1
with regards to breaks in bin spacing. This causes me some concern regarding how many outliers your set has.
Equally-spaced breaks are ideal for compact data sets without
outliers. In many real data sets, especially proteomics data sets,
outliers can make this representation less effective.
One suggestion I have would be to consider the idea of adding some filters to your categories if you have not yet. This would allow slimming down the rendered data for faster reading by the user.
another solution would be to use something like (Comprehensive) R
or maybe even DanteR
Tutorial in displaying mass spectrometry-based proteomic data using heat maps
(Particularly worth noting I felt, was 'Color mapping'.)