2f:T718,getScales = function(g, settings) { // Settings defaults settings = settings || {}; settings.canvasOversampling = settings.canvasOversampling || 2; settings.canvasWidth = settings.canvasWidth || 500; settings.canvasHeight = settings.canvasHeight || 500; settings.canvasMargin = (settings.canvasMargin!==undefined) ? settings.canvasMargin : 24 * settings.canvasOversampling; settings.nodeSize = settings.nodeSize || 0.5 * settings.canvasOversampling; /// Scale node coordinates // Compute domain and range for X and Y axes var xDomain = d3.extent( g.nodes().map(nid => g.getNodeAttribute(nid, "x")) ); var xRange = [0 + settings.nodeSize + settings.canvasMargin, settings.canvasWidth * settings.canvasOversampling - settings.nodeSize - settings.canvasMargin]; var yDomain = d3.extent( g.nodes().map(nid => g.getNodeAttribute(nid, "y")) ); var yRange = [0 + settings.nodeSize + settings.canvasMargin, settings.canvasHeight * settings.canvasOversampling - settings.nodeSize - settings.canvasMargin]; // Compare the ratios (range / domain) if ((xRange[1]-xRange[0])/(xDomain[1]-xDomain[0])>(yRange[1]-yRange[0])/(yDomain[1]-yDomain[0])) { // The X axis is more stretched: we reduce the range const xMiddle = (xRange[0]+xRange[1]) / 2; const newRange = yRange[1] - yRange[0]; xRange = [xMiddle - newRange/2, xMiddle + newRange/2]; } else { // The Y axis is more stretched: we reduce the range const yMiddle = (yRange[0]+yRange[1]) / 2; const newRange = xRange[1] - xRange[0]; yRange = [yMiddle - newRange/2, yMiddle + newRange/2]; } // Flip Y axis yRange.reverse(); // Build scales var x = d3.scaleLinear() .domain(xDomain) .range(xRange); var y = d3.scaleLinear() .domain(yDomain) .range(yRange); return {x, y} }30:T7f4,{ // Copy the graph to keep the original untouched const g = graph.copy(); // Settings let settings = {}; settings.canvasOversampling = 2; settings.canvasWidth = 600; settings.canvasHeight = 600; settings.canvasMargin = 32 * settings.canvasOversampling; settings.nodeSize = 0.4 * settings.canvasOversampling; settings.nodeColor = "#303040"; settings.densityBandwidth = 16 * settings.canvasOversampling; settings.densityThresholds = 8; settings.densityContourColor = "#AABBFF"; settings.densityContourThickness = 1.5 * settings.canvasOversampling; // Create canvas const canvas = document.createElement('canvas'); canvas.width = settings.canvasWidth*settings.canvasOversampling; canvas.height = settings.canvasHeight*settings.canvasOversampling; canvas.style.width = settings.canvasWidth + "px"; canvas.style.height = settings.canvasHeight + "px"; const ctx = canvas.getContext('2d'); // Get the axes scales (x and y) const {x, y} = getScales(g, settings); /// Compute and draw density contours // Compute let contours = d3.contourDensity() .x(d => x(d.x)) .y(d => y(d.y)) .size([canvas.width, canvas.height]) .cellSize(settings.canvasWidth/256) .bandwidth(settings.densityBandwidth) .thresholds(settings.densityThresholds) (g.nodes().map(nid => g.getNodeAttributes(nid))); // Draw density contours ctx.strokeStyle = settings.densityContourColor; ctx.lineWidth = settings.densityContourThickness; const generator = d3.geoPath().context(ctx); contours.forEach(multipolygon => { ctx.beginPath(); generator(multipolygon) ctx.stroke(); }); /// Draw nodes // Iterate over the nodes g.nodes().forEach(nid => { // Get the node object (has coordinates and attributes) let n = g.getNodeAttributes(nid); // Set style ctx.fillStyle = settings.nodeColor; // Draw circle ctx.beginPath(); ctx.arc(x(n.x), y(n.y), settings.nodeSize * n.size, 0, 2 * Math.PI, false); ctx.fill(); }); return canvas; }31:T806,{ // Copy the graph to keep the original untouched const g = graph.copy(); // Settings let settings = {}; settings.canvasOversampling = 2; settings.canvasWidth = 600; settings.canvasHeight = 600; settings.canvasMargin = 32 * settings.canvasOversampling; settings.nodeSize = 0.4 * settings.canvasOversampling; settings.nodeColor = "#303040"; settings.densityBandwidth = 16 * settings.canvasOversampling; settings.densityThresholds = 8; // Create canvas const canvas = document.createElement('canvas'); canvas.width = settings.canvasWidth*settings.canvasOversampling; canvas.height = settings.canvasHeight*settings.canvasOversampling; canvas.style.width = settings.canvasWidth + "px"; canvas.style.height = settings.canvasHeight + "px"; const ctx = canvas.getContext('2d'); // Get the axes scales (x and y) const {x, y} = getScales(g, settings); /// Compute and draw density contours // Compute let contours = d3.contourDensity() .x(d => x(d.x)) .y(d => y(d.y)) .size([canvas.width, canvas.height]) .cellSize(settings.canvasWidth/256) .bandwidth(settings.densityBandwidth) .thresholds(settings.densityThresholds) (g.nodes().map(nid => g.getNodeAttributes(nid))); // Color scale const maxValue = d3.max(contours.map(contour => contour.value)); var colorScale = d3.scaleLinear() .domain([0, maxValue]) .range(["#FFFFFF", "#445588"]) // Draw density contours const generator = d3.geoPath().context(ctx); contours.forEach(multipolygon => { ctx.fillStyle = colorScale(multipolygon.value); ctx.beginPath(); generator(multipolygon) ctx.fill(); }); /// Draw nodes // Iterate over the nodes g.nodes().forEach(nid => { // Get the node object (has coordinates and attributes) let n = g.getNodeAttributes(nid); // Set style ctx.fillStyle = settings.nodeColor; // Draw circle ctx.beginPath(); ctx.arc(x(n.x), y(n.y), settings.nodeSize * n.size, 0, 2 * Math.PI, false); ctx.fill(); }); return canvas; }32:T702,{ // Copy the graph to keep the original untouched const g = graph.copy(); // Settings let settings = {}; settings.canvasOversampling = 2; settings.canvasWidth = 600; settings.canvasHeight = 600; settings.canvasMargin = 32 * settings.canvasOversampling; settings.nodeSize = 0.4 * settings.canvasOversampling; settings.nodeColor = "#303040"; settings.densityBandwidth = 16 * settings.canvasOversampling; settings.densityThresholds = 100; // Create canvas const canvas = document.createElement('canvas'); canvas.width = settings.canvasWidth*settings.canvasOversampling; canvas.height = settings.canvasHeight*settings.canvasOversampling; canvas.style.width = settings.canvasWidth + "px"; canvas.style.height = settings.canvasHeight + "px"; const ctx = canvas.getContext('2d'); // Paint it black 🎵 ctx.fillStyle = "#000000"; ctx.fillRect(0, 0, canvas.width, canvas.height); // Get the axes scales (x and y) const {x, y} = getScales(g, settings); /// Compute and draw density contours // Compute let contours = d3.contourDensity() .x(d => x(d.x)) .y(d => y(d.y)) .size([canvas.width, canvas.height]) .cellSize(settings.canvasWidth/256) .bandwidth(settings.densityBandwidth) .thresholds(settings.densityThresholds) (g.nodes().map(nid => g.getNodeAttributes(nid))); // Color scale const maxValue = d3.max(contours.map(contour => contour.value)); var colorScale = d3.scaleLinear() .domain([0, maxValue]) .range(["#000000", "#FFFFFF"]) // Draw density contours const generator = d3.geoPath().context(ctx); contours.forEach(multipolygon => { ctx.fillStyle = colorScale(multipolygon.value); ctx.beginPath(); generator(multipolygon) ctx.fill(); }); return canvas; }33:T59b,{ // Copy the graph to keep the original untouched const g = graph.copy(); // Settings let settings = {}; settings.canvasOversampling = 2; settings.canvasWidth = 600; settings.canvasHeight = 600; settings.canvasMargin = 32 * settings.canvasOversampling; settings.nodeSize = 0.4 * settings.canvasOversampling; settings.densityBandwidth = 16 * settings.canvasOversampling; settings.densityThresholds = 100; // Create canvas const canvas = document.createElement('canvas'); canvas.width = settings.canvasWidth*settings.canvasOversampling; canvas.height = settings.canvasHeight*settings.canvasOversampling; canvas.style.width = settings.canvasWidth + "px"; canvas.style.height = settings.canvasHeight + "px"; const ctx = canvas.getContext('2d'); // Paint it black 🎵 ctx.fillStyle = "#000000"; ctx.fillRect(0, 0, canvas.width, canvas.height); // Get the axes scales (x and y) const {x, y} = getScales(g, settings); ctx.fillStyle = "#000000"; ctx.fillRect(0, 0, canvas.width, canvas.height); /// Draw nodes // Iterate over the nodes g.nodes().forEach(nid => { // Get the node object (has coordinates and attributes) let n = g.getNodeAttributes(nid); // Set style ctx.fillStyle = "#FFFFFF"; // Draw circle ctx.beginPath(); ctx.arc(x(n.x), y(n.y), settings.nodeSize * n.size, 0, 2 * Math.PI, false); ctx.fill(); }); return canvas; }34:T64b,{ // Copy the graph to keep the original untouched const g = graph.copy(); // Settings let settings = {}; settings.canvasOversampling = 2; settings.canvasWidth = 600; settings.canvasHeight = 600; settings.canvasMargin = 32 * settings.canvasOversampling; settings.nodeSize = 0.4 * settings.canvasOversampling; settings.densityBandwidth = 16 * settings.canvasOversampling; settings.densityThresholds = 100; // Create canvas const canvas = document.createElement('canvas'); canvas.width = settings.canvasWidth*settings.canvasOversampling; canvas.height = settings.canvasHeight*settings.canvasOversampling; canvas.style.width = settings.canvasWidth + "px"; canvas.style.height = settings.canvasHeight + "px"; const ctx = canvas.getContext('2d'); // Paint it black 🎵 ctx.fillStyle = "#000000"; ctx.fillRect(0, 0, canvas.width, canvas.height); // Get the axes scales (x and y) const {x, y} = getScales(g, settings); ctx.fillStyle = "#000000"; ctx.fillRect(0, 0, canvas.width, canvas.height); /// Draw nodes // Iterate over the nodes g.nodes().forEach(nid => { // Get the node object (has coordinates and attributes) let n = g.getNodeAttributes(nid); // Set style ctx.fillStyle = "#FFFFFF"; // Draw circle ctx.beginPath(); ctx.arc(x(n.x), y(n.y), settings.nodeSize * n.size, 0, 2 * Math.PI, false); ctx.fill(); }); // Blur canvas const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); d3.blurImage(imgData, settings.densityBandwidth); ctx.putImageData(imgData, 0, 0); return canvas; }35:T8ea,{ // Copy the graph to keep the original untouched const g = graph.copy(); // Settings let settings = {}; settings.canvasOversampling = 2; settings.canvasWidth = 600; settings.canvasHeight = 600; settings.canvasMargin = 32 * settings.canvasOversampling; settings.nodeSize = 0.4 * settings.canvasOversampling; settings.densityBandwidth = 16 * settings.canvasOversampling; settings.densityThresholds = 100; // Create canvas const canvas = document.createElement('canvas'); canvas.width = settings.canvasWidth*settings.canvasOversampling; canvas.height = settings.canvasHeight*settings.canvasOversampling; canvas.style.width = settings.canvasWidth + "px"; canvas.style.height = settings.canvasHeight + "px"; const ctx = canvas.getContext('2d'); // Paint it black 🎵 ctx.fillStyle = "#000000"; ctx.fillRect(0, 0, canvas.width, canvas.height); // Get the axes scales (x and y) const {x, y} = getScales(g, settings); /// Draw nodes // Iterate over the nodes g.nodes().forEach(nid => { // Get the node object (has coordinates and attributes) let n = g.getNodeAttributes(nid); // Set style ctx.fillStyle = "#FFFFFF"; // Draw circle ctx.beginPath(); ctx.arc(x(n.x), y(n.y), settings.nodeSize * n.size, 0, 2 * Math.PI, false); ctx.fill(); }); // Blur canvas const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); d3.blurImage(imgData, settings.densityBandwidth); /// Recalibrate lightness // (we do it directly on image data) // Get max lightness let maxLightness = 0; for (let i=0; i { const n = g.getNodeAttributes(nid); return [x(n.x), -y(n.y)]; }); // Compute KDE let density2d = kde.density2d(points, { bandwidth: settings.densityBandwidth, extent: [[0, canvas.width], [-canvas.height, 0]], bins: [canvas.width, canvas.height], }); // Render KDE as a heatmap var colorScale = d3.scaleLinear() .domain([0, 1]) .range(["#000000", "#FFFFFF"]) density2d.heatmap({canvas:canvas, color: colorScale}); return canvas }37:Td8c,{ // Copy the graph to keep the original untouched const g = graph.copy(); // Settings let settings = {}; settings.canvasOversampling = 2; settings.canvasWidth = 600; settings.canvasHeight = 600; settings.canvasMargin = 32 * settings.canvasOversampling; settings.nodeSize = 0.4 * settings.canvasOversampling; settings.densityBandwidth = 16 * settings.canvasOversampling; settings.hillshadingSunAzimuth = Math.PI * 0.6; // angle in radians settings.hillshadingSunElevation = Math.PI * 0.3; // angle in radians settings.elevation_strength = 1; // Create canvas let canvas = document.createElement('canvas'); canvas.width = settings.canvasWidth*settings.canvasOversampling; canvas.height = settings.canvasHeight*settings.canvasOversampling; canvas.style.width = settings.canvasWidth + "px"; canvas.style.height = settings.canvasHeight + "px"; const ctx = canvas.getContext('2d'); // Get the axes scales (x and y) const {x, y} = getScales(g, settings); // Gather data points for KDE const points = g.nodes().map(nid => { const n = g.getNodeAttributes(nid); return [x(n.x), -y(n.y)]; }); // Compute KDE let density2d = kde.density2d(points, { bandwidth: settings.densityBandwidth, extent: [[0, canvas.width], [-canvas.height, 0]], bins: [canvas.width, canvas.height], }); // Render KDE as a heatmap var colorScale = d3.scaleLinear() .domain([0, 1]) .range(["#000000", "#FFFFFF"]) density2d.heatmap({canvas:canvas, color: colorScale}); // Draw hillshade const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); const heatmapPixelMap = imgData.data.slice(0); for (let i=0; i { const n = g.getNodeAttributes(nid); return [x(n.x), -y(n.y)]; }); // Compute KDE let density2d = kde.density2d(points, { bandwidth: settings.densityBandwidth, extent: [[0, canvas.width], [-canvas.height, 0]], bins: [canvas.width, canvas.height], }); // Render KDE as a heatmap const colorScale = d3.scaleLinear() .domain([0, 1]) .range(["#000000", "#FFFFFF"]) density2d.heatmap({canvas:canvas, color: colorScale}); // Draw hillshade const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); const heatmapPixelMap = imgData.data.slice(0); for (let i=0; i { const n = g.getNodeAttributes(nid); return [x(n.x), -y(n.y)]; }); // Compute KDE let density2d = kde.density2d(points, { bandwidth: settings.densityBandwidth, extent: [[0, canvas.width], [-canvas.height, 0]], bins: [canvas.width, canvas.height], }); // Render KDE as a heatmap const colorScale = d3.scaleLinear() .domain([0, 1]) .range(["#000000", "#FFFFFF"]) density2d.heatmap({canvas:canvas, color: colorScale}); // Draw hillshade const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); const heatmapPixelMap = imgData.data.slice(0); for (let i=0; i { // Get the node object (has coordinates and attributes) let n = g.getNodeAttributes(nid); // Set style ctx.fillStyle = settings.nodeColor; // Draw circle ctx.beginPath(); ctx.arc(x(n.x), y(n.y), settings.nodeSize * n.size, 0, 2 * Math.PI, false); ctx.fill(); }); return canvas // Hillshading methods function getSlope(dzdx, dzdy, z=.2){ return Math.atan(z * Math.sqrt(dzdx ** 2 + dzdy ** 2)); // the z factor controls how exaggerated the peaks look } function getAspect(dzdx, dzdy){ return Math.atan2(-dzdy, -dzdx); } function getReflectance(aspect, slope, sunAzimuth, sunElevation) { return Math.cos(Math.PI - aspect - sunAzimuth) * Math.sin(slope) * Math.sin(Math.PI * .5 - sunElevation) + Math.cos(slope) * Math.cos(Math.PI * .5 - sunElevation); } }3a:T158f,{ // Copy the graph to keep the original untouched const g = graph.copy(); // Settings let settings = {}; settings.canvasOversampling = 2; settings.canvasWidth = 600; settings.canvasHeight = 600; settings.canvasMargin = 32 * settings.canvasOversampling; settings.nodeSize = 0.4 * settings.canvasOversampling; settings.nodeColor = "#303040"; settings.densityBandwidth = 16 * settings.canvasOversampling; settings.hillshadingSunAzimuth = Math.PI * 0.6; // angle in radians settings.hillshadingSunElevation = Math.PI * 0.3; // angle in radians settings.elevation_strength = 1; settings.hillshadingGamma = 3; settings.hillshadingBlack = 0.6; // Create canvas let canvas = document.createElement('canvas'); canvas.width = settings.canvasWidth*settings.canvasOversampling; canvas.height = settings.canvasHeight*settings.canvasOversampling; canvas.style.width = settings.canvasWidth + "px"; canvas.style.height = settings.canvasHeight + "px"; const ctx = canvas.getContext('2d'); // Get the axes scales (x and y) const {x, y} = getScales(g, settings); // Lightness scale const lightnessScale = d3.scalePow() .exponent(1/settings.hillshadingGamma) .domain([1, 0]) .range([1, settings.hillshadingBlack]); // Hypsometric color scale const hypsoScale = d3.scaleLinear() .domain([0, 0.15, 0.2, 1]) .range(['#b4cbf4', '#cbe6ec', '#ebeeea', '#fefefc']) .interpolate(d3.interpolateRgb); // Gather data points for KDE const points = g.nodes().map(nid => { const n = g.getNodeAttributes(nid); return [x(n.x), -y(n.y)]; }); // Compute KDE let density2d = kde.density2d(points, { bandwidth: settings.densityBandwidth, extent: [[0, canvas.width], [-canvas.height, 0]], bins: [canvas.width, canvas.height], }); // Render KDE as a heatmap const colorScale = d3.scaleLinear() .domain([0, 1]) .range(["#000000", "#FFFFFF"]) density2d.heatmap({canvas:canvas, color: colorScale}); const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); // Paint the hypsometric color in a separate canvas let canvas2 = document.createElement('canvas'); canvas2.width = canvas.width; canvas2.height = canvas.height; let ctx2 = canvas2.getContext('2d'); const imgData2 = ctx2.getImageData(0, 0, canvas2.width, canvas2.height); for (let i=0; i { // Get the node object (has coordinates and attributes) let n = g.getNodeAttributes(nid); // Set style ctx.fillStyle = settings.nodeColor; // Draw circle ctx.beginPath(); ctx.arc(x(n.x), y(n.y), settings.nodeSize * n.size, 0, 2 * Math.PI, false); ctx.fill(); }); return canvas // Hillshading methods function getSlope(dzdx, dzdy, z=.2){ return Math.atan(z * Math.sqrt(dzdx ** 2 + dzdy ** 2)); // the z factor controls how exaggerated the peaks look } function getAspect(dzdx, dzdy){ return Math.atan2(-dzdy, -dzdx); } function getReflectance(aspect, slope, sunAzimuth, sunElevation) { return Math.cos(Math.PI - aspect - sunAzimuth) * Math.sin(slope) * Math.sin(Math.PI * .5 - sunElevation) + Math.cos(slope) * Math.cos(Math.PI * .5 - sunElevation); } }3b:[{"id":"8b4bf2da21b6240eadf97010b9e203c0572ee1d6dacee0ef86692c25964277aac96104051c88799b23597b07f19a0571a37df78394dfbe4f510146c5c58c8d73","href":"https://static.observableusercontent.com/files/8b4bf2da21b6240eadf97010b9e203c0572ee1d6dacee0ef86692c25964277aac96104051c88799b23597b07f19a0571a37df78394dfbe4f510146c5c58c8d73","name":"arctic.gexf","type":"application/xml","lastModified":1669900093695.603,"size":989677}] 2d:{"title":"Highlighting node densities with kernel density estimation in a network map","cells":[{"id":0,"value":"# Highlighting node densities with kernel density estimation in a network map\n\nThis is a follow-up to [this notebook](https://observablehq.com/d/667ea61799718c0c) where I render a network in **canvas** with Graphology and D3. We use canvas over SVG because networks often have so many edges (and sometimes nodes) that SVG is too slow. But in this specific case, there is also a direct benefit: we will use heatmaps and hillshading techniques that are inherently designed for pixel-based images.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"## Setup\nLoad D3, Graphology and its add-ons, the network file (attached to this notebook), and parse it.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"// Load Graphology.\n// It is called \"Graph\" because it is the constructor of the Graph class.\nGraph = require('graphology@0.25.1/dist/graphology.umd.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"// Load Graphology Library (layout algorithms, parser, etc.)\nGraphologyLibrary = require('graphology-library@0.7.1/dist/graphology-library.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"// Load the network as XML into the variable \"arctic\"\narctic = FileAttachment(\"arctic.gexf\").xml()","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"// Parse the XML file.\n// We need the parser from Graphology Library, the Graph constructor,\n// and of course the file (\"arctic\").\ngraph = GraphologyLibrary.gexf.parse(Graph, arctic)","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"## Scaler\n\nAs it is reused, I extract the code that computes the network scales. It essentially comes from the [previous notebook](https://observablehq.com/d/667ea61799718c0c), I just added margins.","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"## Visualize node density with D3's density contour\nD3 has a way to draw density contours directly. This is often used with scatter plots, and we can similarly use it for a network map.","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"Pros:\n* Easy to set up, as it is basically built in D3.\n* You can set the bandwidth (the \"smoothness\" of the heatmap) and the number of thresholds.\n* Efficient.\n\nCons:\n* It adds business to an already busy visualization, as network maps often are.\n* In dense areas, the lines are not easy to read.","pinned":false,"hidden":false,"mode":"md"},{"id":152,"value":"## D3's density contour in the style of a heatmap\nWe can also paint the contours directly. Same underlying technique and settings.","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"Pros:\n* As easy, efficient and configurable as before.\n* Less busy than just the contours.\n* Intuitive enough, as darker shade naturally evoke density.\n\nCons:\n* The darker shades conflict with the nodes (both are dark).\n* Redundancy: the nodes and the density show the same thing.\n\nThis technique is certainly usable, and it is very easy to set up. The main issue I have with it is that it is so intrusive. It makes it difficult to integrate the heat map with the other elements (edges, labels...). This is why I have been looking for something that could highlight the densities without being too busy. That is why I prefer hillshading.","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"## Repurpose D3's density contour to get just a heat map\nI assume that D3's density contour has been designed for SVG, because it does not expose the underlying computations necessary to render a heatmap. It exposes the (multi-)polygons necessary to draw the contours. But we can use many thresholds and draw these polygons to get a smooth heatmap. Check it out.","pinned":false,"hidden":false,"mode":"md"},{"id":186,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"Pros:\n* As easy, efficient and configurable as before.\n\nCons:\n* Not super efficient, as we unnecessarily compute so many contours. Indeed, we just want the pixels.\n* It's just a heat map (but we will see what to do with it).","pinned":false,"hidden":false,"mode":"md"},{"id":200,"value":"## Tinker a kernel density estimation by blurring the nodes\nThe technique used by D3 to compute the contour is known as [kernel density estimation (KDE)](https://en.wikipedia.org/wiki/Kernel_density_estimation). It is not a highly sophisticated technique. You just have to stack a series of normal distributions centered on each nodes. And even if the distribution is just an approximation, the result will basically be the same (check [this video](https://www.youtube.com/watch?v=x5zLaWT5KPs) to visualize the argument).\n\nWe can basically draw the nodes and blur the image to get a similar result. The strength of the blur then acts as the bandwidth. You can basically do the same in Gimp. It's not even that weird, as you just do the same steps manually. The only real drawback is that if the nodes actually overlap, some information will be lost.","pinned":false,"hidden":false,"mode":"md"},{"id":211,"value":"### 1. Draw the nodes:","pinned":false,"hidden":false,"mode":"md"},{"id":205,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"### 2. Blur it all:","pinned":false,"hidden":false,"mode":"md"},{"id":216,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"### 3. Recalibrate lightness:","pinned":false,"hidden":false,"mode":"md"},{"id":223,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"It's basically the same thing as D3's contour computation. Isn't it amazing?\n\nPros:\n* Pretty efficient and easy to understand.\n* Basically the same result if nodes do not overlap.\n* As configurable.\n\nCons:\n* Fails in case of node overlap, which is sometimes a big deal\n* Several steps necessary. It's less straightforward.","pinned":false,"hidden":false,"mode":"md"},{"id":195,"value":"## Get a heat map with fast KDE\nJeffrey Heer has released a [library](https://github.com/uwdata/fast-kde) does just what we want (also check [this notebook](https://observablehq.com/@uwdata/fast-kde)).","pinned":false,"hidden":false,"mode":"md"},{"id":197,"value":"kde = require('fast-kde')","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"Pros:\n* Super efficient, yet easy to set up.\n* As configurable.\n\nCons:\n* One more library to load but you can live with that!\n\nI will stick to that solution, but you do you.","pinned":false,"hidden":false,"mode":"md"},{"id":284,"value":"## Heatmap to hillshading\n\nI simply reuse the code from [Sahil Chinoy's amazing notebook about hillshading](https://observablehq.com/@sahilchinoy/hillshader) using the heatmap from Fast KDE. Let us see what we get.","pinned":false,"hidden":false,"mode":"md"},{"id":287,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"Problems:\n* Aliasing in the heat map create steps in the hillshading.\n* The background is not white anymore.\n\nSolutions:\n* Blur the result. A bit dirty, but the simplest solution.\n* Recalibrate lightness using D3 scales.","pinned":false,"hidden":false,"mode":"md"},{"id":330,"value":"### Fixed hillshading:","pinned":false,"hidden":false,"mode":"md"},{"id":332,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"## Highlighting node density with hillshading","pinned":false,"hidden":false,"mode":"md"},{"id":375,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"Pros:\n* The hillshading is not intrusive.\n* It gives an intuitive idea of the heat map.\n\nCons:\n* The information is not as precise as the full heat map and/or contours.\n* Complicated to set up.","pinned":false,"hidden":false,"mode":"md"},{"id":416,"value":"## Hypsometric gradient\nWe can push the principle one step further by applying a gradient for the height. Functionally this is just a heatmap, even though it is called \"hypsometric gradient\" in geography. However, we will retain the spirit of the hillshading: highlighting without getting intrusive. We can do this fairly easily with a color scale.","pinned":false,"hidden":false,"mode":"md"},{"id":418,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"It is possible to push the integration of hillshading and hypsometric gradient further with edges, labels and more, but this requires compositing different canvas in advanced ways, so we will stop there for the moment.\n\nCheck [the next notebook](https://observablehq.com/d/7d19c2d05caf9fb2) to tune the key settings with sliders.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W3b","stdlib":"1","titling":"auto"}