I have a few hundred images that I would like to have a user manually sort along two axes. Each row represents a users perceived nominal label, eg red, orange, yellow, green, ... The images in a row are ordered according to some feature perceived by the user (eg brightness). So given an image the person sorting should be able to determine which row it belongs to and which two images it should be between in the row and insert it there.
Initially I tried using Google sheets and loading the images into cells in the spreadsheet. The problem I encountered are the images are really low resolution and Google sheets applies some blending to the pixels (eg linear?, bicubic?) which made understanding the images too difficult for my user. If I could load an image and have it resize using the nearest pixel color I think it would be fine.
I have looked at some photo organizing software, the closest feature I can find is organizing photos based on geo-coordinates onto a 2D map, which isn't intuitive for my user.
I suppose I could create a webapp that the user could assign a row and column too, but it seems like there should be an easier way.
The intent is to apply machine learning on the provided labels so that we can automatically sort larger datasets, so it would be great if the solution could be used with machine provided metadata, which could then be visually inspected for accuracy.
Related
I'm setting up a heat map in Sheets which tracks maintenance work orders for an apartment complex. I have an image of the complex that I adjusted to being 50% transparent so you can see through it to the cells underneath. The cells underneath have formulas that calculate off a database. I apply conditional formatting to these cells so that as more maintenance techs log work orders, the resulting heat map changes. The problem I'm having is that the image shifts in relation to the underlying cells when I embed the Sheet into Google Sites. The heat map is then no longer aligned properly.
I tried to insert the image as both a shape and a picture and neither stopped the issue from happening. I also tried purposely off-setting the image in Sheets thinking that it would then be aligned better when embedded into Sites, but that doesn't work either.
The expected result when embedding the Sheet into Sites is for the image to stay fixed in relation to the underlying cells. The actual result is the image shifts which then renders the underlying heat map unusable. Any thoughts on how to prevent this from happening? Thanks!
I want to identify all occurrences of a list of images in a screenshot and get the label of the emoji (e.g. "smile").
The list of images holds all emojis (full list):
and so on…
And this is the screenshot (show large):
The screenshots can have different resolutions and different heights where the emoji occur.
My ideas were:
Using OpenCV and a variety of filtering and iterate all emoji images over it (maybe using template matching)
Using neural networks like tensorflow, training your own model with the emojis
How would you do it ?
There are several classic ways to answer your problem:
Simple regular correlation: https://en.wikipedia.org/wiki/Cross-correlation.
The simple correlation is used when you have exactly the image you are looking for, with no change in intensity.
Normalized correlation (math behind template matching): https://en.wikipedia.org/wiki/Template_matching.
The simple correlation is used when you have exactly the image you are looking for, with no change in intensity.
If you have different intensities between your screenshot and your emoji base picture, you should use normalized correlation.
Both these methods will give you an image with peaks, and your emojis will be localized at the local maxima of this image.
As your emojis can be very similar to one another, you will have to use a threshold on the correlation image in order to discriminate between the emoji you are testing and the ones that look nearly like him.
This method can be time consuming, but can be easily speed-up by using an image pyramid.
An image pyramid is a set of image where the first one is your image, the second one is a subsampling of the first by a factor of 2, and so on:
https://en.wikipedia.org/wiki/Pyramid_(image_processing).
Then the correlation is applyed on the top level of the pyramid to find an approximate location, then on the top - 1 level around the approxiamte location and so on.
About the neural network, or other machine learning methods you want to try, they are really heavy solutions and you have a pretty simple problem, so you should normaly don't need them.
You have the exact picture you are looking for, without rotation, deformation or intensity change, and the template matching should be very effective.
in one of my projects, I would like to create heatmap of user clicks. I was searching a while and found this library - http://www.patrick-wied.at/static/heatmapjs/examples.html . That is basically exactly what I would like to make. I would like to create heatmap in SVG, if possible, that is only difference.
I would like to create my own heatmap and I'm just wondering how to do that. I have XY clicks position. Each click has mostly different XY position, but there can be exceptions time to time, a few clicks can have the came XY position.
I found a few solutions based on grid on website, where you have to check which clicks belong into the same column in this grid and according to these informations you are able to fill the most clicked columns with red or orange and so on. But it seems a little bit complicated to me and maybe slower for bigger grids.
So I'm wondering if there is another solution how to "calculate" heatmap colors or I would like to know the main idea used in library above.
Many thanks
To make this kind of heat map, you need some kind of writable array (or, as you put it, a "grid"). User clicks are added onto this array in a cumulative fashion, by adding a small "filter" sub-array (aligned around each click) to the writable array.
Unfortunately, this "grid" method seems to be the easiest, simplest way to get that kind of smooth, blobby appearance. Fortunately, this kind of operation is well-supported by software and hardware, under the name "computer graphics".
When considered as a computer graphics operation, the writable array is called an "accumulation buffer". The filter is what gives you the nice blobby appearance, even with a relatively small number of clicks -- you can tweak the size of the filter according to the needs of your application.
After accumulating the user clicks, you will need to convert from the raw accumulated values to some kind of visible color scale. This may involve looking through the entire accumulation buffer to find the largest value, and mapping your chosen color scale accordingly. Alternately, you could adjust your scale according to the number of mouse clicks, or (as in the demo you linked to) just choose a fixed scale regardless of the content of the buffer.
Finally, I should mention that SVG is not well-adapted to representing this kind of graphic. It should probably be saved as some kind of image file (.jpg or .png) instead.
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'.)