I have a problem with jVectorMap, I don't know how may I highlight the regions that have markers in them. Does anybody knows a way for doing this?
Thank you so much!
The library doesn't provide an automatic way of highlighting regions based on markers but you can use the series option to change behavior of regions / markers.
If you want to highlight regions on map initialization, you need to pass a list of objects with the code of your regions and a key color value.
Imagine you want to highlight following regions: BE, NL, DE. You need to pass this to the series values:
{ 'BE': '1', 'NL': '1', 'DE': '1' }
And the sample code where the value 1 is attributed to the color #4169E1 (as an example)
new jvm.WorldMap({
map: '',
container: $(''),
series: {
regions: [{
scale: {
'1': '#4169E1'
},
attribute: 'fill',
values: { 'BE': '1', 'NL': '1', 'DE': '1' }
}]
}
});
Because you already have the list of markers, you can easily build this highlight region list.
Related
I am wondering if it is possible to get access to aggregated data from a deck.gl layer to be able to draw a legend.
Because the colour scheme is supplied I would only require the extent of the aggregated values calculated by the screengrid layer to be able to add this to the legend.
I know there are tooltips, but in some circumstances it would be nice to have access to these values.
I'm using the HexagonLayer and for that one you can find the values for the layers by using a semi custom onSetColorDomain function when initializing your layer. Then save the domain range array to a variable and call a make legend function.
for example:
const hexlayer = new HexagonLayer({
id: 'heatmap',
pickable: true,
colorRange: COLOR_RANGE,
data: feats_obj.coords_array,
elevationScale: 9,
extruded: true,
radius: 300,
getColorValue: points => {
if( points.length > max_points) {
max_points = points.length
}
renderCategories( incident_categories )
return points.length
},
onSetColorDomain: (ecol) => {
console.log('color domain set', ecol)
max_span.innerHTML = ecol[1]
color_domain = ecol;
create_legend()
// console.log('max_points: ', max_points)
},...
})
The hacky way i figured out was to make a max points in a polygon global variable outside initializing the layer and have it update the value anytime there's a polygon with more points in it than that max value. An example of it in the wild is: https://mpmckenna8.github.io/sfviz/?start_date=2020-05-01&end_date=2020-05-31 with a link to the repo u can hack on there.
I built a line chart using DC JS with an ordinal x-axis. It works, except that there is some outer padding on the x-axis that I can't seem to get rid of. I'd like the left-most and right-most data points to be flush with the edges of the chart, with no padding. Hopefully I'm not missing something obvious.
I think I'm setting up the x-axis scale incorrectly. Given a data set like this:
var data = [
{ key: 'Monday', value: 3000000 },
{ key: 'Tuesday', value: 3100000 },
{ key: 'Wednesday', value: 3500000 },
{ key: 'Thursday', value: 3070000 },
{ key: 'Friday', value: 4500000 },
{ key: 'Saturday', value: 3003030 },
{ key: 'Sunday', value: 5010000 }
];
Here's what I'm doing with the x-axis scale:
var ordinalScale = d3.scale.ordinal().domain(['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']).rangeRoundBands([0,chartWidth]);
chart.x(ordinalScale).xUnits(dc.units.ordinal);
I've also looked at the D3 documentation on ordinal scales, but that hasn't helped yet.
Here's a screen shot (extraneous padding marked in red):
http://imgur.com/a/zmfF4
Here's a working JS fiddle that demonstrates the problem:
https://jsfiddle.net/qvp4fpzy/4/
It's a little confusing dealing with both dc.js and d3.js features around range bands.
dc.js has its own built-in calculations for bar/line x positions, but if the x scale is ordinal, it automatically chooses .rangeBands:
if (_chart.isOrdinal()) {
_x.rangeBands([0, _chart.xAxisLength()], _rangeBandPadding,
_chart._useOuterPadding() ? _outerRangeBandPadding : 0);
} else // ...
source link
So I don't think your call to .rangeRoundBands has any effect. (Should dc.js use rangeRoundBands instead of rangeBands? Maybe, but it doesn't weight on this question.)
It's the third parameter to rangeBands that you want to influence, and that's controlled by chart._outerRangeBandPadding(). (Ignore chart._useOuterPadding() - that's a backward compatibility thing.)
So all you need here is
chart._outerRangeBandPadding(0);
Working fork of your fiddle.
I am stuck on a problem here. Could be simple though but i am having a tough time figuring it out. I want to show multiple lines on a dc composite chart.
My data is like this:
{ Name: Mike, mark1: 26.9, mark2: 62.3 },
{ Name: John, mark1: 23.5, mark2: 60.3 },
{ Name: Firen, mark1: 24.3, mark2: 62.5 }
I need the name plotted against X axis and mark1 and mark2 plotted as lines against the Y axis. I found a fiddle here which uses a linear scale to achieve the same result. http://jsfiddle.net/anmolkoul/mzx6mnru/3/
But it uses a linear scale as the base dimension is numerical. My base dimension is a string and hence not working with the same code. I figured it is due to the scale definition that i am using. Here is the fiddle that i need help with: http://jsfiddle.net/anmolkoul/pjLoh1az/1/
I have currently defined my x axis as
.x(d3.scale.ordinal().domain(nameDimension))
.xUnits(dc.units.ordinal)
I think this is where it is going wrong. I have two supplementary questions as well:
Once this is done, how to assign different colors to the lines ( it should reflect in the legend as well)
I was taking a look at the dc.js series chart, what does this line of code do?
runDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; });
Does it pivot the two dimensions? or is it just a quicker way of creating two crossfilter dimensions.
Thank you for the help!`
You can get the ordinal values with :
nameDimension.top(Infinity).map(function(d) {return d.Name}))
which returns ["Mike", "John", "Firen"] , then use it for the ordinal domain.
But it's not necessary, it's calculated automatically :
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
For colors, you can use :
dc.lineChart(lineChart1).group(mark1Group,"Mark 1").colors("#FF0000")
Here is a fiddle with those modifications : http://jsfiddle.net/1exo25u9/
I'm new to jvectormap, but have found it to be awesome.
I have created a map with the following characteristics. When the map loads, about 30 countries have colors applied, either Red, Yellow or Green, based on some score associated with that country (like the percentage of the population that are Duran Duran fans). The rest of the countries are just grey. (There is some interactivity on the colored regions, like tooltips and clicks.) When the map is first created, there is a line at the end:
map.series.regions[0].setValues(getColors(currentColor);
and currentColor had previously been defined:
var currentColor = "[ALL]";
so that all of the colors (red, yellow and green) are shown on the map, and that works.
Beneath the map I want to provide buttons to show just the countries of a given color, like just the red ones. When the Red button is clicked, just the red countries will be shown in red and the others shown in grey. Each color would get its own button.
This seems like it would be easy to do. I have seen the technique used here: http://jvectormap.com/examples/random-colors/, where you could click to randomly change the colors and everything else about the map (panning, zooming, etc.) remains intact. The key part is:
map.series.regions[0].setValues(generateColors());
when you have a map constructor like:
map = new jvm.Map({
(If your map constructor is like this:
$('#map').vectorMap({
then you would need to do something like this:
var mapObject = $('#map').vectorMap('get', 'mapObject');
mapObject.series.regions[0].setValues(generateColors());
)
I have tried to do exactly that, but with my own getColors(color) method:
map.series.regions[0].setValues(getColors(currentColor));
where I regenerate the array of map colors that is passed to setValues(), but there is no change to the map. I know that the array of map colors is correct, because my workaround has been to do the following when the button is pressed:
(1) change the currentColor variable
(2) empty out the map div container: $("#map").empty()
(3) redraw the map from scratch using the constructor and the call to map.series.regions[0].setValues(getColors(currentColor));
The downside of this approach is that any panning or zooming is lost when the map is redrawn from scratch. Is there any step I am missing to get the map to update when I call: map.series.regions[0].setValues()
Here is a jsfiddle showing how it does not work, unless you redraw the map from scratch: http://jsfiddle.net/msalamon/euqyfs7v/10/
In the jsfiddle, if you call "High Redraw" it shows just the Red countries, but only by redrawing.
I figured it out. See: http://jsfiddle.net/msalamon/euqyfs7v/11/.
I assumed that setValues() fully replaced the prior values, so any missing values were set to a default value. But instead setValues() only replaces the values that were included there. So when a particular color/level is selected with the button, I have changed it so that the returned array includes a default value for any region that is not included:
else
{
colors[code] = "#999999";
}
this code work for me, you just have to change values, :)
<button id="update-colors-button2">change </button>
<button id="update-colors-button">change </button>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
map = new jvm.WorldMap({
map: 'chile',
container: $('#world-map'),
series: {
regions: [{
attribute: 'fill'
}]
}
});
$(function(){
$('#update-colors-button').click(function(e){
e.preventDefault();
map.series.regions[0].clear();
map.series.regions[0].setValues({'ari' : '#328942'});
});
$('#update-colors-button2').click(function(e){
e.preventDefault();
map.series.regions[0].clear();
map.series.regions[0].setValues({'ata' : '#328942'});
});
})
</script>
I'm working on a visualization tool for time series with multiple dimensions.
To simplify my case, each data-point has a dimension on type, clusterId and a set of months:
{
type: "green",
clusterId:42,
months:[1392185580000, 1394604780000, 1397279580000]
}, {
type: "red",
clusterId:43,
months:[1392185580000]
}
Now I would like to show the dates in a dc.barChart, which shows the months of all datasets as keys(bars), and the number of observations of each month as value of the bar.
In the given case, it would result in 3 bars, the first one with a height of 2, and the other with a height of 1.
How can I create this dimension and implement the grouping/reducing function?
You don't have to worry about filtering by this dimension, I already have a custom filter for this dimension. The only thing is displaying the bars on the barChart.
If i get this correctly, you need some code, that outputs: 1392185580000: 2, 1394604780000: 1, 1397279580000:1?
arr.forEach(function(d) {
d.months.forEach(function(month) {
if (!store.hasOwnProperty(month)) {
store[month]=0;
}
store[month]++;
});
});
demo fiddle