2f:Tcf0,chart = { //Tooltip format lifted (which much thanks) from https://observablehq.com/@muqeet/artsed-bubble const toolTip = d3.select("body").selectAll('div.tool-tip') .data([1]).join("div") .attr("class", "tool-tip") .style("opacity", 0); const svg = d3.create("svg") // .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("width", width).attr("height", height); const gTemplate = svg.append("g").attr("class", "template"); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(graph.links) .join("line") .attr("stroke-width", 4); const g = svg.append("g") const node = g.append("g") .selectAll("g") .data(nodes) .join("g") .attr("data-name", d => d.name) .attr("fill", "none") .on("mouseover", function(event, d) { toolTip.style("opacity", 1); d3.select(this).style("cursor", "pointer"); }) .on("mouseout", function(event, d) { toolTip.transition().duration(500).style('opacity', 0); webIt(d, "out", nodes, link) //add css to illustrate all the connections }) .on("touchmove mousemove", function(event, d) { buildToolTip(event, d, "node", toolTip); webIt(d, "in", node, link) }) .on("click", function(event, d){ d.fx = null; d.fy = null; window.open(d.url,d.name); }).call(drag(simulation)); const cir = node .append('circle') .attr("id", d => d.id) .attr('r', d => getRadius()) .attr("stroke", "#fff") .attr("stroke-width", 1.5) .attr('fill', '#999') const img = node .append('image') .attr('xlink:href', function(d) { let img = d.icon return img }) .attr('clip-path', d => `url(#group-clip)`) .attr('width', d => getRadius() * 2) .attr('height', d => getRadius() * 2) .attr('x', d => getRadius() * -1) .attr('y', d => getRadius() * -1) .on("mouseover", function(event, d) { let id = "#" + d.id d3.select(id) .style('stroke', "#18aef9").style('stroke-width', 6).style("stroke-opacity", 1); }) .on("mouseout", function(event, d) { let id = "#" + d.id d3.select(id) .style('stroke', "#fff").style('stroke-width', 1.5).style("stroke-opacity", 1) }); // //add the mouseover functionality for the links: make tooltips and highlight links and nodes // link.on("mouseover", function(event, d) { // toolTip.style("opacity", 1); // }) if (drawTemplate) { simulation.force("group").drawTemplate(gTemplate); simulation.restart(); } else { simulation.force("group").deleteTemplate(gTemplate); simulation.restart(); } simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); // node.attr("cx", d => d.x) // .attr("cy", d => d.y); node.attr('transform', function(d) { // d.x = Math.max(getRadius(d), Math.min(width - getRadius(d), d.x)); // d.y = Math.max(getRadius(d), Math.min(height - getRadius(d), d.y)); return `translate(${d.x},${d.y})` }); }); invalidation.then(() => simulation.stop()); return svg.node(); }30:T61a,// Original FIAB // simulation = d3.forceSimulation(graph.nodes) // // .nodes(graph.nodes) // .force("group", groupingForce) // .force("charge", d3.forceManyBody().strength(-4)) // .force("link", // d3.forceLink(graph.links) // .distance(2) // //.strength(groupingForce.getLinkStrength) // ) // .force("x", useGroupInABox ? null : d3.forceX(width/2) ) // .force("y", useGroupInABox ? null : d3.forceY(height/2) ); // Original Centered // simulation = d3.forceSimulation(nodes) // .force("link", // d3.forceLink(links) // .id(d => d.id) // .distance(d => {return forceVariables.nodeDistance}) // ) // .force("charge", d3.forceManyBody().strength(d => forceVariables.charge)) // .force("x", d3.forceX()) // .force("y", d3.forceY()) // .force('collision', d3.forceCollide().radius(getRadius)) // function(d) { return 9 * (1 + d.functions.length) } simulation = d3.forceSimulation(graph.nodes) // .nodes(graph.nodes) .force("group", groupingForce) .force("charge", d3.forceManyBody().strength(manyBodyCharge)) .force("link", d3.forceLink(graph.links) .distance(nodeDistance) .strength(groupingForce.getLinkStrength) ) .force("x", useGroupInABox ? null : d3.forceX(width/2) ) .force("y", useGroupInABox ? null : d3.forceY(height/2) ) // from Centered .force('collision', d3.forceCollide().radius(getRadius)) 31:T638,groupingForce = { // The layout algorithm used to separate the clusters let template = "treemap" // or "force" // // The charge between the meta-nodes on the template force simulation // const forceCharge = 700 // // The distance between meta-links on the template force Simulation // const forceLinkDistance = 200 // // The strength of the meta-links on the template force simulation // const forceLinkStrength = 0.1 let fiab = forceInABox() .size([width, height-100]) // Size of the chart .template(template) // Either treemap or force .groupBy("group") // Nodes' attribute to group .strength(forceInABoxStrength) // Strength to foci .links(graph.links) // The graph links. Must be called after setting the grouping attribute (Force template only) .enableGrouping(useGroupInABox) .linkStrengthInterCluster(linkStrengthInterCluster) // linkStrength between nodes of different clusters .linkStrengthIntraCluster(linkStrengthIntraCluster) // linkStrength between nodes of the same cluster // .forceLinkDistance(forceLinkDistance) // linkDistance between meta-nodes on the template (Force template only) // .forceLinkStrength(forceLinkStrength) // linkStrength between meta-nodes of the template (Force template only) // .forceCharge(-forceCharge) // Charge between the meta-nodes (Force template only) // .forceNodeSize(forceNodeSize) // Used to compute the template force nodes size (Force template only) .forceNodeSize(nodeRadius) // Used to compute the template force nodes size (Force template only) return fiab }32:T67c,function webIt(data, inOrOut, node, link) { let target_links = link.filter(d => d.source.id == data.id || d.target.id == data.id); const link_nodes = target_links.data() //returns all the data binded to those links if(inOrOut == "in") { //add css target_links .style('stroke', "#18aef9") .style("stroke-opacity", 0.6) .style("stroke-width", 6); for(var i = 0; i < link_nodes.length; i++){ //console.log(link_nodes[i].source.id) let source_id = link_nodes[i].source.id d3.select(`#${source_id}`) .style('stroke', "#18aef9") .style("stroke-opacity", 0.6) .style("stroke-width", 6); let target_id = link_nodes[i].target.id d3.select(`#${target_id}`) .style('stroke', "#18aef9") .style("stroke-opacity", 0.6) .style("stroke-width", 6); } } else if(inOrOut == "out") { //remove css target_links .style('stroke', "#999") .style("stroke-width", 4) .style("stroke-opacity", 0.6); for(var i = 0; i < link_nodes.length; i++){ //console.log(link_nodes[i].source.id) let source_id = link_nodes[i].source.id d3.select(`#${source_id}`) .style('stroke', "") //#72798C this is one of the Net Element Colors if we want to use it .style("stroke-opacity", 1) .style("stroke-width", 0); let target_id = link_nodes[i].target.id d3.select(`#${target_id}`) .style('stroke', "") //#72798C this is one of the Net Element Colors if we want to use it .style("stroke-opacity", 1) .style("stroke-width", 0); } } }33:[{"id":"d9b674fc2fb93b86c7bb53a2eb06421db0e99616830ad692f7fdce949727c840c389a1427a4b6d58c0eda8af16511dca6372366116b58e3ee825b513f7762441","href":"https://static.observableusercontent.com/files/d9b674fc2fb93b86c7bb53a2eb06421db0e99616830ad692f7fdce949727c840c389a1427a4b6d58c0eda8af16511dca6372366116b58e3ee825b513f7762441","name":"vizcat_graph@3.json","type":"application/json","lastModified":1683642340991.997,"size":91049}] 2d:{"title":"Exploring the Data Visualization Catalogue","cells":[{"id":1,"value":"md`# Exploring the Data Visualization Catalogue\n\nNetwork visualization based on the [Data Visualization Catalogue](https://datavizcatalogue.com/about.html), a project developed by [Severino Ribecca](http://severinoribecca.one/).\n\nNodes represent visualization types. Links represent chart similarity.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":" useGroupInABox = checkbox({\n description: \"Enable the forceInAbox\",\n options: [{ value: \"toggle\", label: \"useGroupInABox\" }],\n value: \"toggle\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"viewof drawTemplate = checkbox({\n description: \"Draw the template?\",\n options: [{ value: \"toggle\", label: \"drawTemplate\" }],\n value: \"true\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"viewof forceInABoxStrength = slider({\n title: \"fociStrength\",\n min: 0,\n max: 0.4,\n step: 0.01,\n value: 0.1,\n format: \",\",\n precision: 3,\n description:\n \"How strongly are the nodes pulled toward the foci\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"viewof linkStrengthIntraCluster = slider({\n title: \"linkStrengthIntraCluster\",\n min: 0,\n max: 0.4,\n step: 0.001,\n value: 0.1,\n format: \",\",\n precision: 3,\n description:\n \"How much should the links inside clusters pull?\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"viewof linkStrengthInterCluster = slider({\n title: \"linkStrengthInterCluster\",\n min: 0,\n max: 0.4,\n step: 0.0001,\n value: 0.01,\n format: \",\",\n description:\n \"How much should the links between cluster pull?\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"viewof manyBodyCharge = slider({\n title: \"manyBodyCharge\",\n min: -100,\n max: 100,\n step: 5,\n value: -10,\n format: \",\",\n description:\n \"The charge between the nodes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"viewof nodeDistance = slider({\n title: \"nodeDistance\",\n min: -100,\n max: 200,\n step: 10,\n value: 100,\n format: \",\",\n description:\n \"The default distance between nodes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"viewof nodeRadius = slider({\n title: \"nodeRadius\",\n min: 10,\n max: 100,\n step: 5,\n value: 20,\n format: \",\",\n description:\n \"The node size (radius)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"forceVariables = ({ nodeRadius: 20, \n nodeDistance: 100,\n charge: -100,\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = FileAttachment(\"vizcat_graph@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"links = {\n // let fewer_links = [{source:\"candlestick_chart\", target:\"calendar\"}]\n // return fewer_links.map(d => Object.create(d));\n \n return data.links.map(d => Object.create(d));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":" nodes = { \n let all_nodes = data.nodes.map(d => Object.create(d));\n return all_nodes; //[all_nodes[0], all_nodes[1], all_nodes[2]];\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"height = 680","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"color = {\n // const scale = d3.scaleOrdinal(d3.schemeCategory10);\n // return d => scale(d.functions[0]);\n return d3.color(\"steelblue\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"size = {\n return nodeRadius; // d => 5 * (1 + d.functions.length);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"getRadius = (_) => {\n return nodeRadius;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"graph = {\n let linksWithIndexes = links2edges(data.nodes, data.links)\n let cc = connectedComponents(data.nodes, linksWithIndexes)\n nodes.forEach((node, i) => {\n node.group = uf.find(cc[i]).name\n })\n return {\n nodes: nodes,\n links: linksWithIndexes\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"connectedComponents = (nodes, links) => {\n let numVertices = nodes.length\n const forest = nodes.map((node) => {\n const tree = uf.makeSet();\n tree.name = node.name;\n return tree;\n });\n links.forEach(({source, target}) => {\n uf.union(forest[source], forest[target]);\n });\n return forest;\n};\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"links2edges = (nodes, links) => {\n const link2edge = link => {\n // console.log(`mapping link ${link.source}, ${link.target}`)\n let fromIdx = nodes.findIndex(e => e.id === link.source)\n let toIdx = nodes.findIndex(e => e.id === link.target)\n return {source: fromIdx, target: toIdx}\n }\n return links.map(link2edge)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"drag = simulation => {\n \n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(event,d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n \n function dragended(event,d) {\n if (!event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"function buildToolTip(event, d, type, toolTip) { \n var rows = [];\n if(type == \"link\") {\n rows.push([\"Connection\", \"related\" /*d.relationship*/])\n toolTip.html(\n rows.map(row => `${row[0]}:${row[1]}`).join('')\n )\n .transition().duration(200)\n .style('opacity', 0.9)\n .style(\"left\", (event.pageX + 28) + \"px\")\n .style(\"top\", (event.pageY - 28) + \"px\");\n }\n else if(type == \"node\") { \n rows.push([d.name, d.short_description])\n toolTip.html(rows.map(row => `${row[0]}:${row[1]}`).join('')\n +\n `

`\n )\n .transition().duration(200)\n .style('opacity', 0.9)\n .style(\"left\", (event.clientX + 28) + \"px\")\n .style(\"top\", (event.clientY - 28) + \"px\"); \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"import { Range } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"import {checkbox, select, slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"uf = import('https://cdn.skypack.dev/@manubb/union-find@1.0.2?min')","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"forceInABox = require('force-in-a-box@1.0.0/dist/forceInABox.min.js').catch(\n () => window.forceInABox\n)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}