Skip to content

Instantly share code, notes, and snippets.

@ChumaA
Last active February 19, 2024 12:31
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ChumaA/385a269db46ae56444772b62f1ae82bf to your computer and use it in GitHub Desktop.
World Map with heat color Example
<!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>
{
"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
}
]
}
}
}
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment