[{"id":"f57cec1.87f8d1","type":"tab","label":"DEMO SNAP4D3 V2","disabled":false,"info":""},{"id":"75134582.6de81c","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"404e67e3.9d0f98","type":"snap4city-authentication","name":"michele-snap4d3","domain":"https://www.snap4city.org/","ismainaccount":true},{"id":"140e6ab7.1bb9a5","type":"inject","z":"f57cec1.87f8d1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"10","topic":"","payload":"[{\"letter\":\"A\",\"frequency\":0.08167},{\"letter\":\"B\",\"frequency\":0.01492},{\"letter\":\"C\",\"frequency\":0.02782},{\"letter\":\"D\",\"frequency\":0.04253},{\"letter\":\"E\",\"frequency\":0.12702},{\"letter\":\"F\",\"frequency\":0.02288},{\"letter\":\"G\",\"frequency\":0.02015},{\"letter\":\"H\",\"frequency\":0.06094},{\"letter\":\"I\",\"frequency\":0.06966},{\"letter\":\"J\",\"frequency\":0.00153},{\"letter\":\"K\",\"frequency\":0.00772},{\"letter\":\"L\",\"frequency\":0.04025},{\"letter\":\"M\",\"frequency\":0.02406},{\"letter\":\"N\",\"frequency\":0.06749},{\"letter\":\"O\",\"frequency\":0.07507},{\"letter\":\"P\",\"frequency\":0.01929},{\"letter\":\"Q\",\"frequency\":0.00095},{\"letter\":\"R\",\"frequency\":0.05987},{\"letter\":\"S\",\"frequency\":0.06327},{\"letter\":\"T\",\"frequency\":0.09056},{\"letter\":\"U\",\"frequency\":0.02758},{\"letter\":\"V\",\"frequency\":0.00978},{\"letter\":\"W\",\"frequency\":0.0236},{\"letter\":\"X\",\"frequency\":0.0015},{\"letter\":\"Y\",\"frequency\":0.01974},{\"letter\":\"Z\",\"frequency\":0.00074}]","payloadType":"json","x":330,"y":60,"wires":[["fd7bbd52.79b88"]]},{"id":"fd7bbd52.79b88","type":"function","z":"f57cec1.87f8d1","name":"","func":"const d3Configuration=String.raw`\n\n/**\n * \n * @param d3: instance of D3 library\n * @param d3Data: data sent by node-red for rendering with D3.\n * @param width : width of the widget display space\n * @param height :height of the widget display space \n * @param sendToNodeRed: function used to send back data from widget to node-red\n * @returns D3 chart instance\n */\nasync function drawD3Chart(d3,d3Data,width,height,sendToNodeRed){\n\n function BarChart(data, {\n x = (d, i) => i, // given d in data, returns the (ordinal) x-value\n y = d => d, // given d in data, returns the (quantitative) y-value\n title, // given d in data, returns the title text\n marginTop = 20, // the top margin, in pixels\n marginRight = 0, // the right margin, in pixels\n marginBottom = 30, // the bottom margin, in pixels\n marginLeft = 40, // the left margin, in pixels\n width = 640, // the outer width of the chart, in pixels\n height = 400, // the outer height of the chart, in pixels\n xDomain, // an array of (ordinal) x-values\n xRange = [marginLeft, width - marginRight], // [left, right]\n yType = d3.scaleLinear, // y-scale type\n yDomain, // [ymin, ymax]\n yRange = [height - marginBottom, marginTop], // [bottom, top]\n xPadding = 0.1, // amount of x-range to reserve to separate bars\n yFormat, // a format specifier string for the y-axis\n yLabel, // a label for the y-axis\n color = \"currentColor\" // bar fill color\n } = {}) {\n\n // Compute values.\n const X = d3.map(data, x);\n const Y = d3.map(data, y);\n \n // Compute default domains, and unique the x-domain.\n if (xDomain === undefined) {xDomain = X;}\n if (yDomain === undefined) {yDomain = [0, d3.max(Y)];}\n xDomain = new d3.InternSet(xDomain);\n \n // Omit any data not present in the x-domain.\n const I = d3.range(X.length).filter(i => xDomain.has(X[i]));\n \n // Construct scales, axes, and formats.\n const xScale = d3.scaleBand(xDomain, xRange).padding(xPadding);\n const yScale = yType(yDomain, yRange);\n const xAxis = d3.axisBottom(xScale).tickSizeOuter(0);\n const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat);\n \n // Compute titles.\n if (title === undefined) {\n const formatValue = yScale.tickFormat(100, yFormat);\n title = i => X[i]+\"\\n\"+formatValue(Y[i]);\n } else {\n const O = d3.map(data, d => d);\n const T = title;\n title = i => T(O[i], i, data);\n }\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height]) \n .attr(\"style\", \"max-width: 100%; height: auto; height: intrinsic;\");\n \n svg.append(\"g\")\n .attr(\"transform\", \"translate(\"+marginLeft+\",0)\")\n .call(yAxis)\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"x2\", width - marginLeft - marginRight)\n .attr(\"stroke-opacity\", 0.1))\n .call(g => g.append(\"text\")\n .attr(\"x\", -marginLeft)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(yLabel));\n \n const bar = svg.append(\"g\")\n .attr(\"fill\", color)\n .selectAll(\"rect\")\n .data(I)\n .join(\"rect\")\n .attr(\"x\", i => xScale(X[i]))\n .attr(\"y\", i => yScale(Y[i]))\n .attr(\"height\", i => yScale(0) - yScale(Y[i]))\n .attr(\"width\", xScale.bandwidth()) \n .on(\"click\", (event, index) => { \n sendToNodeRed({x:X[index],y:Y[index]});\n });\n \n if (title) {bar.append(\"title\")\n .text(title);}\n \n svg.append(\"g\")\n .attr(\"transform\", \"translate(0,\"+(height - marginBottom)+\")\")\n .call(xAxis); \n \n return svg.node(); //ATTENTION: THIS MUST BE RETURNED BY THE FUNCTION TO BE USED BY THE WIDGET\n }\n \n //ATTENTION: THIS BELOW MUST BE RETURNED BY THE FUNCTION TO BE USED BY THE WIDGET\n return BarChart(d3Data, {\n x: d => d.letter,\n y: d => d.frequency,\n xDomain: d3.groupSort(d3Data, ([d]) => -d.frequency, d => d.letter), // sort by descending frequency\n yFormat: \"%\",\n yLabel: \"↑ Frequency\",\n width,\n height,\n color: \"steelblue\"\n });\n \n}\n `;\n\n//msg.payload=Object.assign(msg.payload,{d3Configuration:d3Configuration});\n\nmsg[\"configuration\"]=d3Configuration;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":500,"y":100,"wires":[["a3df3295.b144b"]]},{"id":"a3df3295.b144b","type":"Snap4D3","z":"f57cec1.87f8d1","selectedDashboardId":"3489","flowName":"DEMO SNAP4D3 V2","authentication":"","username":"eventtest","name":"Barchart Payload Config","dashboardId":"3489","metricType":"Percentuale","startValue":0,"metricShortDesc":"","metricFullDesc":"","d3Configuration":"insert here your D3 code","x":710,"y":120,"wires":[["72082259.e6fd9c"]]},{"id":"72082259.e6fd9c","type":"debug","z":"f57cec1.87f8d1","name":"BarchartLog","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":930,"y":120,"wires":[]},{"id":"7b2a1ad.c4007e4","type":"inject","z":"f57cec1.87f8d1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"10","topic":"","payload":"{ \"series\": [ [ 0.096899, 0.008859, 0.000554, 0.004430, 0.025471, 0.024363, 0.005537, 0.025471 ], [ 0.001107, 0.018272, 0.000000, 0.004983, 0.011074, 0.010520, 0.002215, 0.004983 ], [ 0.000554, 0.002769, 0.002215, 0.002215, 0.003876, 0.008306, 0.000554, 0.003322 ], [ 0.000554, 0.001107, 0.000554, 0.012182, 0.011628, 0.006645, 0.004983, 0.010520 ], [ 0.002215, 0.004430, 0.000000, 0.002769, 0.104097, 0.012182, 0.004983, 0.028239 ], [ 0.011628, 0.026024, 0.000000, 0.013843, 0.087486, 0.168328, 0.017165, 0.055925 ], [ 0.000554, 0.004983, 0.000000, 0.003322, 0.004430, 0.008859, 0.017719, 0.004430 ], [ 0.002215, 0.007198, 0.000000, 0.003322, 0.016611, 0.014950, 0.001107, 0.054264 ] ], \"names\": [ \"Apple\", \"HTC\", \"Huawei\", \"LG\", \"Nokia\", \"Samsung\", \"Sony\", \"Other\" ], \"colors\": [ \"#c4c4c4\", \"#69b40f\", \"#ec1d25\", \"#c8125c\", \"#008fc8\", \"#10218b\", \"#134b24\", \"#737373\" ] }","payloadType":"json","x":330,"y":160,"wires":[["6624bc27.d5e554"]]},{"id":"6624bc27.d5e554","type":"function","z":"f57cec1.87f8d1","name":"","func":"const d3Configuration=String.raw`\n/**\n * \n * @param d3: instance of D3 library\n * @param d3Data: data sent by node-red for rendering with D3.\n * @param width : width of the widget display space\n * @param height :height of the widget display space \n * @param sendToNodeRed: function used to send back data from widget to node-red\n * @returns D3 chart instance\n */\n async function drawD3Chart(d3,d3Data,width,height,sendToNodeRed){\n\n const data = Object.assign(d3Data.series, {\n names: d3Data.names,\n colors: d3Data.colors\n });\n\n const tickStep = d3.tickStep(0, d3.sum(data.flat()), 100);\n\n function ticks({startAngle, endAngle, value}) {\n const k = (endAngle - startAngle) / value;\n return d3.range(0, value, tickStep).map(value => {\n return {value, angle: value * k + startAngle};\n });\n }\n\n const names = data.names === undefined ? d3.range(data.length) : data.names;\n const colors = data.colors === undefined ? d3.quantize(d3.interpolateRainbow, names.length) : data.colors;\n const formatValue = d3.format(\".1~%\");\n\n const color = d3.scaleOrdinal(names, colors);\n\n const outerRadius = Math.min(width, height) * 0.5 - 60;\n\n const innerRadius = outerRadius - 10;\n\n const chord = d3.chord()\n .padAngle(10 / innerRadius)\n .sortSubgroups(d3.descending)\n .sortChords(d3.descending);\n\n const arc = d3.arc()\n .innerRadius(innerRadius)\n .outerRadius(outerRadius);\n\n const ribbon = d3.ribbon()\n .radius(innerRadius - 1)\n .padAngle(1 / innerRadius); \n\n //const height = width\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]);\n \n const chords = chord(data);\n \n const group = svg.append(\"g\")\n .attr(\"font-size\", 10)\n .attr(\"font-family\", \"sans-serif\")\n .selectAll(\"g\")\n .data(chords.groups)\n .join(\"g\");\n \n group.append(\"path\")\n .attr(\"fill\", d => color(names[d.index]))\n .attr(\"d\", arc);\n \n group.append(\"title\")\n .text(d => names[d.index]+\"\\n\"+formatValue(d.value));\n \n const groupTick = group.append(\"g\")\n .selectAll(\"g\")\n .data(ticks)\n .join(\"g\")\n .attr(\"transform\", d => \"rotate(\"+(d.angle * 180 / Math.PI - 90)+\") translate(\"+outerRadius+\",0)\");\n \n \n groupTick.append(\"line\")\n .attr(\"stroke\", \"currentColor\")\n .attr(\"x2\", 6);\n \n groupTick.append(\"text\")\n .attr(\"x\", 8)\n .attr(\"dy\", \"0.35em\")\n .attr(\"transform\", d => d.angle > Math.PI ? \"rotate(180) translate(-16)\" : null)\n .attr(\"text-anchor\", d => d.angle > Math.PI ? \"end\" : null)\n .text(d => formatValue(d.value));\n \n group.select(\"text\")\n .attr(\"font-weight\", \"bold\")\n .text(function(d) {\n return this.getAttribute(\"text-anchor\") === \"end\"\n ? \"↑ \"+names[d.index]\n : names[d.index]+\" ↓\";\n });\n \n const graph = svg.append(\"g\")\n .attr(\"fill-opacity\", 0.8)\n .selectAll(\"path\")\n .data(chords)\n .join(\"path\")\n .style(\"mix-blend-mode\", \"multiply\")\n .attr(\"fill\", d => color(names[d.source.index]))\n .attr(\"d\", ribbon)\n .on(\"click\", (event, path) => { \n sendToNodeRed({\n start:{\n name:names[path.source.index],\n value:path.source.value\n },\n end:{\n name:names[path.target.index],\n value:path.target.value\n },\n });\n });\n\n\n\n graph.append(\"title\")\n .text(d => formatValue(d.source.value)+\" \"+names[d.target.index]+\" → \"+names[d.source.index]+\"\"+d.source.index === d.target.index ? \"\" : \"\\n\"+formatValue(d.target.value)+\" \"+names[d.source.index]+\" → \"+names[d.target.index]);\n \n \n \n return svg.node();\n}\n\n`;\n\n//msg.payload=Object.assign(msg.payload,{d3Configuration:d3Configuration});\nmsg[\"configuration\"]=d3Configuration;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":480,"y":200,"wires":[["5a1daea5.de2fd"]]},{"id":"6ea5301e.f7955","type":"debug","z":"f57cec1.87f8d1","name":"ChordLog","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":920,"y":200,"wires":[]},{"id":"5a1daea5.de2fd","type":"Snap4D3","z":"f57cec1.87f8d1","selectedDashboardId":"3489","flowName":"DEMO SNAP4D3 V2","authentication":"","username":"eventtest","name":"Chord Payload Config","dashboardId":"3489","metricType":"Percentuale","startValue":0,"metricShortDesc":"","metricFullDesc":"","d3Configuration":"insert here your D3 code","x":700,"y":200,"wires":[["6ea5301e.f7955"]]},{"id":"554ab6c4.8f19a8","type":"inject","z":"f57cec1.87f8d1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"10","topic":"","payload":"[ { \"x\": 79, \"y\": 3.6 }, { \"x\": 54, \"y\": 1.8 }, { \"x\": 74, \"y\": 3.333 }, { \"x\": 62, \"y\": 2.283 }, { \"x\": 85, \"y\": 4.533 }, { \"x\": 55, \"y\": 2.883 }, { \"x\": 88, \"y\": 4.7 }, { \"x\": 85, \"y\": 3.6 }, { \"x\": 51, \"y\": 1.95 }, { \"x\": 85, \"y\": 4.35 }, { \"x\": 54, \"y\": 1.833 }, { \"x\": 84, \"y\": 3.917 }, { \"x\": 78, \"y\": 4.2 }, { \"x\": 47, \"y\": 1.75 }, { \"x\": 83, \"y\": 4.7 }, { \"x\": 52, \"y\": 2.167 }, { \"x\": 62, \"y\": 1.75 }, { \"x\": 84, \"y\": 4.8 }, { \"x\": 52, \"y\": 1.6 }, { \"x\": 79, \"y\": 4.25 }, { \"x\": 51, \"y\": 1.8 }, { \"x\": 47, \"y\": 1.75 }, { \"x\": 78, \"y\": 3.45 }, { \"x\": 69, \"y\": 3.067 }, { \"x\": 74, \"y\": 4.533 }, { \"x\": 83, \"y\": 3.6 }, { \"x\": 55, \"y\": 1.967 }, { \"x\": 76, \"y\": 4.083 }, { \"x\": 78, \"y\": 3.85 }, { \"x\": 79, \"y\": 4.433 }, { \"x\": 73, \"y\": 4.3 }, { \"x\": 77, \"y\": 4.467 }, { \"x\": 66, \"y\": 3.367 }, { \"x\": 80, \"y\": 4.033 }, { \"x\": 74, \"y\": 3.833 }, { \"x\": 52, \"y\": 2.017 }, { \"x\": 48, \"y\": 1.867 }, { \"x\": 80, \"y\": 4.833 }, { \"x\": 59, \"y\": 1.833 }, { \"x\": 90, \"y\": 4.783 }, { \"x\": 80, \"y\": 4.35 }, { \"x\": 58, \"y\": 1.883 }, { \"x\": 84, \"y\": 4.567 }, { \"x\": 58, \"y\": 1.75 }, { \"x\": 73, \"y\": 4.533 }, { \"x\": 83, \"y\": 3.317 }, { \"x\": 64, \"y\": 3.833 }, { \"x\": 53, \"y\": 2.1 }, { \"x\": 82, \"y\": 4.633 }, { \"x\": 59, \"y\": 2 }, { \"x\": 75, \"y\": 4.8 }, { \"x\": 90, \"y\": 4.716 }, { \"x\": 54, \"y\": 1.833 }, { \"x\": 80, \"y\": 4.833 }, { \"x\": 54, \"y\": 1.733 }, { \"x\": 83, \"y\": 4.883 }, { \"x\": 71, \"y\": 3.717 }, { \"x\": 64, \"y\": 1.667 }, { \"x\": 77, \"y\": 4.567 }, { \"x\": 81, \"y\": 4.317 }, { \"x\": 59, \"y\": 2.233 }, { \"x\": 84, \"y\": 4.5 }, { \"x\": 48, \"y\": 1.75 }, { \"x\": 82, \"y\": 4.8 }, { \"x\": 60, \"y\": 1.817 }, { \"x\": 92, \"y\": 4.4 }, { \"x\": 78, \"y\": 4.167 }, { \"x\": 78, \"y\": 4.7 }, { \"x\": 65, \"y\": 2.067 }, { \"x\": 73, \"y\": 4.7 }, { \"x\": 82, \"y\": 4.033 }, { \"x\": 56, \"y\": 1.967 }, { \"x\": 79, \"y\": 4.5 }, { \"x\": 71, \"y\": 4 }, { \"x\": 62, \"y\": 1.983 }, { \"x\": 76, \"y\": 5.067 }, { \"x\": 60, \"y\": 2.017 }, { \"x\": 78, \"y\": 4.567 }, { \"x\": 76, \"y\": 3.883 }, { \"x\": 83, \"y\": 3.6 }, { \"x\": 75, \"y\": 4.133 }, { \"x\": 82, \"y\": 4.333 }, { \"x\": 70, \"y\": 4.1 }, { \"x\": 65, \"y\": 2.633 }, { \"x\": 73, \"y\": 4.067 }, { \"x\": 88, \"y\": 4.933 }, { \"x\": 76, \"y\": 3.95 }, { \"x\": 80, \"y\": 4.517 }, { \"x\": 48, \"y\": 2.167 }, { \"x\": 86, \"y\": 4 }, { \"x\": 60, \"y\": 2.2 }, { \"x\": 90, \"y\": 4.333 }, { \"x\": 50, \"y\": 1.867 }, { \"x\": 78, \"y\": 4.817 }, { \"x\": 63, \"y\": 1.833 }, { \"x\": 72, \"y\": 4.3 }, { \"x\": 84, \"y\": 4.667 }, { \"x\": 75, \"y\": 3.75 }, { \"x\": 51, \"y\": 1.867 }, { \"x\": 82, \"y\": 4.9 }, { \"x\": 62, \"y\": 2.483 }, { \"x\": 88, \"y\": 4.367 }, { \"x\": 49, \"y\": 2.1 }, { \"x\": 83, \"y\": 4.5 }, { \"x\": 81, \"y\": 4.05 }, { \"x\": 47, \"y\": 1.867 }, { \"x\": 84, \"y\": 4.7 }, { \"x\": 52, \"y\": 1.783 }, { \"x\": 86, \"y\": 4.85 }, { \"x\": 81, \"y\": 3.683 }, { \"x\": 75, \"y\": 4.733 }, { \"x\": 59, \"y\": 2.3 }, { \"x\": 89, \"y\": 4.9 }, { \"x\": 79, \"y\": 4.417 }, { \"x\": 59, \"y\": 1.7 }, { \"x\": 81, \"y\": 4.633 }, { \"x\": 50, \"y\": 2.317 }, { \"x\": 85, \"y\": 4.6 }, { \"x\": 59, \"y\": 1.817 }, { \"x\": 87, \"y\": 4.417 }, { \"x\": 53, \"y\": 2.617 }, { \"x\": 69, \"y\": 4.067 }, { \"x\": 77, \"y\": 4.25 }, { \"x\": 56, \"y\": 1.967 }, { \"x\": 88, \"y\": 4.6 }, { \"x\": 81, \"y\": 3.767 }, { \"x\": 45, \"y\": 1.917 }, { \"x\": 82, \"y\": 4.5 }, { \"x\": 55, \"y\": 2.267 }, { \"x\": 90, \"y\": 4.65 }, { \"x\": 45, \"y\": 1.867 }, { \"x\": 83, \"y\": 4.167 }, { \"x\": 56, \"y\": 2.8 }, { \"x\": 89, \"y\": 4.333 }, { \"x\": 46, \"y\": 1.833 }, { \"x\": 82, \"y\": 4.383 }, { \"x\": 51, \"y\": 1.883 }, { \"x\": 86, \"y\": 4.933 }, { \"x\": 53, \"y\": 2.033 }, { \"x\": 79, \"y\": 3.733 }, { \"x\": 81, \"y\": 4.233 }, { \"x\": 60, \"y\": 2.233 }, { \"x\": 82, \"y\": 4.533 }, { \"x\": 77, \"y\": 4.817 }, { \"x\": 76, \"y\": 4.333 }, { \"x\": 59, \"y\": 1.983 }, { \"x\": 80, \"y\": 4.633 }, { \"x\": 49, \"y\": 2.017 }, { \"x\": 96, \"y\": 5.1 }, { \"x\": 53, \"y\": 1.8 }, { \"x\": 77, \"y\": 5.033 }, { \"x\": 77, \"y\": 4 }, { \"x\": 65, \"y\": 2.4 }, { \"x\": 81, \"y\": 4.6 }, { \"x\": 71, \"y\": 3.567 }, { \"x\": 70, \"y\": 4 }, { \"x\": 81, \"y\": 4.5 }, { \"x\": 93, \"y\": 4.083 }, { \"x\": 53, \"y\": 1.8 }, { \"x\": 89, \"y\": 3.967 }, { \"x\": 45, \"y\": 2.2 }, { \"x\": 86, \"y\": 4.15 }, { \"x\": 58, \"y\": 2 }, { \"x\": 78, \"y\": 3.833 }, { \"x\": 66, \"y\": 3.5 }, { \"x\": 76, \"y\": 4.583 }, { \"x\": 63, \"y\": 2.367 }, { \"x\": 88, \"y\": 5 }, { \"x\": 52, \"y\": 1.933 }, { \"x\": 93, \"y\": 4.617 }, { \"x\": 49, \"y\": 1.917 }, { \"x\": 57, \"y\": 2.083 }, { \"x\": 77, \"y\": 4.583 }, { \"x\": 68, \"y\": 3.333 }, { \"x\": 81, \"y\": 4.167 }, { \"x\": 81, \"y\": 4.333 }, { \"x\": 73, \"y\": 4.5 }, { \"x\": 50, \"y\": 2.417 }, { \"x\": 85, \"y\": 4 }, { \"x\": 74, \"y\": 4.167 }, { \"x\": 55, \"y\": 1.883 }, { \"x\": 77, \"y\": 4.583 }, { \"x\": 83, \"y\": 4.25 }, { \"x\": 83, \"y\": 3.767 }, { \"x\": 51, \"y\": 2.033 }, { \"x\": 78, \"y\": 4.433 }, { \"x\": 84, \"y\": 4.083 }, { \"x\": 46, \"y\": 1.833 }, { \"x\": 83, \"y\": 4.417 }, { \"x\": 55, \"y\": 2.183 }, { \"x\": 81, \"y\": 4.8 }, { \"x\": 57, \"y\": 1.833 }, { \"x\": 76, \"y\": 4.8 }, { \"x\": 84, \"y\": 4.1 }, { \"x\": 77, \"y\": 3.966 }, { \"x\": 81, \"y\": 4.233 }, { \"x\": 87, \"y\": 3.5 }, { \"x\": 77, \"y\": 4.366 }, { \"x\": 51, \"y\": 2.25 }, { \"x\": 78, \"y\": 4.667 }, { \"x\": 60, \"y\": 2.1 }, { \"x\": 82, \"y\": 4.35 }, { \"x\": 91, \"y\": 4.133 }, { \"x\": 53, \"y\": 1.867 }, { \"x\": 78, \"y\": 4.6 }, { \"x\": 46, \"y\": 1.783 }, { \"x\": 77, \"y\": 4.367 }, { \"x\": 84, \"y\": 3.85 }, { \"x\": 49, \"y\": 1.933 }, { \"x\": 83, \"y\": 4.5 }, { \"x\": 71, \"y\": 2.383 }, { \"x\": 80, \"y\": 4.7 }, { \"x\": 49, \"y\": 1.867 }, { \"x\": 75, \"y\": 3.833 }, { \"x\": 64, \"y\": 3.417 }, { \"x\": 76, \"y\": 4.233 }, { \"x\": 53, \"y\": 2.4 }, { \"x\": 94, \"y\": 4.8 }, { \"x\": 55, \"y\": 2 }, { \"x\": 76, \"y\": 4.15 }, { \"x\": 50, \"y\": 1.867 }, { \"x\": 82, \"y\": 4.267 }, { \"x\": 54, \"y\": 1.75 }, { \"x\": 75, \"y\": 4.483 }, { \"x\": 78, \"y\": 4 }, { \"x\": 79, \"y\": 4.117 }, { \"x\": 78, \"y\": 4.083 }, { \"x\": 78, \"y\": 4.267 }, { \"x\": 70, \"y\": 3.917 }, { \"x\": 79, \"y\": 4.55 }, { \"x\": 70, \"y\": 4.083 }, { \"x\": 54, \"y\": 2.417 }, { \"x\": 86, \"y\": 4.183 }, { \"x\": 50, \"y\": 2.217 }, { \"x\": 90, \"y\": 4.45 }, { \"x\": 54, \"y\": 1.883 }, { \"x\": 54, \"y\": 1.85 }, { \"x\": 77, \"y\": 4.283 }, { \"x\": 79, \"y\": 3.95 }, { \"x\": 64, \"y\": 2.333 }, { \"x\": 75, \"y\": 4.15 }, { \"x\": 47, \"y\": 2.35 }, { \"x\": 86, \"y\": 4.933 }, { \"x\": 63, \"y\": 2.9 }, { \"x\": 85, \"y\": 4.583 }, { \"x\": 82, \"y\": 3.833 }, { \"x\": 57, \"y\": 2.083 }, { \"x\": 82, \"y\": 4.367 }, { \"x\": 67, \"y\": 2.133 }, { \"x\": 74, \"y\": 4.35 }, { \"x\": 54, \"y\": 2.2 }, { \"x\": 83, \"y\": 4.45 }, { \"x\": 73, \"y\": 3.567 }, { \"x\": 73, \"y\": 4.5 }, { \"x\": 88, \"y\": 4.15 }, { \"x\": 80, \"y\": 3.817 }, { \"x\": 71, \"y\": 3.917 }, { \"x\": 83, \"y\": 4.45 }, { \"x\": 56, \"y\": 2 }, { \"x\": 79, \"y\": 4.283 }, { \"x\": 78, \"y\": 4.767 }, { \"x\": 84, \"y\": 4.533 }, { \"x\": 58, \"y\": 1.85 }, { \"x\": 83, \"y\": 4.25 }, { \"x\": 43, \"y\": 1.983 }, { \"x\": 60, \"y\": 2.25 }, { \"x\": 75, \"y\": 4.75 }, { \"x\": 81, \"y\": 4.117 }, { \"x\": 46, \"y\": 2.15 }, { \"x\": 90, \"y\": 4.417 }, { \"x\": 46, \"y\": 1.817 }, { \"x\": 74, \"y\": 4.467 } ]","payloadType":"json","x":330,"y":260,"wires":[["f5fcebf5.61eb68"]]},{"id":"f5fcebf5.61eb68","type":"Snap4D3","z":"f57cec1.87f8d1","selectedDashboardId":"3489","flowName":"DEMO SNAP4D3 V2","authentication":"","username":"eventtest","name":"Curve di livello","dashboardId":"3489","metricType":"Percentuale","startValue":0,"metricShortDesc":"","metricFullDesc":"","d3Configuration":"\n/**\n * \n * @param d3: instance of D3 library\n * @param d3Data: data sent by node-red for rendering with D3.\n * @param width : width of the widget display space\n * @param height :height of the widget display space \n * @param sendToNodeRed: function used to send back data from widget to node-red\n * @returns D3 chart instance\n */\n async function drawD3Chart(d3,d3Data,width,height,sendToNodeRed){\n\n const data = d3Data;\n\n // SOURCE https://observablehq.com/@d3/density-contours\n const margin = ({top: 20, right: 30, bottom: 30, left: 40})\n\n \n const x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.x)).nice()\n .rangeRound([margin.left, width - margin.right])\n\n const y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.y)).nice()\n .rangeRound([height - margin.bottom, margin.top])\n\n const xAxis = g => g.append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"y\", -3)\n .attr(\"dy\", null)\n .attr(\"font-weight\", \"bold\")\n .text(data.x))\n\n\n const yAxis = g => g.append(\"g\")\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))\n\n\n const contours = d3.contourDensity()\n .x(d => x(d.x))\n .y(d => y(d.y))\n .size([width, height])\n .bandwidth(30)\n .thresholds(30)\n (data)\n\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n svg.append(\"g\")\n .call(xAxis);\n \n svg.append(\"g\")\n .call(yAxis);\n \n svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-linejoin\", \"round\")\n .selectAll(\"path\")\n .data(contours)\n .join(\"path\")\n .attr(\"stroke-width\", (d, i) => i % 5 ? 0.25 : 1)\n .attr(\"d\", d3.geoPath());\n \n svg.append(\"g\")\n .attr(\"stroke\", \"white\")\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.x))\n .attr(\"cy\", d => y(d.y))\n .attr(\"r\", 2)\n .on(\"click\", (event, data) => { \n sendToNodeRed({data})\n })\n \n return svg.node();\n\n}","x":680,"y":280,"wires":[["a1514204.2d4d6"]]},{"id":"a1514204.2d4d6","type":"debug","z":"f57cec1.87f8d1","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":930,"y":280,"wires":[]},{"id":"e2272b6.11bffd8","type":"debug","z":"f57cec1.87f8d1","name":"ParallelLog","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":930,"y":380,"wires":[]},{"id":"6c48f11.e6ea21","type":"inject","z":"f57cec1.87f8d1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"10","topic":"","payload":"[ { \"source\": \"Agricultural 'waste'\", \"target\": \"Bio-conversion\", \"value\": 124.729 }, { \"source\": \"Bio-conversion\", \"target\": \"Liquid\", \"value\": 0.597 }, { \"source\": \"Bio-conversion\", \"target\": \"Losses\", \"value\": 26.862 }, { \"source\": \"Bio-conversion\", \"target\": \"Solid\", \"value\": 280.322 }, { \"source\": \"Bio-conversion\", \"target\": \"Gas\", \"value\": 81.144 }, { \"source\": \"Biofuel imports\", \"target\": \"Liquid\", \"value\": 35 }, { \"source\": \"Biomass imports\", \"target\": \"Solid\", \"value\": 35 }, { \"source\": \"Coal imports\", \"target\": \"Coal\", \"value\": 11.606 }, { \"source\": \"Coal reserves\", \"target\": \"Coal\", \"value\": 63.965 }, { \"source\": \"Coal\", \"target\": \"Solid\", \"value\": 75.571 }, { \"source\": \"District heating\", \"target\": \"Industry\", \"value\": 10.639 }, { \"source\": \"District heating\", \"target\": \"Heating and cooling - commercial\", \"value\": 22.505 }, { \"source\": \"District heating\", \"target\": \"Heating and cooling - homes\", \"value\": 46.184 }, { \"source\": \"Electricity grid\", \"target\": \"Over generation / exports\", \"value\": 104.453 }, { \"source\": \"Electricity grid\", \"target\": \"Heating and cooling - homes\", \"value\": 113.726 }, { \"source\": \"Electricity grid\", \"target\": \"H2 conversion\", \"value\": 27.14 }, { \"source\": \"Electricity grid\", \"target\": \"Industry\", \"value\": 342.165 }, { \"source\": \"Electricity grid\", \"target\": \"Road transport\", \"value\": 37.797 }, { \"source\": \"Electricity grid\", \"target\": \"Agriculture\", \"value\": 4.412 }, { \"source\": \"Electricity grid\", \"target\": \"Heating and cooling - commercial\", \"value\": 40.858 }, { \"source\": \"Electricity grid\", \"target\": \"Losses\", \"value\": 56.691 }, { \"source\": \"Electricity grid\", \"target\": \"Rail transport\", \"value\": 7.863 }, { \"source\": \"Electricity grid\", \"target\": \"Lighting & appliances - commercial\", \"value\": 90.008 }, { \"source\": \"Electricity grid\", \"target\": \"Lighting & appliances - homes\", \"value\": 93.494 }, { \"source\": \"Gas imports\", \"target\": \"Ngas\", \"value\": 40.719 }, { \"source\": \"Gas reserves\", \"target\": \"Ngas\", \"value\": 82.233 }, { \"source\": \"Gas\", \"target\": \"Heating and cooling - commercial\", \"value\": 0.129 }, { \"source\": \"Gas\", \"target\": \"Losses\", \"value\": 1.401 }, { \"source\": \"Gas\", \"target\": \"Thermal generation\", \"value\": 151.891 }, { \"source\": \"Gas\", \"target\": \"Agriculture\", \"value\": 2.096 }, { \"source\": \"Gas\", \"target\": \"Industry\", \"value\": 48.58 }, { \"source\": \"Geothermal\", \"target\": \"Electricity grid\", \"value\": 7.013 }, { \"source\": \"H2 conversion\", \"target\": \"H2\", \"value\": 20.897 }, { \"source\": \"H2 conversion\", \"target\": \"Losses\", \"value\": 6.242 }, { \"source\": \"H2\", \"target\": \"Road transport\", \"value\": 20.897 }, { \"source\": \"Hydro\", \"target\": \"Electricity grid\", \"value\": 6.995 }, { \"source\": \"Liquid\", \"target\": \"Industry\", \"value\": 121.066 }, { \"source\": \"Liquid\", \"target\": \"International shipping\", \"value\": 128.69 }, { \"source\": \"Liquid\", \"target\": \"Road transport\", \"value\": 135.835 }, { \"source\": \"Liquid\", \"target\": \"Domestic aviation\", \"value\": 14.458 }, { \"source\": \"Liquid\", \"target\": \"International aviation\", \"value\": 206.267 }, { \"source\": \"Liquid\", \"target\": \"Agriculture\", \"value\": 3.64 }, { \"source\": \"Liquid\", \"target\": \"National navigation\", \"value\": 33.218 }, { \"source\": \"Liquid\", \"target\": \"Rail transport\", \"value\": 4.413 }, { \"source\": \"Marine algae\", \"target\": \"Bio-conversion\", \"value\": 4.375 }, { \"source\": \"Ngas\", \"target\": \"Gas\", \"value\": 122.952 }, { \"source\": \"Nuclear\", \"target\": \"Thermal generation\", \"value\": 839.978 }, { \"source\": \"Oil imports\", \"target\": \"Oil\", \"value\": 504.287 }, { \"source\": \"Oil reserves\", \"target\": \"Oil\", \"value\": 107.703 }, { \"source\": \"Oil\", \"target\": \"Liquid\", \"value\": 611.99 }, { \"source\": \"Other waste\", \"target\": \"Solid\", \"value\": 56.587 }, { \"source\": \"Other waste\", \"target\": \"Bio-conversion\", \"value\": 77.81 }, { \"source\": \"Pumped heat\", \"target\": \"Heating and cooling - homes\", \"value\": 193.026 }, { \"source\": \"Pumped heat\", \"target\": \"Heating and cooling - commercial\", \"value\": 70.672 }, { \"source\": \"Solar PV\", \"target\": \"Electricity grid\", \"value\": 59.901 }, { \"source\": \"Solar Thermal\", \"target\": \"Heating and cooling - homes\", \"value\": 19.263 }, { \"source\": \"Solar\", \"target\": \"Solar Thermal\", \"value\": 19.263 }, { \"source\": \"Solar\", \"target\": \"Solar PV\", \"value\": 59.901 }, { \"source\": \"Solid\", \"target\": \"Agriculture\", \"value\": 0.882 }, { \"source\": \"Solid\", \"target\": \"Thermal generation\", \"value\": 400.12 }, { \"source\": \"Solid\", \"target\": \"Industry\", \"value\": 46.477 }, { \"source\": \"Thermal generation\", \"target\": \"Electricity grid\", \"value\": 525.531 }, { \"source\": \"Thermal generation\", \"target\": \"Losses\", \"value\": 787.129 }, { \"source\": \"Thermal generation\", \"target\": \"District heating\", \"value\": 79.329 }, { \"source\": \"Tidal\", \"target\": \"Electricity grid\", \"value\": 9.452 }, { \"source\": \"UK land based bioenergy\", \"target\": \"Bio-conversion\", \"value\": 182.01 }, { \"source\": \"Wave\", \"target\": \"Electricity grid\", \"value\": 19.013 }, { \"source\": \"Wind\", \"target\": \"Electricity grid\", \"value\": 289.366 } ]","payloadType":"json","x":330,"y":380,"wires":[["c700f167.9161"]]},{"id":"c700f167.9161","type":"Snap4D3","z":"f57cec1.87f8d1","selectedDashboardId":"3489","flowName":"DEMO SNAP4D3 V2","authentication":"","username":"eventtest","name":"Parallel","dashboardId":"3489","metricType":"Percentuale","startValue":0,"metricShortDesc":"","metricFullDesc":"","d3Configuration":"\n/**\n * \n * @param d3: instance of D3 library\n * @param d3Data: data sent by node-red for rendering with D3.\n * @param width : width of the widget display space\n * @param height :height of the widget display space \n * @param sendToNodeRed: function used to send back data from widget to node-red\n * @returns D3 chart instance\n */\nasync function drawD3Chart(d3,d3Data,width,height,sendToNodeRed){\n const d3Sankey = await d3.require.alias({\"d3-array\": d3, \"d3-shape\": d3, \"d3-sankey\": \"d3-sankey@0.12.3/dist/d3-sankey.min.js\"})(\"d3-sankey\");\n\n\n const mapSinglePathToSend = (path)=>({\n id:path.id,\n value:path.value,\n source:{\n id:path.source.id,\n index:path.source.index,\n value:path.source.value,\n },\n target:{\n id:path.target.id,\n index:path.target.index,\n value:path.target.value,\n }\n })\n\n// Copyright 2021 Observable, Inc.\n// Released under the ISC license.\n// https://observablehq.com/@d3/sankey-diagram\n function SankeyChart({\n nodes, // an iterable of node objects (typically [{id}, …]); implied by links if missing\n links // an iterable of link objects (typically [{source, target}, …])\n }, {\n format = \",\", // a function or format specifier for values in titles\n align = \"justify\", // convenience shorthand for nodeAlign\n nodeId = d => d.id, // given d in nodes, returns a unique identifier (string)\n nodeGroup, // given d in nodes, returns an (ordinal) value for color\n nodeGroups, // an array of ordinal values representing the node groups\n nodeLabel, // given d in (computed) nodes, text to label the associated rect\n nodeTitle = d => `${d.id}\\n${format(d.value)}`, // given d in (computed) nodes, hover text\n nodeAlign = align, // Sankey node alignment strategy: left, right, justify, center\n nodeWidth = 15, // width of node rects\n nodePadding = 10, // vertical separation between adjacent nodes\n nodeLabelPadding = 6, // horizontal separation between node and label\n nodeStroke = \"currentColor\", // stroke around node rects\n nodeStrokeWidth, // width of stroke around node rects, in pixels\n nodeStrokeOpacity, // opacity of stroke around node rects\n nodeStrokeLinejoin, // line join for stroke around node rects\n linkSource = ({source}) => source, // given d in links, returns a node identifier string\n linkTarget = ({target}) => target, // given d in links, returns a node identifier string\n linkValue = ({value}) => value, // given d in links, returns the quantitative value\n linkPath = d3Sankey.sankeyLinkHorizontal(), // given d in (computed) links, returns the SVG path\n linkTitle = d => `${d.source.id} → ${d.target.id}\\n${format(d.value)}`, // given d in (computed) links\n linkColor = \"source-target\", // source, target, source-target, or static color\n linkStrokeOpacity = 0.5, // link stroke opacity\n linkMixBlendMode = \"multiply\", // link blending mode\n colors = d3.schemeTableau10, // array of colors\n width = 640, // outer width, in pixels\n height = 400, // outer height, in pixels\n marginTop = 5, // top margin, in pixels\n marginRight = 1, // right margin, in pixels\n marginBottom = 5, // bottom margin, in pixels\n marginLeft = 1, // left margin, in pixels\n } = {}) {\n // Convert nodeAlign from a name to a function (since d3-sankey is not part of core d3).\n if (typeof nodeAlign !== \"function\") nodeAlign = {\n left: d3Sankey.sankeyLeft,\n right: d3Sankey.sankeyRight,\n center: d3Sankey.sankeyCenter\n }[nodeAlign] ?? d3Sankey.sankeyJustify;\n \n // Compute values.\n const LS = d3.map(links, linkSource).map(intern);\n const LT = d3.map(links, linkTarget).map(intern);\n const LV = d3.map(links, linkValue);\n if (nodes === undefined) nodes = Array.from(d3.union(LS, LT), id => ({id}));\n const N = d3.map(nodes, nodeId).map(intern);\n const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern);\n \n // Replace the input nodes and links with mutable objects for the simulation.\n nodes = d3.map(nodes, (_, i) => ({id: N[i]}));\n links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i], value: LV[i]}));\n \n // Ignore a group-based linkColor option if no groups are specified.\n if (!G && [\"source\", \"target\", \"source-target\"].includes(linkColor)) linkColor = \"currentColor\";\n \n // Compute default domains.\n if (G && nodeGroups === undefined) nodeGroups = G;\n \n // Construct the scales.\n const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors);\n \n // Compute the Sankey layout.\n d3Sankey.sankey()\n .nodeId(({index: i}) => N[i])\n .nodeAlign(nodeAlign)\n .nodeWidth(nodeWidth)\n .nodePadding(nodePadding)\n .extent([[marginLeft, marginTop], [width - marginRight, height - marginBottom]])\n ({nodes, links});\n \n // Compute titles and labels using layout nodes, so as to access aggregate values.\n if (typeof format !== \"function\") format = d3.format(format);\n const Tl = nodeLabel === undefined ? N : nodeLabel == null ? null : d3.map(nodes, nodeLabel);\n const Tt = nodeTitle == null ? null : d3.map(nodes, nodeTitle);\n const Lt = linkTitle == null ? null : d3.map(links, linkTitle);\n \n // A unique identifier for clip paths (to avoid conflicts).\n const uid = `O-${Math.random().toString(16).slice(2)}`;\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto; height: intrinsic;\");\n \n const node = svg.append(\"g\")\n .attr(\"stroke\", nodeStroke)\n .attr(\"stroke-width\", nodeStrokeWidth)\n .attr(\"stroke-opacity\", nodeStrokeOpacity)\n .attr(\"stroke-linejoin\", nodeStrokeLinejoin)\n .selectAll(\"rect\")\n .data(nodes)\n .join(\"rect\")\n .attr(\"x\", d => d.x0)\n .attr(\"y\", d => d.y0)\n .attr(\"height\", d => d.y1 - d.y0)\n .attr(\"width\", d => d.x1 - d.x0)\n .on(\"click\", (event, sankeyPoi) => { \n \n const toSend = {\n id: sankeyPoi.id,\n index: sankeyPoi.index,\n sourceLinks:sankeyPoi.sourceLinks.map(_=>mapSinglePathToSend(_)),\n targetLinks:sankeyPoi.targetLinks.map(_=>mapSinglePathToSend(_)),\n }\n \n sendToNodeRed({\n type:\"SANKEY_POI\",\n value:toSend\n }); \n });\n \n if (G) node.attr(\"fill\", ({index: i}) => color(G[i]));\n if (Tt) node.append(\"title\").text(({index: i}) => Tt[i]);\n \n const link = svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke-opacity\", linkStrokeOpacity)\n .selectAll(\"g\")\n .data(links)\n .join(\"g\")\n .style(\"mix-blend-mode\", linkMixBlendMode)\n \n \n if (linkColor === \"source-target\") {\n link.append(\"linearGradient\")\n .attr(\"id\", d => `${uid}-link-${d.index}`)\n .attr(\"gradientUnits\", \"userSpaceOnUse\")\n .attr(\"x1\", d => d.source.x1)\n .attr(\"x2\", d => d.target.x0)\n .call(gradient => gradient.append(\"stop\")\n .attr(\"offset\", \"0%\")\n .attr(\"stop-color\", ({source: {index: i}}) => color(G[i])))\n .call(gradient => gradient.append(\"stop\")\n .attr(\"offset\", \"100%\")\n .attr(\"stop-color\", ({target: {index: i}}) => color(G[i])));\n }\n \n const path = link.append(\"path\")\n .attr(\"d\", linkPath)\n .attr(\"stroke\", linkColor === \"source-target\" ? ({index: i}) => `url(#${uid}-link-${i})`\n : linkColor === \"source\" ? ({source: {index: i}}) => color(G[i])\n : linkColor === \"target\" ? ({target: {index: i}}) => color(G[i])\n : linkColor)\n .attr(\"stroke-width\", ({width}) => Math.max(1, width))\n\n path.on(\"click\", (event, sankeyPath) => { \n \n sendToNodeRed({\n type:\"SANKEY_PATH\",\n value:mapSinglePathToSend(sankeyPath)\n }); \n });\n\n path.call(Lt ? path => path.append(\"title\").text(({index: i}) => Lt[i]) : () => {});\n \n if (Tl){ \n svg.append(\"g\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"text\")\n .data(nodes)\n .join(\"text\")\n .attr(\"x\", d => d.x0 < width / 2 ? d.x1 + nodeLabelPadding : d.x0 - nodeLabelPadding)\n .attr(\"y\", d => (d.y1 + d.y0) / 2)\n .attr(\"dy\", \"0.35em\")\n .attr(\"text-anchor\", d => d.x0 < width / 2 ? \"start\" : \"end\")\n .text(({index: i}) => Tl[i]);\n\n }\n \n function intern(value) {\n return value !== null && typeof value === \"object\" ? value.valueOf() : value;\n }\n \n return Object.assign(svg.node(), {scales: {color}});\n }\n\n return SankeyChart({\n links: d3Data\n }, {\n nodeGroup: d => d.id.split(/\\W/)[0], // take first word for color\n nodeAlign:\"justify\", // e.g., d3.sankeyJustify; set by input above\n linkColor:\"source-target\", // e.g., \"source\" or \"target\"; set by input above\n format: (f => d => `${f(d)} TWh`)(d3.format(\",.1~f\")),\n width,\n height\n })\n}","x":660,"y":380,"wires":[["e2272b6.11bffd8"]]},{"id":"db838e34.b39d9","type":"Snap4D3","z":"f57cec1.87f8d1","selectedDashboardId":"3489","flowName":"DEMO SNAP4D3 V2","authentication":"","username":"eventtest","name":"CirclePacking","dashboardId":"3489","metricType":"Percentuale","startValue":0,"metricShortDesc":"","metricFullDesc":"","d3Configuration":"\n/**\n * \n * @param d3: instance of D3 library\n * @param d3Data: data sent by node-red for rendering with D3.\n * @param width : width of the widget display space\n * @param height :height of the widget display space \n * @param sendToNodeRed: function used to send back data from widget to node-red\n * @returns D3 chart instance\n */\n async function drawD3Chart(d3,d3Data,width,height,sendToNodeRed){\n\n const data= d3Data;\n\n // SOURCE https://observablehq.com/@d3/zoomable-circle-packing\n const color = d3.scaleLinear()\n .domain([0, 5])\n .range([\"hsl(152,80%,80%)\", \"hsl(228,30%,40%)\"])\n .interpolate(d3.interpolateHcl);\n\n const format = d3.format(\",d\");\n\n const pack = data => d3.pack()\n .size([width, height])\n .padding(3)\n (d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value));\n\n\n const root = pack(data);\n let focus = root;\n let view;\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", `-${width / 2} -${height / 2} ${width} ${height}`)\n .style(\"display\", \"block\")\n .style(\"margin\", \"0 -14px\")\n .style(\"background\", color(0))\n .style(\"cursor\", \"pointer\")\n .on(\"click\", (event) => {\n zoom(event, root);\n });\n\n const node = svg.append(\"g\")\n .selectAll(\"circle\")\n .data(root.descendants().slice(1))\n .join(\"circle\")\n .attr(\"fill\", d => d.children ? color(d.depth) : \"white\")\n .attr(\"pointer-events\", d => !d.children ? \"none\" : null)\n .on(\"mouseover\", function() { d3.select(this).attr(\"stroke\", \"#000\"); })\n .on(\"mouseout\", function() { d3.select(this).attr(\"stroke\", null); })\n .on(\"click\", (event, d) => {\n focus !== d && (zoom(event, d), event.stopPropagation()); \n sendToNodeRed({data:d.data});\n });\n\n const label = svg.append(\"g\")\n .style(\"font\", \"10px sans-serif\")\n .attr(\"pointer-events\", \"none\")\n .attr(\"text-anchor\", \"middle\")\n .selectAll(\"text\")\n .data(root.descendants())\n .join(\"text\")\n .style(\"fill-opacity\", d => d.parent === root ? 1 : 0)\n .style(\"display\", d => d.parent === root ? \"inline\" : \"none\")\n .text(d => d.data.name);\n\n zoomTo([root.x, root.y, root.r * 2]);\n\n function zoomTo(v) {\n const k = width / v[2];\n\n view = v;\n\n label.attr(\"transform\", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);\n node.attr(\"transform\", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);\n node.attr(\"r\", d => d.r * k);\n }\n\n function zoom(event, d) {\n const focus0 = focus;\n\n focus = d;\n\n const transition = svg.transition()\n .duration(event.altKey ? 7500 : 750)\n .tween(\"zoom\", d => {\n const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]);\n return t => zoomTo(i(t));\n });\n\n label\n .filter(function(d) { return d.parent === focus || this.style.display === \"inline\"; })\n .transition(transition)\n .style(\"fill-opacity\", d => d.parent === focus ? 1 : 0)\n .on(\"start\", function(d) { if (d.parent === focus) this.style.display = \"inline\"; })\n .on(\"end\", function(d) { if (d.parent !== focus) this.style.display = \"none\"; });\n }\n\n return svg.node();\n }","x":680,"y":460,"wires":[["c9d6d3b4.53251"]]},{"id":"c85b29a9.e855e8","type":"inject","z":"f57cec1.87f8d1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"10","topic":"","payload":"{ \"name\": \"flare\", \"children\": [ { \"name\": \"analytics\", \"children\": [ { \"name\": \"cluster\", \"children\": [ { \"name\": \"AgglomerativeCluster\", \"value\": 3938 }, { \"name\": \"CommunityStructure\", \"value\": 3812 }, { \"name\": \"HierarchicalCluster\", \"value\": 6714 }, { \"name\": \"MergeEdge\", \"value\": 743 } ] }, { \"name\": \"graph\", \"children\": [ { \"name\": \"BetweennessCentrality\", \"value\": 3534 }, { \"name\": \"LinkDistance\", \"value\": 5731 }, { \"name\": \"MaxFlowMinCut\", \"value\": 7840 }, { \"name\": \"ShortestPaths\", \"value\": 5914 }, { \"name\": \"SpanningTree\", \"value\": 3416 } ] }, { \"name\": \"optimization\", \"children\": [ { \"name\": \"AspectRatioBanker\", \"value\": 7074 } ] } ] }, { \"name\": \"animate\", \"children\": [ { \"name\": \"Easing\", \"value\": 17010 }, { \"name\": \"FunctionSequence\", \"value\": 5842 }, { \"name\": \"interpolate\", \"children\": [ { \"name\": \"ArrayInterpolator\", \"value\": 1983 }, { \"name\": \"ColorInterpolator\", \"value\": 2047 }, { \"name\": \"DateInterpolator\", \"value\": 1375 }, { \"name\": \"Interpolator\", \"value\": 8746 }, { \"name\": \"MatrixInterpolator\", \"value\": 2202 }, { \"name\": \"NumberInterpolator\", \"value\": 1382 }, { \"name\": \"ObjectInterpolator\", \"value\": 1629 }, { \"name\": \"PointInterpolator\", \"value\": 1675 }, { \"name\": \"RectangleInterpolator\", \"value\": 2042 } ] }, { \"name\": \"ISchedulable\", \"value\": 1041 }, { \"name\": \"Parallel\", \"value\": 5176 }, { \"name\": \"Pause\", \"value\": 449 }, { \"name\": \"Scheduler\", \"value\": 5593 }, { \"name\": \"Sequence\", \"value\": 5534 }, { \"name\": \"Transition\", \"value\": 9201 }, { \"name\": \"Transitioner\", \"value\": 19975 }, { \"name\": \"TransitionEvent\", \"value\": 1116 }, { \"name\": \"Tween\", \"value\": 6006 } ] }, { \"name\": \"data\", \"children\": [ { \"name\": \"converters\", \"children\": [ { \"name\": \"Converters\", \"value\": 721 }, { \"name\": \"DelimitedTextConverter\", \"value\": 4294 }, { \"name\": \"GraphMLConverter\", \"value\": 9800 }, { \"name\": \"IDataConverter\", \"value\": 1314 }, { \"name\": \"JSONConverter\", \"value\": 2220 } ] }, { \"name\": \"DataField\", \"value\": 1759 }, { \"name\": \"DataSchema\", \"value\": 2165 }, { \"name\": \"DataSet\", \"value\": 586 }, { \"name\": \"DataSource\", \"value\": 3331 }, { \"name\": \"DataTable\", \"value\": 772 }, { \"name\": \"DataUtil\", \"value\": 3322 } ] }, { \"name\": \"display\", \"children\": [ { \"name\": \"DirtySprite\", \"value\": 8833 }, { \"name\": \"LineSprite\", \"value\": 1732 }, { \"name\": \"RectSprite\", \"value\": 3623 }, { \"name\": \"TextSprite\", \"value\": 10066 } ] }, { \"name\": \"flex\", \"children\": [ { \"name\": \"FlareVis\", \"value\": 4116 } ] }, { \"name\": \"physics\", \"children\": [ { \"name\": \"DragForce\", \"value\": 1082 }, { \"name\": \"GravityForce\", \"value\": 1336 }, { \"name\": \"IForce\", \"value\": 319 }, { \"name\": \"NBodyForce\", \"value\": 10498 }, { \"name\": \"Particle\", \"value\": 2822 }, { \"name\": \"Simulation\", \"value\": 9983 }, { \"name\": \"Spring\", \"value\": 2213 }, { \"name\": \"SpringForce\", \"value\": 1681 } ] }, { \"name\": \"query\", \"children\": [ { \"name\": \"AggregateExpression\", \"value\": 1616 }, { \"name\": \"And\", \"value\": 1027 }, { \"name\": \"Arithmetic\", \"value\": 3891 }, { \"name\": \"Average\", \"value\": 891 }, { \"name\": \"BinaryExpression\", \"value\": 2893 }, { \"name\": \"Comparison\", \"value\": 5103 }, { \"name\": \"CompositeExpression\", \"value\": 3677 }, { \"name\": \"Count\", \"value\": 781 }, { \"name\": \"DateUtil\", \"value\": 4141 }, { \"name\": \"Distinct\", \"value\": 933 }, { \"name\": \"Expression\", \"value\": 5130 }, { \"name\": \"ExpressionIterator\", \"value\": 3617 }, { \"name\": \"Fn\", \"value\": 3240 }, { \"name\": \"If\", \"value\": 2732 }, { \"name\": \"IsA\", \"value\": 2039 }, { \"name\": \"Literal\", \"value\": 1214 }, { \"name\": \"Match\", \"value\": 3748 }, { \"name\": \"Maximum\", \"value\": 843 }, { \"name\": \"methods\", \"children\": [ { \"name\": \"add\", \"value\": 593 }, { \"name\": \"and\", \"value\": 330 }, { \"name\": \"average\", \"value\": 287 }, { \"name\": \"count\", \"value\": 277 }, { \"name\": \"distinct\", \"value\": 292 }, { \"name\": \"div\", \"value\": 595 }, { \"name\": \"eq\", \"value\": 594 }, { \"name\": \"fn\", \"value\": 460 }, { \"name\": \"gt\", \"value\": 603 }, { \"name\": \"gte\", \"value\": 625 }, { \"name\": \"iff\", \"value\": 748 }, { \"name\": \"isa\", \"value\": 461 }, { \"name\": \"lt\", \"value\": 597 }, { \"name\": \"lte\", \"value\": 619 }, { \"name\": \"max\", \"value\": 283 }, { \"name\": \"min\", \"value\": 283 }, { \"name\": \"mod\", \"value\": 591 }, { \"name\": \"mul\", \"value\": 603 }, { \"name\": \"neq\", \"value\": 599 }, { \"name\": \"not\", \"value\": 386 }, { \"name\": \"or\", \"value\": 323 }, { \"name\": \"orderby\", \"value\": 307 }, { \"name\": \"range\", \"value\": 772 }, { \"name\": \"select\", \"value\": 296 }, { \"name\": \"stddev\", \"value\": 363 }, { \"name\": \"sub\", \"value\": 600 }, { \"name\": \"sum\", \"value\": 280 }, { \"name\": \"update\", \"value\": 307 }, { \"name\": \"variance\", \"value\": 335 }, { \"name\": \"where\", \"value\": 299 }, { \"name\": \"xor\", \"value\": 354 }, { \"name\": \"_\", \"value\": 264 } ] }, { \"name\": \"Minimum\", \"value\": 843 }, { \"name\": \"Not\", \"value\": 1554 }, { \"name\": \"Or\", \"value\": 970 }, { \"name\": \"Query\", \"value\": 13896 }, { \"name\": \"Range\", \"value\": 1594 }, { \"name\": \"StringUtil\", \"value\": 4130 }, { \"name\": \"Sum\", \"value\": 791 }, { \"name\": \"Variable\", \"value\": 1124 }, { \"name\": \"Variance\", \"value\": 1876 }, { \"name\": \"Xor\", \"value\": 1101 } ] }, { \"name\": \"scale\", \"children\": [ { \"name\": \"IScaleMap\", \"value\": 2105 }, { \"name\": \"LinearScale\", \"value\": 1316 }, { \"name\": \"LogScale\", \"value\": 3151 }, { \"name\": \"OrdinalScale\", \"value\": 3770 }, { \"name\": \"QuantileScale\", \"value\": 2435 }, { \"name\": \"QuantitativeScale\", \"value\": 4839 }, { \"name\": \"RootScale\", \"value\": 1756 }, { \"name\": \"Scale\", \"value\": 4268 }, { \"name\": \"ScaleType\", \"value\": 1821 }, { \"name\": \"TimeScale\", \"value\": 5833 } ] }, { \"name\": \"util\", \"children\": [ { \"name\": \"Arrays\", \"value\": 8258 }, { \"name\": \"Colors\", \"value\": 10001 }, { \"name\": \"Dates\", \"value\": 8217 }, { \"name\": \"Displays\", \"value\": 12555 }, { \"name\": \"Filter\", \"value\": 2324 }, { \"name\": \"Geometry\", \"value\": 10993 }, { \"name\": \"heap\", \"children\": [ { \"name\": \"FibonacciHeap\", \"value\": 9354 }, { \"name\": \"HeapNode\", \"value\": 1233 } ] }, { \"name\": \"IEvaluable\", \"value\": 335 }, { \"name\": \"IPredicate\", \"value\": 383 }, { \"name\": \"IValueProxy\", \"value\": 874 }, { \"name\": \"math\", \"children\": [ { \"name\": \"DenseMatrix\", \"value\": 3165 }, { \"name\": \"IMatrix\", \"value\": 2815 }, { \"name\": \"SparseMatrix\", \"value\": 3366 } ] }, { \"name\": \"Maths\", \"value\": 17705 }, { \"name\": \"Orientation\", \"value\": 1486 }, { \"name\": \"palette\", \"children\": [ { \"name\": \"ColorPalette\", \"value\": 6367 }, { \"name\": \"Palette\", \"value\": 1229 }, { \"name\": \"ShapePalette\", \"value\": 2059 }, { \"name\": \"SizePalette\", \"value\": 2291 } ] }, { \"name\": \"Property\", \"value\": 5559 }, { \"name\": \"Shapes\", \"value\": 19118 }, { \"name\": \"Sort\", \"value\": 6887 }, { \"name\": \"Stats\", \"value\": 6557 }, { \"name\": \"Strings\", \"value\": 22026 } ] }, { \"name\": \"vis\", \"children\": [ { \"name\": \"axis\", \"children\": [ { \"name\": \"Axes\", \"value\": 1302 }, { \"name\": \"Axis\", \"value\": 24593 }, { \"name\": \"AxisGridLine\", \"value\": 652 }, { \"name\": \"AxisLabel\", \"value\": 636 }, { \"name\": \"CartesianAxes\", \"value\": 6703 } ] }, { \"name\": \"controls\", \"children\": [ { \"name\": \"AnchorControl\", \"value\": 2138 }, { \"name\": \"ClickControl\", \"value\": 3824 }, { \"name\": \"Control\", \"value\": 1353 }, { \"name\": \"ControlList\", \"value\": 4665 }, { \"name\": \"DragControl\", \"value\": 2649 }, { \"name\": \"ExpandControl\", \"value\": 2832 }, { \"name\": \"HoverControl\", \"value\": 4896 }, { \"name\": \"IControl\", \"value\": 763 }, { \"name\": \"PanZoomControl\", \"value\": 5222 }, { \"name\": \"SelectionControl\", \"value\": 7862 }, { \"name\": \"TooltipControl\", \"value\": 8435 } ] }, { \"name\": \"data\", \"children\": [ { \"name\": \"Data\", \"value\": 20544 }, { \"name\": \"DataList\", \"value\": 19788 }, { \"name\": \"DataSprite\", \"value\": 10349 }, { \"name\": \"EdgeSprite\", \"value\": 3301 }, { \"name\": \"NodeSprite\", \"value\": 19382 }, { \"name\": \"render\", \"children\": [ { \"name\": \"ArrowType\", \"value\": 698 }, { \"name\": \"EdgeRenderer\", \"value\": 5569 }, { \"name\": \"IRenderer\", \"value\": 353 }, { \"name\": \"ShapeRenderer\", \"value\": 2247 } ] }, { \"name\": \"ScaleBinding\", \"value\": 11275 }, { \"name\": \"Tree\", \"value\": 7147 }, { \"name\": \"TreeBuilder\", \"value\": 9930 } ] }, { \"name\": \"events\", \"children\": [ { \"name\": \"DataEvent\", \"value\": 2313 }, { \"name\": \"SelectionEvent\", \"value\": 1880 }, { \"name\": \"TooltipEvent\", \"value\": 1701 }, { \"name\": \"VisualizationEvent\", \"value\": 1117 } ] }, { \"name\": \"legend\", \"children\": [ { \"name\": \"Legend\", \"value\": 20859 }, { \"name\": \"LegendItem\", \"value\": 4614 }, { \"name\": \"LegendRange\", \"value\": 10530 } ] }, { \"name\": \"operator\", \"children\": [ { \"name\": \"distortion\", \"children\": [ { \"name\": \"BifocalDistortion\", \"value\": 4461 }, { \"name\": \"Distortion\", \"value\": 6314 }, { \"name\": \"FisheyeDistortion\", \"value\": 3444 } ] }, { \"name\": \"encoder\", \"children\": [ { \"name\": \"ColorEncoder\", \"value\": 3179 }, { \"name\": \"Encoder\", \"value\": 4060 }, { \"name\": \"PropertyEncoder\", \"value\": 4138 }, { \"name\": \"ShapeEncoder\", \"value\": 1690 }, { \"name\": \"SizeEncoder\", \"value\": 1830 } ] }, { \"name\": \"filter\", \"children\": [ { \"name\": \"FisheyeTreeFilter\", \"value\": 5219 }, { \"name\": \"GraphDistanceFilter\", \"value\": 3165 }, { \"name\": \"VisibilityFilter\", \"value\": 3509 } ] }, { \"name\": \"IOperator\", \"value\": 1286 }, { \"name\": \"label\", \"children\": [ { \"name\": \"Labeler\", \"value\": 9956 }, { \"name\": \"RadialLabeler\", \"value\": 3899 }, { \"name\": \"StackedAreaLabeler\", \"value\": 3202 } ] }, { \"name\": \"layout\", \"children\": [ { \"name\": \"AxisLayout\", \"value\": 6725 }, { \"name\": \"BundledEdgeRouter\", \"value\": 3727 }, { \"name\": \"CircleLayout\", \"value\": 9317 }, { \"name\": \"CirclePackingLayout\", \"value\": 12003 }, { \"name\": \"DendrogramLayout\", \"value\": 4853 }, { \"name\": \"ForceDirectedLayout\", \"value\": 8411 }, { \"name\": \"IcicleTreeLayout\", \"value\": 4864 }, { \"name\": \"IndentedTreeLayout\", \"value\": 3174 }, { \"name\": \"Layout\", \"value\": 7881 }, { \"name\": \"NodeLinkTreeLayout\", \"value\": 12870 }, { \"name\": \"PieLayout\", \"value\": 2728 }, { \"name\": \"RadialTreeLayout\", \"value\": 12348 }, { \"name\": \"RandomLayout\", \"value\": 870 }, { \"name\": \"StackedAreaLayout\", \"value\": 9121 }, { \"name\": \"TreeMapLayout\", \"value\": 9191 } ] }, { \"name\": \"Operator\", \"value\": 2490 }, { \"name\": \"OperatorList\", \"value\": 5248 }, { \"name\": \"OperatorSequence\", \"value\": 4190 }, { \"name\": \"OperatorSwitch\", \"value\": 2581 }, { \"name\": \"SortOperator\", \"value\": 2023 } ] }, { \"name\": \"Visualization\", \"value\": 16540 } ] } ] }","payloadType":"json","x":330,"y":460,"wires":[["db838e34.b39d9"]]},{"id":"c9d6d3b4.53251","type":"debug","z":"f57cec1.87f8d1","name":"CirclePackingLog","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":950,"y":460,"wires":[]},{"id":"d7e1bfad.00a8c","type":"inject","z":"f57cec1.87f8d1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"10","topic":"","payload":"{ \"name\": \"flare\", \"children\": [ { \"name\": \"analytics\", \"children\": [ { \"name\": \"cluster\", \"children\": [ { \"name\": \"AgglomerativeCluster\", \"value\": 3938 }, { \"name\": \"CommunityStructure\", \"value\": 3812 }, { \"name\": \"HierarchicalCluster\", \"value\": 6714 }, { \"name\": \"MergeEdge\", \"value\": 743 } ] }, { \"name\": \"graph\", \"children\": [ { \"name\": \"BetweennessCentrality\", \"value\": 3534 }, { \"name\": \"LinkDistance\", \"value\": 5731 }, { \"name\": \"MaxFlowMinCut\", \"value\": 7840 }, { \"name\": \"ShortestPaths\", \"value\": 5914 }, { \"name\": \"SpanningTree\", \"value\": 3416 } ] }, { \"name\": \"optimization\", \"children\": [ { \"name\": \"AspectRatioBanker\", \"value\": 7074 } ] } ] }, { \"name\": \"animate\", \"children\": [ { \"name\": \"Easing\", \"value\": 17010 }, { \"name\": \"FunctionSequence\", \"value\": 5842 }, { \"name\": \"interpolate\", \"children\": [ { \"name\": \"ArrayInterpolator\", \"value\": 1983 }, { \"name\": \"ColorInterpolator\", \"value\": 2047 }, { \"name\": \"DateInterpolator\", \"value\": 1375 }, { \"name\": \"Interpolator\", \"value\": 8746 }, { \"name\": \"MatrixInterpolator\", \"value\": 2202 }, { \"name\": \"NumberInterpolator\", \"value\": 1382 }, { \"name\": \"ObjectInterpolator\", \"value\": 1629 }, { \"name\": \"PointInterpolator\", \"value\": 1675 }, { \"name\": \"RectangleInterpolator\", \"value\": 2042 } ] }, { \"name\": \"ISchedulable\", \"value\": 1041 }, { \"name\": \"Parallel\", \"value\": 5176 }, { \"name\": \"Pause\", \"value\": 449 }, { \"name\": \"Scheduler\", \"value\": 5593 }, { \"name\": \"Sequence\", \"value\": 5534 }, { \"name\": \"Transition\", \"value\": 9201 }, { \"name\": \"Transitioner\", \"value\": 19975 }, { \"name\": \"TransitionEvent\", \"value\": 1116 }, { \"name\": \"Tween\", \"value\": 6006 } ] }, { \"name\": \"data\", \"children\": [ { \"name\": \"converters\", \"children\": [ { \"name\": \"Converters\", \"value\": 721 }, { \"name\": \"DelimitedTextConverter\", \"value\": 4294 }, { \"name\": \"GraphMLConverter\", \"value\": 9800 }, { \"name\": \"IDataConverter\", \"value\": 1314 }, { \"name\": \"JSONConverter\", \"value\": 2220 } ] }, { \"name\": \"DataField\", \"value\": 1759 }, { \"name\": \"DataSchema\", \"value\": 2165 }, { \"name\": \"DataSet\", \"value\": 586 }, { \"name\": \"DataSource\", \"value\": 3331 }, { \"name\": \"DataTable\", \"value\": 772 }, { \"name\": \"DataUtil\", \"value\": 3322 } ] }, { \"name\": \"display\", \"children\": [ { \"name\": \"DirtySprite\", \"value\": 8833 }, { \"name\": \"LineSprite\", \"value\": 1732 }, { \"name\": \"RectSprite\", \"value\": 3623 }, { \"name\": \"TextSprite\", \"value\": 10066 } ] }, { \"name\": \"flex\", \"children\": [ { \"name\": \"FlareVis\", \"value\": 4116 } ] }, { \"name\": \"physics\", \"children\": [ { \"name\": \"DragForce\", \"value\": 1082 }, { \"name\": \"GravityForce\", \"value\": 1336 }, { \"name\": \"IForce\", \"value\": 319 }, { \"name\": \"NBodyForce\", \"value\": 10498 }, { \"name\": \"Particle\", \"value\": 2822 }, { \"name\": \"Simulation\", \"value\": 9983 }, { \"name\": \"Spring\", \"value\": 2213 }, { \"name\": \"SpringForce\", \"value\": 1681 } ] }, { \"name\": \"query\", \"children\": [ { \"name\": \"AggregateExpression\", \"value\": 1616 }, { \"name\": \"And\", \"value\": 1027 }, { \"name\": \"Arithmetic\", \"value\": 3891 }, { \"name\": \"Average\", \"value\": 891 }, { \"name\": \"BinaryExpression\", \"value\": 2893 }, { \"name\": \"Comparison\", \"value\": 5103 }, { \"name\": \"CompositeExpression\", \"value\": 3677 }, { \"name\": \"Count\", \"value\": 781 }, { \"name\": \"DateUtil\", \"value\": 4141 }, { \"name\": \"Distinct\", \"value\": 933 }, { \"name\": \"Expression\", \"value\": 5130 }, { \"name\": \"ExpressionIterator\", \"value\": 3617 }, { \"name\": \"Fn\", \"value\": 3240 }, { \"name\": \"If\", \"value\": 2732 }, { \"name\": \"IsA\", \"value\": 2039 }, { \"name\": \"Literal\", \"value\": 1214 }, { \"name\": \"Match\", \"value\": 3748 }, { \"name\": \"Maximum\", \"value\": 843 }, { \"name\": \"methods\", \"children\": [ { \"name\": \"add\", \"value\": 593 }, { \"name\": \"and\", \"value\": 330 }, { \"name\": \"average\", \"value\": 287 }, { \"name\": \"count\", \"value\": 277 }, { \"name\": \"distinct\", \"value\": 292 }, { \"name\": \"div\", \"value\": 595 }, { \"name\": \"eq\", \"value\": 594 }, { \"name\": \"fn\", \"value\": 460 }, { \"name\": \"gt\", \"value\": 603 }, { \"name\": \"gte\", \"value\": 625 }, { \"name\": \"iff\", \"value\": 748 }, { \"name\": \"isa\", \"value\": 461 }, { \"name\": \"lt\", \"value\": 597 }, { \"name\": \"lte\", \"value\": 619 }, { \"name\": \"max\", \"value\": 283 }, { \"name\": \"min\", \"value\": 283 }, { \"name\": \"mod\", \"value\": 591 }, { \"name\": \"mul\", \"value\": 603 }, { \"name\": \"neq\", \"value\": 599 }, { \"name\": \"not\", \"value\": 386 }, { \"name\": \"or\", \"value\": 323 }, { \"name\": \"orderby\", \"value\": 307 }, { \"name\": \"range\", \"value\": 772 }, { \"name\": \"select\", \"value\": 296 }, { \"name\": \"stddev\", \"value\": 363 }, { \"name\": \"sub\", \"value\": 600 }, { \"name\": \"sum\", \"value\": 280 }, { \"name\": \"update\", \"value\": 307 }, { \"name\": \"variance\", \"value\": 335 }, { \"name\": \"where\", \"value\": 299 }, { \"name\": \"xor\", \"value\": 354 }, { \"name\": \"_\", \"value\": 264 } ] }, { \"name\": \"Minimum\", \"value\": 843 }, { \"name\": \"Not\", \"value\": 1554 }, { \"name\": \"Or\", \"value\": 970 }, { \"name\": \"Query\", \"value\": 13896 }, { \"name\": \"Range\", \"value\": 1594 }, { \"name\": \"StringUtil\", \"value\": 4130 }, { \"name\": \"Sum\", \"value\": 791 }, { \"name\": \"Variable\", \"value\": 1124 }, { \"name\": \"Variance\", \"value\": 1876 }, { \"name\": \"Xor\", \"value\": 1101 } ] }, { \"name\": \"scale\", \"children\": [ { \"name\": \"IScaleMap\", \"value\": 2105 }, { \"name\": \"LinearScale\", \"value\": 1316 }, { \"name\": \"LogScale\", \"value\": 3151 }, { \"name\": \"OrdinalScale\", \"value\": 3770 }, { \"name\": \"QuantileScale\", \"value\": 2435 }, { \"name\": \"QuantitativeScale\", \"value\": 4839 }, { \"name\": \"RootScale\", \"value\": 1756 }, { \"name\": \"Scale\", \"value\": 4268 }, { \"name\": \"ScaleType\", \"value\": 1821 }, { \"name\": \"TimeScale\", \"value\": 5833 } ] }, { \"name\": \"util\", \"children\": [ { \"name\": \"Arrays\", \"value\": 8258 }, { \"name\": \"Colors\", \"value\": 10001 }, { \"name\": \"Dates\", \"value\": 8217 }, { \"name\": \"Displays\", \"value\": 12555 }, { \"name\": \"Filter\", \"value\": 2324 }, { \"name\": \"Geometry\", \"value\": 10993 }, { \"name\": \"heap\", \"children\": [ { \"name\": \"FibonacciHeap\", \"value\": 9354 }, { \"name\": \"HeapNode\", \"value\": 1233 } ] }, { \"name\": \"IEvaluable\", \"value\": 335 }, { \"name\": \"IPredicate\", \"value\": 383 }, { \"name\": \"IValueProxy\", \"value\": 874 }, { \"name\": \"math\", \"children\": [ { \"name\": \"DenseMatrix\", \"value\": 3165 }, { \"name\": \"IMatrix\", \"value\": 2815 }, { \"name\": \"SparseMatrix\", \"value\": 3366 } ] }, { \"name\": \"Maths\", \"value\": 17705 }, { \"name\": \"Orientation\", \"value\": 1486 }, { \"name\": \"palette\", \"children\": [ { \"name\": \"ColorPalette\", \"value\": 6367 }, { \"name\": \"Palette\", \"value\": 1229 }, { \"name\": \"ShapePalette\", \"value\": 2059 }, { \"name\": \"SizePalette\", \"value\": 2291 } ] }, { \"name\": \"Property\", \"value\": 5559 }, { \"name\": \"Shapes\", \"value\": 19118 }, { \"name\": \"Sort\", \"value\": 6887 }, { \"name\": \"Stats\", \"value\": 6557 }, { \"name\": \"Strings\", \"value\": 22026 } ] }, { \"name\": \"vis\", \"children\": [ { \"name\": \"axis\", \"children\": [ { \"name\": \"Axes\", \"value\": 1302 }, { \"name\": \"Axis\", \"value\": 24593 }, { \"name\": \"AxisGridLine\", \"value\": 652 }, { \"name\": \"AxisLabel\", \"value\": 636 }, { \"name\": \"CartesianAxes\", \"value\": 6703 } ] }, { \"name\": \"controls\", \"children\": [ { \"name\": \"AnchorControl\", \"value\": 2138 }, { \"name\": \"ClickControl\", \"value\": 3824 }, { \"name\": \"Control\", \"value\": 1353 }, { \"name\": \"ControlList\", \"value\": 4665 }, { \"name\": \"DragControl\", \"value\": 2649 }, { \"name\": \"ExpandControl\", \"value\": 2832 }, { \"name\": \"HoverControl\", \"value\": 4896 }, { \"name\": \"IControl\", \"value\": 763 }, { \"name\": \"PanZoomControl\", \"value\": 5222 }, { \"name\": \"SelectionControl\", \"value\": 7862 }, { \"name\": \"TooltipControl\", \"value\": 8435 } ] }, { \"name\": \"data\", \"children\": [ { \"name\": \"Data\", \"value\": 20544 }, { \"name\": \"DataList\", \"value\": 19788 }, { \"name\": \"DataSprite\", \"value\": 10349 }, { \"name\": \"EdgeSprite\", \"value\": 3301 }, { \"name\": \"NodeSprite\", \"value\": 19382 }, { \"name\": \"render\", \"children\": [ { \"name\": \"ArrowType\", \"value\": 698 }, { \"name\": \"EdgeRenderer\", \"value\": 5569 }, { \"name\": \"IRenderer\", \"value\": 353 }, { \"name\": \"ShapeRenderer\", \"value\": 2247 } ] }, { \"name\": \"ScaleBinding\", \"value\": 11275 }, { \"name\": \"Tree\", \"value\": 7147 }, { \"name\": \"TreeBuilder\", \"value\": 9930 } ] }, { \"name\": \"events\", \"children\": [ { \"name\": \"DataEvent\", \"value\": 2313 }, { \"name\": \"SelectionEvent\", \"value\": 1880 }, { \"name\": \"TooltipEvent\", \"value\": 1701 }, { \"name\": \"VisualizationEvent\", \"value\": 1117 } ] }, { \"name\": \"legend\", \"children\": [ { \"name\": \"Legend\", \"value\": 20859 }, { \"name\": \"LegendItem\", \"value\": 4614 }, { \"name\": \"LegendRange\", \"value\": 10530 } ] }, { \"name\": \"operator\", \"children\": [ { \"name\": \"distortion\", \"children\": [ { \"name\": \"BifocalDistortion\", \"value\": 4461 }, { \"name\": \"Distortion\", \"value\": 6314 }, { \"name\": \"FisheyeDistortion\", \"value\": 3444 } ] }, { \"name\": \"encoder\", \"children\": [ { \"name\": \"ColorEncoder\", \"value\": 3179 }, { \"name\": \"Encoder\", \"value\": 4060 }, { \"name\": \"PropertyEncoder\", \"value\": 4138 }, { \"name\": \"ShapeEncoder\", \"value\": 1690 }, { \"name\": \"SizeEncoder\", \"value\": 1830 } ] }, { \"name\": \"filter\", \"children\": [ { \"name\": \"FisheyeTreeFilter\", \"value\": 5219 }, { \"name\": \"GraphDistanceFilter\", \"value\": 3165 }, { \"name\": \"VisibilityFilter\", \"value\": 3509 } ] }, { \"name\": \"IOperator\", \"value\": 1286 }, { \"name\": \"label\", \"children\": [ { \"name\": \"Labeler\", \"value\": 9956 }, { \"name\": \"RadialLabeler\", \"value\": 3899 }, { \"name\": \"StackedAreaLabeler\", \"value\": 3202 } ] }, { \"name\": \"layout\", \"children\": [ { \"name\": \"AxisLayout\", \"value\": 6725 }, { \"name\": \"BundledEdgeRouter\", \"value\": 3727 }, { \"name\": \"CircleLayout\", \"value\": 9317 }, { \"name\": \"CirclePackingLayout\", \"value\": 12003 }, { \"name\": \"DendrogramLayout\", \"value\": 4853 }, { \"name\": \"ForceDirectedLayout\", \"value\": 8411 }, { \"name\": \"IcicleTreeLayout\", \"value\": 4864 }, { \"name\": \"IndentedTreeLayout\", \"value\": 3174 }, { \"name\": \"Layout\", \"value\": 7881 }, { \"name\": \"NodeLinkTreeLayout\", \"value\": 12870 }, { \"name\": \"PieLayout\", \"value\": 2728 }, { \"name\": \"RadialTreeLayout\", \"value\": 12348 }, { \"name\": \"RandomLayout\", \"value\": 870 }, { \"name\": \"StackedAreaLayout\", \"value\": 9121 }, { \"name\": \"TreeMapLayout\", \"value\": 9191 } ] }, { \"name\": \"Operator\", \"value\": 2490 }, { \"name\": \"OperatorList\", \"value\": 5248 }, { \"name\": \"OperatorSequence\", \"value\": 4190 }, { \"name\": \"OperatorSwitch\", \"value\": 2581 }, { \"name\": \"SortOperator\", \"value\": 2023 } ] }, { \"name\": \"Visualization\", \"value\": 16540 } ] } ] }","payloadType":"json","x":330,"y":540,"wires":[["bcec7138.df91e","46604072.ab1de"]]},{"id":"f743e1d2.f1c1e","type":"debug","z":"f57cec1.87f8d1","name":"Sunburst","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":960,"y":540,"wires":[]},{"id":"bcec7138.df91e","type":"function","z":"f57cec1.87f8d1","name":"","func":"const d3Configuration=String.raw`\n /**\n * \n * @param d3: instance of D3 library\n * @param d3Data: data sent by node-red for rendering with D3.\n * @param width : width of the widget display space\n * @param height :height of the widget display space \n * @param sendToNodeRed: function used to send back data from widget to node-red\n * @returns D3 chart instance\n */\nasync function drawD3Chart(d3,d3Data,width,height,sendToNodeRed){\n// SOURCE https://observablehq.com/@d3/zoomable-sunburst\nconst data = d3Data;\n\nconst partition = data => {\nconst root = d3.hierarchy(data)\n.sum(d => d.value)\n.sort((a, b) => b.value - a.value);\nreturn d3.partition()\n.size([2 * Math.PI, root.height + 1])\n(root);\n}\n\nconst color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1));\n\nconst format = d3.format(\",d\");\n\nconst radius = width / 6;\n\nconst arc = d3.arc()\n.startAngle(d => d.x0)\n.endAngle(d => d.x1)\n.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))\n.padRadius(radius * 1.5)\n.innerRadius(d => d.y0 * radius)\n.outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1));\n\nconst root = partition(data);\n\nroot.each(d => d.current = d);\n\nconst svg = d3.create(\"svg\")\n.attr(\"viewBox\", [0, 0, width, width])\n.style(\"font\", \"10px sans-serif\");\n\nconst g = svg.append(\"g\")\n.attr(\"transform\", \"translate(\"+(width / 2)+\",\"+(width / 2)+\")\");\n\nconst path = g.append(\"g\")\n.selectAll(\"path\")\n.data(root.descendants().slice(1))\n.join(\"path\")\n.attr(\"fill\", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })\n.attr(\"fill-opacity\", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0)\n.attr(\"pointer-events\", d => arcVisible(d.current) ? \"auto\" : \"none\")\n\n.attr(\"d\", d => arc(d.current));\n\npath.filter(d => d.children)\n.style(\"cursor\", \"pointer\")\n.on(\"click\", clicked);\n\npath.append(\"title\")\n.text(d => d.ancestors().map(d => d.data.name).reverse().join(\"/\")+\"\\n\"+format(d.value));\n\nconst label = g.append(\"g\")\n.attr(\"pointer-events\", \"none\")\n.attr(\"text-anchor\", \"middle\")\n.style(\"user-select\", \"none\")\n.selectAll(\"text\")\n.data(root.descendants().slice(1))\n.join(\"text\")\n.attr(\"dy\", \"0.35em\")\n.attr(\"fill-opacity\", d => +labelVisible(d.current))\n.attr(\"transform\", d => labelTransform(d.current))\n.text(d => d.data.name);\n\nconst parent = g.append(\"circle\")\n.datum(root)\n.attr(\"r\", radius)\n.attr(\"fill\", \"none\")\n.attr(\"pointer-events\", \"all\")\n.on(\"click\", clicked);\n\nfunction clicked(event, p) { \nparent.datum(p.parent || root);\n\nroot.each(d => d.target = {\nx0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,\nx1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,\ny0: Math.max(0, d.y0 - p.depth),\ny1: Math.max(0, d.y1 - p.depth)\n});\n\nconst t = g.transition().duration(750);\n\n// Transition the data on all arcs, even the ones that aren’t visible,\n// so that if this transition is interrupted, entering arcs will start\n// the next transition from the desired position.\npath.transition(t)\n.tween(\"data\", d => {\nconst i = d3.interpolate(d.current, d.target);\nreturn t => d.current = i(t);\n})\n.filter(function(d) {\nreturn +this.getAttribute(\"fill-opacity\") || arcVisible(d.target);\n})\n.attr(\"fill-opacity\", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0)\n.attr(\"pointer-events\", d => arcVisible(d.target) ? \"auto\" : \"none\") \n\n.attrTween(\"d\", d => () => arc(d.current));\n\nlabel.filter(function(d) {\nreturn +this.getAttribute(\"fill-opacity\") || labelVisible(d.target);\n}).transition(t)\n.attr(\"fill-opacity\", d => +labelVisible(d.target))\n.attrTween(\"transform\", d => () => labelTransform(d.current));\n\nsendToNodeRed({data:(p?.data || root.data)})\n}\n\nfunction arcVisible(d) {\nreturn d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0;\n}\n\nfunction labelVisible(d) {\nreturn d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03;\n}\n\nfunction labelTransform(d) {\nconst x = (d.x0 + d.x1) / 2 * 180 / Math.PI;\nconst y = (d.y0 + d.y1) / 2 * radius;\nreturn \"rotate(\"+(x - 90)+\") translate(\"+(y)+\",0) rotate(\"+(x < 180 ? 0 : 180)+\")\";\n}\n\nreturn svg.node();\n} \n `;\n \n // ERA return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;\n\n\n//msg.payload=Object.assign(msg.payload,{d3Configuration:d3Configuration});\nmsg[\"configuration\"]=d3Configuration;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":500,"y":540,"wires":[["64ee825f.1d800c","46604072.ab1de"]]},{"id":"64ee825f.1d800c","type":"Snap4D3","z":"f57cec1.87f8d1","selectedDashboardId":"3489","flowName":"DEMO SNAP4D3 V2","authentication":"","username":"eventtest","name":"Sunburst Payload Config","dashboardId":"3489","metricType":"Percentuale","startValue":0,"metricShortDesc":"","metricFullDesc":"","d3Configuration":"insert here your D3 code","x":730,"y":540,"wires":[["f743e1d2.f1c1e"]]},{"id":"cb5867b1.77b368","type":"function","z":"f57cec1.87f8d1","name":"","func":"msg.payload = [{\"letter\":\"A\",\"frequency\":0.08167},{\"letter\":\"B\",\"frequency\":0.01492},{\"letter\":\"C\",\"frequency\":0.02782},{\"letter\":\"D\",\"frequency\":0.04253},{\"letter\":\"E\",\"frequency\":0.12702},{\"letter\":\"F\",\"frequency\":0.02288},{\"letter\":\"G\",\"frequency\":0.02015},{\"letter\":\"H\",\"frequency\":0.06094},{\"letter\":\"I\",\"frequency\":0.06966},{\"letter\":\"J\",\"frequency\":0.00153},{\"letter\":\"K\",\"frequency\":0.00772},{\"letter\":\"L\",\"frequency\":0.04025},{\"letter\":\"M\",\"frequency\":0.02406},{\"letter\":\"N\",\"frequency\":0.06749},{\"letter\":\"O\",\"frequency\":0.07507},{\"letter\":\"P\",\"frequency\":0.01929},{\"letter\":\"Q\",\"frequency\":0.00095},{\"letter\":\"R\",\"frequency\":0.05987},{\"letter\":\"S\",\"frequency\":0.06327},{\"letter\":\"T\",\"frequency\":0.09056},{\"letter\":\"U\",\"frequency\":0.02758},{\"letter\":\"V\",\"frequency\":0.00978},{\"letter\":\"W\",\"frequency\":0.0236},{\"letter\":\"X\",\"frequency\":0.0015},{\"letter\":\"Y\",\"frequency\":0.01974},{\"letter\":\"Z\",\"frequency\":0.00074}]\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":320,"y":100,"wires":[["fd7bbd52.79b88"]]},{"id":"a7db4abe.ea5588","type":"function","z":"f57cec1.87f8d1","name":"","func":"msg.payload = { \"series\": [ [ 0.096899, 0.008859, 0.000554, 0.004430, 0.025471, 0.024363, 0.005537, 0.025471 ], [ 0.001107, 0.018272, 0.000000, 0.004983, 0.011074, 0.010520, 0.002215, 0.004983 ], [ 0.000554, 0.002769, 0.002215, 0.002215, 0.003876, 0.008306, 0.000554, 0.003322 ], [ 0.000554, 0.001107, 0.000554, 0.012182, 0.011628, 0.006645, 0.004983, 0.010520 ], [ 0.002215, 0.004430, 0.000000, 0.002769, 0.104097, 0.012182, 0.004983, 0.028239 ], [ 0.011628, 0.026024, 0.000000, 0.013843, 0.087486, 0.168328, 0.017165, 0.055925 ], [ 0.000554, 0.004983, 0.000000, 0.003322, 0.004430, 0.008859, 0.017719, 0.004430 ], [ 0.002215, 0.007198, 0.000000, 0.003322, 0.016611, 0.014950, 0.001107, 0.054264 ] ], \"names\": [ \"Apple\", \"HTC\", \"Huawei\", \"LG\", \"Nokia\", \"Samsung\", \"Sony\", \"Other\" ], \"colors\": [ \"#c4c4c4\", \"#69b40f\", \"#ec1d25\", \"#c8125c\", \"#008fc8\", \"#10218b\", \"#134b24\", \"#737373\" ] }\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":320,"y":200,"wires":[["6624bc27.d5e554"]]},{"id":"b14b0e25.f1dcd","type":"function","z":"f57cec1.87f8d1","name":"","func":"msg.payload = [ { \"x\": 79, \"y\": 3.6 }, { \"x\": 54, \"y\": 1.8 }, { \"x\": 74, \"y\": 3.333 }, { \"x\": 62, \"y\": 2.283 }, { \"x\": 85, \"y\": 4.533 }, { \"x\": 55, \"y\": 2.883 }, { \"x\": 88, \"y\": 4.7 }, { \"x\": 85, \"y\": 3.6 }, { \"x\": 51, \"y\": 1.95 }, { \"x\": 85, \"y\": 4.35 }, { \"x\": 54, \"y\": 1.833 }, { \"x\": 84, \"y\": 3.917 }, { \"x\": 78, \"y\": 4.2 }, { \"x\": 47, \"y\": 1.75 }, { \"x\": 83, \"y\": 4.7 }, { \"x\": 52, \"y\": 2.167 }, { \"x\": 62, \"y\": 1.75 }, { \"x\": 84, \"y\": 4.8 }, { \"x\": 52, \"y\": 1.6 }, { \"x\": 79, \"y\": 4.25 }, { \"x\": 51, \"y\": 1.8 }, { \"x\": 47, \"y\": 1.75 }, { \"x\": 78, \"y\": 3.45 }, { \"x\": 69, \"y\": 3.067 }, { \"x\": 74, \"y\": 4.533 }, { \"x\": 83, \"y\": 3.6 }, { \"x\": 55, \"y\": 1.967 }, { \"x\": 76, \"y\": 4.083 }, { \"x\": 78, \"y\": 3.85 }, { \"x\": 79, \"y\": 4.433 }, { \"x\": 73, \"y\": 4.3 }, { \"x\": 77, \"y\": 4.467 }, { \"x\": 66, \"y\": 3.367 }, { \"x\": 80, \"y\": 4.033 }, { \"x\": 74, \"y\": 3.833 }, { \"x\": 52, \"y\": 2.017 }, { \"x\": 48, \"y\": 1.867 }, { \"x\": 80, \"y\": 4.833 }, { \"x\": 59, \"y\": 1.833 }, { \"x\": 90, \"y\": 4.783 }, { \"x\": 80, \"y\": 4.35 }, { \"x\": 58, \"y\": 1.883 }, { \"x\": 84, \"y\": 4.567 }, { \"x\": 58, \"y\": 1.75 }, { \"x\": 73, \"y\": 4.533 }, { \"x\": 83, \"y\": 3.317 }, { \"x\": 64, \"y\": 3.833 }, { \"x\": 53, \"y\": 2.1 }, { \"x\": 82, \"y\": 4.633 }, { \"x\": 59, \"y\": 2 }, { \"x\": 75, \"y\": 4.8 }, { \"x\": 90, \"y\": 4.716 }, { \"x\": 54, \"y\": 1.833 }, { \"x\": 80, \"y\": 4.833 }, { \"x\": 54, \"y\": 1.733 }, { \"x\": 83, \"y\": 4.883 }, { \"x\": 71, \"y\": 3.717 }, { \"x\": 64, \"y\": 1.667 }, { \"x\": 77, \"y\": 4.567 }, { \"x\": 81, \"y\": 4.317 }, { \"x\": 59, \"y\": 2.233 }, { \"x\": 84, \"y\": 4.5 }, { \"x\": 48, \"y\": 1.75 }, { \"x\": 82, \"y\": 4.8 }, { \"x\": 60, \"y\": 1.817 }, { \"x\": 92, \"y\": 4.4 }, { \"x\": 78, \"y\": 4.167 }, { \"x\": 78, \"y\": 4.7 }, { \"x\": 65, \"y\": 2.067 }, { \"x\": 73, \"y\": 4.7 }, { \"x\": 82, \"y\": 4.033 }, { \"x\": 56, \"y\": 1.967 }, { \"x\": 79, \"y\": 4.5 }, { \"x\": 71, \"y\": 4 }, { \"x\": 62, \"y\": 1.983 }, { \"x\": 76, \"y\": 5.067 }, { \"x\": 60, \"y\": 2.017 }, { \"x\": 78, \"y\": 4.567 }, { \"x\": 76, \"y\": 3.883 }, { \"x\": 83, \"y\": 3.6 }, { \"x\": 75, \"y\": 4.133 }, { \"x\": 82, \"y\": 4.333 }, { \"x\": 70, \"y\": 4.1 }, { \"x\": 65, \"y\": 2.633 }, { \"x\": 73, \"y\": 4.067 }, { \"x\": 88, \"y\": 4.933 }, { \"x\": 76, \"y\": 3.95 }, { \"x\": 80, \"y\": 4.517 }, { \"x\": 48, \"y\": 2.167 }, { \"x\": 86, \"y\": 4 }, { \"x\": 60, \"y\": 2.2 }, { \"x\": 90, \"y\": 4.333 }, { \"x\": 50, \"y\": 1.867 }, { \"x\": 78, \"y\": 4.817 }, { \"x\": 63, \"y\": 1.833 }, { \"x\": 72, \"y\": 4.3 }, { \"x\": 84, \"y\": 4.667 }, { \"x\": 75, \"y\": 3.75 }, { \"x\": 51, \"y\": 1.867 }, { \"x\": 82, \"y\": 4.9 }, { \"x\": 62, \"y\": 2.483 }, { \"x\": 88, \"y\": 4.367 }, { \"x\": 49, \"y\": 2.1 }, { \"x\": 83, \"y\": 4.5 }, { \"x\": 81, \"y\": 4.05 }, { \"x\": 47, \"y\": 1.867 }, { \"x\": 84, \"y\": 4.7 }, { \"x\": 52, \"y\": 1.783 }, { \"x\": 86, \"y\": 4.85 }, { \"x\": 81, \"y\": 3.683 }, { \"x\": 75, \"y\": 4.733 }, { \"x\": 59, \"y\": 2.3 }, { \"x\": 89, \"y\": 4.9 }, { \"x\": 79, \"y\": 4.417 }, { \"x\": 59, \"y\": 1.7 }, { \"x\": 81, \"y\": 4.633 }, { \"x\": 50, \"y\": 2.317 }, { \"x\": 85, \"y\": 4.6 }, { \"x\": 59, \"y\": 1.817 }, { \"x\": 87, \"y\": 4.417 }, { \"x\": 53, \"y\": 2.617 }, { \"x\": 69, \"y\": 4.067 }, { \"x\": 77, \"y\": 4.25 }, { \"x\": 56, \"y\": 1.967 }, { \"x\": 88, \"y\": 4.6 }, { \"x\": 81, \"y\": 3.767 }, { \"x\": 45, \"y\": 1.917 }, { \"x\": 82, \"y\": 4.5 }, { \"x\": 55, \"y\": 2.267 }, { \"x\": 90, \"y\": 4.65 }, { \"x\": 45, \"y\": 1.867 }, { \"x\": 83, \"y\": 4.167 }, { \"x\": 56, \"y\": 2.8 }, { \"x\": 89, \"y\": 4.333 }, { \"x\": 46, \"y\": 1.833 }, { \"x\": 82, \"y\": 4.383 }, { \"x\": 51, \"y\": 1.883 }, { \"x\": 86, \"y\": 4.933 }, { \"x\": 53, \"y\": 2.033 }, { \"x\": 79, \"y\": 3.733 }, { \"x\": 81, \"y\": 4.233 }, { \"x\": 60, \"y\": 2.233 }, { \"x\": 82, \"y\": 4.533 }, { \"x\": 77, \"y\": 4.817 }, { \"x\": 76, \"y\": 4.333 }, { \"x\": 59, \"y\": 1.983 }, { \"x\": 80, \"y\": 4.633 }, { \"x\": 49, \"y\": 2.017 }, { \"x\": 96, \"y\": 5.1 }, { \"x\": 53, \"y\": 1.8 }, { \"x\": 77, \"y\": 5.033 }, { \"x\": 77, \"y\": 4 }, { \"x\": 65, \"y\": 2.4 }, { \"x\": 81, \"y\": 4.6 }, { \"x\": 71, \"y\": 3.567 }, { \"x\": 70, \"y\": 4 }, { \"x\": 81, \"y\": 4.5 }, { \"x\": 93, \"y\": 4.083 }, { \"x\": 53, \"y\": 1.8 }, { \"x\": 89, \"y\": 3.967 }, { \"x\": 45, \"y\": 2.2 }, { \"x\": 86, \"y\": 4.15 }, { \"x\": 58, \"y\": 2 }, { \"x\": 78, \"y\": 3.833 }, { \"x\": 66, \"y\": 3.5 }, { \"x\": 76, \"y\": 4.583 }, { \"x\": 63, \"y\": 2.367 }, { \"x\": 88, \"y\": 5 }, { \"x\": 52, \"y\": 1.933 }, { \"x\": 93, \"y\": 4.617 }, { \"x\": 49, \"y\": 1.917 }, { \"x\": 57, \"y\": 2.083 }, { \"x\": 77, \"y\": 4.583 }, { \"x\": 68, \"y\": 3.333 }, { \"x\": 81, \"y\": 4.167 }, { \"x\": 81, \"y\": 4.333 }, { \"x\": 73, \"y\": 4.5 }, { \"x\": 50, \"y\": 2.417 }, { \"x\": 85, \"y\": 4 }, { \"x\": 74, \"y\": 4.167 }, { \"x\": 55, \"y\": 1.883 }, { \"x\": 77, \"y\": 4.583 }, { \"x\": 83, \"y\": 4.25 }, { \"x\": 83, \"y\": 3.767 }, { \"x\": 51, \"y\": 2.033 }, { \"x\": 78, \"y\": 4.433 }, { \"x\": 84, \"y\": 4.083 }, { \"x\": 46, \"y\": 1.833 }, { \"x\": 83, \"y\": 4.417 }, { \"x\": 55, \"y\": 2.183 }, { \"x\": 81, \"y\": 4.8 }, { \"x\": 57, \"y\": 1.833 }, { \"x\": 76, \"y\": 4.8 }, { \"x\": 84, \"y\": 4.1 }, { \"x\": 77, \"y\": 3.966 }, { \"x\": 81, \"y\": 4.233 }, { \"x\": 87, \"y\": 3.5 }, { \"x\": 77, \"y\": 4.366 }, { \"x\": 51, \"y\": 2.25 }, { \"x\": 78, \"y\": 4.667 }, { \"x\": 60, \"y\": 2.1 }, { \"x\": 82, \"y\": 4.35 }, { \"x\": 91, \"y\": 4.133 }, { \"x\": 53, \"y\": 1.867 }, { \"x\": 78, \"y\": 4.6 }, { \"x\": 46, \"y\": 1.783 }, { \"x\": 77, \"y\": 4.367 }, { \"x\": 84, \"y\": 3.85 }, { \"x\": 49, \"y\": 1.933 }, { \"x\": 83, \"y\": 4.5 }, { \"x\": 71, \"y\": 2.383 }, { \"x\": 80, \"y\": 4.7 }, { \"x\": 49, \"y\": 1.867 }, { \"x\": 75, \"y\": 3.833 }, { \"x\": 64, \"y\": 3.417 }, { \"x\": 76, \"y\": 4.233 }, { \"x\": 53, \"y\": 2.4 }, { \"x\": 94, \"y\": 4.8 }, { \"x\": 55, \"y\": 2 }, { \"x\": 76, \"y\": 4.15 }, { \"x\": 50, \"y\": 1.867 }, { \"x\": 82, \"y\": 4.267 }, { \"x\": 54, \"y\": 1.75 }, { \"x\": 75, \"y\": 4.483 }, { \"x\": 78, \"y\": 4 }, { \"x\": 79, \"y\": 4.117 }, { \"x\": 78, \"y\": 4.083 }, { \"x\": 78, \"y\": 4.267 }, { \"x\": 70, \"y\": 3.917 }, { \"x\": 79, \"y\": 4.55 }, { \"x\": 70, \"y\": 4.083 }, { \"x\": 54, \"y\": 2.417 }, { \"x\": 86, \"y\": 4.183 }, { \"x\": 50, \"y\": 2.217 }, { \"x\": 90, \"y\": 4.45 }, { \"x\": 54, \"y\": 1.883 }, { \"x\": 54, \"y\": 1.85 }, { \"x\": 77, \"y\": 4.283 }, { \"x\": 79, \"y\": 3.95 }, { \"x\": 64, \"y\": 2.333 }, { \"x\": 75, \"y\": 4.15 }, { \"x\": 47, \"y\": 2.35 }, { \"x\": 86, \"y\": 4.933 }, { \"x\": 63, \"y\": 2.9 }, { \"x\": 85, \"y\": 4.583 }, { \"x\": 82, \"y\": 3.833 }, { \"x\": 57, \"y\": 2.083 }, { \"x\": 82, \"y\": 4.367 }, { \"x\": 67, \"y\": 2.133 }, { \"x\": 74, \"y\": 4.35 }, { \"x\": 54, \"y\": 2.2 }, { \"x\": 83, \"y\": 4.45 }, { \"x\": 73, \"y\": 3.567 }, { \"x\": 73, \"y\": 4.5 }, { \"x\": 88, \"y\": 4.15 }, { \"x\": 80, \"y\": 3.817 }, { \"x\": 71, \"y\": 3.917 }, { \"x\": 83, \"y\": 4.45 }, { \"x\": 56, \"y\": 2 }, { \"x\": 79, \"y\": 4.283 }, { \"x\": 78, \"y\": 4.767 }, { \"x\": 84, \"y\": 4.533 }, { \"x\": 58, \"y\": 1.85 }, { \"x\": 83, \"y\": 4.25 }, { \"x\": 43, \"y\": 1.983 }, { \"x\": 60, \"y\": 2.25 }, { \"x\": 75, \"y\": 4.75 }, { \"x\": 81, \"y\": 4.117 }, { \"x\": 46, \"y\": 2.15 }, { \"x\": 90, \"y\": 4.417 }, { \"x\": 46, \"y\": 1.817 }, { \"x\": 74, \"y\": 4.467 } ]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":320,"y":320,"wires":[["f5fcebf5.61eb68"]]},{"id":"d908588f.f23e88","type":"function","z":"f57cec1.87f8d1","name":"","func":"msg.payload = [{\"source\":\"Agricultural 'waste'\",\"target\":\"Bio-conversion\",\"value\":124.729},{\"source\":\"Bio-conversion\",\"target\":\"Liquid\",\"value\":0.597},{\"source\":\"Bio-conversion\",\"target\":\"Losses\",\"value\":26.862},{\"source\":\"Bio-conversion\",\"target\":\"Solid\",\"value\":280.322},{\"source\":\"Bio-conversion\",\"target\":\"Gas\",\"value\":81.144},{\"source\":\"Biofuel imports\",\"target\":\"Liquid\",\"value\":35},{\"source\":\"Biomass imports\",\"target\":\"Solid\",\"value\":35},{\"source\":\"Coal imports\",\"target\":\"Coal\",\"value\":11.606},{\"source\":\"Coal reserves\",\"target\":\"Coal\",\"value\":63.965},{\"source\":\"Coal\",\"target\":\"Solid\",\"value\":75.571},{\"source\":\"District heating\",\"target\":\"Industry\",\"value\":10.639},{\"source\":\"District heating\",\"target\":\"Heating and cooling - commercial\",\"value\":22.505},{\"source\":\"District heating\",\"target\":\"Heating and cooling - homes\",\"value\":46.184},{\"source\":\"Electricity grid\",\"target\":\"Over generation / exports\",\"value\":104.453},{\"source\":\"Electricity grid\",\"target\":\"Heating and cooling - homes\",\"value\":113.726},{\"source\":\"Electricity grid\",\"target\":\"H2 conversion\",\"value\":27.14},{\"source\":\"Electricity grid\",\"target\":\"Industry\",\"value\":342.165},{\"source\":\"Electricity grid\",\"target\":\"Road transport\",\"value\":37.797},{\"source\":\"Electricity grid\",\"target\":\"Agriculture\",\"value\":4.412},{\"source\":\"Electricity grid\",\"target\":\"Heating and cooling - commercial\",\"value\":40.858},{\"source\":\"Electricity grid\",\"target\":\"Losses\",\"value\":56.691},{\"source\":\"Electricity grid\",\"target\":\"Rail transport\",\"value\":7.863},{\"source\":\"Electricity grid\",\"target\":\"Lighting & appliances - commercial\",\"value\":90.008},{\"source\":\"Electricity grid\",\"target\":\"Lighting & appliances - homes\",\"value\":93.494},{\"source\":\"Gas imports\",\"target\":\"Ngas\",\"value\":40.719},{\"source\":\"Gas reserves\",\"target\":\"Ngas\",\"value\":82.233},{\"source\":\"Gas\",\"target\":\"Heating and cooling - commercial\",\"value\":0.129},{\"source\":\"Gas\",\"target\":\"Losses\",\"value\":1.401},{\"source\":\"Gas\",\"target\":\"Thermal generation\",\"value\":151.891},{\"source\":\"Gas\",\"target\":\"Agriculture\",\"value\":2.096},{\"source\":\"Gas\",\"target\":\"Industry\",\"value\":48.58},{\"source\":\"Geothermal\",\"target\":\"Electricity grid\",\"value\":7.013},{\"source\":\"H2 conversion\",\"target\":\"H2\",\"value\":20.897},{\"source\":\"H2 conversion\",\"target\":\"Losses\",\"value\":6.242},{\"source\":\"H2\",\"target\":\"Road transport\",\"value\":20.897},{\"source\":\"Hydro\",\"target\":\"Electricity grid\",\"value\":6.995},{\"source\":\"Liquid\",\"target\":\"Industry\",\"value\":121.066},{\"source\":\"Liquid\",\"target\":\"International shipping\",\"value\":128.69},{\"source\":\"Liquid\",\"target\":\"Road transport\",\"value\":135.835},{\"source\":\"Liquid\",\"target\":\"Domestic aviation\",\"value\":14.458},{\"source\":\"Liquid\",\"target\":\"International aviation\",\"value\":206.267},{\"source\":\"Liquid\",\"target\":\"Agriculture\",\"value\":3.64},{\"source\":\"Liquid\",\"target\":\"National navigation\",\"value\":33.218},{\"source\":\"Liquid\",\"target\":\"Rail transport\",\"value\":4.413},{\"source\":\"Marine algae\",\"target\":\"Bio-conversion\",\"value\":4.375},{\"source\":\"Ngas\",\"target\":\"Gas\",\"value\":122.952},{\"source\":\"Nuclear\",\"target\":\"Thermal generation\",\"value\":839.978},{\"source\":\"Oil imports\",\"target\":\"Oil\",\"value\":504.287},{\"source\":\"Oil reserves\",\"target\":\"Oil\",\"value\":107.703},{\"source\":\"Oil\",\"target\":\"Liquid\",\"value\":611.99},{\"source\":\"Other waste\",\"target\":\"Solid\",\"value\":56.587},{\"source\":\"Other waste\",\"target\":\"Bio-conversion\",\"value\":77.81},{\"source\":\"Pumped heat\",\"target\":\"Heating and cooling - homes\",\"value\":193.026},{\"source\":\"Pumped heat\",\"target\":\"Heating and cooling - commercial\",\"value\":70.672},{\"source\":\"Solar PV\",\"target\":\"Electricity grid\",\"value\":59.901},{\"source\":\"Solar Thermal\",\"target\":\"Heating and cooling - homes\",\"value\":19.263},{\"source\":\"Solar\",\"target\":\"Solar Thermal\",\"value\":19.263},{\"source\":\"Solar\",\"target\":\"Solar PV\",\"value\":59.901},{\"source\":\"Solid\",\"target\":\"Agriculture\",\"value\":0.882},{\"source\":\"Solid\",\"target\":\"Thermal generation\",\"value\":400.12},{\"source\":\"Solid\",\"target\":\"Industry\",\"value\":46.477},{\"source\":\"Thermal generation\",\"target\":\"Electricity grid\",\"value\":525.531},{\"source\":\"Thermal generation\",\"target\":\"Losses\",\"value\":787.129},{\"source\":\"Thermal generation\",\"target\":\"District heating\",\"value\":79.329},{\"source\":\"Tidal\",\"target\":\"Electricity grid\",\"value\":9.452},{\"source\":\"UK land based bioenergy\",\"target\":\"Bio-conversion\",\"value\":182.01},{\"source\":\"Wave\",\"target\":\"Electricity grid\",\"value\":19.013},{\"source\":\"Wind\",\"target\":\"Electricity grid\",\"value\":289.366}]\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":320,"y":420,"wires":[["c700f167.9161"]]},{"id":"46604072.ab1de","type":"debug","z":"f57cec1.87f8d1","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":510,"y":640,"wires":[]},{"id":"fe537875.dc3a48","type":"function","z":"f57cec1.87f8d1","name":"","func":"msg.payload = {\"name\":\"flare\",\"children\":[{\"name\":\"analytics\",\"children\":[{\"name\":\"cluster\",\"children\":[{\"name\":\"AgglomerativeCluster\",\"value\":3938},{\"name\":\"CommunityStructure\",\"value\":3812},{\"name\":\"HierarchicalCluster\",\"value\":6714},{\"name\":\"MergeEdge\",\"value\":743}]},{\"name\":\"graph\",\"children\":[{\"name\":\"BetweennessCentrality\",\"value\":3534},{\"name\":\"LinkDistance\",\"value\":5731},{\"name\":\"MaxFlowMinCut\",\"value\":7840},{\"name\":\"ShortestPaths\",\"value\":5914},{\"name\":\"SpanningTree\",\"value\":3416}]},{\"name\":\"optimization\",\"children\":[{\"name\":\"AspectRatioBanker\",\"value\":7074}]}]},{\"name\":\"animate\",\"children\":[{\"name\":\"Easing\",\"value\":17010},{\"name\":\"FunctionSequence\",\"value\":5842},{\"name\":\"interpolate\",\"children\":[{\"name\":\"ArrayInterpolator\",\"value\":1983},{\"name\":\"ColorInterpolator\",\"value\":2047},{\"name\":\"DateInterpolator\",\"value\":1375},{\"name\":\"Interpolator\",\"value\":8746},{\"name\":\"MatrixInterpolator\",\"value\":2202},{\"name\":\"NumberInterpolator\",\"value\":1382},{\"name\":\"ObjectInterpolator\",\"value\":1629},{\"name\":\"PointInterpolator\",\"value\":1675},{\"name\":\"RectangleInterpolator\",\"value\":2042}]},{\"name\":\"ISchedulable\",\"value\":1041},{\"name\":\"Parallel\",\"value\":5176},{\"name\":\"Pause\",\"value\":449},{\"name\":\"Scheduler\",\"value\":5593},{\"name\":\"Sequence\",\"value\":5534},{\"name\":\"Transition\",\"value\":9201},{\"name\":\"Transitioner\",\"value\":19975},{\"name\":\"TransitionEvent\",\"value\":1116},{\"name\":\"Tween\",\"value\":6006}]},{\"name\":\"data\",\"children\":[{\"name\":\"converters\",\"children\":[{\"name\":\"Converters\",\"value\":721},{\"name\":\"DelimitedTextConverter\",\"value\":4294},{\"name\":\"GraphMLConverter\",\"value\":9800},{\"name\":\"IDataConverter\",\"value\":1314},{\"name\":\"JSONConverter\",\"value\":2220}]},{\"name\":\"DataField\",\"value\":1759},{\"name\":\"DataSchema\",\"value\":2165},{\"name\":\"DataSet\",\"value\":586},{\"name\":\"DataSource\",\"value\":3331},{\"name\":\"DataTable\",\"value\":772},{\"name\":\"DataUtil\",\"value\":3322}]},{\"name\":\"display\",\"children\":[{\"name\":\"DirtySprite\",\"value\":8833},{\"name\":\"LineSprite\",\"value\":1732},{\"name\":\"RectSprite\",\"value\":3623},{\"name\":\"TextSprite\",\"value\":10066}]},{\"name\":\"flex\",\"children\":[{\"name\":\"FlareVis\",\"value\":4116}]},{\"name\":\"physics\",\"children\":[{\"name\":\"DragForce\",\"value\":1082},{\"name\":\"GravityForce\",\"value\":1336},{\"name\":\"IForce\",\"value\":319},{\"name\":\"NBodyForce\",\"value\":10498},{\"name\":\"Particle\",\"value\":2822},{\"name\":\"Simulation\",\"value\":9983},{\"name\":\"Spring\",\"value\":2213},{\"name\":\"SpringForce\",\"value\":1681}]},{\"name\":\"query\",\"children\":[{\"name\":\"AggregateExpression\",\"value\":1616},{\"name\":\"And\",\"value\":1027},{\"name\":\"Arithmetic\",\"value\":3891},{\"name\":\"Average\",\"value\":891},{\"name\":\"BinaryExpression\",\"value\":2893},{\"name\":\"Comparison\",\"value\":5103},{\"name\":\"CompositeExpression\",\"value\":3677},{\"name\":\"Count\",\"value\":781},{\"name\":\"DateUtil\",\"value\":4141},{\"name\":\"Distinct\",\"value\":933},{\"name\":\"Expression\",\"value\":5130},{\"name\":\"ExpressionIterator\",\"value\":3617},{\"name\":\"Fn\",\"value\":3240},{\"name\":\"If\",\"value\":2732},{\"name\":\"IsA\",\"value\":2039},{\"name\":\"Literal\",\"value\":1214},{\"name\":\"Match\",\"value\":3748},{\"name\":\"Maximum\",\"value\":843},{\"name\":\"methods\",\"children\":[{\"name\":\"add\",\"value\":593},{\"name\":\"and\",\"value\":330},{\"name\":\"average\",\"value\":287},{\"name\":\"count\",\"value\":277},{\"name\":\"distinct\",\"value\":292},{\"name\":\"div\",\"value\":595},{\"name\":\"eq\",\"value\":594},{\"name\":\"fn\",\"value\":460},{\"name\":\"gt\",\"value\":603},{\"name\":\"gte\",\"value\":625},{\"name\":\"iff\",\"value\":748},{\"name\":\"isa\",\"value\":461},{\"name\":\"lt\",\"value\":597},{\"name\":\"lte\",\"value\":619},{\"name\":\"max\",\"value\":283},{\"name\":\"min\",\"value\":283},{\"name\":\"mod\",\"value\":591},{\"name\":\"mul\",\"value\":603},{\"name\":\"neq\",\"value\":599},{\"name\":\"not\",\"value\":386},{\"name\":\"or\",\"value\":323},{\"name\":\"orderby\",\"value\":307},{\"name\":\"range\",\"value\":772},{\"name\":\"select\",\"value\":296},{\"name\":\"stddev\",\"value\":363},{\"name\":\"sub\",\"value\":600},{\"name\":\"sum\",\"value\":280},{\"name\":\"update\",\"value\":307},{\"name\":\"variance\",\"value\":335},{\"name\":\"where\",\"value\":299},{\"name\":\"xor\",\"value\":354},{\"name\":\"_\",\"value\":264}]},{\"name\":\"Minimum\",\"value\":843},{\"name\":\"Not\",\"value\":1554},{\"name\":\"Or\",\"value\":970},{\"name\":\"Query\",\"value\":13896},{\"name\":\"Range\",\"value\":1594},{\"name\":\"StringUtil\",\"value\":4130},{\"name\":\"Sum\",\"value\":791},{\"name\":\"Variable\",\"value\":1124},{\"name\":\"Variance\",\"value\":1876},{\"name\":\"Xor\",\"value\":1101}]},{\"name\":\"scale\",\"children\":[{\"name\":\"IScaleMap\",\"value\":2105},{\"name\":\"LinearScale\",\"value\":1316},{\"name\":\"LogScale\",\"value\":3151},{\"name\":\"OrdinalScale\",\"value\":3770},{\"name\":\"QuantileScale\",\"value\":2435},{\"name\":\"QuantitativeScale\",\"value\":4839},{\"name\":\"RootScale\",\"value\":1756},{\"name\":\"Scale\",\"value\":4268},{\"name\":\"ScaleType\",\"value\":1821},{\"name\":\"TimeScale\",\"value\":5833}]},{\"name\":\"util\",\"children\":[{\"name\":\"Arrays\",\"value\":8258},{\"name\":\"Colors\",\"value\":10001},{\"name\":\"Dates\",\"value\":8217},{\"name\":\"Displays\",\"value\":12555},{\"name\":\"Filter\",\"value\":2324},{\"name\":\"Geometry\",\"value\":10993},{\"name\":\"heap\",\"children\":[{\"name\":\"FibonacciHeap\",\"value\":9354},{\"name\":\"HeapNode\",\"value\":1233}]},{\"name\":\"IEvaluable\",\"value\":335},{\"name\":\"IPredicate\",\"value\":383},{\"name\":\"IValueProxy\",\"value\":874},{\"name\":\"math\",\"children\":[{\"name\":\"DenseMatrix\",\"value\":3165},{\"name\":\"IMatrix\",\"value\":2815},{\"name\":\"SparseMatrix\",\"value\":3366}]},{\"name\":\"Maths\",\"value\":17705},{\"name\":\"Orientation\",\"value\":1486},{\"name\":\"palette\",\"children\":[{\"name\":\"ColorPalette\",\"value\":6367},{\"name\":\"Palette\",\"value\":1229},{\"name\":\"ShapePalette\",\"value\":2059},{\"name\":\"SizePalette\",\"value\":2291}]},{\"name\":\"Property\",\"value\":5559},{\"name\":\"Shapes\",\"value\":19118},{\"name\":\"Sort\",\"value\":6887},{\"name\":\"Stats\",\"value\":6557},{\"name\":\"Strings\",\"value\":22026}]},{\"name\":\"vis\",\"children\":[{\"name\":\"axis\",\"children\":[{\"name\":\"Axes\",\"value\":1302},{\"name\":\"Axis\",\"value\":24593},{\"name\":\"AxisGridLine\",\"value\":652},{\"name\":\"AxisLabel\",\"value\":636},{\"name\":\"CartesianAxes\",\"value\":6703}]},{\"name\":\"controls\",\"children\":[{\"name\":\"AnchorControl\",\"value\":2138},{\"name\":\"ClickControl\",\"value\":3824},{\"name\":\"Control\",\"value\":1353},{\"name\":\"ControlList\",\"value\":4665},{\"name\":\"DragControl\",\"value\":2649},{\"name\":\"ExpandControl\",\"value\":2832},{\"name\":\"HoverControl\",\"value\":4896},{\"name\":\"IControl\",\"value\":763},{\"name\":\"PanZoomControl\",\"value\":5222},{\"name\":\"SelectionControl\",\"value\":7862},{\"name\":\"TooltipControl\",\"value\":8435}]},{\"name\":\"data\",\"children\":[{\"name\":\"Data\",\"value\":20544},{\"name\":\"DataList\",\"value\":19788},{\"name\":\"DataSprite\",\"value\":10349},{\"name\":\"EdgeSprite\",\"value\":3301},{\"name\":\"NodeSprite\",\"value\":19382},{\"name\":\"render\",\"children\":[{\"name\":\"ArrowType\",\"value\":698},{\"name\":\"EdgeRenderer\",\"value\":5569},{\"name\":\"IRenderer\",\"value\":353},{\"name\":\"ShapeRenderer\",\"value\":2247}]},{\"name\":\"ScaleBinding\",\"value\":11275},{\"name\":\"Tree\",\"value\":7147},{\"name\":\"TreeBuilder\",\"value\":9930}]},{\"name\":\"events\",\"children\":[{\"name\":\"DataEvent\",\"value\":2313},{\"name\":\"SelectionEvent\",\"value\":1880},{\"name\":\"TooltipEvent\",\"value\":1701},{\"name\":\"VisualizationEvent\",\"value\":1117}]},{\"name\":\"legend\",\"children\":[{\"name\":\"Legend\",\"value\":20859},{\"name\":\"LegendItem\",\"value\":4614},{\"name\":\"LegendRange\",\"value\":10530}]},{\"name\":\"operator\",\"children\":[{\"name\":\"distortion\",\"children\":[{\"name\":\"BifocalDistortion\",\"value\":4461},{\"name\":\"Distortion\",\"value\":6314},{\"name\":\"FisheyeDistortion\",\"value\":3444}]},{\"name\":\"encoder\",\"children\":[{\"name\":\"ColorEncoder\",\"value\":3179},{\"name\":\"Encoder\",\"value\":4060},{\"name\":\"PropertyEncoder\",\"value\":4138},{\"name\":\"ShapeEncoder\",\"value\":1690},{\"name\":\"SizeEncoder\",\"value\":1830}]},{\"name\":\"filter\",\"children\":[{\"name\":\"FisheyeTreeFilter\",\"value\":5219},{\"name\":\"GraphDistanceFilter\",\"value\":3165},{\"name\":\"VisibilityFilter\",\"value\":3509}]},{\"name\":\"IOperator\",\"value\":1286},{\"name\":\"label\",\"children\":[{\"name\":\"Labeler\",\"value\":9956},{\"name\":\"RadialLabeler\",\"value\":3899},{\"name\":\"StackedAreaLabeler\",\"value\":3202}]},{\"name\":\"layout\",\"children\":[{\"name\":\"AxisLayout\",\"value\":6725},{\"name\":\"BundledEdgeRouter\",\"value\":3727},{\"name\":\"CircleLayout\",\"value\":9317},{\"name\":\"CirclePackingLayout\",\"value\":12003},{\"name\":\"DendrogramLayout\",\"value\":4853},{\"name\":\"ForceDirectedLayout\",\"value\":8411},{\"name\":\"IcicleTreeLayout\",\"value\":4864},{\"name\":\"IndentedTreeLayout\",\"value\":3174},{\"name\":\"Layout\",\"value\":7881},{\"name\":\"NodeLinkTreeLayout\",\"value\":12870},{\"name\":\"PieLayout\",\"value\":2728},{\"name\":\"RadialTreeLayout\",\"value\":12348},{\"name\":\"RandomLayout\",\"value\":870},{\"name\":\"StackedAreaLayout\",\"value\":9121},{\"name\":\"TreeMapLayout\",\"value\":9191}]},{\"name\":\"Operator\",\"value\":2490},{\"name\":\"OperatorList\",\"value\":5248},{\"name\":\"OperatorSequence\",\"value\":4190},{\"name\":\"OperatorSwitch\",\"value\":2581},{\"name\":\"SortOperator\",\"value\":2023}]},{\"name\":\"Visualization\",\"value\":16540}]}]}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":320,"y":500,"wires":[["db838e34.b39d9"]]},{"id":"89d362f0.f0c22","type":"function","z":"f57cec1.87f8d1","name":"","func":"msg.payload = {\"name\":\"flare\",\"children\":[{\"name\":\"analytics\",\"children\":[{\"name\":\"cluster\",\"children\":[{\"name\":\"AgglomerativeCluster\",\"value\":3938},{\"name\":\"CommunityStructure\",\"value\":3812},{\"name\":\"HierarchicalCluster\",\"value\":6714},{\"name\":\"MergeEdge\",\"value\":743}]},{\"name\":\"graph\",\"children\":[{\"name\":\"BetweennessCentrality\",\"value\":3534},{\"name\":\"LinkDistance\",\"value\":5731},{\"name\":\"MaxFlowMinCut\",\"value\":7840},{\"name\":\"ShortestPaths\",\"value\":5914},{\"name\":\"SpanningTree\",\"value\":3416}]},{\"name\":\"optimization\",\"children\":[{\"name\":\"AspectRatioBanker\",\"value\":7074}]}]},{\"name\":\"animate\",\"children\":[{\"name\":\"Easing\",\"value\":17010},{\"name\":\"FunctionSequence\",\"value\":5842},{\"name\":\"interpolate\",\"children\":[{\"name\":\"ArrayInterpolator\",\"value\":1983},{\"name\":\"ColorInterpolator\",\"value\":2047},{\"name\":\"DateInterpolator\",\"value\":1375},{\"name\":\"Interpolator\",\"value\":8746},{\"name\":\"MatrixInterpolator\",\"value\":2202},{\"name\":\"NumberInterpolator\",\"value\":1382},{\"name\":\"ObjectInterpolator\",\"value\":1629},{\"name\":\"PointInterpolator\",\"value\":1675},{\"name\":\"RectangleInterpolator\",\"value\":2042}]},{\"name\":\"ISchedulable\",\"value\":1041},{\"name\":\"Parallel\",\"value\":5176},{\"name\":\"Pause\",\"value\":449},{\"name\":\"Scheduler\",\"value\":5593},{\"name\":\"Sequence\",\"value\":5534},{\"name\":\"Transition\",\"value\":9201},{\"name\":\"Transitioner\",\"value\":19975},{\"name\":\"TransitionEvent\",\"value\":1116},{\"name\":\"Tween\",\"value\":6006}]},{\"name\":\"data\",\"children\":[{\"name\":\"converters\",\"children\":[{\"name\":\"Converters\",\"value\":721},{\"name\":\"DelimitedTextConverter\",\"value\":4294},{\"name\":\"GraphMLConverter\",\"value\":9800},{\"name\":\"IDataConverter\",\"value\":1314},{\"name\":\"JSONConverter\",\"value\":2220}]},{\"name\":\"DataField\",\"value\":1759},{\"name\":\"DataSchema\",\"value\":2165},{\"name\":\"DataSet\",\"value\":586},{\"name\":\"DataSource\",\"value\":3331},{\"name\":\"DataTable\",\"value\":772},{\"name\":\"DataUtil\",\"value\":3322}]},{\"name\":\"display\",\"children\":[{\"name\":\"DirtySprite\",\"value\":8833},{\"name\":\"LineSprite\",\"value\":1732},{\"name\":\"RectSprite\",\"value\":3623},{\"name\":\"TextSprite\",\"value\":10066}]},{\"name\":\"flex\",\"children\":[{\"name\":\"FlareVis\",\"value\":4116}]},{\"name\":\"physics\",\"children\":[{\"name\":\"DragForce\",\"value\":1082},{\"name\":\"GravityForce\",\"value\":1336},{\"name\":\"IForce\",\"value\":319},{\"name\":\"NBodyForce\",\"value\":10498},{\"name\":\"Particle\",\"value\":2822},{\"name\":\"Simulation\",\"value\":9983},{\"name\":\"Spring\",\"value\":2213},{\"name\":\"SpringForce\",\"value\":1681}]},{\"name\":\"query\",\"children\":[{\"name\":\"AggregateExpression\",\"value\":1616},{\"name\":\"And\",\"value\":1027},{\"name\":\"Arithmetic\",\"value\":3891},{\"name\":\"Average\",\"value\":891},{\"name\":\"BinaryExpression\",\"value\":2893},{\"name\":\"Comparison\",\"value\":5103},{\"name\":\"CompositeExpression\",\"value\":3677},{\"name\":\"Count\",\"value\":781},{\"name\":\"DateUtil\",\"value\":4141},{\"name\":\"Distinct\",\"value\":933},{\"name\":\"Expression\",\"value\":5130},{\"name\":\"ExpressionIterator\",\"value\":3617},{\"name\":\"Fn\",\"value\":3240},{\"name\":\"If\",\"value\":2732},{\"name\":\"IsA\",\"value\":2039},{\"name\":\"Literal\",\"value\":1214},{\"name\":\"Match\",\"value\":3748},{\"name\":\"Maximum\",\"value\":843},{\"name\":\"methods\",\"children\":[{\"name\":\"add\",\"value\":593},{\"name\":\"and\",\"value\":330},{\"name\":\"average\",\"value\":287},{\"name\":\"count\",\"value\":277},{\"name\":\"distinct\",\"value\":292},{\"name\":\"div\",\"value\":595},{\"name\":\"eq\",\"value\":594},{\"name\":\"fn\",\"value\":460},{\"name\":\"gt\",\"value\":603},{\"name\":\"gte\",\"value\":625},{\"name\":\"iff\",\"value\":748},{\"name\":\"isa\",\"value\":461},{\"name\":\"lt\",\"value\":597},{\"name\":\"lte\",\"value\":619},{\"name\":\"max\",\"value\":283},{\"name\":\"min\",\"value\":283},{\"name\":\"mod\",\"value\":591},{\"name\":\"mul\",\"value\":603},{\"name\":\"neq\",\"value\":599},{\"name\":\"not\",\"value\":386},{\"name\":\"or\",\"value\":323},{\"name\":\"orderby\",\"value\":307},{\"name\":\"range\",\"value\":772},{\"name\":\"select\",\"value\":296},{\"name\":\"stddev\",\"value\":363},{\"name\":\"sub\",\"value\":600},{\"name\":\"sum\",\"value\":280},{\"name\":\"update\",\"value\":307},{\"name\":\"variance\",\"value\":335},{\"name\":\"where\",\"value\":299},{\"name\":\"xor\",\"value\":354},{\"name\":\"_\",\"value\":264}]},{\"name\":\"Minimum\",\"value\":843},{\"name\":\"Not\",\"value\":1554},{\"name\":\"Or\",\"value\":970},{\"name\":\"Query\",\"value\":13896},{\"name\":\"Range\",\"value\":1594},{\"name\":\"StringUtil\",\"value\":4130},{\"name\":\"Sum\",\"value\":791},{\"name\":\"Variable\",\"value\":1124},{\"name\":\"Variance\",\"value\":1876},{\"name\":\"Xor\",\"value\":1101}]},{\"name\":\"scale\",\"children\":[{\"name\":\"IScaleMap\",\"value\":2105},{\"name\":\"LinearScale\",\"value\":1316},{\"name\":\"LogScale\",\"value\":3151},{\"name\":\"OrdinalScale\",\"value\":3770},{\"name\":\"QuantileScale\",\"value\":2435},{\"name\":\"QuantitativeScale\",\"value\":4839},{\"name\":\"RootScale\",\"value\":1756},{\"name\":\"Scale\",\"value\":4268},{\"name\":\"ScaleType\",\"value\":1821},{\"name\":\"TimeScale\",\"value\":5833}]},{\"name\":\"util\",\"children\":[{\"name\":\"Arrays\",\"value\":8258},{\"name\":\"Colors\",\"value\":10001},{\"name\":\"Dates\",\"value\":8217},{\"name\":\"Displays\",\"value\":12555},{\"name\":\"Filter\",\"value\":2324},{\"name\":\"Geometry\",\"value\":10993},{\"name\":\"heap\",\"children\":[{\"name\":\"FibonacciHeap\",\"value\":9354},{\"name\":\"HeapNode\",\"value\":1233}]},{\"name\":\"IEvaluable\",\"value\":335},{\"name\":\"IPredicate\",\"value\":383},{\"name\":\"IValueProxy\",\"value\":874},{\"name\":\"math\",\"children\":[{\"name\":\"DenseMatrix\",\"value\":3165},{\"name\":\"IMatrix\",\"value\":2815},{\"name\":\"SparseMatrix\",\"value\":3366}]},{\"name\":\"Maths\",\"value\":17705},{\"name\":\"Orientation\",\"value\":1486},{\"name\":\"palette\",\"children\":[{\"name\":\"ColorPalette\",\"value\":6367},{\"name\":\"Palette\",\"value\":1229},{\"name\":\"ShapePalette\",\"value\":2059},{\"name\":\"SizePalette\",\"value\":2291}]},{\"name\":\"Property\",\"value\":5559},{\"name\":\"Shapes\",\"value\":19118},{\"name\":\"Sort\",\"value\":6887},{\"name\":\"Stats\",\"value\":6557},{\"name\":\"Strings\",\"value\":22026}]},{\"name\":\"vis\",\"children\":[{\"name\":\"axis\",\"children\":[{\"name\":\"Axes\",\"value\":1302},{\"name\":\"Axis\",\"value\":24593},{\"name\":\"AxisGridLine\",\"value\":652},{\"name\":\"AxisLabel\",\"value\":636},{\"name\":\"CartesianAxes\",\"value\":6703}]},{\"name\":\"controls\",\"children\":[{\"name\":\"AnchorControl\",\"value\":2138},{\"name\":\"ClickControl\",\"value\":3824},{\"name\":\"Control\",\"value\":1353},{\"name\":\"ControlList\",\"value\":4665},{\"name\":\"DragControl\",\"value\":2649},{\"name\":\"ExpandControl\",\"value\":2832},{\"name\":\"HoverControl\",\"value\":4896},{\"name\":\"IControl\",\"value\":763},{\"name\":\"PanZoomControl\",\"value\":5222},{\"name\":\"SelectionControl\",\"value\":7862},{\"name\":\"TooltipControl\",\"value\":8435}]},{\"name\":\"data\",\"children\":[{\"name\":\"Data\",\"value\":20544},{\"name\":\"DataList\",\"value\":19788},{\"name\":\"DataSprite\",\"value\":10349},{\"name\":\"EdgeSprite\",\"value\":3301},{\"name\":\"NodeSprite\",\"value\":19382},{\"name\":\"render\",\"children\":[{\"name\":\"ArrowType\",\"value\":698},{\"name\":\"EdgeRenderer\",\"value\":5569},{\"name\":\"IRenderer\",\"value\":353},{\"name\":\"ShapeRenderer\",\"value\":2247}]},{\"name\":\"ScaleBinding\",\"value\":11275},{\"name\":\"Tree\",\"value\":7147},{\"name\":\"TreeBuilder\",\"value\":9930}]},{\"name\":\"events\",\"children\":[{\"name\":\"DataEvent\",\"value\":2313},{\"name\":\"SelectionEvent\",\"value\":1880},{\"name\":\"TooltipEvent\",\"value\":1701},{\"name\":\"VisualizationEvent\",\"value\":1117}]},{\"name\":\"legend\",\"children\":[{\"name\":\"Legend\",\"value\":20859},{\"name\":\"LegendItem\",\"value\":4614},{\"name\":\"LegendRange\",\"value\":10530}]},{\"name\":\"operator\",\"children\":[{\"name\":\"distortion\",\"children\":[{\"name\":\"BifocalDistortion\",\"value\":4461},{\"name\":\"Distortion\",\"value\":6314},{\"name\":\"FisheyeDistortion\",\"value\":3444}]},{\"name\":\"encoder\",\"children\":[{\"name\":\"ColorEncoder\",\"value\":3179},{\"name\":\"Encoder\",\"value\":4060},{\"name\":\"PropertyEncoder\",\"value\":4138},{\"name\":\"ShapeEncoder\",\"value\":1690},{\"name\":\"SizeEncoder\",\"value\":1830}]},{\"name\":\"filter\",\"children\":[{\"name\":\"FisheyeTreeFilter\",\"value\":5219},{\"name\":\"GraphDistanceFilter\",\"value\":3165},{\"name\":\"VisibilityFilter\",\"value\":3509}]},{\"name\":\"IOperator\",\"value\":1286},{\"name\":\"label\",\"children\":[{\"name\":\"Labeler\",\"value\":9956},{\"name\":\"RadialLabeler\",\"value\":3899},{\"name\":\"StackedAreaLabeler\",\"value\":3202}]},{\"name\":\"layout\",\"children\":[{\"name\":\"AxisLayout\",\"value\":6725},{\"name\":\"BundledEdgeRouter\",\"value\":3727},{\"name\":\"CircleLayout\",\"value\":9317},{\"name\":\"CirclePackingLayout\",\"value\":12003},{\"name\":\"DendrogramLayout\",\"value\":4853},{\"name\":\"ForceDirectedLayout\",\"value\":8411},{\"name\":\"IcicleTreeLayout\",\"value\":4864},{\"name\":\"IndentedTreeLayout\",\"value\":3174},{\"name\":\"Layout\",\"value\":7881},{\"name\":\"NodeLinkTreeLayout\",\"value\":12870},{\"name\":\"PieLayout\",\"value\":2728},{\"name\":\"RadialTreeLayout\",\"value\":12348},{\"name\":\"RandomLayout\",\"value\":870},{\"name\":\"StackedAreaLayout\",\"value\":9121},{\"name\":\"TreeMapLayout\",\"value\":9191}]},{\"name\":\"Operator\",\"value\":2490},{\"name\":\"OperatorList\",\"value\":5248},{\"name\":\"OperatorSequence\",\"value\":4190},{\"name\":\"OperatorSwitch\",\"value\":2581},{\"name\":\"SortOperator\",\"value\":2023}]},{\"name\":\"Visualization\",\"value\":16540}]}]}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":320,"y":580,"wires":[["bcec7138.df91e"]]},{"id":"209b902c.b60e5","type":"impulse-button","z":"f57cec1.87f8d1","selectedDashboardId":"3489","flowName":"DEMO SNAP4D3 V2","authentication":"","username":"eventtest","name":"press to show graphics","dashboardId":"3489","valueType":"String","offValue":"Off","onValue":"On","x":100,"y":260,"wires":[["9a6989e0.7cd058"],[]]},{"id":"9a6989e0.7cd058","type":"function","z":"f57cec1.87f8d1","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":120,"y":480,"wires":[["89d362f0.f0c22","fe537875.dc3a48","d908588f.f23e88","b14b0e25.f1dcd","a7db4abe.ea5588","cb5867b1.77b368","b542ed9c.b75e2","e987b878.3194b8"]]},{"id":"b2d8ec0d.957db","type":"inject","z":"f57cec1.87f8d1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"600","crontab":"","once":true,"onceDelay":"20","topic":"","payload":"","payloadType":"date","x":70,"y":320,"wires":[["9a6989e0.7cd058"]]},{"id":"5124b649.05f978","type":"function","z":"f57cec1.87f8d1","name":"","func":"const d3Configuration=String.raw`\n /**\n * @param d3: instance of D3 library\n * @param d3Data: data sent by node-red for rendering with D3.\n * @param width : width of the widget display space\n * @param height :height of the widget display space \n * @param sendToNodeRed: function used to send back data from widget to node-red\n * @returns D3 chart instance\n */\nasync function drawD3Chart(d3,d3Data,width,height,sendToNodeRed){\n// SOURCE https://observablehq.com/@d3/zoomable-sunburst\nconst data = d3Data;\n\n const root = d3.hierarchy(data);\n \n const margin = {\n top : 10,\n left : 10,\n bottom : 10,\n right : 10\n }\n const dx = 10;\n const dy = 10;\n \n root.x0 = dy / 2;\n root.y0 = 0;\n root.descendants().forEach((d, i) => {\n d.id = i;\n d._children = d.children;\n if (d.depth && d.data.name.length !== 7) d.children = null;\n });\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-margin.left, -margin.top, width, dx])\n .style(\"font\", \"10px sans-serif\")\n .style(\"user-select\", \"none\");\n\n const gLink = svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#555\")\n .attr(\"stroke-opacity\", 0.4)\n .attr(\"stroke-width\", 1.5);\n\n const gNode = svg.append(\"g\")\n .attr(\"cursor\", \"pointer\")\n .attr(\"pointer-events\", \"all\");\n\n function update(source) {\n const duration = d3.event && d3.event.altKey ? 2500 : 250;\n const nodes = root.descendants().reverse();\n const links = root.links();\n\n // Compute the new tree layout.\n tree(root);\n\n let left = root;\n let right = root;\n root.eachBefore(node => {\n if (node.x < left.x) left = node;\n if (node.x > right.x) right = node;\n });\n\n const height = right.x - left.x + margin.top + margin.bottom;\n\n const transition = svg.transition()\n .duration(duration)\n .attr(\"viewBox\", [-margin.left, left.x - margin.top, width, height])\n .tween(\"resize\", window.ResizeObserver ? null : () => () => svg.dispatch(\"toggle\"));\n\n // Update the nodes…\n const node = gNode.selectAll(\"g\")\n .data(nodes, d => d.id);\n\n // Enter any new nodes at the parent's previous position.\n const nodeEnter = node.enter().append(\"g\")\n .attr(\"transform\", d => \"translate(\"+(source.y0)+\",\"+(source.x0)+\")\")\n .attr(\"fill-opacity\", 0)\n .attr(\"stroke-opacity\", 0)\n .on(\"click\", (event, d) => {\n d.children = d.children ? null : d._children;\n update(d);\n });\n\n nodeEnter.append(\"circle\")\n .attr(\"r\", 2.5)\n .attr(\"fill\", d => d._children ? \"#555\" : \"#999\")\n .attr(\"stroke-width\", 10);\n\n nodeEnter.append(\"text\")\n .attr(\"dy\", \"0.31em\")\n .attr(\"x\", d => d._children ? -6 : 6)\n .attr(\"text-anchor\", d => d._children ? \"end\" : \"start\")\n .text(d => d.data.name)\n .clone(true).lower()\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-width\", 3)\n .attr(\"stroke\", \"white\");\n\n // Transition nodes to their new position.\n const nodeUpdate = node.merge(nodeEnter).transition(transition)\n .attr(\"transform\", d => \"translate(\"+(d.y)+\",\"+(d.x)+\")\")\n .attr(\"fill-opacity\", 1)\n .attr(\"stroke-opacity\", 1);\n\n // Transition exiting nodes to the parent's new position.\n const nodeExit = node.exit().transition(transition).remove()\n .attr(\"transform\", d => \"translate(\"+(source.y)+\",\"+(source.x)+\")\")\n .attr(\"fill-opacity\", 0)\n .attr(\"stroke-opacity\", 0);\n\n // Update the links…\n const link = gLink.selectAll(\"path\")\n .data(links, d => d.target.id);\n\n // Enter any new links at the parent's previous position.\n const linkEnter = link.enter().append(\"path\")\n .attr(\"d\", d => {\n const o = {x: source.x0, y: source.y0};\n return diagonal({source: o, target: o});\n });\n\n // Transition links to their new position.\n link.merge(linkEnter).transition(transition)\n .attr(\"d\", diagonal);\n\n // Transition exiting nodes to the parent's new position.\n link.exit().transition(transition).remove()\n .attr(\"d\", d => {\n const o = {x: source.x, y: source.y};\n return diagonal({source: o, target: o});\n });\n\n // Stash the old positions for transition.\n root.eachBefore(d => {\n d.x0 = d.x;\n d.y0 = d.y;\n });\n }\n\n update(root);\n\n return svg.node();\n}\n `;\n\n\n//msg.payload=Object.assign(msg.payload,{d3Configuration:d3Configuration});\nmsg[\"configuration\"]=d3Configuration;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":503,"y":703,"wires":[["64ee825f.1d800c","e540c1a4.da019"]]},{"id":"e987b878.3194b8","type":"function","z":"f57cec1.87f8d1","name":"","func":"msg.payload = {\n \"name\": \"flare\",\n \"children\": [\n {\n \"name\": \"analytics\",\n \"children\": [\n {\n \"name\": \"cluster\",\n \"children\": [\n {\"name\": \"AgglomerativeCluster\", \"value\": 3938},\n {\"name\": \"CommunityStructure\", \"value\": 3812},\n {\"name\": \"HierarchicalCluster\", \"value\": 6714},\n {\"name\": \"MergeEdge\", \"value\": 743}\n ]\n },\n {\n \"name\": \"graph\",\n \"children\": [\n {\"name\": \"BetweennessCentrality\", \"value\": 3534},\n {\"name\": \"LinkDistance\", \"value\": 5731},\n {\"name\": \"MaxFlowMinCut\", \"value\": 7840},\n {\"name\": \"ShortestPaths\", \"value\": 5914},\n {\"name\": \"SpanningTree\", \"value\": 3416}\n ]\n },\n {\n \"name\": \"optimization\",\n \"children\": [\n {\"name\": \"AspectRatioBanker\", \"value\": 7074}\n ]\n }\n ]\n },\n {\n \"name\": \"animate\",\n \"children\": [\n {\"name\": \"Easing\", \"value\": 17010},\n {\"name\": \"FunctionSequence\", \"value\": 5842},\n {\n \"name\": \"interpolate\",\n \"children\": [\n {\"name\": \"ArrayInterpolator\", \"value\": 1983},\n {\"name\": \"ColorInterpolator\", \"value\": 2047},\n {\"name\": \"DateInterpolator\", \"value\": 1375},\n {\"name\": \"Interpolator\", \"value\": 8746},\n {\"name\": \"MatrixInterpolator\", \"value\": 2202},\n {\"name\": \"NumberInterpolator\", \"value\": 1382},\n {\"name\": \"ObjectInterpolator\", \"value\": 1629},\n {\"name\": \"PointInterpolator\", \"value\": 1675},\n {\"name\": \"RectangleInterpolator\", \"value\": 2042}\n ]\n },\n {\"name\": \"ISchedulable\", \"value\": 1041},\n {\"name\": \"Parallel\", \"value\": 5176},\n {\"name\": \"Pause\", \"value\": 449},\n {\"name\": \"Scheduler\", \"value\": 5593},\n {\"name\": \"Sequence\", \"value\": 5534},\n {\"name\": \"Transition\", \"value\": 9201},\n {\"name\": \"Transitioner\", \"value\": 19975},\n {\"name\": \"TransitionEvent\", \"value\": 1116},\n {\"name\": \"Tween\", \"value\": 6006}\n ]\n },\n {\n \"name\": \"data\",\n \"children\": [\n {\n \"name\": \"converters\",\n \"children\": [\n {\"name\": \"Converters\", \"value\": 721},\n {\"name\": \"DelimitedTextConverter\", \"value\": 4294},\n {\"name\": \"GraphMLConverter\", \"value\": 9800},\n {\"name\": \"IDataConverter\", \"value\": 1314},\n {\"name\": \"JSONConverter\", \"value\": 2220}\n ]\n },\n {\"name\": \"DataField\", \"value\": 1759},\n {\"name\": \"DataSchema\", \"value\": 2165},\n {\"name\": \"DataSet\", \"value\": 586},\n {\"name\": \"DataSource\", \"value\": 3331},\n {\"name\": \"DataTable\", \"value\": 772},\n {\"name\": \"DataUtil\", \"value\": 3322}\n ]\n },\n {\n \"name\": \"display\",\n \"children\": [\n {\"name\": \"DirtySprite\", \"value\": 8833},\n {\"name\": \"LineSprite\", \"value\": 1732},\n {\"name\": \"RectSprite\", \"value\": 3623},\n {\"name\": \"TextSprite\", \"value\": 10066}\n ]\n },\n {\n \"name\": \"flex\",\n \"children\": [\n {\"name\": \"FlareVis\", \"value\": 4116}\n ]\n },\n {\n \"name\": \"physics\",\n \"children\": [\n {\"name\": \"DragForce\", \"value\": 1082},\n {\"name\": \"GravityForce\", \"value\": 1336},\n {\"name\": \"IForce\", \"value\": 319},\n {\"name\": \"NBodyForce\", \"value\": 10498},\n {\"name\": \"Particle\", \"value\": 2822},\n {\"name\": \"Simulation\", \"value\": 9983},\n {\"name\": \"Spring\", \"value\": 2213},\n {\"name\": \"SpringForce\", \"value\": 1681}\n ]\n },\n {\n \"name\": \"query\",\n \"children\": [\n {\"name\": \"AggregateExpression\", \"value\": 1616},\n {\"name\": \"And\", \"value\": 1027},\n {\"name\": \"Arithmetic\", \"value\": 3891},\n {\"name\": \"Average\", \"value\": 891},\n {\"name\": \"BinaryExpression\", \"value\": 2893},\n {\"name\": \"Comparison\", \"value\": 5103},\n {\"name\": \"CompositeExpression\", \"value\": 3677},\n {\"name\": \"Count\", \"value\": 781},\n {\"name\": \"DateUtil\", \"value\": 4141},\n {\"name\": \"Distinct\", \"value\": 933},\n {\"name\": \"Expression\", \"value\": 5130},\n {\"name\": \"ExpressionIterator\", \"value\": 3617},\n {\"name\": \"Fn\", \"value\": 3240},\n {\"name\": \"If\", \"value\": 2732},\n {\"name\": \"IsA\", \"value\": 2039},\n {\"name\": \"Literal\", \"value\": 1214},\n {\"name\": \"Match\", \"value\": 3748},\n {\"name\": \"Maximum\", \"value\": 843},\n {\n \"name\": \"methods\",\n \"children\": [\n {\"name\": \"add\", \"value\": 593},\n {\"name\": \"and\", \"value\": 330},\n {\"name\": \"average\", \"value\": 287},\n {\"name\": \"count\", \"value\": 277},\n {\"name\": \"distinct\", \"value\": 292},\n {\"name\": \"div\", \"value\": 595},\n {\"name\": \"eq\", \"value\": 594},\n {\"name\": \"fn\", \"value\": 460},\n {\"name\": \"gt\", \"value\": 603},\n {\"name\": \"gte\", \"value\": 625},\n {\"name\": \"iff\", \"value\": 748},\n {\"name\": \"isa\", \"value\": 461},\n {\"name\": \"lt\", \"value\": 597},\n {\"name\": \"lte\", \"value\": 619},\n {\"name\": \"max\", \"value\": 283},\n {\"name\": \"min\", \"value\": 283},\n {\"name\": \"mod\", \"value\": 591},\n {\"name\": \"mul\", \"value\": 603},\n {\"name\": \"neq\", \"value\": 599},\n {\"name\": \"not\", \"value\": 386},\n {\"name\": \"or\", \"value\": 323},\n {\"name\": \"orderby\", \"value\": 307},\n {\"name\": \"range\", \"value\": 772},\n {\"name\": \"select\", \"value\": 296},\n {\"name\": \"stddev\", \"value\": 363},\n {\"name\": \"sub\", \"value\": 600},\n {\"name\": \"sum\", \"value\": 280},\n {\"name\": \"update\", \"value\": 307},\n {\"name\": \"variance\", \"value\": 335},\n {\"name\": \"where\", \"value\": 299},\n {\"name\": \"xor\", \"value\": 354},\n {\"name\": \"_\", \"value\": 264}\n ]\n },\n {\"name\": \"Minimum\", \"value\": 843},\n {\"name\": \"Not\", \"value\": 1554},\n {\"name\": \"Or\", \"value\": 970},\n {\"name\": \"Query\", \"value\": 13896},\n {\"name\": \"Range\", \"value\": 1594},\n {\"name\": \"StringUtil\", \"value\": 4130},\n {\"name\": \"Sum\", \"value\": 791},\n {\"name\": \"Variable\", \"value\": 1124},\n {\"name\": \"Variance\", \"value\": 1876},\n {\"name\": \"Xor\", \"value\": 1101}\n ]\n },\n {\n \"name\": \"scale\",\n \"children\": [\n {\"name\": \"IScaleMap\", \"value\": 2105},\n {\"name\": \"LinearScale\", \"value\": 1316},\n {\"name\": \"LogScale\", \"value\": 3151},\n {\"name\": \"OrdinalScale\", \"value\": 3770},\n {\"name\": \"QuantileScale\", \"value\": 2435},\n {\"name\": \"QuantitativeScale\", \"value\": 4839},\n {\"name\": \"RootScale\", \"value\": 1756},\n {\"name\": \"Scale\", \"value\": 4268},\n {\"name\": \"ScaleType\", \"value\": 1821},\n {\"name\": \"TimeScale\", \"value\": 5833}\n ]\n },\n {\n \"name\": \"util\",\n \"children\": [\n {\"name\": \"Arrays\", \"value\": 8258},\n {\"name\": \"Colors\", \"value\": 10001},\n {\"name\": \"Dates\", \"value\": 8217},\n {\"name\": \"Displays\", \"value\": 12555},\n {\"name\": \"Filter\", \"value\": 2324},\n {\"name\": \"Geometry\", \"value\": 10993},\n {\n \"name\": \"heap\",\n \"children\": [\n {\"name\": \"FibonacciHeap\", \"value\": 9354},\n {\"name\": \"HeapNode\", \"value\": 1233}\n ]\n },\n {\"name\": \"IEvaluable\", \"value\": 335},\n {\"name\": \"IPredicate\", \"value\": 383},\n {\"name\": \"IValueProxy\", \"value\": 874},\n {\n \"name\": \"math\",\n \"children\": [\n {\"name\": \"DenseMatrix\", \"value\": 3165},\n {\"name\": \"IMatrix\", \"value\": 2815},\n {\"name\": \"SparseMatrix\", \"value\": 3366}\n ]\n },\n {\"name\": \"Maths\", \"value\": 17705},\n {\"name\": \"Orientation\", \"value\": 1486},\n {\n \"name\": \"palette\",\n \"children\": [\n {\"name\": \"ColorPalette\", \"value\": 6367},\n {\"name\": \"Palette\", \"value\": 1229},\n {\"name\": \"ShapePalette\", \"value\": 2059},\n {\"name\": \"SizePalette\", \"value\": 2291}\n ]\n },\n {\"name\": \"Property\", \"value\": 5559},\n {\"name\": \"Shapes\", \"value\": 19118},\n {\"name\": \"Sort\", \"value\": 6887},\n {\"name\": \"Stats\", \"value\": 6557},\n {\"name\": \"Strings\", \"value\": 22026}\n ]\n },\n {\n \"name\": \"vis\",\n \"children\": [\n {\n \"name\": \"axis\",\n \"children\": [\n {\"name\": \"Axes\", \"value\": 1302},\n {\"name\": \"Axis\", \"value\": 24593},\n {\"name\": \"AxisGridLine\", \"value\": 652},\n {\"name\": \"AxisLabel\", \"value\": 636},\n {\"name\": \"CartesianAxes\", \"value\": 6703}\n ]\n },\n {\n \"name\": \"controls\",\n \"children\": [\n {\"name\": \"AnchorControl\", \"value\": 2138},\n {\"name\": \"ClickControl\", \"value\": 3824},\n {\"name\": \"Control\", \"value\": 1353},\n {\"name\": \"ControlList\", \"value\": 4665},\n {\"name\": \"DragControl\", \"value\": 2649},\n {\"name\": \"ExpandControl\", \"value\": 2832},\n {\"name\": \"HoverControl\", \"value\": 4896},\n {\"name\": \"IControl\", \"value\": 763},\n {\"name\": \"PanZoomControl\", \"value\": 5222},\n {\"name\": \"SelectionControl\", \"value\": 7862},\n {\"name\": \"TooltipControl\", \"value\": 8435}\n ]\n },\n {\n \"name\": \"data\",\n \"children\": [\n {\"name\": \"Data\", \"value\": 20544},\n {\"name\": \"DataList\", \"value\": 19788},\n {\"name\": \"DataSprite\", \"value\": 10349},\n {\"name\": \"EdgeSprite\", \"value\": 3301},\n {\"name\": \"NodeSprite\", \"value\": 19382},\n {\n \"name\": \"render\",\n \"children\": [\n {\"name\": \"ArrowType\", \"value\": 698},\n {\"name\": \"EdgeRenderer\", \"value\": 5569},\n {\"name\": \"IRenderer\", \"value\": 353},\n {\"name\": \"ShapeRenderer\", \"value\": 2247}\n ]\n },\n {\"name\": \"ScaleBinding\", \"value\": 11275},\n {\"name\": \"Tree\", \"value\": 7147},\n {\"name\": \"TreeBuilder\", \"value\": 9930}\n ]\n },\n {\n \"name\": \"events\",\n \"children\": [\n {\"name\": \"DataEvent\", \"value\": 2313},\n {\"name\": \"SelectionEvent\", \"value\": 1880},\n {\"name\": \"TooltipEvent\", \"value\": 1701},\n {\"name\": \"VisualizationEvent\", \"value\": 1117}\n ]\n },\n {\n \"name\": \"legend\",\n \"children\": [\n {\"name\": \"Legend\", \"value\": 20859},\n {\"name\": \"LegendItem\", \"value\": 4614},\n {\"name\": \"LegendRange\", \"value\": 10530}\n ]\n },\n {\n \"name\": \"operator\",\n \"children\": [\n {\n \"name\": \"distortion\",\n \"children\": [\n {\"name\": \"BifocalDistortion\", \"value\": 4461},\n {\"name\": \"Distortion\", \"value\": 6314},\n {\"name\": \"FisheyeDistortion\", \"value\": 3444}\n ]\n },\n {\n \"name\": \"encoder\",\n \"children\": [\n {\"name\": \"ColorEncoder\", \"value\": 3179},\n {\"name\": \"Encoder\", \"value\": 4060},\n {\"name\": \"PropertyEncoder\", \"value\": 4138},\n {\"name\": \"ShapeEncoder\", \"value\": 1690},\n {\"name\": \"SizeEncoder\", \"value\": 1830}\n ]\n },\n {\n \"name\": \"filter\",\n \"children\": [\n {\"name\": \"FisheyeTreeFilter\", \"value\": 5219},\n {\"name\": \"GraphDistanceFilter\", \"value\": 3165},\n {\"name\": \"VisibilityFilter\", \"value\": 3509}\n ]\n },\n {\"name\": \"IOperator\", \"value\": 1286},\n {\n \"name\": \"label\",\n \"children\": [\n {\"name\": \"Labeler\", \"value\": 9956},\n {\"name\": \"RadialLabeler\", \"value\": 3899},\n {\"name\": \"StackedAreaLabeler\", \"value\": 3202}\n ]\n },\n {\n \"name\": \"layout\",\n \"children\": [\n {\"name\": \"AxisLayout\", \"value\": 6725},\n {\"name\": \"BundledEdgeRouter\", \"value\": 3727},\n {\"name\": \"CircleLayout\", \"value\": 9317},\n {\"name\": \"CirclePackingLayout\", \"value\": 12003},\n {\"name\": \"DendrogramLayout\", \"value\": 4853},\n {\"name\": \"ForceDirectedLayout\", \"value\": 8411},\n {\"name\": \"IcicleTreeLayout\", \"value\": 4864},\n {\"name\": \"IndentedTreeLayout\", \"value\": 3174},\n {\"name\": \"Layout\", \"value\": 7881},\n {\"name\": \"NodeLinkTreeLayout\", \"value\": 12870},\n {\"name\": \"PieLayout\", \"value\": 2728},\n {\"name\": \"RadialTreeLayout\", \"value\": 12348},\n {\"name\": \"RandomLayout\", \"value\": 870},\n {\"name\": \"StackedAreaLayout\", \"value\": 9121},\n {\"name\": \"TreeMapLayout\", \"value\": 9191}\n ]\n },\n {\"name\": \"Operator\", \"value\": 2490},\n {\"name\": \"OperatorList\", \"value\": 5248},\n {\"name\": \"OperatorSequence\", \"value\": 4190},\n {\"name\": \"OperatorSwitch\", \"value\": 2581},\n {\"name\": \"SortOperator\", \"value\": 2023}\n ]\n },\n {\"name\": \"Visualization\", \"value\": 16540}\n ]\n }\n ]\n}\n\n\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":320,"y":760,"wires":[["f5c0f7d4.3b5e18"]]},{"id":"78ba26a6.b752e8","type":"inject","z":"f57cec1.87f8d1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":130,"y":780,"wires":[["e987b878.3194b8"]]},{"id":"e540c1a4.da019","type":"debug","z":"f57cec1.87f8d1","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":670,"y":700,"wires":[]},{"id":"f5c0f7d4.3b5e18","type":"Snap4D3","z":"f57cec1.87f8d1","selectedDashboardId":"3489","flowName":"DEMO SNAP4D3 V2","authentication":"","username":"eventtest","name":"Hierarchy","dashboardId":"3489","metricType":"Percentuale","startValue":0,"metricShortDesc":"","metricFullDesc":"","d3Configuration":"\nasync function drawD3Chart(d3,d3Data,width,height,sendToNodeRed)\n{\n const data = d3Data;\n const diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x);\n const dy = width / 6;\n const dx = 10 ;\n const margin = ({top: 10, right: -120, bottom: 10, left: 40});\n const tree = d3.tree().nodeSize([dx, dy]);\n\n// from here D3.js standard code.... \n \n const root = d3.hierarchy(data);\n\n root.x0 = dy / 2;\n root.y0 = 0;\n root.descendants().forEach((d, i) => {\n d.id = i;\n d._children = d.children;\n if (d.depth && d.data.name.length !== 7) d.children = null;\n });\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-margin.left, -margin.top, width, dx])\n .style(\"font\", \"14px sans-serif\")\n .style(\"user-select\", \"none\");\n\n const gLink = svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#555\")\n .attr(\"stroke-opacity\", 0.4)\n .attr(\"stroke-width\", 1.5);\n\n const gNode = svg.append(\"g\")\n .attr(\"cursor\", \"pointer\")\n .attr(\"pointer-events\", \"all\");\n\n function update(source) {\n const duration = d3.event && d3.event.altKey ? 2500 : 250;\n const nodes = root.descendants().reverse();\n const links = root.links();\n\n // Compute the new tree layout.\n tree(root);\n\n let left = root;\n let right = root;\n root.eachBefore(node => {\n if (node.x < left.x) left = node;\n if (node.x > right.x) right = node;\n });\n\n const height = right.x - left.x + margin.top + margin.bottom;\n\n const transition = svg.transition()\n .duration(duration)\n .attr(\"viewBox\", [-margin.left, left.x - margin.top, width, height])\n .tween(\"resize\", window.ResizeObserver ? null : () => () => svg.dispatch(\"toggle\"));\n\n // Update the nodes…\n const node = gNode.selectAll(\"g\")\n .data(nodes, d => d.id);\n\n // Enter any new nodes at the parent's previous position.\n const nodeEnter = node.enter().append(\"g\")\n .attr(\"transform\", d => `translate(${source.y0},${source.x0})`)\n .attr(\"fill-opacity\", 0)\n .attr(\"stroke-opacity\", 0)\n .on(\"click\", (event, d) => {\n d.children = d.children ? null : d._children;\n update(d);\n });\n\n nodeEnter.append(\"circle\")\n .attr(\"r\", 2.5)\n .attr(\"fill\", d => d._children ? \"#555\" : \"#999\")\n .attr(\"stroke-width\", 10);\n\n nodeEnter.append(\"text\")\n .attr(\"dy\", \"0.31em\")\n .attr(\"x\", d => d._children ? -6 : 6)\n .attr(\"text-anchor\", d => d._children ? \"end\" : \"start\")\n .text(d => d.data.name)\n .clone(true).lower()\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-width\", 3)\n .attr(\"stroke\", \"white\");\n\n // Transition nodes to their new position.\n const nodeUpdate = node.merge(nodeEnter).transition(transition)\n .attr(\"transform\", d => `translate(${d.y},${d.x})`)\n .attr(\"fill-opacity\", 1)\n .attr(\"stroke-opacity\", 1);\n\n // Transition exiting nodes to the parent's new position.\n const nodeExit = node.exit().transition(transition).remove()\n .attr(\"transform\", d => `translate(${source.y},${source.x})`)\n .attr(\"fill-opacity\", 0)\n .attr(\"stroke-opacity\", 0);\n\n // Update the links…\n const link = gLink.selectAll(\"path\")\n .data(links, d => d.target.id);\n\n // Enter any new links at the parent's previous position.\n const linkEnter = link.enter().append(\"path\")\n .attr(\"d\", d => {\n const o = {x: source.x0, y: source.y0};\n return diagonal({source: o, target: o});\n });\n\n // Transition links to their new position.\n link.merge(linkEnter).transition(transition)\n .attr(\"d\", diagonal);\n\n // Transition exiting nodes to the parent's new position.\n link.exit().transition(transition).remove()\n .attr(\"d\", d => {\n const o = {x: source.x, y: source.y};\n return diagonal({source: o, target: o});\n });\n\n // Stash the old positions for transition.\n root.eachBefore(d => {\n d.x0 = d.x;\n d.y0 = d.y;\n });\n }\n\n update(root);\n\n return svg.node();\n \n};","x":660,"y":760,"wires":[["488530ec.f2e77"]]},{"id":"488530ec.f2e77","type":"debug","z":"f57cec1.87f8d1","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":880,"y":760,"wires":[]},{"id":"14ac0895.614447","type":"Snap4D3","z":"f57cec1.87f8d1","selectedDashboardId":"3489","flowName":"DEMO SNAP4D3 V2","authentication":"","username":"eventtest","name":"zoomable","dashboardId":"3489","metricType":"Percentuale","startValue":0,"metricShortDesc":"","metricFullDesc":"","d3Configuration":"\nasync function drawD3Chart(d3,d3Data,width,height,sendToNodeRed)\n{\n const data = d3Data;\nconst format = d3.format(\",d\")\nconst color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1))\nconst partition = data => {\n const root = d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.height - a.height || b.value - a.value); \n return d3.partition()\n .size([height, (root.height + 1) * width / 3])\n (root);\n}\n\n// from here D3.js standard code.... \n \n const root = partition(data);\n let focus = root;\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"font\", \"10px sans-serif\");\n\n const cell = svg\n .selectAll(\"g\")\n .data(root.descendants())\n .join(\"g\")\n .attr(\"transform\", d => `translate(${d.y0},${d.x0})`);\n\n const rect = cell.append(\"rect\")\n .attr(\"width\", d => d.y1 - d.y0 - 1)\n .attr(\"height\", d => rectHeight(d))\n .attr(\"fill-opacity\", 0.6)\n .attr(\"fill\", d => {\n if (!d.depth) return \"#ccc\";\n while (d.depth > 1) d = d.parent;\n return color(d.data.name);\n })\n .style(\"cursor\", \"pointer\")\n .on(\"click\", clicked);\n\n const text = cell.append(\"text\")\n .style(\"user-select\", \"none\")\n .attr(\"pointer-events\", \"none\")\n .attr(\"x\", 4)\n .attr(\"y\", 13)\n .attr(\"fill-opacity\", d => +labelVisible(d));\n\n text.append(\"tspan\")\n .text(d => d.data.name);\n\n const tspan = text.append(\"tspan\")\n .attr(\"fill-opacity\", d => labelVisible(d) * 0.7)\n .text(d => ` ${format(d.value)}`);\n\n cell.append(\"title\")\n .text(d => `${d.ancestors().map(d => d.data.name).reverse().join(\"/\")}\\n${format(d.value)}`);\n\n function clicked(event, p) {\n focus = focus === p ? p = p.parent : p;\n\n root.each(d => d.target = {\n x0: (d.x0 - p.x0) / (p.x1 - p.x0) * height,\n x1: (d.x1 - p.x0) / (p.x1 - p.x0) * height,\n y0: d.y0 - p.y0,\n y1: d.y1 - p.y0\n });\n\n const t = cell.transition().duration(750)\n .attr(\"transform\", d => `translate(${d.target.y0},${d.target.x0})`);\n\n rect.transition(t).attr(\"height\", d => rectHeight(d.target));\n text.transition(t).attr(\"fill-opacity\", d => +labelVisible(d.target));\n tspan.transition(t).attr(\"fill-opacity\", d => labelVisible(d.target) * 0.7);\n }\n \n function rectHeight(d) {\n return d.x1 - d.x0 - Math.min(1, (d.x1 - d.x0) / 2);\n }\n\n function labelVisible(d) {\n return d.y1 <= width && d.y0 >= 0 && d.x1 - d.x0 > 16;\n }\n \n return svg.node();\n \n}","x":660,"y":880,"wires":[["8b59106a.519be"]]},{"id":"b542ed9c.b75e2","type":"function","z":"f57cec1.87f8d1","name":"","func":"msg.payload = {\n \"name\": \"flare\",\n \"children\": [\n {\n \"name\": \"analytics\",\n \"children\": [\n {\n \"name\": \"cluster\",\n \"children\": [\n {\"name\": \"AgglomerativeCluster\", \"value\": 3938},\n {\"name\": \"CommunityStructure\", \"value\": 3812},\n {\"name\": \"HierarchicalCluster\", \"value\": 6714},\n {\"name\": \"MergeEdge\", \"value\": 743}\n ]\n },\n {\n \"name\": \"graph\",\n \"children\": [\n {\"name\": \"BetweennessCentrality\", \"value\": 3534},\n {\"name\": \"LinkDistance\", \"value\": 5731},\n {\"name\": \"MaxFlowMinCut\", \"value\": 7840},\n {\"name\": \"ShortestPaths\", \"value\": 5914},\n {\"name\": \"SpanningTree\", \"value\": 3416}\n ]\n },\n {\n \"name\": \"optimization\",\n \"children\": [\n {\"name\": \"AspectRatioBanker\", \"value\": 7074}\n ]\n }\n ]\n },\n {\n \"name\": \"animate\",\n \"children\": [\n {\"name\": \"Easing\", \"value\": 17010},\n {\"name\": \"FunctionSequence\", \"value\": 5842},\n {\n \"name\": \"interpolate\",\n \"children\": [\n {\"name\": \"ArrayInterpolator\", \"value\": 1983},\n {\"name\": \"ColorInterpolator\", \"value\": 2047},\n {\"name\": \"DateInterpolator\", \"value\": 1375},\n {\"name\": \"Interpolator\", \"value\": 8746},\n {\"name\": \"MatrixInterpolator\", \"value\": 2202},\n {\"name\": \"NumberInterpolator\", \"value\": 1382},\n {\"name\": \"ObjectInterpolator\", \"value\": 1629},\n {\"name\": \"PointInterpolator\", \"value\": 1675},\n {\"name\": \"RectangleInterpolator\", \"value\": 2042}\n ]\n },\n {\"name\": \"ISchedulable\", \"value\": 1041},\n {\"name\": \"Parallel\", \"value\": 5176},\n {\"name\": \"Pause\", \"value\": 449},\n {\"name\": \"Scheduler\", \"value\": 5593},\n {\"name\": \"Sequence\", \"value\": 5534},\n {\"name\": \"Transition\", \"value\": 9201},\n {\"name\": \"Transitioner\", \"value\": 19975},\n {\"name\": \"TransitionEvent\", \"value\": 1116},\n {\"name\": \"Tween\", \"value\": 6006}\n ]\n },\n {\n \"name\": \"data\",\n \"children\": [\n {\n \"name\": \"converters\",\n \"children\": [\n {\"name\": \"Converters\", \"value\": 721},\n {\"name\": \"DelimitedTextConverter\", \"value\": 4294},\n {\"name\": \"GraphMLConverter\", \"value\": 9800},\n {\"name\": \"IDataConverter\", \"value\": 1314},\n {\"name\": \"JSONConverter\", \"value\": 2220}\n ]\n },\n {\"name\": \"DataField\", \"value\": 1759},\n {\"name\": \"DataSchema\", \"value\": 2165},\n {\"name\": \"DataSet\", \"value\": 586},\n {\"name\": \"DataSource\", \"value\": 3331},\n {\"name\": \"DataTable\", \"value\": 772},\n {\"name\": \"DataUtil\", \"value\": 3322}\n ]\n },\n {\n \"name\": \"display\",\n \"children\": [\n {\"name\": \"DirtySprite\", \"value\": 8833},\n {\"name\": \"LineSprite\", \"value\": 1732},\n {\"name\": \"RectSprite\", \"value\": 3623},\n {\"name\": \"TextSprite\", \"value\": 10066}\n ]\n },\n {\n \"name\": \"flex\",\n \"children\": [\n {\"name\": \"FlareVis\", \"value\": 4116}\n ]\n },\n {\n \"name\": \"physics\",\n \"children\": [\n {\"name\": \"DragForce\", \"value\": 1082},\n {\"name\": \"GravityForce\", \"value\": 1336},\n {\"name\": \"IForce\", \"value\": 319},\n {\"name\": \"NBodyForce\", \"value\": 10498},\n {\"name\": \"Particle\", \"value\": 2822},\n {\"name\": \"Simulation\", \"value\": 9983},\n {\"name\": \"Spring\", \"value\": 2213},\n {\"name\": \"SpringForce\", \"value\": 1681}\n ]\n },\n {\n \"name\": \"query\",\n \"children\": [\n {\"name\": \"AggregateExpression\", \"value\": 1616},\n {\"name\": \"And\", \"value\": 1027},\n {\"name\": \"Arithmetic\", \"value\": 3891},\n {\"name\": \"Average\", \"value\": 891},\n {\"name\": \"BinaryExpression\", \"value\": 2893},\n {\"name\": \"Comparison\", \"value\": 5103},\n {\"name\": \"CompositeExpression\", \"value\": 3677},\n {\"name\": \"Count\", \"value\": 781},\n {\"name\": \"DateUtil\", \"value\": 4141},\n {\"name\": \"Distinct\", \"value\": 933},\n {\"name\": \"Expression\", \"value\": 5130},\n {\"name\": \"ExpressionIterator\", \"value\": 3617},\n {\"name\": \"Fn\", \"value\": 3240},\n {\"name\": \"If\", \"value\": 2732},\n {\"name\": \"IsA\", \"value\": 2039},\n {\"name\": \"Literal\", \"value\": 1214},\n {\"name\": \"Match\", \"value\": 3748},\n {\"name\": \"Maximum\", \"value\": 843},\n {\n \"name\": \"methods\",\n \"children\": [\n {\"name\": \"add\", \"value\": 593},\n {\"name\": \"and\", \"value\": 330},\n {\"name\": \"average\", \"value\": 287},\n {\"name\": \"count\", \"value\": 277},\n {\"name\": \"distinct\", \"value\": 292},\n {\"name\": \"div\", \"value\": 595},\n {\"name\": \"eq\", \"value\": 594},\n {\"name\": \"fn\", \"value\": 460},\n {\"name\": \"gt\", \"value\": 603},\n {\"name\": \"gte\", \"value\": 625},\n {\"name\": \"iff\", \"value\": 748},\n {\"name\": \"isa\", \"value\": 461},\n {\"name\": \"lt\", \"value\": 597},\n {\"name\": \"lte\", \"value\": 619},\n {\"name\": \"max\", \"value\": 283},\n {\"name\": \"min\", \"value\": 283},\n {\"name\": \"mod\", \"value\": 591},\n {\"name\": \"mul\", \"value\": 603},\n {\"name\": \"neq\", \"value\": 599},\n {\"name\": \"not\", \"value\": 386},\n {\"name\": \"or\", \"value\": 323},\n {\"name\": \"orderby\", \"value\": 307},\n {\"name\": \"range\", \"value\": 772},\n {\"name\": \"select\", \"value\": 296},\n {\"name\": \"stddev\", \"value\": 363},\n {\"name\": \"sub\", \"value\": 600},\n {\"name\": \"sum\", \"value\": 280},\n {\"name\": \"update\", \"value\": 307},\n {\"name\": \"variance\", \"value\": 335},\n {\"name\": \"where\", \"value\": 299},\n {\"name\": \"xor\", \"value\": 354},\n {\"name\": \"_\", \"value\": 264}\n ]\n },\n {\"name\": \"Minimum\", \"value\": 843},\n {\"name\": \"Not\", \"value\": 1554},\n {\"name\": \"Or\", \"value\": 970},\n {\"name\": \"Query\", \"value\": 13896},\n {\"name\": \"Range\", \"value\": 1594},\n {\"name\": \"StringUtil\", \"value\": 4130},\n {\"name\": \"Sum\", \"value\": 791},\n {\"name\": \"Variable\", \"value\": 1124},\n {\"name\": \"Variance\", \"value\": 1876},\n {\"name\": \"Xor\", \"value\": 1101}\n ]\n },\n {\n \"name\": \"scale\",\n \"children\": [\n {\"name\": \"IScaleMap\", \"value\": 2105},\n {\"name\": \"LinearScale\", \"value\": 1316},\n {\"name\": \"LogScale\", \"value\": 3151},\n {\"name\": \"OrdinalScale\", \"value\": 3770},\n {\"name\": \"QuantileScale\", \"value\": 2435},\n {\"name\": \"QuantitativeScale\", \"value\": 4839},\n {\"name\": \"RootScale\", \"value\": 1756},\n {\"name\": \"Scale\", \"value\": 4268},\n {\"name\": \"ScaleType\", \"value\": 1821},\n {\"name\": \"TimeScale\", \"value\": 5833}\n ]\n },\n {\n \"name\": \"util\",\n \"children\": [\n {\"name\": \"Arrays\", \"value\": 8258},\n {\"name\": \"Colors\", \"value\": 10001},\n {\"name\": \"Dates\", \"value\": 8217},\n {\"name\": \"Displays\", \"value\": 12555},\n {\"name\": \"Filter\", \"value\": 2324},\n {\"name\": \"Geometry\", \"value\": 10993},\n {\n \"name\": \"heap\",\n \"children\": [\n {\"name\": \"FibonacciHeap\", \"value\": 9354},\n {\"name\": \"HeapNode\", \"value\": 1233}\n ]\n },\n {\"name\": \"IEvaluable\", \"value\": 335},\n {\"name\": \"IPredicate\", \"value\": 383},\n {\"name\": \"IValueProxy\", \"value\": 874},\n {\n \"name\": \"math\",\n \"children\": [\n {\"name\": \"DenseMatrix\", \"value\": 3165},\n {\"name\": \"IMatrix\", \"value\": 2815},\n {\"name\": \"SparseMatrix\", \"value\": 3366}\n ]\n },\n {\"name\": \"Maths\", \"value\": 17705},\n {\"name\": \"Orientation\", \"value\": 1486},\n {\n \"name\": \"palette\",\n \"children\": [\n {\"name\": \"ColorPalette\", \"value\": 6367},\n {\"name\": \"Palette\", \"value\": 1229},\n {\"name\": \"ShapePalette\", \"value\": 2059},\n {\"name\": \"SizePalette\", \"value\": 2291}\n ]\n },\n {\"name\": \"Property\", \"value\": 5559},\n {\"name\": \"Shapes\", \"value\": 19118},\n {\"name\": \"Sort\", \"value\": 6887},\n {\"name\": \"Stats\", \"value\": 6557},\n {\"name\": \"Strings\", \"value\": 22026}\n ]\n },\n {\n \"name\": \"vis\",\n \"children\": [\n {\n \"name\": \"axis\",\n \"children\": [\n {\"name\": \"Axes\", \"value\": 1302},\n {\"name\": \"Axis\", \"value\": 24593},\n {\"name\": \"AxisGridLine\", \"value\": 652},\n {\"name\": \"AxisLabel\", \"value\": 636},\n {\"name\": \"CartesianAxes\", \"value\": 6703}\n ]\n },\n {\n \"name\": \"controls\",\n \"children\": [\n {\"name\": \"AnchorControl\", \"value\": 2138},\n {\"name\": \"ClickControl\", \"value\": 3824},\n {\"name\": \"Control\", \"value\": 1353},\n {\"name\": \"ControlList\", \"value\": 4665},\n {\"name\": \"DragControl\", \"value\": 2649},\n {\"name\": \"ExpandControl\", \"value\": 2832},\n {\"name\": \"HoverControl\", \"value\": 4896},\n {\"name\": \"IControl\", \"value\": 763},\n {\"name\": \"PanZoomControl\", \"value\": 5222},\n {\"name\": \"SelectionControl\", \"value\": 7862},\n {\"name\": \"TooltipControl\", \"value\": 8435}\n ]\n },\n {\n \"name\": \"data\",\n \"children\": [\n {\"name\": \"Data\", \"value\": 20544},\n {\"name\": \"DataList\", \"value\": 19788},\n {\"name\": \"DataSprite\", \"value\": 10349},\n {\"name\": \"EdgeSprite\", \"value\": 3301},\n {\"name\": \"NodeSprite\", \"value\": 19382},\n {\n \"name\": \"render\",\n \"children\": [\n {\"name\": \"ArrowType\", \"value\": 698},\n {\"name\": \"EdgeRenderer\", \"value\": 5569},\n {\"name\": \"IRenderer\", \"value\": 353},\n {\"name\": \"ShapeRenderer\", \"value\": 2247}\n ]\n },\n {\"name\": \"ScaleBinding\", \"value\": 11275},\n {\"name\": \"Tree\", \"value\": 7147},\n {\"name\": \"TreeBuilder\", \"value\": 9930}\n ]\n },\n {\n \"name\": \"events\",\n \"children\": [\n {\"name\": \"DataEvent\", \"value\": 2313},\n {\"name\": \"SelectionEvent\", \"value\": 1880},\n {\"name\": \"TooltipEvent\", \"value\": 1701},\n {\"name\": \"VisualizationEvent\", \"value\": 1117}\n ]\n },\n {\n \"name\": \"legend\",\n \"children\": [\n {\"name\": \"Legend\", \"value\": 20859},\n {\"name\": \"LegendItem\", \"value\": 4614},\n {\"name\": \"LegendRange\", \"value\": 10530}\n ]\n },\n {\n \"name\": \"operator\",\n \"children\": [\n {\n \"name\": \"distortion\",\n \"children\": [\n {\"name\": \"BifocalDistortion\", \"value\": 4461},\n {\"name\": \"Distortion\", \"value\": 6314},\n {\"name\": \"FisheyeDistortion\", \"value\": 3444}\n ]\n },\n {\n \"name\": \"encoder\",\n \"children\": [\n {\"name\": \"ColorEncoder\", \"value\": 3179},\n {\"name\": \"Encoder\", \"value\": 4060},\n {\"name\": \"PropertyEncoder\", \"value\": 4138},\n {\"name\": \"ShapeEncoder\", \"value\": 1690},\n {\"name\": \"SizeEncoder\", \"value\": 1830}\n ]\n },\n {\n \"name\": \"filter\",\n \"children\": [\n {\"name\": \"FisheyeTreeFilter\", \"value\": 5219},\n {\"name\": \"GraphDistanceFilter\", \"value\": 3165},\n {\"name\": \"VisibilityFilter\", \"value\": 3509}\n ]\n },\n {\"name\": \"IOperator\", \"value\": 1286},\n {\n \"name\": \"label\",\n \"children\": [\n {\"name\": \"Labeler\", \"value\": 9956},\n {\"name\": \"RadialLabeler\", \"value\": 3899},\n {\"name\": \"StackedAreaLabeler\", \"value\": 3202}\n ]\n },\n {\n \"name\": \"layout\",\n \"children\": [\n {\"name\": \"AxisLayout\", \"value\": 6725},\n {\"name\": \"BundledEdgeRouter\", \"value\": 3727},\n {\"name\": \"CircleLayout\", \"value\": 9317},\n {\"name\": \"CirclePackingLayout\", \"value\": 12003},\n {\"name\": \"DendrogramLayout\", \"value\": 4853},\n {\"name\": \"ForceDirectedLayout\", \"value\": 8411},\n {\"name\": \"IcicleTreeLayout\", \"value\": 4864},\n {\"name\": \"IndentedTreeLayout\", \"value\": 3174},\n {\"name\": \"Layout\", \"value\": 7881},\n {\"name\": \"NodeLinkTreeLayout\", \"value\": 12870},\n {\"name\": \"PieLayout\", \"value\": 2728},\n {\"name\": \"RadialTreeLayout\", \"value\": 12348},\n {\"name\": \"RandomLayout\", \"value\": 870},\n {\"name\": \"StackedAreaLayout\", \"value\": 9121},\n {\"name\": \"TreeMapLayout\", \"value\": 9191}\n ]\n },\n {\"name\": \"Operator\", \"value\": 2490},\n {\"name\": \"OperatorList\", \"value\": 5248},\n {\"name\": \"OperatorSequence\", \"value\": 4190},\n {\"name\": \"OperatorSwitch\", \"value\": 2581},\n {\"name\": \"SortOperator\", \"value\": 2023}\n ]\n },\n {\"name\": \"Visualization\", \"value\": 16540}\n ]\n }\n ]\n}\n\n\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":320,"y":880,"wires":[["14ac0895.614447"]]},{"id":"8b59106a.519be","type":"debug","z":"f57cec1.87f8d1","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":850,"y":880,"wires":[]},{"id":"fc307602.07e218","type":"inject","z":"f57cec1.87f8d1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":100,"y":600,"wires":[["fe537875.dc3a48"]]},{"id":"82e518b4.42a018","type":"impulse-button","z":"f57cec1.87f8d1","selectedDashboardId":"3489","flowName":"DEMO SNAP4D3 V2","authentication":"","username":"eventtest","name":"another view","dashboardId":"3489","valueType":"String","offValue":"Off","onValue":"On","x":1150,"y":140,"wires":[["bfae2447.124ea8"],[]]},{"id":"bfae2447.124ea8","type":"function","z":"f57cec1.87f8d1","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1160,"y":200,"wires":[["beed46c0.917cb8","8e3ff565.918d68"]]},{"id":"e18e8cc2.f562b","type":"function","z":"f57cec1.87f8d1","name":"","func":"const d3Configuration=String.raw`\n/**\n * \n * @param d3: instance of D3 library\n * @param d3Data: data sent by node-red for rendering with D3.\n * @param width : width of the widget display space\n * @param height :height of the widget display space \n * @param sendToNodeRed: function used to send back data from widget to node-red\n * @returns D3 chart instance\n */\n async function drawD3Chart(d3,d3Data,width,height,sendToNodeRed){\n\n const data = Object.assign(d3Data.series, {\n names: d3Data.names,\n colors: d3Data.colors\n });\n\n const tickStep = d3.tickStep(0, d3.sum(data.flat()), 100);\n\n function ticks({startAngle, endAngle, value}) {\n const k = (endAngle - startAngle) / value;\n return d3.range(0, value, tickStep).map(value => {\n return {value, angle: value * k + startAngle};\n });\n }\n\n const names = data.names === undefined ? d3.range(data.length) : data.names;\n const colors = data.colors === undefined ? d3.quantize(d3.interpolateRainbow, names.length) : data.colors;\n const formatValue = d3.format(\".1~%\");\n\n const color = d3.scaleOrdinal(names, colors);\n\n const outerRadius = Math.min(width, height) * 0.5 - 60;\n\n const innerRadius = outerRadius - 10;\n\n const chord = d3.chord()\n .padAngle(10 / innerRadius)\n .sortSubgroups(d3.descending)\n .sortChords(d3.descending);\n\n const arc = d3.arc()\n .innerRadius(innerRadius)\n .outerRadius(outerRadius);\n\n const ribbon = d3.ribbon()\n .radius(innerRadius - 1)\n .padAngle(1 / innerRadius); \n\n //const height = width\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]);\n \n const chords = chord(data);\n \n const group = svg.append(\"g\")\n .attr(\"font-size\", 10)\n .attr(\"font-family\", \"sans-serif\")\n .selectAll(\"g\")\n .data(chords.groups)\n .join(\"g\");\n \n group.append(\"path\")\n .attr(\"fill\", d => color(names[d.index]))\n .attr(\"d\", arc);\n \n group.append(\"title\")\n .text(d => names[d.index]+\"\\n\"+formatValue(d.value));\n \n const groupTick = group.append(\"g\")\n .selectAll(\"g\")\n .data(ticks)\n .join(\"g\")\n .attr(\"transform\", d => \"rotate(\"+(d.angle * 180 / Math.PI - 90)+\") translate(\"+outerRadius+\",0)\");\n \n \n groupTick.append(\"line\")\n .attr(\"stroke\", \"currentColor\")\n .attr(\"x2\", 6);\n \n groupTick.append(\"text\")\n .attr(\"x\", 8)\n .attr(\"dy\", \"0.35em\")\n .attr(\"transform\", d => d.angle > Math.PI ? \"rotate(180) translate(-16)\" : null)\n .attr(\"text-anchor\", d => d.angle > Math.PI ? \"end\" : null)\n .text(d => formatValue(d.value));\n \n group.select(\"text\")\n .attr(\"font-weight\", \"bold\")\n .text(function(d) {\n return this.getAttribute(\"text-anchor\") === \"end\"\n ? \"↑ \"+names[d.index]\n : names[d.index]+\" ↓\";\n });\n \n const graph = svg.append(\"g\")\n .attr(\"fill-opacity\", 0.8)\n .selectAll(\"path\")\n .data(chords)\n .join(\"path\")\n .style(\"mix-blend-mode\", \"multiply\")\n .attr(\"fill\", d => color(names[d.source.index]))\n .attr(\"d\", ribbon)\n .on(\"click\", (event, path) => { \n sendToNodeRed({\n start:{\n name:names[path.source.index],\n value:path.source.value\n },\n end:{\n name:names[path.target.index],\n value:path.target.value\n },\n });\n });\n\n\n\n graph.append(\"title\")\n .text(d => formatValue(d.source.value)+\" \"+names[d.target.index]+\" → \"+names[d.source.index]+\"\"+d.source.index === d.target.index ? \"\" : \"\\n\"+formatValue(d.target.value)+\" \"+names[d.source.index]+\" → \"+names[d.target.index]);\n \n \n \n return svg.node();\n}\n\n`;\n\n//msg.payload=Object.assign(msg.payload,{d3Configuration:d3Configuration});\nmsg[\"configuration\"]=d3Configuration;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1300,"y":260,"wires":[["64ee825f.1d800c"]]},{"id":"beed46c0.917cb8","type":"function","z":"f57cec1.87f8d1","name":"","func":"msg.payload = { \"series\": [ [ 0.096899, 0.008859, 0.000554, 0.004430, 0.025471, 0.024363, 0.005537, 0.025471 ], [ 0.001107, 0.018272, 0.000000, 0.004983, 0.011074, 0.010520, 0.002215, 0.004983 ], [ 0.000554, 0.002769, 0.002215, 0.002215, 0.003876, 0.008306, 0.000554, 0.003322 ], [ 0.000554, 0.001107, 0.000554, 0.012182, 0.011628, 0.006645, 0.004983, 0.010520 ], [ 0.002215, 0.004430, 0.000000, 0.002769, 0.104097, 0.012182, 0.004983, 0.028239 ], [ 0.011628, 0.026024, 0.000000, 0.013843, 0.087486, 0.168328, 0.017165, 0.055925 ], [ 0.000554, 0.004983, 0.000000, 0.003322, 0.004430, 0.008859, 0.017719, 0.004430 ], [ 0.002215, 0.007198, 0.000000, 0.003322, 0.016611, 0.014950, 0.001107, 0.054264 ] ], \"names\": [ \"Apple\", \"HTC\", \"Huawei\", \"LG\", \"Nokia\", \"Samsung\", \"Sony\", \"Other\" ], \"colors\": [ \"#c4c4c4\", \"#69b40f\", \"#ec1d25\", \"#c8125c\", \"#008fc8\", \"#10218b\", \"#134b24\", \"#737373\" ] }\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1140,"y":260,"wires":[["e18e8cc2.f562b"]]},{"id":"8e3ff565.918d68","type":"function","z":"f57cec1.87f8d1","name":"","func":"msg.payload = {\"name\":\"flare\",\"children\":[{\"name\":\"analytics\",\"children\":[{\"name\":\"cluster\",\"children\":[{\"name\":\"AgglomerativeCluster\",\"value\":3938},{\"name\":\"CommunityStructure\",\"value\":3812},{\"name\":\"HierarchicalCluster\",\"value\":6714},{\"name\":\"MergeEdge\",\"value\":743}]},{\"name\":\"graph\",\"children\":[{\"name\":\"BetweennessCentrality\",\"value\":3534},{\"name\":\"LinkDistance\",\"value\":5731},{\"name\":\"MaxFlowMinCut\",\"value\":7840},{\"name\":\"ShortestPaths\",\"value\":5914},{\"name\":\"SpanningTree\",\"value\":3416}]},{\"name\":\"optimization\",\"children\":[{\"name\":\"AspectRatioBanker\",\"value\":7074}]}]},{\"name\":\"animate\",\"children\":[{\"name\":\"Easing\",\"value\":17010},{\"name\":\"FunctionSequence\",\"value\":5842},{\"name\":\"interpolate\",\"children\":[{\"name\":\"ArrayInterpolator\",\"value\":1983},{\"name\":\"ColorInterpolator\",\"value\":2047},{\"name\":\"DateInterpolator\",\"value\":1375},{\"name\":\"Interpolator\",\"value\":8746},{\"name\":\"MatrixInterpolator\",\"value\":2202},{\"name\":\"NumberInterpolator\",\"value\":1382},{\"name\":\"ObjectInterpolator\",\"value\":1629},{\"name\":\"PointInterpolator\",\"value\":1675},{\"name\":\"RectangleInterpolator\",\"value\":2042}]},{\"name\":\"ISchedulable\",\"value\":1041},{\"name\":\"Parallel\",\"value\":5176},{\"name\":\"Pause\",\"value\":449},{\"name\":\"Scheduler\",\"value\":5593},{\"name\":\"Sequence\",\"value\":5534},{\"name\":\"Transition\",\"value\":9201},{\"name\":\"Transitioner\",\"value\":19975},{\"name\":\"TransitionEvent\",\"value\":1116},{\"name\":\"Tween\",\"value\":6006}]},{\"name\":\"data\",\"children\":[{\"name\":\"converters\",\"children\":[{\"name\":\"Converters\",\"value\":721},{\"name\":\"DelimitedTextConverter\",\"value\":4294},{\"name\":\"GraphMLConverter\",\"value\":9800},{\"name\":\"IDataConverter\",\"value\":1314},{\"name\":\"JSONConverter\",\"value\":2220}]},{\"name\":\"DataField\",\"value\":1759},{\"name\":\"DataSchema\",\"value\":2165},{\"name\":\"DataSet\",\"value\":586},{\"name\":\"DataSource\",\"value\":3331},{\"name\":\"DataTable\",\"value\":772},{\"name\":\"DataUtil\",\"value\":3322}]},{\"name\":\"display\",\"children\":[{\"name\":\"DirtySprite\",\"value\":8833},{\"name\":\"LineSprite\",\"value\":1732},{\"name\":\"RectSprite\",\"value\":3623},{\"name\":\"TextSprite\",\"value\":10066}]},{\"name\":\"flex\",\"children\":[{\"name\":\"FlareVis\",\"value\":4116}]},{\"name\":\"physics\",\"children\":[{\"name\":\"DragForce\",\"value\":1082},{\"name\":\"GravityForce\",\"value\":1336},{\"name\":\"IForce\",\"value\":319},{\"name\":\"NBodyForce\",\"value\":10498},{\"name\":\"Particle\",\"value\":2822},{\"name\":\"Simulation\",\"value\":9983},{\"name\":\"Spring\",\"value\":2213},{\"name\":\"SpringForce\",\"value\":1681}]},{\"name\":\"query\",\"children\":[{\"name\":\"AggregateExpression\",\"value\":1616},{\"name\":\"And\",\"value\":1027},{\"name\":\"Arithmetic\",\"value\":3891},{\"name\":\"Average\",\"value\":891},{\"name\":\"BinaryExpression\",\"value\":2893},{\"name\":\"Comparison\",\"value\":5103},{\"name\":\"CompositeExpression\",\"value\":3677},{\"name\":\"Count\",\"value\":781},{\"name\":\"DateUtil\",\"value\":4141},{\"name\":\"Distinct\",\"value\":933},{\"name\":\"Expression\",\"value\":5130},{\"name\":\"ExpressionIterator\",\"value\":3617},{\"name\":\"Fn\",\"value\":3240},{\"name\":\"If\",\"value\":2732},{\"name\":\"IsA\",\"value\":2039},{\"name\":\"Literal\",\"value\":1214},{\"name\":\"Match\",\"value\":3748},{\"name\":\"Maximum\",\"value\":843},{\"name\":\"methods\",\"children\":[{\"name\":\"add\",\"value\":593},{\"name\":\"and\",\"value\":330},{\"name\":\"average\",\"value\":287},{\"name\":\"count\",\"value\":277},{\"name\":\"distinct\",\"value\":292},{\"name\":\"div\",\"value\":595},{\"name\":\"eq\",\"value\":594},{\"name\":\"fn\",\"value\":460},{\"name\":\"gt\",\"value\":603},{\"name\":\"gte\",\"value\":625},{\"name\":\"iff\",\"value\":748},{\"name\":\"isa\",\"value\":461},{\"name\":\"lt\",\"value\":597},{\"name\":\"lte\",\"value\":619},{\"name\":\"max\",\"value\":283},{\"name\":\"min\",\"value\":283},{\"name\":\"mod\",\"value\":591},{\"name\":\"mul\",\"value\":603},{\"name\":\"neq\",\"value\":599},{\"name\":\"not\",\"value\":386},{\"name\":\"or\",\"value\":323},{\"name\":\"orderby\",\"value\":307},{\"name\":\"range\",\"value\":772},{\"name\":\"select\",\"value\":296},{\"name\":\"stddev\",\"value\":363},{\"name\":\"sub\",\"value\":600},{\"name\":\"sum\",\"value\":280},{\"name\":\"update\",\"value\":307},{\"name\":\"variance\",\"value\":335},{\"name\":\"where\",\"value\":299},{\"name\":\"xor\",\"value\":354},{\"name\":\"_\",\"value\":264}]},{\"name\":\"Minimum\",\"value\":843},{\"name\":\"Not\",\"value\":1554},{\"name\":\"Or\",\"value\":970},{\"name\":\"Query\",\"value\":13896},{\"name\":\"Range\",\"value\":1594},{\"name\":\"StringUtil\",\"value\":4130},{\"name\":\"Sum\",\"value\":791},{\"name\":\"Variable\",\"value\":1124},{\"name\":\"Variance\",\"value\":1876},{\"name\":\"Xor\",\"value\":1101}]},{\"name\":\"scale\",\"children\":[{\"name\":\"IScaleMap\",\"value\":2105},{\"name\":\"LinearScale\",\"value\":1316},{\"name\":\"LogScale\",\"value\":3151},{\"name\":\"OrdinalScale\",\"value\":3770},{\"name\":\"QuantileScale\",\"value\":2435},{\"name\":\"QuantitativeScale\",\"value\":4839},{\"name\":\"RootScale\",\"value\":1756},{\"name\":\"Scale\",\"value\":4268},{\"name\":\"ScaleType\",\"value\":1821},{\"name\":\"TimeScale\",\"value\":5833}]},{\"name\":\"util\",\"children\":[{\"name\":\"Arrays\",\"value\":8258},{\"name\":\"Colors\",\"value\":10001},{\"name\":\"Dates\",\"value\":8217},{\"name\":\"Displays\",\"value\":12555},{\"name\":\"Filter\",\"value\":2324},{\"name\":\"Geometry\",\"value\":10993},{\"name\":\"heap\",\"children\":[{\"name\":\"FibonacciHeap\",\"value\":9354},{\"name\":\"HeapNode\",\"value\":1233}]},{\"name\":\"IEvaluable\",\"value\":335},{\"name\":\"IPredicate\",\"value\":383},{\"name\":\"IValueProxy\",\"value\":874},{\"name\":\"math\",\"children\":[{\"name\":\"DenseMatrix\",\"value\":3165},{\"name\":\"IMatrix\",\"value\":2815},{\"name\":\"SparseMatrix\",\"value\":3366}]},{\"name\":\"Maths\",\"value\":17705},{\"name\":\"Orientation\",\"value\":1486},{\"name\":\"palette\",\"children\":[{\"name\":\"ColorPalette\",\"value\":6367},{\"name\":\"Palette\",\"value\":1229},{\"name\":\"ShapePalette\",\"value\":2059},{\"name\":\"SizePalette\",\"value\":2291}]},{\"name\":\"Property\",\"value\":5559},{\"name\":\"Shapes\",\"value\":19118},{\"name\":\"Sort\",\"value\":6887},{\"name\":\"Stats\",\"value\":6557},{\"name\":\"Strings\",\"value\":22026}]},{\"name\":\"vis\",\"children\":[{\"name\":\"axis\",\"children\":[{\"name\":\"Axes\",\"value\":1302},{\"name\":\"Axis\",\"value\":24593},{\"name\":\"AxisGridLine\",\"value\":652},{\"name\":\"AxisLabel\",\"value\":636},{\"name\":\"CartesianAxes\",\"value\":6703}]},{\"name\":\"controls\",\"children\":[{\"name\":\"AnchorControl\",\"value\":2138},{\"name\":\"ClickControl\",\"value\":3824},{\"name\":\"Control\",\"value\":1353},{\"name\":\"ControlList\",\"value\":4665},{\"name\":\"DragControl\",\"value\":2649},{\"name\":\"ExpandControl\",\"value\":2832},{\"name\":\"HoverControl\",\"value\":4896},{\"name\":\"IControl\",\"value\":763},{\"name\":\"PanZoomControl\",\"value\":5222},{\"name\":\"SelectionControl\",\"value\":7862},{\"name\":\"TooltipControl\",\"value\":8435}]},{\"name\":\"data\",\"children\":[{\"name\":\"Data\",\"value\":20544},{\"name\":\"DataList\",\"value\":19788},{\"name\":\"DataSprite\",\"value\":10349},{\"name\":\"EdgeSprite\",\"value\":3301},{\"name\":\"NodeSprite\",\"value\":19382},{\"name\":\"render\",\"children\":[{\"name\":\"ArrowType\",\"value\":698},{\"name\":\"EdgeRenderer\",\"value\":5569},{\"name\":\"IRenderer\",\"value\":353},{\"name\":\"ShapeRenderer\",\"value\":2247}]},{\"name\":\"ScaleBinding\",\"value\":11275},{\"name\":\"Tree\",\"value\":7147},{\"name\":\"TreeBuilder\",\"value\":9930}]},{\"name\":\"events\",\"children\":[{\"name\":\"DataEvent\",\"value\":2313},{\"name\":\"SelectionEvent\",\"value\":1880},{\"name\":\"TooltipEvent\",\"value\":1701},{\"name\":\"VisualizationEvent\",\"value\":1117}]},{\"name\":\"legend\",\"children\":[{\"name\":\"Legend\",\"value\":20859},{\"name\":\"LegendItem\",\"value\":4614},{\"name\":\"LegendRange\",\"value\":10530}]},{\"name\":\"operator\",\"children\":[{\"name\":\"distortion\",\"children\":[{\"name\":\"BifocalDistortion\",\"value\":4461},{\"name\":\"Distortion\",\"value\":6314},{\"name\":\"FisheyeDistortion\",\"value\":3444}]},{\"name\":\"encoder\",\"children\":[{\"name\":\"ColorEncoder\",\"value\":3179},{\"name\":\"Encoder\",\"value\":4060},{\"name\":\"PropertyEncoder\",\"value\":4138},{\"name\":\"ShapeEncoder\",\"value\":1690},{\"name\":\"SizeEncoder\",\"value\":1830}]},{\"name\":\"filter\",\"children\":[{\"name\":\"FisheyeTreeFilter\",\"value\":5219},{\"name\":\"GraphDistanceFilter\",\"value\":3165},{\"name\":\"VisibilityFilter\",\"value\":3509}]},{\"name\":\"IOperator\",\"value\":1286},{\"name\":\"label\",\"children\":[{\"name\":\"Labeler\",\"value\":9956},{\"name\":\"RadialLabeler\",\"value\":3899},{\"name\":\"StackedAreaLabeler\",\"value\":3202}]},{\"name\":\"layout\",\"children\":[{\"name\":\"AxisLayout\",\"value\":6725},{\"name\":\"BundledEdgeRouter\",\"value\":3727},{\"name\":\"CircleLayout\",\"value\":9317},{\"name\":\"CirclePackingLayout\",\"value\":12003},{\"name\":\"DendrogramLayout\",\"value\":4853},{\"name\":\"ForceDirectedLayout\",\"value\":8411},{\"name\":\"IcicleTreeLayout\",\"value\":4864},{\"name\":\"IndentedTreeLayout\",\"value\":3174},{\"name\":\"Layout\",\"value\":7881},{\"name\":\"NodeLinkTreeLayout\",\"value\":12870},{\"name\":\"PieLayout\",\"value\":2728},{\"name\":\"RadialTreeLayout\",\"value\":12348},{\"name\":\"RandomLayout\",\"value\":870},{\"name\":\"StackedAreaLayout\",\"value\":9121},{\"name\":\"TreeMapLayout\",\"value\":9191}]},{\"name\":\"Operator\",\"value\":2490},{\"name\":\"OperatorList\",\"value\":5248},{\"name\":\"OperatorSequence\",\"value\":4190},{\"name\":\"OperatorSwitch\",\"value\":2581},{\"name\":\"SortOperator\",\"value\":2023}]},{\"name\":\"Visualization\",\"value\":16540}]}]}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1140,"y":420,"wires":[["cd89b725.715048"]]},{"id":"cd89b725.715048","type":"function","z":"f57cec1.87f8d1","name":"","func":"const d3Configuration=String.raw`\n /**\n * \n * @param d3: instance of D3 library\n * @param d3Data: data sent by node-red for rendering with D3.\n * @param width : width of the widget display space\n * @param height :height of the widget display space \n * @param sendToNodeRed: function used to send back data from widget to node-red\n * @returns D3 chart instance\n */\nasync function drawD3Chart(d3,d3Data,width,height,sendToNodeRed){\n// SOURCE https://observablehq.com/@d3/zoomable-sunburst\nconst data = d3Data;\n\nconst partition = data => {\nconst root = d3.hierarchy(data)\n.sum(d => d.value)\n.sort((a, b) => b.value - a.value);\nreturn d3.partition()\n.size([2 * Math.PI, root.height + 1])\n(root);\n}\n\nconst color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1));\n\nconst format = d3.format(\",d\");\n\nconst radius = width / 6;\n\nconst arc = d3.arc()\n.startAngle(d => d.x0)\n.endAngle(d => d.x1)\n.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))\n.padRadius(radius * 1.5)\n.innerRadius(d => d.y0 * radius)\n.outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1));\n\nconst root = partition(data);\n\nroot.each(d => d.current = d);\n\nconst svg = d3.create(\"svg\")\n.attr(\"viewBox\", [0, 0, width, width])\n.style(\"font\", \"10px sans-serif\");\n\nconst g = svg.append(\"g\")\n.attr(\"transform\", \"translate(\"+(width / 2)+\",\"+(width / 2)+\")\");\n\nconst path = g.append(\"g\")\n.selectAll(\"path\")\n.data(root.descendants().slice(1))\n.join(\"path\")\n.attr(\"fill\", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })\n.attr(\"fill-opacity\", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0)\n.attr(\"pointer-events\", d => arcVisible(d.current) ? \"auto\" : \"none\")\n\n.attr(\"d\", d => arc(d.current));\n\npath.filter(d => d.children)\n.style(\"cursor\", \"pointer\")\n.on(\"click\", clicked);\n\npath.append(\"title\")\n.text(d => d.ancestors().map(d => d.data.name).reverse().join(\"/\")+\"\\n\"+format(d.value));\n\nconst label = g.append(\"g\")\n.attr(\"pointer-events\", \"none\")\n.attr(\"text-anchor\", \"middle\")\n.style(\"user-select\", \"none\")\n.selectAll(\"text\")\n.data(root.descendants().slice(1))\n.join(\"text\")\n.attr(\"dy\", \"0.35em\")\n.attr(\"fill-opacity\", d => +labelVisible(d.current))\n.attr(\"transform\", d => labelTransform(d.current))\n.text(d => d.data.name);\n\nconst parent = g.append(\"circle\")\n.datum(root)\n.attr(\"r\", radius)\n.attr(\"fill\", \"none\")\n.attr(\"pointer-events\", \"all\")\n.on(\"click\", clicked);\n\nfunction clicked(event, p) { \nparent.datum(p.parent || root);\n\nroot.each(d => d.target = {\nx0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,\nx1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,\ny0: Math.max(0, d.y0 - p.depth),\ny1: Math.max(0, d.y1 - p.depth)\n});\n\nconst t = g.transition().duration(750);\n\n// Transition the data on all arcs, even the ones that aren’t visible,\n// so that if this transition is interrupted, entering arcs will start\n// the next transition from the desired position.\npath.transition(t)\n.tween(\"data\", d => {\nconst i = d3.interpolate(d.current, d.target);\nreturn t => d.current = i(t);\n})\n.filter(function(d) {\nreturn +this.getAttribute(\"fill-opacity\") || arcVisible(d.target);\n})\n.attr(\"fill-opacity\", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0)\n.attr(\"pointer-events\", d => arcVisible(d.target) ? \"auto\" : \"none\") \n\n.attrTween(\"d\", d => () => arc(d.current));\n\nlabel.filter(function(d) {\nreturn +this.getAttribute(\"fill-opacity\") || labelVisible(d.target);\n}).transition(t)\n.attr(\"fill-opacity\", d => +labelVisible(d.target))\n.attrTween(\"transform\", d => () => labelTransform(d.current));\n\nsendToNodeRed({data:(p?.data || root.data)})\n}\n\nfunction arcVisible(d) {\nreturn d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0;\n}\n\nfunction labelVisible(d) {\nreturn d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03;\n}\n\nfunction labelTransform(d) {\nconst x = (d.x0 + d.x1) / 2 * 180 / Math.PI;\nconst y = (d.y0 + d.y1) / 2 * radius;\nreturn \"rotate(\"+(x - 90)+\") translate(\"+(y)+\",0) rotate(\"+(x < 180 ? 0 : 180)+\")\";\n}\n\nreturn svg.node();\n} \n `;\n \n // ERA return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;\n\n\n//msg.payload=Object.assign(msg.payload,{d3Configuration:d3Configuration});\nmsg[\"configuration\"]=d3Configuration;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1300,"y":420,"wires":[["5a1daea5.de2fd"]]}]