I am trying to draw circle which colour depends on a "group" attribute in my geojson. I followed a simple example with these colours:
map.addSource("data", {
type: "geojson",
data: url,
cluster: true,
clusterMaxZoom: 12, // Max zoom to cluster points on
clusterRadius: 20 // Radius of each cluster when clustering points (defaults to 50)
});
map.addLayer({
'id': 'population',
'type': 'circle',
'source': 'data',
'paint': {
// make circles larger as the user zooms from z12 to z22
'circle-radius': {
'base': 1.75,
'stops': [[12, 2], [22, 180]]
},
// color circles by ethnicity, using a match expression
// https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
'circle-color': {
'property': 'group',
'type': 'categorical',
stops: [
['1', 'rgba(252,141,98,0.5)'],
['2', 'rgba(141,160,203,0.5)'],
['3', 'rgba(141,160,203,0.5)'],
['4', 'rgba(141,160,203,0.5)'],
['5', 'rgba(141,160,203,0.5)'],
['6', 'rgba(141,160,203,0.5)'],
//'4', '#3bb2d0',
/* other 'rgba(102,194,165,0.1)'*/
]
}
}
},'3d-buildings');
Now I would also like my clusters to follow some kind of colour-pattern. For instance, if the clusters contains a majority of group 1 then it does get the colour of group 1. Same for groupe 2 and so on.
But all I for the cluster points is black dots. I would very much like to know if there is a way to do better than that.
I have been following this example and updated it with the additional "type":"categorical" as required by the new versions of mapboxgl.
My data is a geojson that goes like this:
{"type": "FeatureCollection", "features": [{"id": 1, "type": "Feature", "properties": {"group":1}, "geometry": {"type": "Point", "coordinates": [17.8304903812012, 59.1886524824444]}}
Would anyone know how to achieve that with mapbox?
Edit:
Two images to show the problems that I currently have. The first image is basically my non-clustered visualization where you see two different colours based on the two groups.
The second image, is the clustered version, which only display black clusters. I would like for clusters with a majority of group 1 to be orange and for clusters with a majority of group 2 to be green.
Edit
Now I have also seen that I might have to do that with supercluster, but the only proper example that I have found is broken (stops working when we zoom too much and the points are always clustered). Also it seems that this is using old mapbox features that are now deprecated. Would someone know how to make this work easily on the provided example?
Related
Is it possible to make echarts line chart with 1 line painted in different colors? For example if value <= 0 the color is red, if > 0 the color is green?
Echarts has an option called visualMap that does exactly what you are looking for.
visualMap doc
visualMap code example (I selected the example that fits best, but there are others)
In your case you'll have something like that :
visualMap: {
show: false, // Wether to show the legend or not (default: true)
pieces: [
{
min: -9999, // Normally not needed but doesn't work without that (1)
max: 0,
color: '#F35E07' // Red
},
{
min: 0,
color: '#93CE07' // Green
},
],
outOfRange: {
color: '#F35E07'
}
},
It'll split your line in 2 pieces :
below 0 (written max: 0) : red
above 0 (written min: 0) : green
In addition, the visualMap option has more to offer : you can have more than 2 pieces (like in this example), have a smooth gradient instead of pieces (using type: 'continuous' like in this example), and many other things that are explained in its doc.
(1) Note about the bug: Normally if you don't specify min or max,
it's set to -Infinity or Infinity. But here you have to specify
min AND max in one of the two pieces (I don't know why).
If you consider plotting two charts and ignoring some of its points with '-', you can achieve the same visual result of a multicolored line chart.
Although the documentation does not provide an immediate example of how to color specific segments of a line chart, it actually instructs about how you can use empty data,
While there are empty elements, the lines chart will ignore that point without passing through it----empty elements will not be connected by the points next. In ECharts, we use '-' to represent null data, It is applicable for data in other series.
With that in mind, by overlaying two equal charts and emptying some points, you can actually construct the logic of a multicolored chart. Notice that it is better if you can do it programmatically so that you can vary the number of line segments to be colored.
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {},
yAxis: {},
series: [
{
data: [
[-20, -20],
[-10, 30],
[0, 40],
['-', '-'],
['-', '-']
],
type: 'line',
lineStyle: {
color: "red"
}
},
{
data: [
['-', '-'],
['-', '-'],
[0, 40],
[10, 100],
[20, 60]
],
type: 'line',
lineStyle: {
color: "green"
}
}
]
};
option && myChart.setOption(option);
.as-console-wrapper { max-heght: 100% !important }
<script src="https://cdn.jsdelivr.net/npm/echarts#5.3.2/dist/echarts.js"></script>
<body>
<div id="main" style="width: 225px;height:225px;"></div>
</body>
I wanted to know if it is possible to make highcharts tick lines point inwards rather than outwards? I didn't see any obvious setting in the API.
But this is quite typical in scientific plots.
So I would like that the tick markers should go upwards instead of downwards?
Thanks
You can achieve it by setting xAxis.tickPosition = 'inside':
Highcharts.chart('container', {
xAxis: {
tickPosition: 'inside'
},
series: [{
data: [
439,
525,
571,
696,
970,
119,
137,
154
]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/8earkyLp/
API reference:
https://api.highcharts.com/highcharts/xAxis.tickPosition
I am trying to make chart, sort of like a pie chart, but with each slice being the same size, and having a percentage of it filled.
Something like this.
My question is similar to this one: Pie chart with different fill percentage.
But it is 4 years old so I thought I would ask again.
I have tried using Canvasjs, Google charts, and highcharts but none of them support anything similar. I also want to have the slices functioning as buttons that can rotate the chart, having the selected one being positioned in the bottom.
You can achieve that result in Highcharts. Each slice should be a different series with different size. Each series should have points in the number of the series, all points should be invisible except the one - also, it is needed for disabling ignoreHiddenPoint so empty space will be drawn.
For example, you have an array of points ['20%', '30%'] - you need to map the points to series array:
[{
size: '20%',
keys: ['y', 'visible'],
data: [[1/2, true], [1/2, false]]
}, {
size: '30%',
keys: ['y', 'visible'],
data: [[1/2, false], [1/2, true]]
}]
You also might create an additional series which will be the background of the pie
const backgroundSeries = [{
size: '100%',
data: [{y: 1, color: 'rgba(0, 0, 0, 0.4)'}],
enableMouseTracking: false,
borderWidth: 0,
}];
For rotating the pie, you need to update startAngle property
chart.update({
plotOptions: {
pie: {
startAngle: startAngle
}
}
});
Live example and output
http://jsfiddle.net/1yjc4ogb/
I have created circle (type polygon, with computed coordinates by this formula - still not sure if this is best way to render circle...)
and some markers, representing cities.
I prefer markers, because they are html elements and I can style them.
Circle serves as a radius for selecting cities.
My question is, how can I position these markers behind circle? Circle is part of canvas, and markers are separated divs, so there won't help any z-index.
Or should I create those markers somehow as points in canvas?
Looking exactly for this behaviour, only in mapboxgl.
Here is an example: https://jsfiddle.net/kmandov/vzc0o86g/
You can use turf-circle to create a circle using a specified radius and units. Turf-circle generates a geojson object that can be added to its own layer.
var center = {
"type": "Feature",
"properties": {
"marker-color": "#0f0"
},
"geometry": {
"type": "Point",
"coordinates": [-77.1117, 38.8739]
}
};
var lasso = turf.circle(center, 5, 20, 'kilometers');
Then you add it to its own layer. I've called it lasso:
map.addSource('lasso', {
'type': 'geojson',
'data': lasso
});
map.addLayer({
'id': 'lasso',
'type': 'fill',
'source': 'lasso',
'paint': {
'fill-color': '#f1f075',
'fill-opacity': 0.8
}
});
Then you add the layer containing the stations by specifying the layer above(example). This will make sure that the lasso layer is above the stations layer:
map.addLayer({
'id': 'stations',
'type': 'circle',
'source': 'stations',
'paint': {
'circle-color': '#feb24c',
'circle-opacity': 1,
'circle-radius': 5
}
}, 'lasso'); // lasso is the layer above
I am trying to create a fiddle, mocking up the image attached
in following jsfiddle
http://jsfiddle.net/2TuCW/162/
The problem is I want the plotLines between blue line and green column.
I tried changing the zIndexes of plotLines (10) , between blue line (15) and green column (5) in following fiddle
http://jsfiddle.net/2TuCW/163/
//plotLines zIndex
"plotLines" : [
{
"color": '#E5E7EB',
"zIndex": 10,
"width": 2,
"value": 20
},
....
....
//Series data z-index
"series": [{
"type":"column",
"data": [35,39,49,50,57,58],
"zIndex":5
....
....
"series": [{
"type":"line",
"data": [35,39,49,50,57,58],
"zIndex":15
But it is not working as expected. Please suggest how to achieve it.
It is related with fact that all series have the same zIndex.
Related topic: https://github.com/highslide-software/highcharts.com/issues/3321
Try to adjust the values of the plotLines.
If you want a plot line to be between blue line and green column the value of the plotLines has to be between the data of blue line and data of column.
Unfortunately, it seems that plotLines can either be in front of all series or behind all series. This is because all series are grouped under a common element. A plotLine element is a sibling to the group element, not a sibling to the individual series elements.
This issue relates to the fact that all series are drawn within the same group, and therefore have the same z-index related to other groups. A related GitHub issue has discussion and code examples.
See this one example solution, proposed by Torstein Hønsi (Highcharts creator). I've made a modified, minimal, reproducible example here:
/**
* Plugin to allow plot band Z indexes in between series
*/
Highcharts.wrap(Highcharts.PlotLineOrBand.prototype, 'render', function (proceed) {
var chart = this.axis.chart;
proceed.call(this);
if (!chart.seriesGroup) {
chart.seriesGroup = chart.renderer.g('series-group')
.attr({ zIndex: 3 })
.add();
}
if (this.svgElem.parentGroup !== chart.seriesGroup) {
this.svgElem
.attr({ zIndex: this.options.zIndex })
.add(chart.seriesGroup);
}
return this;
});
Highcharts.chart('container', {
xAxis: {
plotLines: [{
color: 'red',
width: 2,
value: 3.5,
zIndex: 10
}]
},
series: [{
data: [7988, 12169, 15112, 22452, 34400, 34227],
zIndex: 9
}, {
data: [8105, 11248, 8989, 11816, 18274, 18111],
zIndex: 11
}]
});
The code uses Torsteins plugin to allow the plotline in between series. See the GitHub issues for discussion on caveats and potential improvements.