The 2015 Fall Foliage Map is the ultimate visual planning guide to the annual progressive changing of the leaves.
Simple and elegant.
Tag Archives: heatmap
PerfMap: front-end performance heatmap
A bookmarklet to create a front-end performance heatmap of resources loaded in the browser using the Resource Timing API. Wait for a page to fully load and then click the bookmarklet to overlay a performance heatmap. A browser with support for the Resource Timing API is required.
heatmap.js
var heatmap = h337.create({
container: domElement
});
heatmap.setData({
max: 5,
data: [{ x: 10, y: 15, value: 5}, ...]
});A Google Maps plugin is also available
heatmap.js – Dynamic Heatmaps for the Web →
Gmaps Heatmap Layer Plugin →
Métropolitain
Metropolitain is a visual and interactive experiment on the Parisian underground network
Métropolitain →
Métropolitain: a fresh outlook on Paris’ metro system →
WebGL Heatmap
webgl-heatmap.jsis a JavaScript library for high performance heatmap display.
High Performance JS heatmaps + Demo →
WebGL Heatmap Source (GitHub) →
Google Maps HeatMap Layer
Some time last week, Google has (finally) released a HeatMap Layer for Google Maps.
The Heatmap Layer provides client side rendering of heatmaps. A heatmap is a visualization used to depict intensity of data at geographical points. When the Heatmap Layer is enabled, a colored overlay will appear on top of the map. By default, areas of higher intensity will be colored red, and areas of lower intensity will appear green.
Supports custom color themes, and allows to have weighted points. Usage is really simple: just pass in an array of LatLngs and you’re done
/* Data points defined as an array of LatLng objects */
var heatmapData = [
new google.maps.LatLng(37.782, -122.447),
new google.maps.LatLng(37.782, -122.445),
new google.maps.LatLng(37.782, -122.443),
new google.maps.LatLng(37.782, -122.441),
new google.maps.LatLng(37.782, -122.439),
new google.maps.LatLng(37.782, -122.437),
new google.maps.LatLng(37.782, -122.435),
new google.maps.LatLng(37.785, -122.447),
new google.maps.LatLng(37.785, -122.445),
new google.maps.LatLng(37.785, -122.443),
new google.maps.LatLng(37.785, -122.441),
new google.maps.LatLng(37.785, -122.439),
new google.maps.LatLng(37.785, -122.437),
new google.maps.LatLng(37.785, -122.435)
];
var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: sanFrancisco,
zoom: 13,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData
});
heatmap.setMap(map);