31:T17eb,vizTree = { var container = html``; var margin = {top: 20, right: 20, bottom: 121, left: 40}, width = 1260 - margin.right - margin.left, height = 760 - margin.top - margin.bottom; var i = 0, duration = 750, root; var color = d3.scale.ordinal() .domain([1, 2, 3, 4, 5 ]) .range(["#004CA3", "#8A15A5", "#CB5E99", "#F47B89","#FFA47E", "#FFD286","#FFFA6"]); var tree = d3.layout.tree() .size([height, width]); var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; }); var svg = d3.select(container) .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var root = data; root.x0 = height / 2; root.y0 = 0; update(root); function update(source) { // Compute the new tree layout. var nodes = tree.nodes(root).reverse(), links = tree.links(nodes); // Normalize for fixed-depth. nodes.forEach(function(d) { d.y = d.depth * 190; }); // Update the nodes… var node = svg.selectAll("g.node") .data(nodes, function(d) { return d.id || (d.id = ++i); }); // Enter any new nodes at the parent's previous position. var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) .on("click", click); nodeEnter.append("circle") .attr("r", function(d){ if(d.group == "10"){ return 2/(d.level*d.level)*5; }else{ return 8/(d.level*d.level)*5;} }) .style("fill",function(d){ return d._children ? "#fff" : color(d.level) }) .style("stroke", function(d){ return d._children ? "#fff" : color(d.level) }); var nodeText = nodeEnter.append("text") .attr("x", function(d) { if(d.level == 1 ){ return 45; }else if(d.level == 2){ return 20 }else{ return d.children || d._children ? 10 : 30; } }) .attr("dy","0.3em") .style("fill", function(d){ return color(d.level); }) .attr("text-anchor", "start") .text(function(d) { return d.name; }) .style("font-weight", "bold") .style("font-size", function(d){return 12 + 4/d.level*3 +"px";}); nodeEnter.append("image") .attr("xlink:href", function (d) { if(d.children || d._children) { return ; }else{ return "https://cdn2.iconfinder.com/data/icons/bitsies/128/Info-128.png"; } }) .attr("width", "14px") .attr("height", "14px") .attr("x", "10px") .attr("y", "-10px") .on("mouseenter", function (d) { if(d.children || d._children){ }else{ d3.select(this) .transition() .attr("xlink:href", d => renderImg(d.img)) .attr("height","150px") .attr("width","150px"); } }) .on("mouseleave", function (d) { d3.select(this) .transition() .attr("xlink:href", function (d) { if(d.children || d._children) { return ; }else{ return "https://cdn2.iconfinder.com/data/icons/bitsies/128/Info-128.png"; } }) .attr("height","14px") .attr("width","14px"); }); // Transition nodes to their new position. var nodeUpdate = node.transition() .duration(duration) .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); nodeUpdate.select("circle") .attr("r", function(d){ if(d.group == "10"){ return 6/(d.level*d.level)*5; }else{ return 8/(d.level*d.level)*5; }}) .style("fill", function(d) { return d._children ? "#fff" : color(d.level) ; }); nodeUpdate.select("text") .style("fill", function(d){ return color(d.level) }); // Transition exiting nodes to the parent's new position. var nodeExit = node.exit().transition() .duration(duration) .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) .remove(); nodeExit.select("circle") .attr("r", function(d){return 8/(d.level*d.level)*5; }); nodeExit.select("text") .style("fill", function(d){ return color(d.level) }); // Update the links… var link = svg.selectAll("path.link") .data(links, function(d) { return d.target.id; }); // Enter any new links at the parent's previous position. link.enter().insert("path", "g") .attr("class", "link") .attr("d", function(d) { var o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }) .style("opacity", 0.7) .style("z-index",-100) .style("fill", "none") .style("stroke", "#ccc") .style("stroke-wide", "2px"); // Transition links to their new position. link.transition() .duration(duration) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link.exit().transition() .duration(duration) .attr("d", function(d) { var o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }) .remove(); // Stash the old positions for transition. nodes.forEach(function(d) { d.x0 = d.x; d.y0 = d.y; }); } // Toggle children on click. function click(d) { if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(d); } return(container); }32:T18d8,data = JSON.parse(` { "name":"What to Show","level": 1, "group":"10", "children":[ { "name":"Comparison","level": 2, "group":"1", "children":[ { "name":"Over Time","level": 3, "group":"1", "children":[ { "name":"Few Periods","level": 4, "group":"1", "children":[ { "name":"Single or Few Categories","level": 5, "group":"1", "size":3812, "img":"Single_Cat.png" }, { "name":"Many Categories","level": 5, "group":"1", "size":3812, "img":"Many_Cat.png" } ] }, { "name":"Many Periods","level": 4, "group":"1", "children":[ { "name":"Cyclical Data","level": 5, "group":"1", "size":3812, "img":"Cyc.png" }, { "name":"Non-Cyclical Data","level": 5, "group":"1", "size":3812, "img":"Non_Cyc.png" } ] } ] }, { "name":"Among Items","level": 3, "group":"1", "children":[ { "name":"One Variable per Item","level": 4, "group":"1", "children":[ { "name":"Few Categories","level": 5, "group":"1", "children":[ { "name":"Few Items","level": 6, "group":"1", "size":3812, "img":"Few_Items.png" }, { "name":"Many Items","level": 6, "group":"1", "size":3812, "img":"Many_Items.png" } ] }, { "name":"Many Categories","level": 5, "group":"1", "size":3812, "img":"Many_Cate.png" } ] }, { "name":"Two Variables per Item","level": 4, "group":"1", "size":3812, "img":"Two_per_Item.png" } ] } ] }, { "name":"Distribution","level": 2, "group":"2", "children":[ { "name":"Single Variable","level": 3, "group":"2", "children":[ { "name":"Few Data Points","level": 4, "group":"2", "size":1983, "img":"Few_Points.png" }, { "name":"Many Data points","level": 4, "group":"2", "size":2047, "img":"Many_Points.png" } ] }, { "name":"Two Variables","level": 3, "group":"2", "size":1041, "img":"Two_Var.png" }, { "name":"Three Variables","level": 3, "group":"2", "size":5176, "img":"Three_Var.png" } ] }, { "name":"Composition","level": 2, "group":"3", "children":[ { "name":"Static","level": 3, "group":"3", "size":1759, "children":[ { "name":"Simple Share of Total","level": 4, "group":"3", "size":2165, "img":"Component.png" }, { "name":"Accumulation ot Subtraction to Total","level": 4, "group":"3", "size":2165, "img":"Total.png" }, { "name":"Components of Components","level": 4, "group":"3", "size":2165, "img":"Simple_Total.png" } ] }, { "name":"Changing Over Time","level": 3, "group":"3", "size":1759, "children":[ { "name":"Few Periods","level": 4, "group":"3", "size":2165, "children":[ { "name":"Only Relative Differences Matter","level": 5, "group":"3", "size":2165, "img":"Few_Relative.png" }, { "name":"Relative and Absolute Differences Matter","level": 5, "group":"3", "size":2165, "img":"Few_Absolute.png" } ] }, { "name":"Many Periods","level": 4, "group":"3", "size":2165, "children":[ { "name":"Only Relative Differences Matter","level": 5, "group":"3", "size":2165, "img":"Many_Relative.png" }, { "name":"Relative and Absolute Differences Matter","level": 5, "group":"3", "size":2165, "img":"Many_Absolute.png" } ] } ] } ] }, { "name":"Relationship","level": 2, "group":"4", "children":[ { "name":"Two Variables","level": 3, "group":"4", "size":8833, "img":"Relation_Two.png" }, { "name":"Three Variables","level": 3, "group":"4", "size":1732, "img":"Relation_Three.png" } ] } ] } `)33:T474,html ` pillCSS `34:[] 2f:{"title":"Visualization Selection Diagram","cells":[{"id":0,"value":"# Visualization Selection Diagram","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"pills = {\n const pillData = ['d3-Tree', 'xlink:href', 'Chart Selection Diagram'];\n return html `\n

\n ${pillData.map(d => '

'+d+'

')}\n

\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"

This visualization is based on the chart selection diagram by Dr. Andrew Abela as well as the article \"Data Analysis And Visualization – Are You Doing it Right?\" by Jānis Gulbis, and the article \"4 pillars of data visualization: distribution, relationship, composition, comparison\" by Mahbubul Alam.

","pinned":false,"hidden":false,"mode":"html"},{"id":87,"value":"introText = md`Visualization selection depends on the nature of data and the kind of information we want to communicate. In general, they are of four different kinds:\n\n- **Distribution** of a single variable\n- **Relationship** between two variables\n- **Composition** of a single or multiple variables\n- **Comparison** between different categories/individuals\n\nChart selection diagram can help pick the appropriate chart type:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"imageAll = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"d3VizIntroText = md`D3.js Tree plot can help understand the process of the chart selection as well as quickly locate the desired chart type:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"function renderImg(name) {\n var path = 'https://raw.githubusercontent.com/zhihaohowardyao/visualizations/master/img/';\n return (path + name);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require('d3@v3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}