32:T21b1,chart = { const svg = d3.create("svg") .attr("viewBox", svgViewBoxExtent); const {nodes, links} = sankey(data); const node = svg.append("g") //"g" is short for "grouping", http://tutorials.jenkov.com/svg/g-element.html .attr("stroke", "#000") //the color of frame for the node-columns .selectAll("rect") .data(nodes) .join("rect") // rectangle for the node-columns .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.name)) //inside color for the node-columns .append("title") .text(d => `${d.name}\n${format(d.value)}`); //append text for nodes const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); if (edgeColor === "path") { const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.name)); } link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => edgeColor === "none" ? "#aaa" : edgeColor === "path" ? d.uid : edgeColor === "input" ? color(d.source.name) : color(d.target.name)) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); //append text for links //labels for nodes if (options.includes('sankey-nodelabel')) { svg.append("g") .style("font", "10px sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < figureDimensions.width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < figureDimensions.width / 2 ? "start" : "end") .text(d => d.name); } /* //call xAxis svg.append("g") .call(xAxis); //call yAxis svg.append("g") .call(yAxis); */ //x axis (label, tick, ticklabel) if (options.includes('x - label')) { //x-label svg.append("text") .style("font", font) .attr("x", axisLabelLocations.xAxis.x) .attr("y", axisLabelLocations.xAxis.y) .attr("dy", -fontInfos.size/2) .style("alignment-baseline","middle") .style("text-anchor", "middle") .text(xlabel); } if (options.includes('x - tick') && options.includes('x - ticklabel')) { //with x-tick and x-ticklabel svg.append("g") .attr("transform", `translate(0,${figureDimensions.height - paddingDimensions.bottom})`) .style("font", font) .call(d3.axisBottom(x) .ticks(xtickValues.length) .tickValues(xtickValues) //specified values .tickSizeOuter(0) .tickFormat(d3.format('d'))) //normal digit format .call(g => g.select(".domain").remove()); //spine line }else if (options.includes('x - tick') && !options.includes('x - ticklabel')) { //with x-tick and without x-ticklabel svg.append("g") .attr("transform", `translate(0,${figureDimensions.height - paddingDimensions.bottom})`) .call(d3.axisBottom(x) .ticks(xtickValues.length) .tickValues(xtickValues) .tickSizeOuter(0) .tickFormat('')) //replace by '' .call(g => g.select(".domain").remove()); //spine line }else if (options.includes('x - ticklabel') && !options.includes('x - tick')) { //with x-ticklable and without x-tick svg.append("g") .attr("transform", `translate(0,${figureDimensions.height - paddingDimensions.bottom})`) .style("font", font) .call(d3.axisBottom(x) .tickSize(0) //no ticks .ticks(xtickValues.length) .tickValues(xtickValues) .tickSizeOuter(0) .tickFormat(d3.format('d'))) .call(g => g.select(".domain").remove()); //spine line } //y axis (label, tick, ticklabel) if (options.includes('y - label')) { //y-label svg.append("text") .style("font", font) .attr("transform", "rotate(-90)") .attr("y", axisLabelLocations.yAxis.x) // Axis rotated too, so "y" is horizontal axis and "x" is vertical .attr("x", axisLabelLocations.yAxis.y) .attr("dy", fontInfos.size/2) //`dy` is also for horizontal direction .style("alignment-baseline","middle") .style("text-anchor", "middle") .text(ylabel); } if (options.includes('y - tick') && options.includes('y - ticklabel')) { //with y-tick and y-ticklabel svg.append("g") .attr("transform", `translate(${paddingDimensions.left},0)`) .style("font", font) .call(d3.axisLeft(y) .ticks(ytickValues.length) .tickValues(ytickValues) ) .call(g => g.select(".domain").remove()) //spine line if (options.includes('y - minortick')){ //with y - minortick svg.append("g") .attr("transform", `translate(${paddingDimensions.left},0)`) .call(d3.axisLeft(y) .ticks(ytickValues.length * 2) .tickSize(4) //default ticksize is 6 (major tick) .tickFormat('') //without display ticklabel ) .call(g => g.select(".domain").remove()) //spine line } }else if (options.includes('y - tick') && !options.includes('y - ticklabel')) { //with y-tick and without y-ticklabel svg.append("g") .attr("transform", `translate(${paddingDimensions.left},0)`) .call(d3.axisLeft(y) .ticks(ytickValues.length) .tickValues(ytickValues) .tickFormat('')) //without display ticklabel .call(g => g.select(".domain").remove()) //spine line if (options.includes('y - minortick')){ //with y - minortick svg.append("g") .attr("transform", `translate(${paddingDimensions.left},0)`) .call(d3.axisLeft(y) .ticks(ytickValues.length * 2) .tickSize(4) //default ticksize is 6 (major tick) .tickFormat('') //without display ticklabel ) .call(g => g.select(".domain").remove()) //spine line } }else if (options.includes('y - ticklabel') && !options.includes('y - tick')) { //with y-ticklable and without y-tick svg.append("g") .attr("transform", `translate(${paddingDimensions.left},0)`) .style("font", font) .call(d3.axisLeft(y) .tickSize(0) //no ticks .ticks(ytickValues.length) .tickValues(ytickValues)) .call(g => g.select(".domain").remove()) //spine line } if (options.includes('auxiliary-dots')) { //`...` at left - top svg.append("text") .attr("transform", "rotate(-90)") //Axis rotated, "y" is horizontal axis, "x" vertical .attr("y", axisRanges.xAxisRange[0] + columnDimensions.width/2) .attr("x", 0 - paddingDimensions.top - spot_lt_y * sankeyDimensions.height) .style("text-anchor", "middle") .text("···"); //`...` at left - bottom svg.append("text") .attr("transform", "rotate(-90)") //Axis rotated, "y" is horizontal axis, "x" vertical .attr("y", axisRanges.xAxisRange[0] + columnDimensions.width/2) .attr("x", 0 - paddingDimensions.top - spot_lb_y * sankeyDimensions.height) .style("text-anchor", "middle") .text("···"); //`...` at right - top svg.append("text") .attr("transform", "rotate(-90)") //Axis rotated, "y" is horizontal axis, "x" vertical .attr("y", axisRanges.xAxisRange[1] + columnDimensions.width/2) .attr("x", 0 - paddingDimensions.top - spot_rt_y * sankeyDimensions.height) .style("text-anchor", "middle") .text("···"); //`...` at right - bottom svg.append("text") .attr("transform", "rotate(-90)") //Axis rotated, "y" is horizontal axis, "x" vertical .attr("y", axisRanges.xAxisRange[1] + columnDimensions.width/2) .attr("x", 0 - paddingDimensions.top - spot_rb_y * sankeyDimensions.height) .style("text-anchor", "middle") .text("···"); } return svg.node(); }33:T16d7,//referedimport {coordinates} from @jashkenas/inputs function dimensions(config = {}) { const { value = [], title, description, submit } = Array.isArray(config) ? { value: config } : config; let [maxWidth, aspectRatio, fontSize, paddingTop, paddingBottom, paddingLeft, paddingRight, columnWidth, columnPadding] = value; maxWidth = maxWidth != null ? maxWidth : ""; aspectRatio = aspectRatio != null ? aspectRatio : ""; fontSize = fontSize != null ? fontSize : ""; paddingTop = paddingTop != null ? paddingTop : ""; paddingBottom = paddingBottom != null ? paddingBottom : ""; paddingLeft = paddingLeft != null ? paddingLeft : ""; paddingRight = paddingRight != null ? paddingRight : ""; columnWidth = columnWidth != null ? columnWidth : ""; columnPadding = columnPadding != null ? columnPadding : ""; //= != null ? : ""; const maxWidth_element = html``; const aspectRatio_element = html``; const fontSize_element = html``; const paddingTop_element = html``; const paddingBottom_element = html``; const paddingLeft_element = html``; const paddingRight_element = html``; const columnWidth_element = html``; const columnPadding_element = html``; const form = input({ type: "dimensions", title, description, submit, getValue: () => { const maxWidth = maxWidth_element.valueAsNumber; const aspectRatio = aspectRatio_element.valueAsNumber; const fontSize = fontSize_element.valueAsNumber; const paddingTop = paddingTop_element.valueAsNumber; const paddingBottom = paddingBottom_element.valueAsNumber; const paddingLeft = paddingLeft_element.valueAsNumber; const paddingRight = paddingRight_element.valueAsNumber; const columnWidth = columnWidth_element.valueAsNumber; const columnPadding = columnPadding_element.valueAsNumber; //const = _element.valueAsNumber; return { maxWidth: isNaN(maxWidth) ? null : maxWidth, aspectRatio: isNaN(aspectRatio) ? null : aspectRatio, fontSize: isNaN(fontSize) ? null : fontSize, paddingTop: isNaN(paddingTop) ? null : paddingTop, paddingBottom: isNaN(paddingBottom) ? null : paddingBottom, paddingLeft: isNaN(paddingLeft) ? null : paddingLeft, paddingRight: isNaN(paddingRight) ? null : paddingRight, columnWidth: isNaN(columnWidth) ? null : columnWidth, columnPadding: isNaN(columnPadding) ? null : columnPadding, } }, form: html`

Figure width(in): ${maxWidth_element} Aspect ratio: ${aspectRatio_element}
Font size(pt): ${fontSize_element}

Spacing beteen Sankey edges to Figure edges in times of Font size:

Top: ${paddingTop_element} Bottom: ${paddingBottom_element} Left: ${paddingLeft_element} Right: ${paddingRight_element}

Sankey column dimensions in pixel:

Column width: ${columnWidth_element} Column padding: ${columnPadding_element}

` }); form.output.remove(); return form; }34:T528,//import {checkbox} from "@jashkenas/inputs" function checkbox(config = {}) { let { value: formValue, title, description, submit, disabled, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "checkbox", title, description, submit, getValue: input => { if (input.length) return Array.prototype.filter .call(input, i => i.checked) .map(i => i.value); return input.checked ? input.value : false; }, form: html` ` }); form.output.remove(); return form; }35:T4a0,//import {select} from @jashkenas/inputs function select(config = {}) { let { value: formValue, title, description, disabled, submit, multiple, size, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "object" ? o : { value: o, label: o } ); const form = input({ type: "select", title, description, submit, attributes: { disabled }, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }36:[] 30:{"title":"The Modified Sankey Diagram for LULC Changes","cells":[{"id":0,"value":"md`# The Modified Sankey Diagram for LULC Changes\n\n This chart was developed to visualize and quantify the states and change flows of LULC in the [research article](https://doi.org/10.3390/rs13040580).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"viewof inputText = jashText({value: url_test, submit: \"Submit\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"viewof inputFile = jashFile({\n accept: '.json',\n multiple: true, //there is bug without setting multiple\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"viewof download = saveAs()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1776,"value":"viewof sankeyOptions = inputsGroup(\n [\n [\n select(\n {options: [{value:'input', label:'Color by input'},\n {value:'output', label:'Color by output'},\n {value:'path', label:'Color by input-output'},\n {value:'none', label:'No color'},\n ],\n value: 'path'}),\n select(\n {options:[{value:'left', label:'Left-aligned'},\n {value:'right', label:'Right-aligned'},\n {value:'center', label:'Centered'},\n {value:'justify', label:'Justified'},\n ],\n value: 'justify'}),\n ]\n ]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"viewof options = checkbox({\n title: 'Element checkboxs',\n options: ['x - label', 'x - tick', 'x - ticklabel', 'y - label', 'y - tick', 'y - ticklabel', 'y - minortick', 'sankey-nodelabel', 'auxiliary-dots', {value:'lockSankeyDimensions', label: 'lock Sankey dimensions'}], \n value: ['x - label', 'x - tick', 'x - ticklabel', 'y - label', 'y - tick', 'y - ticklabel', 'lockSankeyDimensions']\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1287,"value":"viewof basicDimensions = dimensions({\n title: 'Basic dimensions',\n value: inits,\n //submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1288,"value":"viewof spot_lt_y = slider({\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.42,\n title: '3 spots - left top y -- relative to height of Sankey'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1294,"value":"viewof spot_lb_y = slider({\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.75,\n title: '3 spots - left bottom y'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1290,"value":"viewof spot_rt_y = slider({\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.44,\n title: '3 spots - right top y'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1292,"value":"viewof spot_rb_y = slider({\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.78,\n title: '3 spots - right bottom y'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1296,"value":"viewof axisTicksDelta = slider({\n min: -1,\n max: 2,\n step: 0.1,\n value: 0.5,\n title: 'Adjust axis tick/label location'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1980,"value":"viewof axisSetting = inputsGroup(\n [\n [\n 'x label:',\n jashText({value: 'Year'}),\n 'y label:',\n jashText({value: 'Class area (% of total)'}),\n ],\n [\n 'x-ticklabel:',\n 'from',\n jashText({value: 1985}),\n 'to',\n jashText({value: 2015}),\n 'step',\n jashText({value: 15}),\n ],\n [\n 'y-ticklabel:',\n 'from',\n jashText({value: 0}),\n 'to',\n jashText({value: 100}),\n 'step',\n jashText({value: 20}),\n ],\n ]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1526,"value":"md`## Auxiliary variables\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1344,"value":"//initials of the basic dimensions\n//figure width, aspect ration, fontsize initialize here.\n//padding dimensions initialize by function initPadding.\n//sankey column width and spacing initialize here.\ninits = [2.3, 0.618, 10].concat(initPadding(options), 10, 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2118,"value":"//base for padding (edge of sankey to edge of figue\n//paddingBase = ({top: 0.3, bottom: -0.5, left:-0.5, right: 0.5})\npaddingBase = ({top: 0.3, bottom: 0.5, left:0.5, right: 0.5})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1264,"value":"//request (temporary) dataAddress and filename by using function dataInfos\ndataAndName = dataInfos(inputText, inputFile)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"dataAddress = dataAndName.url","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"filename = dataAndName.name","pinned":false,"hidden":false,"mode":"ojs"},{"id":1915,"value":"edgeColor = sankeyOptions[0][0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1920,"value":"align = sankeyOptions[0][1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1997,"value":"xlabel = axisSetting[0][1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2057,"value":"xticklabel_from = parseInt(axisSetting[1][2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2062,"value":"xticklabel_to = parseInt(axisSetting[1][4])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2065,"value":"xticklabel_step = parseInt(axisSetting[1][6])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2000,"value":"ylabel = axisSetting[0][3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2072,"value":"yticklabel_from = parseInt(axisSetting[2][2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2075,"value":"yticklabel_to = parseInt(axisSetting[2][4])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2078,"value":"yticklabel_step = parseInt(axisSetting[2][6])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2020,"value":"xtickValues = range(xticklabel_from, xticklabel_to, xticklabel_step)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2046,"value":"ytickValues = range(yticklabel_from, yticklabel_to, yticklabel_step)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"url_test = 'https://raw.githubusercontent.com/longavailable/datarepo02/master/sankey/Z01_1985-2000-2015.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"md`## Data, x/y axis, color and format\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = d3.json(dataAddress) //data from a address","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"x = d3.scaleLinear()\n .domain([xticklabel_from, xticklabel_to])\n .range(axisRanges.xAxisRange)","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"y = d3.scaleLinear()\n .domain([yticklabel_from, yticklabel_to])\n .range(axisRanges.yAxisRange)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"color = {\n const color = d3.scaleOrdinal()\n .range(['#a5a5a5', '#120dff', '#009900', '#c24f44', '#b6ff05']);//5 node-columns\n return name => color(name.replace(/ .*/, \"\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"format = {\n const f = d3.format(\",.0f\"); // append data format\n //return d => `${f(d)} TWh`; // append text = data + unit\n return d => `${f(d)} %`; // append text = data + unit\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"md`## Dimensions setting ( based on inpput)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"//dimensions for the whole figure, left edge to right edge, top to bottom\n//figureDimensions = ({width:975, height:600})\nfigureDimensions = ({\n width:basicDimensions.maxWidth*96,\n height:Math.round(basicDimensions.maxWidth*96*basicDimensions.aspectRatio)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"fontInfos = ({\n size: Math.round( basicDimensions.fontSize / 0.75),\n familey: 'Times New Roman, Times, serif'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"font = String(fontInfos.size).concat('px ', fontInfos.familey)","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"//dimensions for axis, ticks, and ticklables\npaddingDimensions = ({\n left: Math.round(basicDimensions.paddingLeft * fontInfos.size),\n bottom: Math.round(basicDimensions.paddingBottom * fontInfos.size), \n right:Math.round(basicDimensions.paddingRight * fontInfos.size), \n top: Math.round(basicDimensions.paddingTop * fontInfos.size),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"//dimensions for columns/nodes, width and interval padding\ncolumnDimensions = ({\n width: basicDimensions.columnWidth, \n interPadding:basicDimensions.columnPadding\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"// svg viewBox extent\n//min-x, min-y, width, height\nsvgViewBoxExtent = [0, 0, figureDimensions.width, figureDimensions.height]","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"axisLabelLocations = ({\n xAxis:{x:paddingDimensions.left + sankeyDimensions.width/2,\n y:figureDimensions.height},\n yAxis:{x:0,\n y:0 - paddingDimensions.top - sankeyDimensions.height/2}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"/*\nsankey.extent([[x0, y0], [x1, y1]])\nwhere x0 is the left side of the extent (min-x), y0 is the top (min-y), \nx1 is the right (max-x) and y1 is the bottom (max-y)\n*/\n//[[margin.left -7.5, margin.top], [width - margin.right +7.5, height - margin.bottom -5]]\nsankeyExtent = ([\n [paddingDimensions.left, paddingDimensions.top],\n [figureDimensions.width - paddingDimensions.right, figureDimensions.height - paddingDimensions.bottom]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"//range for x axis: min-x, max-x\naxisRanges = ({\n xAxisRange:[paddingDimensions.left + columnDimensions.width/2 - axisTicksDelta, \n figureDimensions.width - paddingDimensions.right-columnDimensions.width/2 - axisTicksDelta],\n yAxisRange:[figureDimensions.height - paddingDimensions.bottom - axisTicksDelta, \n paddingDimensions.top - axisTicksDelta]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"//dimensions for the original sankey chart\nsankeyDimensions = ({\n width: figureDimensions.width - paddingDimensions.left -paddingDimensions.right, \n height: figureDimensions.height - paddingDimensions.top - paddingDimensions.bottom\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"sankey = {\n const sankey = d3.sankey()\n .nodeAlign(d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`]) //Alignment method for layout of all nodes\n .nodeSort(null) //If sort is null, the order is fixed by the input\n .linkSort(null) //If sort is null, the order is fixed by the input\n .nodeWidth(columnDimensions.width) //Column width for nodes\n .nodePadding(columnDimensions.interPadding) //Interval height between two node-columns\n .extent(sankeyExtent); //[[x0,y0],[x1,y1]]\n return ({nodes, links}) => sankey({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1350,"value":"//arrow function `https://www.w3schools.com/js/js_arrow_function.asp`\n//function initPadding(options){ //general syntax\ninitPadding = (options) => { //short with arrow function in ES6\n let top = paddingBase.top, \n bottom = paddingBase.bottom, \n left = paddingBase.left,\n right = paddingBase.right;\n if (options.includes('lockSankeyDimensions')) {\n top = top + 0.2;\n bottom = bottom + 2.2;\n left = left + 2.7;\n right = right;\n } else {\n if (options.includes('x - label')) {\n bottom = bottom + 1\n }\n if (options.includes('x - tick')) {\n bottom = bottom + 0.2\n }\n if (options.includes('x - ticklabel')) {\n bottom = bottom + 1\n }\n if (options.includes('y - label')) {\n left = left + 1\n }\n if (options.includes('y - tick')) {\n left = left + 0.2\n }\n if (options.includes('y - ticklabel')) {\n left = left + 1.5\n top = top + 0.2\n }\n }\n return [top, bottom, left, right];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"//Function for svg downloading\n//Source from: https://observablehq.com/@mbostock/saving-svg\nserialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT, null, false);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"//Function for converting a svg to image/png\n//Source from: https://observablehq.com/@mbostock/saving-svg\nfunction rasterize(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width, rect.height);\n context.drawImage(image, 0, 0, rect.width, rect.height);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"function saveAs() {\n const form = html``;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"//tin, inputText; fin, inputFile\nfunction dataInfos(tin, fin){\n let url = null,\n name = null;\n if (fin[0] !== undefined){\n if (fin[0].name !== undefined) {\n url = URL.createObjectURL(fin[0]);\n name = fin[0].name.split('.')[0];\n }\n } else {\n url = tin;\n name = tin.split('/').slice(-1)[0].split('.')[0];\n }\n return {url: url, name: name};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1304,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1306,"value":"//import {slider} from @jashkenas/inputs\nfunction slider(config = {}) {\n let {\n min = 0,\n max = 1,\n value = (max + min) / 2,\n step = \"any\",\n precision = 2,\n title,\n description,\n disabled,\n getValue,\n format,\n display,\n submit\n } = typeof config === \"number\" ? { value: config } : config;\n precision = Math.pow(10, precision);\n if (!getValue)\n getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\",\n title,\n description,\n submit,\n format,\n display,\n attributes: { min, max, step, disabled, value },\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1330,"value":"//import {file} from \"@jashkenas/inputs\"\nfunction jashFile(config = {}) {\n const { multiple, accept, title, description, disabled } = config;\n const form = input({\n type: \"file\",\n title,\n description,\n attributes: { multiple, accept, disabled },\n action: form => {\n form.input.onchange = () => {\n form.value = multiple ? form.input.files : form.input.files[0];\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n }\n });\n form.output.remove();\n form.input.onchange();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"//import {text} from @jashkenas/inputs\nfunction jashText(config = {}) {\n const {\n value,\n title,\n description,\n disabled,\n autocomplete = \"off\",\n maxlength,\n minlength,\n pattern,\n placeholder,\n size,\n submit,\n getValue\n } = typeof config === \"string\" ? { value: config } : config;\n const form = input({\n type: \"text\",\n title,\n description,\n submit,\n getValue,\n attributes: {\n value,\n autocomplete,\n maxlength,\n minlength,\n pattern,\n placeholder,\n size,\n disabled\n }\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1582,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1773,"value":"//https://observablehq.com/@bumbeishvili/input-groups\nfunction inputsGroup(views, names){\n const form = html`

${\n views.map(row => html`

${\n row.map(input => html`

${input}

`)\n }

`;\n \n form.oninput = () => {\n form.value = views.map(row => row.map(input => input.value))\n if(names){\n names.forEach((row,i)=>row.forEach((c,j)=> form.value[i][j]!=null && (form.value[c]=form.value[i][j])))\n }\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2031,"value":"function range(start, end, step = 1) {\n const len = Math.floor((end - start) / step) + 1\n return Array(len).fill().map((_, idx) => start + (idx * step))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1356,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"require.resolve(\"d3-sankey@0.12\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1302,"value":"import {input} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2249,"value":"md`## How to cite\nIf this tool is useful to your research, cite the published article as below:\n\n>Liu, X.; Fu, D.; Zevenbergen, C.; Busker, T.; Yu, M. Assessing Sponge Cities Performance at City Scale Using Remotely Sensed LULC Changes: Case Study Nanjing. Remote Sens. 2021, 13, 580. https://doi.org/10.3390/rs13040580.\n\nEasily, you can import it to \n Mendeley.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1908,"value":"md`## Reserved redundancy`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"/*\n//edgeColor selector\nviewof edgeColor0 = Object.assign(html``, {\n value: new URLSearchParams(html``.search).get(\"color\") || \"path\"\n})\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"/*\n//alignment selector\nviewof align = Object.assign(html``, {\n value: new URLSearchParams(html``.search).get(\"align\") || \"justify\"\n})\n*/","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}