Last active
February 19, 2024 12:31
Star
You must be signed in to star a gist
World Map with heat color Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<style> | |
/* CSS goes here. */ | |
.subunit { | |
fill: none; | |
stroke: #FFF; | |
stroke-width: 1px; | |
} | |
text.subunit-label { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
font-size: 14px; | |
font-weight: 300; | |
text-anchor: middle; | |
fill: #000; | |
} | |
.subunit-label { | |
display: none; | |
} | |
.graticule { | |
fill: none; | |
stroke: #aaa; | |
stroke-opacity: .5; | |
stroke-width: .5px; | |
} | |
</style> | |
</head> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<script> | |
/* JavaScript goes here. */ | |
// globals used in graph | |
var mapdata = {}; | |
var palette = ['#009933','#669900','#99cc00','#cccc00','#c7dc09','#edf933','#ffcc00', '#ff9933', '#ff6600','#ff5050']; | |
var width = 960, height = 960; | |
var minDocCount = 0, quantiles = {}; | |
// projection definitions | |
var projection = d3.geo.mercator() | |
.scale((width + 1) / 2 / Math.PI) | |
.translate([width/2, height/2]) | |
.precision(.1); | |
var path = d3.geo.path().projection(projection); | |
var graticule = d3.geo.graticule(); | |
// SVG related definitions | |
var svg = d3.select('body').append('svg') | |
.attr({'width': width, 'height': height}) | |
.append('g'); | |
var filter = svg.append('defs') | |
.append('filter') | |
.attr({'x':0, 'y':0, 'width':1, 'height':1, 'id':'gray-background'}); | |
filter.append('feFlood') | |
.attr('flood-color', '#f2f2f2') | |
.attr('result', 'COLOR'); | |
filter.append('feMorphology') | |
.attr('operator', 'dilate') | |
.attr('radius', '.9') | |
.attr('in', 'SourceAlpha') | |
.attr('result', 'MORPHED'); | |
filter.append('feComposite') | |
.attr('in', 'SourceGraphic') | |
.attr('in2', 'MORPHED') | |
.attr('result', 'COMP1'); | |
filter.append('feComposite') | |
.attr('in', 'COMP1') | |
.attr('in2', 'COLOR'); | |
svg.append("path") | |
.datum(graticule) | |
.attr("class", "graticule") | |
.attr("d", path); | |
d3.json('mockelasticdata.json', function(error, mockdata) { | |
if (error) return console.error(error); | |
console.log('mockdata',mockdata); | |
mapdata = mockdata; | |
draw(mockdata) | |
}); | |
function draw(data) { | |
// var localstoreWorldData = localStorage.getItem('worldmapData'); | |
// if (localstoreWorldData && localstoreWorldData.length) { | |
// localstoreWorldData = JSON.parse(localstoreWorldData); | |
// console.log('localstoreWorldData',localstoreWorldData); | |
// if (localstoreWorldData) { | |
// processWorldD(localstoreWorldData, data); | |
// //no need proceed further | |
// return; | |
// } | |
// } | |
d3.json('world.json', function(error, world) { | |
if (error) return console.error(error); | |
console.log('world',world); | |
processWorldD(world, data); | |
//localStorage.setItem('worldmapData', JSON.stringify(world)); | |
}); | |
} | |
function processWorldD(world, data) { | |
for(var idx=0; idx < data.aggregations.world_map.buckets.length; idx++) { | |
var cCode = data.aggregations.world_map.buckets[idx].key.toUpperCase(); | |
var doc_count = data.aggregations.world_map.buckets[idx].doc_count; | |
for(var wdx=0; wdx < world.objects.subunits.geometries.length; wdx++) { | |
var cName = world.objects.subunits.geometries[wdx].id.toUpperCase(); | |
if (cCode === cName) { | |
world.objects.subunits.geometries[wdx].properties.doc_count = doc_count; | |
} | |
} | |
} | |
var subunits = topojson.feature(world, world.objects.subunits); | |
subunits.features = subunits.features.filter(function(d){ return d.id !== "ATA"; }); | |
console.log('subunits',subunits); | |
minDocCount = d3.min(subunits.features, function(d){ return d.properties.doc_count; }); | |
console.log('minDocCount',minDocCount); | |
var doc_counts = subunits.features.map(function(d){ return d.properties.doc_count; }); | |
doc_counts = doc_counts.filter(function(d){ return d; }).sort(d3.ascending); | |
//console.log('doc_counts',doc_counts); | |
quantiles['0.95'] = d3.quantile(doc_counts, '0.95'); | |
var countries = svg.selectAll('path.subunit') | |
.data(subunits.features).enter(); | |
countries.insert('path', '.graticule') | |
.attr('class', function(d) { return 'subunit ca'+d.id; }) | |
.style('fill', heatColor) | |
.attr('d', path) | |
.on('mouseover',mouseoverLegend).on('mouseout',mouseoutLegend) | |
.on('click', coutryclicked); | |
countries.append('svg:text') | |
.attr('class', function(d){ return 'subunit-label la'+d.id+d.properties.name.replace(/[ \.#']+/g,''); }) | |
//.attr('transform', function(d) { return 'translate('+ path.centroid(d) +')'; }) | |
.attr('transform', function(d) { return 'translate('+(width-(5*d.properties.name.length))+','+(15)+')'; }) | |
.attr('dy', '.35em') | |
.attr('filter', 'url(#gray-background)') | |
.append('svg:tspan') | |
.attr('x', 0) | |
.attr('dy', 5) | |
.text(function(d) { return d.properties.name; }) | |
.append('svg:tspan') | |
.attr('x', 0) | |
.attr('dy', 20) | |
.text(function(d) { return d.properties.doc_count ? d.properties.doc_count : ''; }); | |
} | |
function mouseoverLegend(datum, index) { | |
d3.selectAll('.subunit-label.la'+datum.id+datum.properties.name.replace(/[ \.#']+/g,'')) | |
.style('display', 'inline-block'); | |
d3.selectAll('.subunit.ca'+datum.id) | |
.style('fill', '#cc6699'); | |
} | |
function mouseoutLegend(datum, index) { | |
d3.selectAll('.subunit-label.la'+datum.id+datum.properties.name.replace(/[ \.#']+/g,'')) | |
.style('display', 'none'); | |
d3.selectAll('.subunit.ca'+datum.id) | |
.style('fill', heatColor(datum)); | |
} | |
function coutryclicked(datum, index) { | |
//filter event for this country should be applied here | |
console.log('coutryclicked datum', datum); | |
} | |
function heatColor(d) { | |
if (quantiles['0.95'] === 0 && minDocCount === 0) return '#F0F0F0'; | |
if (!d.properties.doc_count) return '#F0F0F0'; | |
if (d.properties.doc_count > quantiles['0.95']) return palette[(palette.length - 1)]; | |
if (quantiles['0.95'] == minDocCount) return palette[(palette.length-1)]; | |
var diffDocCount = quantiles['0.95'] - minDocCount; | |
var paletteInterval = diffDocCount / palette.length; | |
var diffDocCountDatum = quantiles['0.95'] - d.properties.doc_count; | |
var diffDatumDiffDoc = diffDocCount - diffDocCountDatum; | |
var approxIdx = diffDatumDiffDoc / paletteInterval; | |
if (!approxIdx || Math.floor(approxIdx) === 0) approxIdx = 0; | |
else approxIdx = Math.floor(approxIdx) - 1; | |
return palette[approxIdx]; | |
} | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"took": 492, | |
"timed_out": false, | |
"_shards": { | |
"total": 5, | |
"successful": 3, | |
"failed": 0 | |
}, | |
"hits": { | |
"total": 30111166, | |
"max_score": 0, | |
"hits": [] | |
}, | |
"aggregations": { | |
"world_map": { | |
"doc_count_error_upper_bound": 0, | |
"sum_other_doc_count": 0, | |
"buckets": [ | |
{ | |
"key": "USA", | |
"doc_count": 4231922 | |
}, | |
{ | |
"key": "CAN", | |
"doc_count": 817866 | |
}, | |
{ | |
"key": "GBR", | |
"doc_count": 213736 | |
}, | |
{ | |
"key": "MOZ", | |
"doc_count": 76607 | |
}, | |
{ | |
"key": "TUR", | |
"doc_count": 72724 | |
}, | |
{ | |
"key": "KEN", | |
"doc_count": 64413 | |
}, | |
{ | |
"key": "BEL", | |
"doc_count": 54416 | |
}, | |
{ | |
"key": "FRA", | |
"doc_count": 50738 | |
}, | |
{ | |
"key": "NLD", | |
"doc_count": 42092 | |
}, | |
{ | |
"key": "ZAF", | |
"doc_count": 33714 | |
}, | |
{ | |
"key": "AUS", | |
"doc_count": 29904 | |
}, | |
{ | |
"key": "ARG", | |
"doc_count": 23539 | |
}, | |
{ | |
"key": "SWE", | |
"doc_count": 23145 | |
}, | |
{ | |
"key": "ESP", | |
"doc_count": 22365 | |
}, | |
{ | |
"key": "HKG", | |
"doc_count": 14383 | |
}, | |
{ | |
"key": "BRA", | |
"doc_count": 14097 | |
}, | |
{ | |
"key": "COL", | |
"doc_count": 13908 | |
}, | |
{ | |
"key": "DEU", | |
"doc_count": 5985 | |
}, | |
{ | |
"key": "MEX", | |
"doc_count": 5396 | |
}, | |
{ | |
"key": "TTO", | |
"doc_count": 5138 | |
}, | |
{ | |
"key": "CHN", | |
"doc_count": 3478 | |
}, | |
{ | |
"key": "CHL", | |
"doc_count": 3450 | |
}, | |
{ | |
"key": "KAZ", | |
"doc_count": 2666 | |
}, | |
{ | |
"key": "PER", | |
"doc_count": 2005 | |
}, | |
{ | |
"key": "IRN", | |
"doc_count": 1586 | |
}, | |
{ | |
"key": "BGR", | |
"doc_count": 1552 | |
}, | |
{ | |
"key": "POL", | |
"doc_count": 1539 | |
}, | |
{ | |
"key": "UKR", | |
"doc_count": 1444 | |
}, | |
{ | |
"key": "SGP", | |
"doc_count": 1386 | |
}, | |
{ | |
"key": "JPN", | |
"doc_count": 1371 | |
}, | |
{ | |
"key": "CZE", | |
"doc_count": 1295 | |
}, | |
{ | |
"key": "IND", | |
"doc_count": 1126 | |
}, | |
{ | |
"key": "ITA", | |
"doc_count": 1077 | |
}, | |
{ | |
"key": "JAM", | |
"doc_count": 1014 | |
}, | |
{ | |
"key": "ROU", | |
"doc_count": 1011 | |
}, | |
{ | |
"key": "RUS", | |
"doc_count": 980 | |
}, | |
{ | |
"key": "EU", | |
"doc_count": 979 | |
}, | |
{ | |
"key": "SRB", | |
"doc_count": 957 | |
}, | |
{ | |
"key": "ECU", | |
"doc_count": 851 | |
}, | |
{ | |
"key": "ISR", | |
"doc_count": 848 | |
}, | |
{ | |
"key": "KOR", | |
"doc_count": 835 | |
}, | |
{ | |
"key": "ARE", | |
"doc_count": 631 | |
}, | |
{ | |
"key": "NCL", | |
"doc_count": 598 | |
}, | |
{ | |
"key": "PRT", | |
"doc_count": 487 | |
}, | |
{ | |
"key": "GRC", | |
"doc_count": 423 | |
}, | |
{ | |
"key": "URY", | |
"doc_count": 416 | |
}, | |
{ | |
"key": "BLR", | |
"doc_count": 392 | |
}, | |
{ | |
"key": "HUN", | |
"doc_count": 368 | |
}, | |
{ | |
"key": "HRV", | |
"doc_count": 355 | |
}, | |
{ | |
"key": "GTM", | |
"doc_count": 312 | |
}, | |
{ | |
"key": "BOL", | |
"doc_count": 308 | |
}, | |
{ | |
"key": "THA", | |
"doc_count": 294 | |
}, | |
{ | |
"key": "CHE", | |
"doc_count": 291 | |
}, | |
{ | |
"key": "AUT", | |
"doc_count": 284 | |
}, | |
{ | |
"key": "MDA", | |
"doc_count": 249 | |
}, | |
{ | |
"key": "VNM", | |
"doc_count": 236 | |
}, | |
{ | |
"key": "VEN", | |
"doc_count": 228 | |
}, | |
{ | |
"key": "NGA", | |
"doc_count": 216 | |
}, | |
{ | |
"key": "IRL", | |
"doc_count": 190 | |
}, | |
{ | |
"key": "PSE", | |
"doc_count": 188 | |
}, | |
{ | |
"key": "NOR", | |
"doc_count": 184 | |
}, | |
{ | |
"key": "AFG", | |
"doc_count": 181 | |
}, | |
{ | |
"key": "LVA", | |
"doc_count": 177 | |
}, | |
{ | |
"key": "CRI", | |
"doc_count": 175 | |
}, | |
{ | |
"key": "MAR", | |
"doc_count": 172 | |
}, | |
{ | |
"key": "SEN", | |
"doc_count": 162 | |
}, | |
{ | |
"key": "RWA", | |
"doc_count": 156 | |
}, | |
{ | |
"key": "GEO", | |
"doc_count": 151 | |
}, | |
{ | |
"key": "KGZ", | |
"doc_count": 149 | |
}, | |
{ | |
"key": "BWA", | |
"doc_count": 146 | |
}, | |
{ | |
"key": "PHL", | |
"doc_count": 144 | |
}, | |
{ | |
"key": "SDN", | |
"doc_count": 137 | |
}, | |
{ | |
"key": "GLP", | |
"doc_count": 98 | |
}, | |
{ | |
"key": "DOM", | |
"doc_count": 93 | |
}, | |
{ | |
"key": "ALB", | |
"doc_count": 90 | |
}, | |
{ | |
"key": "MNE", | |
"doc_count": 88 | |
}, | |
{ | |
"key": "ARM", | |
"doc_count": 83 | |
}, | |
{ | |
"key": "DNK", | |
"doc_count": 80 | |
}, | |
{ | |
"key": "UZB", | |
"doc_count": 69 | |
}, | |
{ | |
"key": "NZL", | |
"doc_count": 56 | |
}, | |
{ | |
"key": "LBN", | |
"doc_count": 52 | |
}, | |
{ | |
"key": "TUN", | |
"doc_count": 28 | |
}, | |
{ | |
"key": "GHA", | |
"doc_count": 27 | |
}, | |
{ | |
"key": "ZWE", | |
"doc_count": 24 | |
}, | |
{ | |
"key": "DZA", | |
"doc_count": 23 | |
}, | |
{ | |
"key": "JEY", | |
"doc_count": 18 | |
}, | |
{ | |
"key": "TWN", | |
"doc_count": 12 | |
}, | |
{ | |
"key": "GRD", | |
"doc_count": 7 | |
} | |
] | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment