25:["$","title",null,{"children":"Sample Compact Euler | Raef Kazi | Observable"}] 49:Te4c,chart = { // Sample data representing sets const sets = [ [1, 2, 3], [1, 2], [2, 3], [3, 4, 5], [4, 5, 6] ]; // Assign unique labels to sets based on size const labeledSets = sets.map((set, index) => ({ label: index, set })); labeledSets.sort((a, b) => b.set.length - a.set.length); // Construct list of labels for each element const labelsByElement = new Map(); sets.flat().forEach((element) => { const labels = labeledSets .filter((set) => set.set.includes(element)) .map((set) => set.label); labelsByElement.set(element, labels); }); // Sort labels for each element labelsByElement.forEach((labels) => labels.sort((a, b) => a - b)); // Sort the list of lists of set labels lexically const sortedLabels = Array.from(labelsByElement.values()).sort(); // Create SVG container var svg = d3.create("svg").attr("width", 400).attr("height", 400); // Recursive function to construct groups and add items function createGroup(parent, labels) { const label = labels[0]; const group = parent .append("g") .attr("class", "group") .attr("transform", `translate(${labels.length * 50}, 0)`) .attr("data-label", label); labels.slice(1).forEach((childLabel) => { createGroup(group, [childLabel]); }); group .append("rect") // Add rectangle representing the group .attr("width", 40) .attr("height", 20) .style("fill", `rgb(${label * 30}, ${label * 30}, ${label * 30})`); group .append("text") // Add label text .attr("x", 20) .attr("y", 15) .text(label); } // Create groups and add items for the first list const firstList = sortedLabels[0]; createGroup(svg, firstList); // Create groups and add items for the remaining lists sortedLabels.slice(1).forEach((labels) => { const parentGroups = svg.selectAll( ".group[data-label='" + labels[0] + "']" ); parentGroups.each(function () { createGroup(d3.select(this), labels); }); }); // Connect groups with the same label using edges svg.selectAll(".group").each(function () { const currentGroup = d3.select(this); const currentLabel = currentGroup.node().getAttribute("data-label"); const groupsWithSameLabel = svg.selectAll( ".group[data-label='" + currentLabel + "']" ); groupsWithSameLabel.each(function () { const currentX = getGroupX(currentGroup); const currentY = getGroupY(currentGroup); const parentGroup = d3.select(this.parentNode); const parentX = getGroupX(parentGroup); const parentY = getGroupY(parentGroup); // Connect current group with parent group using an edge svg .append("line") .attr("class", "edge") .attr("x1", currentX + 20) .attr("y1", currentY + 20) .attr("x2", parentX + 20) .attr("y2", parentY) .style("stroke", "black") .style("stroke-width", 2); }); }); // Function to get the x coordinate of a group function getGroupX(group) { const transformAttr = group.attr("transform"); if (transformAttr) { return +transformAttr.split(",")[0].slice(10); } return 0; } // Function to get the y coordinate of a group function getGroupY(group) { const transformAttr = group.attr("transform"); if (transformAttr) { return +transformAttr.split(",")[1].slice(0, -1); } return 0; } // Apply some styling to groups and edges svg.selectAll(".group").style("opacity", 0.8).style("pointer-events", "all"); svg.selectAll(".edge").style("opacity", 0.5); return svg.node(); }4a:T62d,chart2 = { var sets = [ [1, 2, 3], [2, 3, 4], [3, 4, 5], [4, 5, 6] ]; var labels = []; for (var i = 0; i < sets.length; i++) { labels[i] = i; } labels.sort(function (a, b) { return sets[b].length - sets[a].length; }); var lists = []; for (var i = 0; i < sets[0].length; i++) { var list = []; for (var j = 0; j < sets.length; j++) { if (sets[j].indexOf(sets[0][i]) != -1) { list.push(labels[j]); } } list.sort(); lists.push(list); } var groups = []; for (var i = 0; i < lists[0].length; i++) { var group = { label: lists[0][i], children: [] }; if (groups.length == 0) { groups.push(group); continue; } var parentGroup = groups[groups.length - 1]; if (parentGroup.label == group.label) { parentGroup.children.push(group); continue; } while (parentGroup.label != group.label) { if (groups.length == 1) { groups.unshift(group); break; } groups.pop(); parentGroup = groups[groups.length - 1]; if (parentGroup.label == group.label) { parentGroup.children.push(group); break; } if (groups.length == 1) { groups.unshift(group); break; } parentGroup = groups[groups.length - 2]; if (parentGroup.label == group.label) { parentGroup.children.push(group); break; } groups.pop(); parentGroup.children.push(group); break; } } console.log(groups); return groups; }4b:Tc4c,venn_chart = { const svg = d3.select(DOM.svg(width, height)); var color = { // "a": "#e4b0b0", a: "#00897b", b: "#e4b0b0", c: "url(#half-fill)" }; //let groups = ["embedded", "dedicated"]; let groups = ["model_a", "model_b"]; /* const nodes = d3.range(600).map((d, i) => { if (i < 25) { return { color: "c", embedded: true, dedicated: true, center: 250 }; } if (i < 400) { return { color: "b", embedded: false, dedicated: true, center: 415 }; } return { color: "a", embedded: true, dedicated: false, center: 100 }; }); */ const nodes = test_data; var simulation = d3 .forceSimulation() .force("collision", d3.forceCollide(6).iterations(1)) .force("x", d3.forceX((a) => a.center).strength(0.05)) .force("y", d3.forceY(0).strength(0.05)) .force("center", d3.forceCenter(width / 2, height / 2)) .alphaDecay(0.001) .alpha(0.25) .nodes(nodes) .on("tick", ticked) .stop(); simulation.tick(); var node = svg .append("g") .attr("class", "nodes") .selectAll("circle") .data(nodes) .enter() .append("circle") .attr("r", 5) .style("stroke", "black") .style("stroke-width", 1) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .style("fill", (d) => color[d.color]) //.on("mouseover", handleMouseOver) // Add mouseover event handler .on("mouseover", tooltip_nodes) // Add mouseover event handler .on("mouseout", tooltip_node_out); // Add mouseout event handler setTimeout(() => { simulation.restart(); }, 2500); let points = groups.map((p) => nodes.filter((d) => d[p]).map((d) => ({ x: d.x, y: d.y, r: 5 })) ); let circle = points.map((p) => d3.packEnclose(p)); const annotations = [ { note: { label: "Part of Model A" }, data: { id: "Data Visualization Professionals" }, dy: 93, dx: -230, x: circle[0].x, y: circle[0].y, type: d3.annotationCalloutCircle, className: "model_a", subject: { radius: circle[0].r, radiusPadding: 5 } }, { note: { label: "Part of Model B" }, data: { id: "Data Visualization Professionals" }, dy: 93, dx: 230, x: circle[1].x, y: circle[1].y, className: "model_b", type: d3.annotationCalloutCircle, subject: { radius: circle[1].r, radiusPadding: 5 } } ]; const makeAnnotations = d3 .annotation() .annotations(annotations) .accessors({ x: (d) => d.x, y: (d) => d.y, title: (d) => d.id }); svg.insert("g", "g").attr("class", "annotation-test").call(makeAnnotations); function ticked() { node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); makeAnnotations.annotations().forEach((d, i) => { let points = nodes .filter((d) => d[groups[i]]) .map((d) => ({ x: d.x, y: d.y, r: 5 })); console.log("points", points); circle = d3.packEnclose(points); d.position = { x: circle.x, y: circle.y }; d.subject.radius = circle.r + 2; }); makeAnnotations.update(); } return svg.node(); }4c:T403,//name a tooltip_in function to call when the mouse hovers a node (renamed for nodes) tooltip_nodes = function (event, d) { // pass event and d to this function so that it can access d for our data //return tooltip_2 d3.select(this).style("opacity", 0.7); //Change opacity return tooltip_2 .html("

" + d.Document + "

") // add an html element with a header tag containing the name of the node. This line is where you would add additional information like: "

" + d.name + "

" + d.type + "

" Note the quote marks, pluses and
--these are necessary for javascript to put all the data and strings within quotes together properly. Any text needs to be all one line in .html() here .style("visibility", "visible") // make the tooltip visible on hover .style("top", event.pageY + "px") // position the tooltip with its top at the same pixel location as the mouse on the screen .style("left", event.pageX + "px"); // position the tooltip just to the right of the mouse location }4d:[{"id":"6d138ad4273fc961d6c71fca4c50bd352a4ec01185b4482ded9edf48890acd8e18aaeffd3990a7492e0b073ace14a5e6ec7adfbc40cf4824dc80d0f22f97333b","href":"https://static.observableusercontent.com/files/6d138ad4273fc961d6c71fca4c50bd352a4ec01185b4482ded9edf48890acd8e18aaeffd3990a7492e0b073ace14a5e6ec7adfbc40cf4824dc80d0f22f97333b","name":"document_matches@2.csv","type":"text/csv","lastModified":1684871583446.601,"size":88605},{"id":"1ed554a8c73c08b449bd8377975cdabb19df9b9731598a765dcfff5f6928872ddd44b21019f527cc5ab038a6009941af98939665d75d95d637cb27afa44bcc05","href":"https://static.observableusercontent.com/files/1ed554a8c73c08b449bd8377975cdabb19df9b9731598a765dcfff5f6928872ddd44b21019f527cc5ab038a6009941af98939665d75d95d637cb27afa44bcc05","name":"document_matches.csv","type":"text/csv","lastModified":1684769340584.852,"size":81908}] 29:{"id":"0da1250f1070fcf3","slug":null,"title":"Sample Compact Euler","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-05-22T10:54:16.762Z","update_time":"$D2023-05-23T19:57:09.056Z","view_time":null,"first_public_time":"$D2023-05-22T10:54:16.762Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"07179e6e66389643","login":"raefkazi","name":"Raef Kazi","avatar_url":"https://avatars-next.observableusercontent.com/ff3d0626541674fd21f3e68c8095d4a4513963fab1e86dd9cf3a57f72cc21596","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":139,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"83103c92179e04d9","login":"raefkazi","name":"Raef Kazi","avatar_url":"https://avatars-next.observableusercontent.com/ff3d0626541674fd21f3e68c8095d4a4513963fab1e86dd9cf3a57f72cc21596","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"83103c92179e04d9","login":"raefkazi","name":"Raef Kazi","avatar_url":"https://avatars-next.observableusercontent.com/ff3d0626541674fd21f3e68c8095d4a4513963fab1e86dd9cf3a57f72cc21596","tier":null,"role":"editor"}],"comments":[{"id":"71b0c1afcdf0d232","reply_to_id":null,"content":"- Stop the force animation (make it faster, or static to converge)\n- Tooltip on hover\n- Filter and show documents on click","create_time":"$D2023-05-22T16:16:07.644Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"83103c92179e04d9","login":"raefkazi","name":"Raef Kazi","avatar_url":"https://avatars-next.observableusercontent.com/ff3d0626541674fd21f3e68c8095d4a4513963fab1e86dd9cf3a57f72cc21596","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sample Compact Euler","cells":[{"id":0,"value":"# Sample Compact Euler ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"document_matches = FileAttachment(\"document_matches@2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"test_data = document_matches.map((row) => ({\n ...row,\n model_a: row._merge === \"both\" || row._merge === \"left_only\",\n model_b: row._merge === \"both\" || row._merge === \"right_only\",\n color:\n row._merge === \"both\"\n ? \"c\"\n : row._merge === \"right_only\"\n ? \"b\"\n : row._merge === \"left_only\"\n ? \"a\"\n : undefined,\n center:\n row._merge === \"both\"\n ? 250\n : row._merge === \"right_only\"\n ? 415\n : row._merge === \"left_only\"\n ? 100\n : undefined\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"// name a variable tooltip, and style it using css properties\ntooltip_2 = d3\n .select(\"body\")\n .append(\"div\") // the tooltip always \"exists\" as its own html div, even when not visible\n .style(\"position\", \"absolute\") // the absolute position is necessary so that we can manually define its position later\n .style(\"visibility\", \"hidden\") // hide it from default at the start so it only appears on hover\n .style(\"background-color\", \"white\")\n .attr(\"class\", \"tooltip\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"// name a tooltip_out function to call when the mouse stops hovering\ntooltip_node_out = function () {\n d3.select(this).style(\"opacity\", 1.0); //Set opacity back to full\n return tooltip_2\n .transition()\n .duration(50) // give the hide behavior a 50 milisecond delay so that it doesn't jump around as the network moves\n .style(\"visibility\", \"hidden\"); // hide the tooltip when the mouse stops hovering\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"d3 = {\n // Add\n const bundle = Object.assign({}, d3_base, d3_svg_annotation);\n return bundle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"d3_base = require(\"https://d3js.org/d3.v4.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"d3_svg_annotation = require(\"d3-svg-annotation\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null