I parsed images with Color thief and get their domain color and percentages. ex:
const colorSet = [{
r: 15, g:251, b:150, percentage: 50 // cover percentage in image
}, {
r: 150, g:121, b:45, percentage: 31
}, {
r: 43, g:160, b:180, percentage: 19
}]
I already know how to get the distance between two colors, but how about two "Color Sets"? Is there any algorithm to do this?
[EDIT]
I think vector is a way... but not sure about the detail.
Related
Using normal vector layers, I already draw directed antenna symbolizers like this:
Basically this is a point with a direction (and a horizontal beam width, but let's forget about that for now). This is what I try to recreate in OL 6.8.1 using WebGLPoints layer, but have issues with creating the correct style. I way able to rotate simple triangle symbols but they are overlapping, and they should touch by the corners:
I guess the key to the problem is setting some offset, but this is where I failed to find a working solution. This is the style I currently use:
symbol: {
symbolType: 'triangle',
size: ['interpolate', ['exponential', 2.5], ['zoom'], 6, 10, 20, 100],
color: ['case',["==", ['get','band'],2100], '#aa0000',["==", ['get','band'],3500], '#00aa00', '#0000aa' ],
rotateWithView: true,
offset: [ 0,0 ],
opacity: 0.4,
rotation: ['-', ['*', ['get','azy'] , 0.01745329251 ], 3.1415926],
}
(notes: as you can see the symbol size is zoom dependent, I use 2 different colors based on the 'band' attribute and rotate it using the 'azy' attribute (which is the desired direction in degrees, counted from N as 0, clockwise))
The rotation works okay, but for the offset, I need some help. I'm not even sure of it's affected by the rotation or not... Thanks in advance! If you have any other solution for the problem using WebGL, I'd appreciate that too!
So, here's the solution, thanks to #Mike! The trick is to multiply the offset with -1, so the corners of the triangles touch.
symbol: {
symbolType: 'triangle',
size: ['interpolate', ['exponential', 2.5], ['zoom'], 6, 10, 20, 100],
color: ['case',["==", ['get','band'],2100], '#aa0000',["==", ['get','band'],3500], '#00aa00', '#0000aa' ],
rotateWithView: false,
offset: ['array', 0, ['*', ['interpolate', ['exponential', 2.5], ['zoom'], 6, 3, 20, 48], -1] ],
opacity: 0.75,
rotation: ['-', ['*', ['get','azy'] , 0.01745329251 ], 3.1415926],
}
Note: the offset is smaller with 2 pixels that half the size. With half size, the triangles did not touch, had a few pixels gap. It looks like this:
Another solution is that I created a png with the desired symbol:
Note that the center of picture is the center of circle of which the sector was cut out, so when rotated, it will stay over the point of the rotation. The style is:
symbol: {
symbolType: 'image',
src: 'tools/testbench/olmap2/cell_symbol.png',
size: ['interpolate', ['exponential', 2.5], ['zoom'], 6, 10, 20, 100],
color: ['case',["==", ['get','band'],2100], '#aa0000',["==", ['get','band'],3500], '#00aa00', '#0000aa' ],
rotateWithView: false,
opacity: 0.75,
rotation: ['*', ['get','azy'] , 0.01745329251 ]
},
The result is:
This is somewhat slower, but I guess the 800x800px png is an overkill for this, so maybe downsizing it would solve the performance issue :) The pro side of this solution that I can create circle segments in different opening angles, so the antenna's (horizontal) beamwidth could be shown too. With the triangle symbolizer I cannot do this. (If later I could draw custom polygons in OL, that would be the perfect solution for this.)
I'd like to present a comparison of response times - percentiles for product A and B, example data:
[ { "category": "X", "A.90th": 100, "A.50th": 50, "B.90th": 120, "B.50th": 40 },
{ "category": "Y", "A.90th": 250, "A.50th": 60, "B.90th": 200, "B.50th": 80 } ]
This should display two stacked bars (for product A and B) in each category, total 4 bars, each having two cells (ok, in practice there would be more datapoints than just 90th and 50th percentile). My point is that I don't want the response times be 'summed' (100 + 50, 120 + 40...) but overlapping as the 90th percentile is always > 50th percentile.
Is there a way to achieve this with recharts? I could naturally recalulate the data to be only 'diffs', but then I'd have to heavily customize Tooltip.
I have 3 axes (velue-axis)
Can one axis be displayed on the left
Other two axes to display on the right?
http://demos.telerik.com/kendo-ui/line-charts/multiple-axes
(In this example, the axis is located on the right, but I do not know how to configure it)
Thanks.
Granted this isn't entirely clear when you first look at the demo. The important thing to look at is this section:
categoryAxis: {
categories: [],
axisCrossingValues:[]//This is the fella you are looking for.
}
I have tweaked the demo slightly to show you one of the axis in the middle of the chart. http://dojo.telerik.com/ASidu
The number is simply the position column on the chart that the axis should be rendered. By default if this in't set then all axis should be on the left hand side as normal. but if we start applying a number greater than 0 then the axis will shift. So in the example we have 3 value axis set up:
valueAxes: [{
name: "rain",
color: "#007eff",
min: 0,
max: 60
}, {
name: "wind",
color: "#73c100",
min: 0,
max: 60
}, {
name: "temp",
min: -30,
max: 30
}],
so if we look at them from crossing the y-axis (i.e. the bottom axis) we have 31 columns available to us 1- 31 so in my tweak I have applied this to the crossingAxis:
axisCrossingValues: [32, 15, 0]
This is effectively telling each of the value axes where they should be positioned:
so:
"rain" should be at position 32
"wind" should be at position 15
"temp" should be at position 0
So the order in which you add your value axes will determine which setting they take based on the order you include them.
Hopefully that helps clear things up for you. If you need any more info let me know and I will update accordingly
I am trying to lock the Y axis when zooming in Kendo UI. According to the docs, I should be able to do it like this:
zoomable: { mousewheel: { lock: "y" } }
But somehow it is not working, even the demo in Kendo has the same problem, see
http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom
When I zoom in, you can see y axis max change from 12 to 10 and lower.
Am I understanding the docs correctly or there is a bug with kendo?
Thank you!
You can see that if you zoom on a bar with a height of 10, the y axis max remains at 12.
The behavior you're seeing is not zooming but changing the axis max to better suit the heights of the bars you see in the view. You can see the difference in the fact that the minimum value of the axis remains 0 but when you enable zooming in the y axis, the minimum value also changes.
You can avoid this behavior by setting a permanent axis max value:
valueAxis: {
max: number
}
The reason for this behavior is that if you add/remove/change your values, you'll want the grid to accommodate the new bars and not have them exceed the top of the chart. Setting the max y axis value is a good idea only if your data isn't going to change after the chart is shown for the first time.
The y-axis is not zooming, rather the max value is being auto-calculated depending on which bars are currently visible. You can avoid this be setting the valueAxis.max value. In the example, add
valueAxis:{
max: 12
},
The answer of setting the valueAxis.max is nearly there. But the issue I have with this is when you reach maximum zoom decimals appear because the y-axis changes based on which bars are currently visible. If I do a valueAxis.labels.format: '{0:0}', yes the decimals are gone but on maximum zoom it would appear that the bars are not leveled correctly to the y-axis. In fact the bar height/level is correct, the y-axis label is wrong, it's missing a decimal. The key is setting valueAxis.majorUnit. To demostrate, here is my options for a Kendo Chart for jQuery. Comment/uncomment the valueAxis.labels and valueAxis.majorUnit to see the difference.
{
series: [{
name: 'Grand Total',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
type: 'column',
}],
zoomable: {
mousewheel: {
lock: 'y',
},
selection: {
lock: 'y',
},
},
pannable: {
lock: 'y',
},
valueAxis: {
max: 12,
// labels: {
// format: '{0:0}',
// },
majorUnit: 1,
},
categoryAxis: {
categories: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
},
}
Hope this helps.
I am drawing a scatter chart using d3.js and epoch. The values that becomes the circles in the chart are based on log values, which makes my both axis go below zero.
var chart = $('#scatterchart').epoch({ type: 'scatter', data: scatterData, axes: ['bottom', 'left'], ticks: { right: 4, bottom: 4}, domain: [-1.4, 2], range: [-2,4], margins: { top: 10, right: 80, bottom: 60, left: 80 }, });
I would like to keep the position of the circles but manipulate the axis so that:
x(horisontal):
-1 -> 0.5
0 -> 1
1 -> 2
2 -> 4
y(vertical):
-2 -> 0.25
-1 -> 0.5
0 -> 1
1 -> 2
2 -> 4
3 -> 8
4 -> 16
Anyone that has any suggestion on how to do this?
I have no experience with epoch.js, and I don't know if you can tweak the axes it creates.
But you could try to transform your data before feeding it to your scatterplot generator.
If scatterData is an array, you could use array.map():
newData = scatterData.map(function(d){return someTransformFuntion(d);});
And adapt the input domain of your axis (actually, your scale) accordingly.
I have no experience with epoch.
But assuming it works on top of d3js, all you need to do is change the domain of both of your scales.
When you visualise your data, you work with a domain (for data) and a range (pixels on your screen). So to support negative values, you would need to adjust the domain to support [-2, 4] (for the y axis example).
As a bonus some reading about domains and negative values