Skip to content

Commit e76a7e5

Browse files
markmarkohmarkmarkoh
committed
fill color changes
1 parent 182cf85 commit e76a7e5

File tree

2 files changed

+69
-28
lines changed

2 files changed

+69
-28
lines changed

‎src/examples/function-values.html‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,43 @@
2121
element: document.getElementById('container1'),
2222
geographyConfig: {
2323
popupOnHover: false,
24-
highlightOnHover: false,
24+
highlightOnHover: true,
2525
borderColor: '#444',
2626
borderWidth: 0.5
2727
},
28+
data: {
29+
TX: {
30+
fillKey: 'neato',
31+
highlightFillColor: '#bada55'
32+
},
33+
MT: {
34+
fillKey: 'Trouble',
35+
highlightFillColor: function(d) {
36+
return '#fada55';
37+
}
38+
},
39+
NM: {
40+
fillColor: '#fa0fa0'
41+
},
42+
OK: {
43+
fillColor: function(d) {
44+
console.log('fillOk', d);
45+
return '#ffaa00';
46+
}
47+
},
48+
NJ: {
49+
wockah: 'flocka'
50+
}
51+
},
2852
bubblesConfig: {
2953
popupTemplate: function(geography, data) {
3054
return '<div class="hoverinfo">Some From New: data about ' + data.centered + '</div>'
3155
},
3256
fillOpacity: 0.2,
3357
borderWidth: function(data) {
34-
console.log(arguments);
3558
return 4;
3659
},
3760
radius: function(data) {
38-
console.log(arguments);
3961
if ( data.centered && data.centered[0] === 'N' ) return 90;
4062
else return 10;
4163
},
@@ -45,14 +67,17 @@
4567
'Visited': '#306596',
4668
'neato': '#0fa0fa',
4769
'Trouble': '#bada55',
48-
defaultFill: '#dddddd'
70+
defaultFill: function(geography, data) {
71+
console.log('defaultFill', geography.id, data);
72+
return '#DDDDDD';
73+
}
4974
}
5075
});
5176

5277
election.bubbles([
5378
{centered: 'NY', fillKey: 'Trouble', highlightFillColor: '#aaafff'},
5479
{centered: 'KY', fillKey: 'neato', highlightFillColor: function(value) { return '#fa0fa0'; }},
55-
{centered: 'TX', fillKey: 'neato', radius: function(value) { return 100; }},
80+
{centered: 'TX', fillKey: 'neato', radius: function(value) { return 20; }},
5681
{centered: 'CA', fillKey: 'Trouble', radius: 46},
5782
{centered: 'WA', fillKey: 'neato', popupTemplate: function(geo, data) { return '<div class="hoverinfo">Wahhhh</div>'; }},
5883
{centered: 'MA', fillKey: 'Trouble', radius: 10},
@@ -91,7 +116,7 @@
91116

92117
election.arc([{
93118
origin: {
94-
latitude: 30,
119+
latitude: function(datum) { return 30 },
95120
longitude: -97
96121
},
97122
destination: {

‎src/js/datamaps.js‎

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
setProjection: setProjection,
1111
projection: 'equirectangular',
1212
dataType: 'json',
13+
data: {},
1314
done: function() {},
1415
fills: {
1516
defaultFill: '#ABDDA4'
@@ -35,7 +36,7 @@
3536
borderWidth: 2,
3637
borderColor: '#FFFFFF',
3738
popupOnHover: true,
38-
radius: 80,
39+
radius: null,
3940
popupTemplate: function(geography, data) {
4041
return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>';
4142
},
@@ -60,16 +61,24 @@
6061
Getter for value. If not declared on datumValue, look up the chain into optionsValue
6162
*/
6263
function val( datumValue, optionsValue, context ) {
63-
64+
if ( typeof context === 'undefined' ) {
65+
context = optionsValue;
66+
optionsValues = undefined;
67+
}
6468
var value = typeof datumValue !== 'undefined' ? datumValue : optionsValue;
6569

70+
if (typeof value === 'undefined') {
71+
return null;
72+
}
73+
6674
if ( typeof value === 'function' ) {
67-
console.log(value, context);
68-
console.log( 'GetValueFn', value.apply(null, [context]) );
69-
return value.apply(null, [context]);
75+
var fnContext = [context];
76+
if ( context.geography ) {
77+
fnContext = [context.geography, context.data];
78+
}
79+
return value.apply(null, fnContext);
7080
}
7181
else {
72-
console.log( 'GetValueLiteral', value);
7382
return value;
7483
}
7584
}
@@ -174,13 +183,20 @@
174183
return JSON.stringify( colorCodeData[d.id]);
175184
})
176185
.style('fill', function(d) {
186+
//if fillKey - use that
187+
//otherwise check 'fill'
188+
//otherwise check 'defaultFill'
177189
var fillColor;
178190

179-
if ( colorCodeData[d.id] ) {
180-
fillColor = fillData[ colorCodeData[d.id].fillKey ];
191+
var datum = colorCodeData[d.id];
192+
if ( datum && datum.fillKey ) {
193+
fillColor = fillData[ val(datum.fillKey, {data: colorCodeData[d.id], geography: d}) ];
194+
}
195+
else {
196+
fillColor = val(datum && datum.fillColor, fillData.defaultFill, {data: colorCodeData[d.id], geography: d});
181197
}
182198

183-
return fillColor || fillData.defaultFill;
199+
return fillColor;
184200
})
185201
.style('stroke-width', geoConfig.borderWidth)
186202
.style('stroke', geoConfig.borderColor);
@@ -196,7 +212,7 @@
196212
svg.selectAll('.datamaps-subunit')
197213
.on('mouseover', function(d) {
198214
var $this = d3.select(this);
199-
215+
var datum = self.options.data[d.id] || {};
200216
if ( options.highlightOnHover ) {
201217
var previousAttributes = {
202218
'fill': $this.style('fill'),
@@ -206,10 +222,10 @@
206222
};
207223

208224
$this
209-
.style('fill', options.highlightFillColor)
210-
.style('stroke', options.highlightBorderColor)
211-
.style('stroke-width', options.highlightBorderWidth)
212-
.style('fill-opacity', options.highlightFillOpacity)
225+
.style('fill', val(datum.highlightFillColor, options.highlightFillColor, datum))
226+
.style('stroke', val(datum.highlightBorderColor, options.highlightBorderColor, datum))
227+
.style('stroke-width', val(datum.highlightBorderWidth, options.highlightBorderWidth, datum))
228+
.style('fill-opacity', val(datum.highlightFillOpacity, options.highlightFillOpacity, datum))
213229
.attr('data-previousAttributes', JSON.stringify(previousAttributes));
214230

215231
//as per discussion on https://github.com/markmarkoh/datamaps/issues/19
@@ -311,11 +327,6 @@
311327
var path = d3.geo.path()
312328
.projection(self.projection);
313329

314-
// TODO: Move this to inside `if` clause when setting attr `d`
315-
var arc = d3.geo.greatArc()
316-
.source(function(d) { return [d.origin.longitude, d.origin.latitude]; })
317-
.target(function(d) { return [d.destination.longitude, d.destination.latitude]; });
318-
319330
arcs
320331
.enter()
321332
.append('svg:path')
@@ -329,11 +340,16 @@
329340
return val(datum.strokeWidth, options.strokeWidth, datum);
330341
})
331342
.attr('d', function(datum) {
332-
var originXY = self.latLngToXY(datum.origin.latitude, datum.origin.longitude);
333-
var destXY = self.latLngToXY(datum.destination.latitude, datum.destination.longitude);
343+
var originXY = self.latLngToXY(val(datum.origin.latitude, datum), val(datum.origin.longitude, datum))
344+
var destXY = self.latLngToXY(val(datum.destination.latitude, datum), val(datum.destination.longitude, datum));
334345
var midXY = [ (originXY[0] + destXY[0]) / 2, (originXY[1] + destXY[1]) / 2];
335346
if (options.greatArc) {
336-
return path(arc(datum))
347+
// TODO: Move this to inside `if` clause when setting attr `d`
348+
var greatArc = d3.geo.greatArc()
349+
.source(function(d) { return [val(d.origin.longitude, d), val(d.origin.latitude, d)]; })
350+
.target(function(d) { return [val(d.destination.longitude, d), val(d.destination.latitude, d)]; });
351+
352+
return path(greatArc(datum))
337353
}
338354
var sharpness = val(datum.arcSharpness, options.arcSharpness, datum);
339355
return "M" + originXY[0] + ',' + originXY[1] + "S" + (midXY[0] + (50 * sharpness)) + "," + (midXY[1] - (75 * sharpness)) + "," + destXY[0] + "," + destXY[1];

0 commit comments

Comments
 (0)