31:T414,md` # Java 11 API Hierarchy - Visualization This notebook series explores how to visualize the Java 11 API hierarchy. The dataset is available at: <${gist}> See the [\`README.md\`](${gist}) file for details on how this data was gathered. See the [Java 11 API Hierarchy - Data Wrangling](https://observablehq.com/@sjengle/java-11-api-hierarchy-data-wrangling) notebook for how to convert this data into a hierarchical format. This specific notebook illustrates visualize the data using the [d3-hierarchy](https://github.com/d3/d3-hierarchy) layouts. We will focus just on the different layouts in this notebook, and not interactivity or labeling. See the [d3-hierarchy collection](https://observablehq.com/collection/@d3/d3-hierarchy) for notebooks including more robust labeling of nodes and different forms of interactivity. *These examples are based off an older [bl.ocks.org](https://bl.ocks.org/-/about) demo for [visualizing the Java 8 API hierarchy](http://bl.ocks.org/sjengle/cdda19c7942c2ff569161ee0566e1396) using D3 version 4.* `32:T4a8,icicle = { let data = findModule(); data.sort(function(a, b) { return b.height - a.height || b.count - a.count; }); /* * must have the "value" attribute pre-calculated BEFORE calling layout * two options are: data.count() or data.sum(d => d.size) */ // data.count() data.sum(d => d.size) // uses the "value" attribute (currently file size) let layout = d3.partition().size([width - 2 * pad, height - 2 * pad]); layout(data); let svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height); let plot = svg.append("g") .attr("id", "plot") .attr("transform", translate(pad, pad)); let rects = plot.selectAll("rect") .data(data.descendants()) .enter() .append("rect") .attr("x", function(d) { return d.x0; }) .attr("y", function(d) { return d.y0; }) .attr("width", function(d) { return d.x1 - d.x0; }) .attr("height", function(d) { return d.y1 - d.y0; }) .attr("id", function(d) { return d.data.name; }) .attr("class", "node") .style("fill", function(d) {return color(d.depth)}); setupEvents(plot, rects, true); return svg.node(); }33:T447,treemap = { let data = findModule(); // sort largest nodes first data.sort(function(a, b) { return b.height - a.height || b.count - a.count; }); // make sure value is set data.sum(d => d.size) // layout based on width, height minus some padding let layout = d3.treemap().padding(r).size([width - 2 * pad, height - 2 * pad]); layout(data); let svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height); let plot = svg.append("g") .attr("id", "plot") .attr("transform", translate(pad, pad)); let rects = plot.selectAll("rect") .data(data.descendants()) .enter() .append("rect") .attr("x", function(d) { return d.x0; }) .attr("y", function(d) { return d.y0; }) .attr("width", function(d) { return d.x1 - d.x0; }) .attr("height", function(d) { return d.y1 - d.y0; }) .attr("id", function(d) { return d.data.name; }) .attr("class", "node") .style("fill", function(d) {return color(d.depth)}); setupEvents(plot, rects, false); return svg.node(); }34:T414,function setupEvents(g, selection, raise) { selection.on('mouseover.highlight', function(d) { // https://github.com/d3/d3-hierarchy#node_path // returns path from d3.select(this) node to selection.data()[0] root node let path = d3.select(this).datum().path(selection.data()[0]); // select all of the nodes on the shortest path let update = selection.data(path, node => node.data.name); // highlight the selected nodes update.classed('selected', true); if (raise) { update.raise(); } }); selection.on('mouseout.highlight', function(d) { let path = d3.select(this).datum().path(selection.data()[0]); let update = selection.data(path, node => node.data.name); update.classed('selected', false); }); // show tooltip text on mouseover (hover) selection.on('mouseover.tooltip', function(d) { showTooltip(g, d3.select(this)); }); // remove tooltip text on mouseout selection.on('mouseout.tooltip', function(d) { g.select("#tooltip").remove(); }); }35:T67f,function showTooltip(g, node) { let gbox = g.node().getBBox(); // get bounding box of group BEFORE adding text let nbox = node.node().getBBox(); // get bounding box of node // calculate shift amount let dx = nbox.width / 2; let dy = nbox.height / 2; // retrieve node attributes (calculate middle point) let x = nbox.x + dx; let y = nbox.y + dy; // get data for node let datum = node.datum(); // remove "java.base." from the node name let name = datum.data.name.replace("java\.base\.", ""); // use node name and total size as tooltip text let text = `${name} (${numberFormat(datum.data.total)}, ${numberFormat(datum.data.leaves)}n)`; // create tooltip let tooltip = g.append('text') .text(text) .attr('x', x) .attr('y', y) .attr('dy', -dy - 4) // shift upward above circle .attr('text-anchor', 'middle') // anchor in the middle .attr('id', 'tooltip'); // it is possible the tooltip will fall off the edge of the // plot area. we can detect when this happens, and set the // text anchor appropriately // get bounding box for the text let tbox = tooltip.node().getBBox(); // if text will fall off left side, anchor at start if (tbox.x < gbox.x) { tooltip.attr('text-anchor', 'start'); tooltip.attr('dx', -dx); // nudge text over from center } // if text will fall off right side, anchor at end else if ((tbox.x + tbox.width) > (gbox.x + gbox.width)) { tooltip.attr('text-anchor', 'end'); tooltip.attr('dx', dx); } // if text will fall off top side, place below circle instead if (tbox.y < gbox.y) { tooltip.attr('dy', dy + tbox.height); } } 36:T621,polarcoord = { let d = 300; let r = (d - pad) / 2; let svg = d3.select(DOM.svg(d, d)) .style("width", d) .style("height", d) .style("background-color", "whitesmoke"); let plot = svg.append("g") .attr("id", "plot") .attr("transform", translate(d / 2, d / 2)); // plot enclosing circle plot.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", r) .style("fill", "none") .style("stroke", "#888888"); let points = [ {"r": 0, "theta": 0, "text": "(0, 0)"}, {"r": r, "theta": 0, "text": "(r, 0)"}, {"r": r, "theta": Math.PI / 2, "text": "(r, \u03C0/2)"} ]; points.forEach(function(p) { let point = toCartesian(p.r, p.theta); p.x = point.x; p.y = point.y; }); plot.selectAll("circle.points") .data(points) .enter() .append("circle") .attr("cx", p => p.x) .attr("cy", p => p.y) .attr("r", 5); plot.selectAll("text") .data(points) .enter() .append("text") .attr("x", p => p.x) .attr("y", p => p.y) .attr("dx", "-0.5ex") .attr("dy", "-0.75em") .attr("text-anchor", "end") .text(p => p.text); // draw lines as well let lines = [ {"source": points[0], "target": points[1]}, {"source": points[0], "target": points[2]} ]; plot.selectAll("line") .data(lines) .enter() .append("line") .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y) .style("stroke", "black"); return svg.node(); }37:T5e4,radialSVG = { let d = 300; let r = (d - pad) / 2; let svg = d3.select(DOM.svg(d, d)) .style("width", d) .style("height", d) .style("background-color", "whitesmoke"); let plot = svg.append("g") .attr("id", "plot") .attr("transform", translate(d / 2, d / 2)); // plot enclosing circle plot.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", r) .style("fill", "none") .style("stroke", "#888888"); let points = [ {"radial": 0, "theta": 0, "text": "(0, 0)"}, {"radial": r, "theta": 0, "text": "(r, 0)"}, {"radial": r, "theta": Math.PI / 2, "text": "(r, \u03C0/2)"} ]; points.forEach(function(p) { let point = toCartesian(p.radial, p.theta); p.x = point.x; p.y = point.y; }); plot.selectAll("circle.points") .data(points) .enter() .append("circle") .attr("cx", p => p.x) .attr("cy", p => p.y) .attr("r", 5); plot.selectAll("text") .data(points) .enter() .append("text") .attr("x", p => p.x) .attr("y", p => p.y) .attr("dx", "-0.5ex") .attr("dy", "-0.75em") .attr("text-anchor", "end") .text(p => p.text); // draw lines as well let lines = [ {"source": points[0], "target": points[1]}, {"source": points[0], "target": points[2]} ]; plot.selectAll("path") .data(lines) .enter() .append("path") .attr("d", radialLine) .style("fill", "none") .style("stroke", "black"); return svg.node(); }38:[] 2f:{"title":"Java 11 API Hierarchy - Visualization","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"md` \n## Subtree Filter\n\nOur base tree is a bit too large to look at in notebook form, where screenspace is constrained. Select a module to focus on below instead. No modifications need to be made to how we visualize the data since each subtree is also a tree! \n\nThe list of modules is automatically generated from our loaded data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"viewof module = select({\n title: \"Modules\",\n description: \"Please select a module.\",\n options: modules,\n value: modules[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"md`\n## Node/Link Visualizations\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"md`\n### Dendrogram Layout with Straight Edges\n\n \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"dendrogram = { \n // get selected subtree \n let data = findModule();\n \n // sort larger valued nodes first\n data.sort(function(a, b) { \n return b.height - a.height || b.count - a.count; \n });\n \n // size of layout will be width and height minus some padding\n let layout = d3.cluster().size([width - 2 * pad, height - 2 * pad]);\n \n // call layout to calculate (x, y) locations of nodes and sizes\n layout(data);\n \n // setup svg width and height\n let svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height);\n \n // shift (0, 0) a little bit to leave some padding\n let plot = svg.append(\"g\")\n .attr(\"id\", \"plot\")\n .attr(\"transform\", translate(pad, pad));\n \n // data.links() are all of the edges as an array\n drawLinks(plot.append(\"g\"), data.links(), straightLine);\n \n // data.descendants() are all of the nodes as an array\n drawNodes(plot.append(\"g\"), data.descendants(), true);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"md`\n### Traditional Tree Layout with Curved Edges\n\n \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"nodelink = { \n let data = findModule();\n \n data.sort(function(a, b) { \n return b.height - a.height || b.count - a.count; \n });\n \n let layout = d3.tree().size([width - 2 * pad, height - 2 * pad]);\n \n layout(data);\n \n let svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height);\n \n let plot = svg.append(\"g\")\n .attr(\"id\", \"plot\")\n .attr(\"transform\", translate(pad, pad));\n \n drawLinks(plot.append(\"g\"), data.links(), curvedLine);\n drawNodes(plot.append(\"g\"), data.descendants(), true);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"md`\n### Circular Tree with Straight Edges\n\n \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"cirtree = { \n let data = findModule();\n \n data.sort(function(a, b) { \n return b.height - a.height || b.count - a.count; \n });\n \n // size is no longer based on width and height\n // but now available theta (angles/degrees) and r (radial/radius)\n let layout = d3.tree().size([2 * Math.PI, (diameter / 2) - pad]);\n \n layout(data);\n\n // need to conver the polar coordinates calculated by layout\n // into Cartesian coordinates to draw\n data.each(function(node) {\n node.theta = node.x;\n node.radial = node.y;\n \n var point = toCartesian(node.radial, node.theta);\n node.x = point.x;\n node.y = point.y;\n });\n \n let svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height);\n \n let plot = svg.append(\"g\")\n .attr(\"id\", \"plot\")\n .attr(\"transform\", translate(width / 2, height / 2));\n \n drawLinks(plot.append(\"g\"), data.links(), straightLine);\n drawNodes(plot.append(\"g\"), data.descendants(), true);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"md`\n### Circular Dendogram with Curved Edges\n\n \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"dentree = { \n let data = findModule();\n \n data.sort(function(a, b) { \n return b.height - a.height || b.count - a.count; \n });\n \n let layout = d3.cluster().size([2 * Math.PI, (diameter / 2) - pad]);\n \n layout(data);\n \n data.each(function(node) {\n node.theta = node.x;\n node.radial = node.y;\n \n var point = toCartesian(node.radial, node.theta);\n node.x = point.x;\n node.y = point.y;\n });\n \n let svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height);\n \n let plot = svg.append(\"g\")\n .attr(\"id\", \"plot\")\n .attr(\"transform\", translate(width / 2, height / 2));\n \n drawLinks(plot.append(\"g\"), data.links(), radialLine);\n drawNodes(plot.append(\"g\"), data.descendants(), true);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"md`## Space Filling Visualizations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"md`\n\n### Icicle or Partition Layout\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"md`\n### Treemap Layout\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"md`\n### Circle Packing Layout\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"packing = { \n let data = findModule();\n \n data.sort(function(a, b) { \n return b.height - a.height || b.count - a.count; \n });\n\n // make sure value is set\n data.sum(d => d.size)\n \n let layout = d3.pack()\n .padding(r)\n .size([diameter - 2 * pad, diameter - 2 * pad]);\n\n layout(data);\n \n let svg = d3.select(DOM.svg(diameter, diameter))\n .style(\"width\", diameter)\n .style(\"height\", diameter);\n \n let plot = svg.append(\"g\")\n .attr(\"id\", \"plot\")\n .attr(\"transform\", translate(pad, pad));\n \n drawNodes(plot.append(\"g\"), data.descendants(), false);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`\n\n

\n\n## Appendix\n\nFind various helper methods, globals, and imports here.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"md`### Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"gist = 'https://gist.github.com/sjengle/9cbff87c8d8a4a82f8b390e0a9df5525'","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"viewof r = slider({\n min: 1,\n max: 100,\n step: 1,\n value: 5,\n title: 'r',\n description: 'radius of circles'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"pad = 14","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"diameter = Math.min(width, height)","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"md`### Draw Methods`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"function drawLinks(g, links, generator) {\n let paths = g.selectAll('path')\n .data(links)\n .enter()\n .append('path')\n .attr('d', generator)\n .attr('class', 'link');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"function drawNodes(g, nodes, raise) {\n let circles = g.selectAll('circle')\n .data(nodes, node => node.data.name)\n .enter()\n .append('circle')\n .attr('r', d => d.r ? d.r : r)\n .attr('cx', d => d.x)\n .attr('cy', d => d.y)\n .attr('id', d => d.data.name)\n .attr('class', 'node')\n .style('fill', d => color(d.depth));\n \n setupEvents(g, circles, raise);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"md`\n### Edge Generators\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"straightLine = {\n let line = d3.line()\n .curve(d3.curveLinear)\n .x(d => d.x)\n .y(d => d.y);\n \n let generator = function(node) {\n return line([node.source, node.target]);\n }\n \n return generator;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"curvedLine = {\n let generator = d3.linkVertical()\n .x(d => d.x)\n .y(d => d.y);\n \n return generator;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"radialLine = {\n let generator = d3.linkRadial()\n .angle(d => d.theta + Math.PI / 2) // rotate, 0 angle is mapped differently here\n .radius(d => d.radial);\n \n return generator;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"md`### Coordinate Systems\n\nWhen converting inbetween Cartesian and polar coordinates, note the direction that angles increase. The theta value of 0 radians (or 0°) is where we expect, and then \\u03C0/2 radians or 90° goes in **clockwise** direction. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"function toCartesian(r, theta) {\n return {\n x: r * Math.cos(theta),\n y: r * Math.sin(theta)\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"function toPolar(x, y) {\n return {\n r: Math.sqrt(x * x + y * y),\n theta: Math.atan2(y, x)\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"md`\n### Scales\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"{\n // https://observablehq.com/@mbostock/d3-legend\n let svg = d3.select(DOM.svg(width, 40));\n yield svg.node();\n svg.append(\"g\").call(\n d3.legendColor()\n .shapeWidth(30)\n .cells(root.height + 1)\n .orient(\"horizontal\")\n .scale(color));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"color = d3.scaleSequential([root.height, 0], d3.interpolateViridis)","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`### Helper Methods`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"function translate(x, y) {\n return 'translate(' + String(x) + ',' + String(y) + ')';\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"numberFormat = d3.format(\".2~s\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"function findModule() {\n if (root.data.name === module) {\n return root.copy();\n }\n \n for (let i = 0; i < root.children.length; i++) {\n if (root.children[i].data.name === module) {\n return root.children[i].copy();\n }\n }\n \n return null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"md`\n### Data\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"import {java11} from \"@sjengle/java-11-api-hierarchy-data-wrangling\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"root = java11.children[0].children[0] // focus on java.base","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"modules = {\n let names = root.children.map(d => d.data.name);\n \n // add root node as well\n names.unshift(root.data.name);\n \n return names;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"md`### CSS Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"import {table} from \"@tmcw/tables@513\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"import {slider,select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\", \"d3-svg-legend@2\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}