31:Tf31,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 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) } const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", 4); const g = svg.append("g") const defs = svg.append('defs') .selectAll('clipPath') .data([{ name: 'group'}]) .join('clipPath') .attr('id', 'group-clip') .append('circle') .attr('r', d => forceVariables.nodeRadius - 2); // forceVariables.nodeRadius 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 // d3.select(this) // .style('stroke', "") //#72798C this is one of the Net Element Colors if we want to use it // .style("stroke-opacity", "") // .style("stroke-width", ""); }) .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(d.group)) .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(d.group) * 2) .attr('height', d => getRadius(d.group) * 2) .attr('x', d => getRadius(d.group) * -1) .attr('y', d => getRadius(d.group) * -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); // }) 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(); }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":1625255686857.598,"size":91049}] 2f:{"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 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":7,"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":true,"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":true,"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 forceVariables.nodeRadius; // d => 5 * (1 + d.functions.length);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"getRadius = (d) => {\n let res = 1;\n // let group = d.group;\n // switch (group) {\n // case 'Firer':\n // res = groupData[0].radius;\n // break;\n // case 'criminal':\n // res = groupData[1].radius;\n // break;\n // case 'business':\n // res = groupData[2].radius;\n // break;\n // }\n return res * forceVariables.nodeRadius;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"forceVariables = ({ nodeRadius: 20, \n nodeDistance: 100,\n charge: -100,\n xDenom: 3,\n xStr: 0.0,\n yDenom: 0.9,\n yStr: 0.0\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"groupData = [{name: 'Firer', shape: \"circle\", radius: 3},\n {name: \"criminal\", shape: \"circle\", radius: 2},\n {name: \"business\", shape: \"rectangle\", radius: 1}]","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"html`\n\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":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"$32","pinned":true,"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"}],"files":"$W33","stdlib":"1","titling":"auto"}