I try to style my Mapbox layer using a case expression. My expression is quite simple and should for different integer ranges set different colors. Although doing the same as provided in examples, it must contain an error, and all lines are only visualized in black (although this is not the default color I set). After searching for hours, I still cannot find out why it won't work.
"line-color": [
"case",
[">=", ["to-number", ["get", "temperature"]], 30],
"green",
[">=", ["to-number", ["get", "temperature"]], 50],
"red",
"blue"
I included a default value, I tried it with and without the to-number operation (although it is a number value), I tried to put the values 30 and 50 into quotes or brackets.
I also tried setting it as interpolation expression.
"line-color": [
"interpolate",
["linear"],
["to-number", ["get", "temperature"]],
10, "green",
50, "red",
150, "blue"
]
Any ideas what I am doing wrong?
Edit: I try to visualize the results in QGIS, if that matters.
UPDATE: I found the Mapbox GL Style Validator and with this I do not get any errors. Unfortunately, the case still does not work, but I can do it with filters by splitting up my temperature layer and setting a filter for each range. Of course this is not a good solution as it enlarges my styling code significantly.
Hard to tell with the information provided, but this result would be consistent with data that contains values that can't be converted to numbers.
You can try this:
"line-color": [
"case",
[">=", ["to-number", ["get", "temperature"], 0], 30],
"green",
[">=", ["to-number", ["get", "temperature"], 0], 50],
"red",
"blue"
Related
Based on this example:
https://cdn.rawgit.com/hkelly93/d3-relationshipGraph/master/examples/index.html
D3 should allow me to create this chart and define colors and thresholds for when values change color. The function accepts some custom settings:
var graph = d3.select('#graph').relationshipGraph({
maxChildCount: 10,
valueKeyName: 'Story title',
thresholds: [6, 8, 10],
colors: ['red', 'yellow', 'green'],
showTooltips: true
})
But I'm not getting a graph with three colors when I load data fitting into all 3 ranges. I want 0-6 to appear red, 7-8 to appear yellow, and 9-10 to appear green. Here's the data loaded (excerpt):
[
{"parent": "2012-October", "organization": "WEWASAFO", "value": 10, "Story title": "NUTRITION"},
{"parent": "2012-April", "organization": "Jitegemee", "value": 5, "Story title": "Life in the street"},
{"parent": "2011-May", "organization": "KENYA YOUTH BUSINESS TRUST (KYBT)", "value": 2, "Story title": "BUSINESS"}
]
Everything else parses correctly, except combining custom colors an custom thresholds on the same chart. Either one alone works, but not both together.
The source repo is here with some docs:
https://github.com/hkelly93/d3-relationshipgraph
From that documentation:
thresholds: [100, 200, 300], // The thresholds for the color changes. If the values are strings, the colors are determined by the value of the child being equal to the threshold. If the thresholds are numbers, the color is determined by the value being less than the threshold.
colors: ['red', 'green', 'blue'], // The custom color set to use for the child blocks. These can be color names, HEX values, or RGBA values.
It doesn't explicitly state that the child colors correspond to the order that the thresholds appear. And all blocks appear red in this example.
I tested the code here: https://jsfiddle.net/cgrx3e9m/
This turned out to be a bug in the module itself. I notified the author and he fixed the way it sorts thresholds so it matches up with corresponding colors now.
I am showing multiple Meter Gauges on a single page, in conjunction with Bootstrap, to provide responsiveness. What is obvious is they are all calculating slightly different sizes, so I hoped to use diameter.
Here is my working code:
s1 = [322];
$.jqplot('spend',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
min: 100,
max: 500,
intervals:[200, 300, 400, 500],
intervalColors:['#66cc66', '#93b75f', '#E7E658', '#cc6666'],
intervalOuterRadius: 56,
ringColor: '#222',
padding: 3,
tickColor: '#111',
ringWidth: 4,
needleThickness: 11,
shadowOffset: 10,
label: "£"
}
},
title: 'Spend'
});
If I add
diameter:200,
I get no output, and:
'this._center.0' is null or not an object jqplot.meterGaugeRenderer.js, line 616 character 13
'this._center.0' is null or not an object jqplot.meterGaugeRenderer.js, line 616 character 13
I have also tried
diameter:50,
and
diameter:500,
in case I was not providing adequate space, or too much space, but I rather doubt it, as intervalOuterRadius is set at 56, I have also assumed that
diameter:200
is correct syntax given that
intervalOuterRadius:56
(as well as various other values) is correct. I cannot find anyone else who has had this problem, and have had no response on the jqplot google group.
Oh yeah, and I'm primarily writing for IE8 atm but it will need to be used on ie11 in time.
I can set a scale like this:
~pp = Scale.phrygian(\pythagorean);
I can then create a Pbind which plays the scale like this:
(
Pbind(
*[
instrument: \default,
scale: ~pp,
degree: Pseq([0, 1, 2, 3, 4, 5, 6, 7], inf),
amp: 0.5,
dur: 0.5
]
).play;
)
But Synth.new doesn't seem to get it at all (just results in silence):
b = Synth.new(\default, [\scale: ~pp, \degree: 3, \amp, 0.5]);
Interestingly, if I remove the scale parameter:
b = Synth.new(\default, [\degree: 3, \amp, 0.5]);
then I get a note, but it's always the same note. It doesn't respond to the degree parameter.
Ultimately, I would like to be able to trigger notes from an external OSC device (my phone!). This means hooking up OSCFunc to listen out for certain triggers, and play notes from a scale when those OSC events occur. I thought I could use Synth.new inside OSCFunc to actually play the notes, but it doesn't seem to know about scales, so I'm a bit stuck.
Can anyone provide any advice about how to acheive this?
Have a good read of the Pattern Guide, in particular Pattern Guide 07: Value Conversions. It's a good tutorial. It will tell you that these magical conversions are not used everywhere in SuperCollider, but only when you use Event-based scheduling such as Patterns (e.g. your Pbind). The value conversions are actually defined in "the default Event", as described further in that tutorial article.
One consequence of all of this is that, if you want to launch just one note but you still want value conversions, you can do it with the Event style of playing notes, which creates an event using () and then calls .play on it:
~synth = (instrument: \default, scale: [0,2,4,5,7,9,11], degree: 12.rand, amp: 0.5).play;
~synth = (instrument: \default, scale: [0,3,6,9], degree: 12.rand, amp: 0.5).play;
This still returns a Synth object.
See the Event helpfile for more on this way of doing it.
Please consider this data:
var data = [];
data.segments = [
{ "id": "A", "start": 0, "end": 4},
{ "id": "B", "start": 5, "end": 9},
{ "id": "C", "start": 10, "end": 14},
];
data.stream = [
[ 0, 0, 0, 0, 0,
65, 60, 75, 85, 60,
20, 30, 20, 25, 15,
],
];
I want to display it as three distinct parts, where the A segment (ie: the first 5 entries in the stream) would be red (or whatever the color), the B segment (the middle 5 entries) green and the C segment (the last 5 entries) blue.
Here's what it would look like with help from a photo-editing program:
So far, I'm able to display data.stream as a stream. However, I'm stuck at breaking it into segments.
If my data was structured differently (as in this question), things would be easier. However, the way the data is structured right now is sort of ideal at it lets me separate the segment definitions from the stream data. This is useful as I want to be able to use different segments down the line. (You can look at those segments as sounds or words inside of an audio. Sometimes I would focus on individual sounds, sometimes on individual words, but the stream would always be the same.)
I put a working demo on JSFiddle here: http://jsfiddle.net/vsFhf/
How can I color the different parts of the stream?
Let me know if you need more details.
Thank you for the help-
Fabien
No matter what, you still need individual <path> elements for each segment. You could construct a segmented data array as #ValarDohaeris suggests. But, you can also do it without transforming the data:
Instead of binding to data.stream, you need to bind to data.segments, which will enable you to create that one <path> per segment. Then you call pathGenerator for each of those <paths>, passing in a slice of the stream you're rendering data.streams[0]. You'll also need to X-translate each <path> to the appropriate position, using your x scale function.
Here's the modified fiddle.
Would it help to split the data according to your segment definitions?
var segmentdata = data.segments.map(function(segment, i) {
return data.stream[0].slice(segment.start, segment.end + 1);
});
This will create:
segmentdata = [[0,0,0,0,0], [65,60,75,85,60], [20,30,20,25,15]]
I set the font size of tab_labels bigger in default theme,so i edit the theme package like this
{
"class": "tab_label",
"fg": [0, 0, 0, 255],
"shadow_color": [255, 255, 255, 80],
"shadow_offset": [0, 1],
"font.italic": false,
"font.size": 17.0 <---what i insert
},
but unfortunately I can only see the half part of the characters in labels now(only upper part because font seems too big)
(so sorry I dont have enough rep to post image),how can I fix that problem.
Unfortunately this isn't possible as far as I know of.
You can set the tab_height to a larger value, but it still cuts off the text:
http://wes.io/Qzm0/content
There is a thread about this on the sublime forum:
http://www.sublimetext.com/forum/viewtopic.php?f=3&t=8889