31:T40f,md` # Java 11 API Hierarchy - Template 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: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); } } 33: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(); }34: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(); }35:[] 2f:{"title":"Java 11 API Hierarchy - Template","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 let data = findModule();\n \n let svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height);\n \n return svg.node();\n}","pinned":true,"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 let svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height);\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 let svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height);\n \n return svg.node();\n}","pinned":true,"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 let svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height);\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":"icicle = { \n let data = findModule();\n \n let svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"md`\n### Treemap Layout\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"treemap = { \n let data = findModule();\n \n let svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height);\n \n return svg.node();\n}","pinned":true,"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 let svg = d3.select(DOM.svg(diameter, diameter))\n .style(\"width\", diameter)\n .style(\"height\", diameter);\n \n return svg.node();\n}","pinned":true,"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 // TODO\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"function drawNodes(g, nodes, raise) {\n // TODO \n // setupEvents(g, circles, raise);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"function setupEvents(g, selection, raise) {\n selection.on('mouseover.highlight', function(d) {\n // https://github.com/d3/d3-hierarchy#node_path\n // TODO\n });\n \n selection.on('mouseout.highlight', function(d) {\n let path = d3.select(this).datum().path(selection.data()[0]);\n let update = selection.data(path, node => node.data.name);\n update.classed('selected', false);\n });\n \n // show tooltip text on mouseover (hover)\n selection.on('mouseover.tooltip', function(d) {\n showTooltip(g, d3.select(this));\n });\n \n // remove tooltip text on mouseout\n selection.on('mouseout.tooltip', function(d) {\n g.select(\"#tooltip\").remove();\n }); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"$32","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":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"$34","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":"$W35","stdlib":"1","titling":"auto"}