30:Teeb,createSvg = { svg.empty(); svg.append(``); //force svg re-render svg.html(svg.html()); var totallevel1 = data.level1.length; var totallevel2 = data.level2.length; var totallevel3 = data.level3.length; var totalLinks = data.links.length; var containerWidth = svg.width(); var containerHeight = svg.height(); svg.attr('viewBox', '0 0 ' + containerWidth + ' ' + containerHeight); var totalBlockSpace = blockSpace * (totallevel1-1); //calculate block positions var level1Height = parseInt((containerHeight - totalBlockSpace) / totallevel1); data.level1.forEach((item, index) => { var x = 0; var y = level1Height * index + blockSpace * index; createBlock(item, "level1-"+item.id, x, y, level1Height); }); var level2Height = parseInt((containerHeight - totalBlockSpace) / totalLinks); var level2YAccum = 0; var level2pace = parseInt((containerHeight - level2Height * totalLinks) / (totallevel2-1)); data.level2.forEach((item, index) => { var totalConnections = data.links.filter(link => link.level2 == item.id).length; var height = totalConnections * level2Height; var x = (containerWidth - blockWidth) / 2; var y = level2YAccum + level2pace * index; createBlock(item, "level2-"+item.id, x, y, height); level2YAccum += height; }); var level3Height = parseInt((containerHeight-totalBlockSpace) / totalLinks); var level3YAccum = 0; var level3Space = parseInt((containerHeight - level3Height * totalLinks) / (totallevel3-1)); data.level3.forEach((item, index) => { var totalConnections = data.links.filter(link => link.level3 == item.id).length; var height = totalConnections * level3Height; var x = containerWidth - blockWidth; var y = level3YAccum + level3Space * index; createBlock(item, "level3-"+item.id, x, y, height); level3YAccum += height; }); //calculate paths data.links.forEach((item, index) => { var level1 = $("#level1-" + item.level1); var level2 = $("#level2-" + item.level2); var level3 = $("#level3-" + item.level3); level1.addClass("level2-" + item.level2); level1.addClass("level3-" + item.level3); level2.addClass("level1-" + item.level1); level2.addClass("level3-" + item.level3); level3.addClass("level1-" + item.level1); level3.addClass("level2-" + item.level2); var path1Gradient = "gradient-p1-" + item.level1 + "-" + item.level2; console.log($("#"+path1Gradient).length); if(!$("#"+path1Gradient).length){ createGradient(path1Gradient, level1.attr("fill"), level2.attr("fill")); } var path2Gradient = "gradient-p2-" + item.level2 + "-" + item.level3; if(!$("#"+path2Gradient).length){ createGradient(path2Gradient, level2.attr("fill"), level3.attr("fill")); } var level2Total = $('.path1.level2-' + item.level2).length; var level3Total = $('.path2.level3-' + item.level3).length; var level1X = parseInt(level1.attr("x")) + blockWidth; var level1Y = parseInt(level1.attr("y")) + parseInt(level1Height/2); var level2X = parseInt(level2.attr("x")) + blockWidth/2; var level2Y = parseInt(level2.attr("y")) + level2Height/2 + level2Total*level2Height; var level3X = parseInt(level3.attr("x")); var level3Y = parseInt(level3.attr("y")) + parseInt(level3Height/2) + level3Total*level2Height; createPath(item, "path1", level1Height, path1Gradient, level1X, level1Y, level2X - blockWidth/2, level2Y); createPath(item, "path2", level3Height, path2Gradient, level2X + blockWidth/2, level2Y, level3X, level3Y); }); //force svg re-render svg.html(svg.html()); //interactions $(".node").mouseenter(function() { filter($(this).attr("id")); }); $(".path1, .path2").mouseenter(function() { var level1 = $(this).attr("class").match(/level1-\d+/)[0]; filter(level1); }); $(".node, .path1, .path2").mouseleave(function() { unfilter(); }); }31:T1023,data = { return { "level1": [ {"id":0, "name":"name level1 0", "color":"rgb(95, 70, 144)"}, {"id":1, "name":"name level1 1", "color":"rgb(15, 133, 84)"}, {"id":2, "name":"name level1 2", "color":"rgb(111, 64, 112)"}, {"id":3, "name":"name level1 3", "color":"rgb(204, 80, 62)"}, {"id":4, "name":"name level1 4", "color":"rgb(29, 105, 150)"}, {"id":5, "name":"name level1 5", "color":"rgb(237, 173, 8)"}, {"id":6, "name":"name level1 6", "color":"rgb(115, 175, 72)"}, {"id":7, "name":"name level1 7", "color":"rgb(148, 52, 110)"}, {"id":8, "name":"name level1 8", "color":"rgb(56, 166, 165)"}, {"id":9, "name":"name level1 9", "color":"rgb(225, 124, 5)"}, {"id":10, "name":"name level1 10", "color":"rgb(204, 80, 62)"}, {"id":11, "name":"name level1 11", "color":"rgb(153, 78, 149)"}, {"id":12, "name":"name level1 12", "color":"rgb(102, 102, 102)"}, {"id":13, "name":"name level1 0", "color":"rgb(95, 70, 144)"}, {"id":14, "name":"name level1 1", "color":"rgb(15, 133, 84)"}, {"id":15, "name":"name level1 2", "color":"rgb(111, 64, 112)"}, {"id":16, "name":"name level1 3", "color":"rgb(204, 80, 62)"}, {"id":17, "name":"name level1 4", "color":"rgb(29, 105, 150)"}, {"id":18, "name":"name level1 5", "color":"rgb(237, 173, 8)"}, {"id":19, "name":"name level1 6", "color":"rgb(115, 175, 72)"}, {"id":20, "name":"name level1 7", "color":"rgb(148, 52, 110)"}, {"id":21, "name":"name level1 8", "color":"rgb(56, 166, 165)"}, {"id":22, "name":"name level1 9", "color":"rgb(225, 124, 5)"}, {"id":23, "name":"name level1 10", "color":"rgb(204, 80, 62)"}, {"id":24, "name":"name level1 11", "color":"rgb(153, 78, 149)"}, {"id":25, "name":"name level1 12", "color":"rgb(102, 102, 102)"} ], "level2":[ {"id":0, "name":"name level2 0", "color":"rgb(95, 70, 144)"}, {"id":1, "name":"name level2 1", "color":"rgb(15, 133, 84)"}, {"id":2, "name":"name level2 2", "color":"rgb(111, 64, 112)"}, {"id":3, "name":"name level2 3", "color":"rgb(204, 80, 62)"}, {"id":4, "name":"name level2 4", "color":"rgb(29, 105, 150)"}, {"id":5, "name":"name level2 0", "color":"rgb(95, 70, 144)"}, {"id":6, "name":"name level2 1", "color":"rgb(15, 133, 84)"}, {"id":7, "name":"name level2 2", "color":"rgb(111, 64, 112)"}, {"id":8, "name":"name level2 3", "color":"rgb(204, 80, 62)"}, {"id":9, "name":"name level2 4", "color":"rgb(29, 105, 150)"} ], "level3":[ {"id":0, "name":"name level3 0", "color":"rgb(237, 173, 8)"}, {"id":1, "name":"name level3 1", "color":"rgb(115, 175, 72)"}, {"id":2, "name":"name level3 2", "color":"rgb(148, 52, 110)"}, {"id":3, "name":"name level3 3", "color":"rgb(56, 166, 165)"}, {"id":4, "name":"name level3 4", "color":"rgb(225, 124, 5)"}, {"id":5, "name":"name level3 0", "color":"rgb(237, 173, 8)"}, {"id":6, "name":"name level3 1", "color":"rgb(115, 175, 72)"}, {"id":7, "name":"name level3 2", "color":"rgb(148, 52, 110)"}, {"id":8, "name":"name level3 3", "color":"rgb(56, 166, 165)"}, {"id":9, "name":"name level3 4", "color":"rgb(225, 124, 5)"} ], "links":[ {"level1":0, "level2":0, "level3":0}, {"level1":1, "level2":2, "level3":0}, {"level1":2, "level2":4, "level3":1}, {"level1":3, "level2":1, "level3":1}, {"level1":4, "level2":3, "level3":2}, {"level1":5, "level2":0, "level3":2}, {"level1":6, "level2":2, "level3":3}, {"level1":7, "level2":3, "level3":3}, {"level1":8, "level2":3, "level3":3}, {"level1":9, "level2":3, "level3":4}, {"level1":10, "level2":4, "level3":4}, {"level1":11, "level2":4, "level3":4}, {"level1":12, "level2":4, "level3":4}, {"level1":13, "level2":5, "level3":5}, {"level1":14, "level2":5, "level3":5}, {"level1":15, "level2":5, "level3":6}, {"level1":16, "level2":6, "level3":6}, {"level1":17, "level2":6, "level3":7}, {"level1":18, "level2":7, "level3":7}, {"level1":19, "level2":7, "level3":7}, {"level1":20, "level2":5, "level3":8}, {"level1":21, "level2":6, "level3":8}, {"level1":22, "level2":6, "level3":8}, {"level1":23, "level2":7, "level3":9}, {"level1":25, "level2":8, "level3":7}, {"level1":25, "level2":8, "level3":8}, {"level1":24, "level2":8, "level3":9}, {"level1":25, "level2":9, "level3":9}, ] }};32:[] 2e:{"title":"Sankey","cells":[{"id":0,"value":"md`# Sankey\n3 levels using jquery and no d3js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"viewof blockWidth = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"viewof blockSpace = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"viewof svgHeight = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"svgEl = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"createBlock = function (item, id, x, y, height){\n\titem.el = $(``);\n\tsvg.append(item.el);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"createGradient = function (id, color1 , color2){\n\t$(\"defs\").append(`\n\t\t\n\t\t\n\t`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"createPath = function (item, classes, height, gradient, xIn, yIn, xOut, yOut){\n\tvar midX = xIn + (xOut-xIn) / 2;\n\tsvg.append($(``));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"filter = function (selector){\n\tsvg.addClass(\"filtered\");\n\t$(\"#\" + selector).addClass(\"enabled\");\n\t$(\".\" + selector).addClass(\"enabled\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"unfilter = function (){\n\tsvg.removeClass(\"filtered\");\n\t$(\".enabled\").removeClass(\"enabled\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"svg = $(svgEl);","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"css = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$$ = require(\"jquery\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}