I'd like to create a key to my map that shows the values associated with the different colors, as at the bottom of the drawing:
I can make a series of boxes easily enough. Is there a method somewhere I can input a value to get the color back that the map would use for that value?
First you need a map object. If you have created a map with jvm.WorldMap constructor you have it already, otherwise if you have created a map using jQuery wrapper you can do:
var map = $('#map').vectorMap('get', 'mapObject');
Then to convert the value to color do the following:
var color = map.series.regions[0].scale.getValue(someValue);
Related
I'm using dc.js to draw my charts, and trying to give different color to the bars.
Some bars are black instead of the colors I requested. How do I get the chart to use the color array?
This is the code
var keyColorCodes;
keyColorCodes = dc.config.defaultColors();
bar.colors(d3.scaleOrdinal().domain(d3.keys(keyColorCodes)).range(d3.values(keyColorCodes)));
bar.colorAccessor(function(d) {
return d.key;
});
The domain of your scaleOrdinal should be an array containing the set of values which your colorAccessor will return. Right now you are pulling the set of indices of the dc.config.defaultColors().
One easy way to get the set of values is to map your group.all() through your colorAccessor:
.domain(speedSumGroup.all().map(d => d.key))
Also, d3.values is intended to be used with associative arrays, i.e. objects. It has no effect when applied to an ordinary array.
Here is a general way to do it, which should work in most cases:
chart
.colorAccessor(d => d.key)
.colors(d3.scaleOrdinal()
.domain(speedSumGroup.all().map(d => d.key))
.range(dc.config.defaultColors()));
Example fiddle.
I attempting to make a Choropleth Map using HTML Canvas. If you are unfamiliar with Choropleth Maps they are basically a map that has different regions shaded with different colors. What I am trying to do is use the canvas fill() method to color different states on the US map. However, fill seems to only work if I have drawn an outline on my canvas.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
Here I want to put something like var c =ctx.fillMap(); however this won't work as Map is the entire US map and I just want to fill in a single state.
How can I change the color of the circles on a scatter plot based on one of the fields that I'm not using on neither of the axes?
Example, this code:
var myChart3 = new dimple.chart(svg3, data);
myChart3.addMeasureAxis("x", "salary");
myChart3.addMeasureAxis("y", "bonus");
var mySeries = myChart3.addSeries(["Index","a"], dimple.plot.scatter);
myChart3.draw();
produces this graph:
but I also would like to color the bubbles based on a third field called "department"
thanks
The first parameter of addSeries determines colours. In the case of an array the last element is used, so you just need to do:
var mySeries = myChart3.addSeries(["Index","a","department"], dimple.plot.scatter);
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 am trying to find out if there is a global data array created in D3. I need to be able to access it from anywhere. I have Jquery slider params that I pass to an update function. I will be using the indexes to redraw the chart.Or do I have to create this global myself?
function redraw(first,last) {
var chart = d3.select(".chart");
// this only grabs one rect so I only have one value for _data_
var rect = chart.selectAll("rect");
EDIT: I want the original data so that I can filter it and rerender (See my comment below). But it doenst seen to be in the global space for me to access it.