2b:null 2c:["$","title",null,{"children":"Hillshading for networks: settings | Mathieu Jacomy | Observable"}] 31:T15dc,{ // Copy the graph to keep the original untouched const g = graph.copy(); // Settings let settings = {}; settings.canvasOversampling = 1; settings.canvasWidth = 600; settings.canvasHeight = 600; settings.canvasMargin = 32 * settings.canvasOversampling; settings.nodeSize = 0.4 * settings.canvasOversampling; settings.nodeColor = "#303040"; settings.densityBandwidth = densityBandwidth * settings.canvasOversampling; settings.hillshadingSunAzimuth = hillshadingSunAzimuth; // angle in radians settings.hillshadingSunElevation = hillshadingSunElevation; // angle in radians settings.elevation_strength = elevationStrength; settings.hillshadingGamma = hillshadingGamma; settings.hillshadingBlack = hillshadingBlack; // 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); } } 32: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} }33:[{"id":"8b4bf2da21b6240eadf97010b9e203c0572ee1d6dacee0ef86692c25964277aac96104051c88799b23597b07f19a0571a37df78394dfbe4f510146c5c58c8d73","href":"https://static.observableusercontent.com/files/8b4bf2da21b6240eadf97010b9e203c0572ee1d6dacee0ef86692c25964277aac96104051c88799b23597b07f19a0571a37df78394dfbe4f510146c5c58c8d73","name":"arctic.gexf","type":"application/xml","lastModified":1669919519010.787,"size":989677}] 2f:{"id":"7d19c2d05caf9fb2","slug":null,"title":"Hillshading for networks: settings","thumbnail":"d1579a308890ad54b282ebc3a18e738897fdf1200e61b8a8c137a2ef2dd41e99","access_level":"public","create_time":"$D2022-12-01T18:28:06.071Z","update_time":"$D2022-12-01T18:45:31.058Z","view_time":null,"first_public_time":"$D2022-12-01T18:28:06.071Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"314a0a5985c09d6c","login":"jacomyma","name":"Mathieu Jacomy","avatar_url":"https://avatars-next.observableusercontent.com/4496a2bc190392af306e4fcc2cc12dec9fe2acc458657e9bb35aecbeb5322d71","tier":"starter_2024"},"version":79,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5877bce6260ce3ea","login":"jacomyma","name":"Mathieu Jacomy","avatar_url":"https://avatars-next.observableusercontent.com/4496a2bc190392af306e4fcc2cc12dec9fe2acc458657e9bb35aecbeb5322d71","tier":null}],"members":[{"type":"individual","id":"5877bce6260ce3ea","login":"jacomyma","name":"Mathieu Jacomy","avatar_url":"https://avatars-next.observableusercontent.com/4496a2bc190392af306e4fcc2cc12dec9fe2acc458657e9bb35aecbeb5322d71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"f0e0fb874785b923","slug":"render-networks-with-graphology","title":"Render networks with Graphology","owner":{"id":"314a0a5985c09d6c","login":"jacomyma","name":"Mathieu Jacomy"}},"type":"notebook","body":{"title":"Hillshading for networks: settings","cells":[{"id":0,"value":"# Hillshading for networks: settings\nTinker with the settings of hillshading for network maps to see how they impact the rendering. The code comes from the [precedent notebook in the series](https://observablehq.com/d/a8a246fd4594a0b5).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"viewof densityBandwidth = Inputs.range([0, 100], {step: 0.1, value: 16, label: 'Density bandwidth (smoothness)'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof hillshadingSunAzimuth = Inputs.range([0, 2*Math.PI], {step: 0.01, value: 1.8, label: 'Sun Azimuth (radians)'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"viewof hillshadingSunElevation = Inputs.range([0, 2*Math.PI], {step: 0.01, value: 0.9, label: 'Sun Elevation (radians)'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof elevationStrength = Inputs.range([0, 25], {step: 0.1, value: 1, label: 'Elevation strength'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viewof hillshadingGamma = Inputs.range([0.1, 10], {step: 0.1, value: 3, label: 'Gamma (shade lightness)'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"viewof hillshadingBlack = Inputs.range([0.01, 1], {step: 0.01, value: 0.6, label: 'Shadow lightness'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"

\n# Appendix\n(the stuff we need to load)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// Load Graphology Library (layout algorithms, parser, etc.)\nGraphologyLibrary = require('graphology-library@0.7.1/dist/graphology-library.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"// Load the network as XML into the variable \"arctic\"\narctic = FileAttachment(\"arctic.gexf\").xml()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"kde = require('fast-kde')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"