2c:null 2d:["$","title",null,{"children":"Disjoint force-directed graph | katirg | Observable"}] 32:Tfc3,networkOrdersChart = (data) => { // Specify the dimensions of the chart. const width = 428; const height = 280; // Specify the color scale. const color = d3.scaleOrdinal(d3.schemeCategory10); const colorLinks = d3.scaleOrdinal(d3.schemeGreys[8]); // The force simulation mutates links and nodes, so create a copy // so that re-evaluating this cell produces the same result. const links = data.links.map(d => ({...d})); const nodes = data.nodes.map(d => ({...d})); const isWeighted = Object.keys(nodes[0]).indexOf('value') < 0 ? false : true // Create a simulation with several forces. const simulation = d3.forceSimulation(nodes) //.force("link", d3.forceLink(links).id(d => d.id)) //.force("link", d3.forceLink(links).id(d => d.id).distance(0).strength(1)) .force("link", d3.forceLink(links).id(d => d.id).strength(1.9)) //.force("charge", d3.forceManyBody().strength(-50)) .force("charge", d3.forceManyBody()) .force("x", d3.forceX()) .force("y", d3.forceY()); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 3, -height / 3.5, width/2, height/2]) .attr("style", "max-width: 150%; height: auto;"); // Add a line for each link, and a circle for each node. const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => { let thisWidth = isWeighted ? Math.sqrt(d.value) : 2; return thisWidth; }) .attr("stroke", d => d.value ) ; const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => { let circleVal = isWeighted ? 2 * Math.sqrt(d.value) : 5; return d.id === "THIS_PACKAGE" ? 12 : circleVal; }) .attr("stroke", d => { return d.order === 0 ? "#336699" : "none"; }) .attr("stroke-width", 0.9) .attr("fill", d => { let thisFill; if (isWeighted) { //TODO divide by max value thisFill = d.order === 0 ? d3.interpolateBlues(d.value/10) : d3.interpolateGreys(d.value/10); } else { thisFill = d.order === 0 ? "#add8e6" : "grey"; } // return color(d.group) return thisFill; }) // .attr("opacity", d => { // return d.order === 0 ? 1 : 0.5; // }) ; node.append("title") .text(d => d.id); // Add a drag behavior. node.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); // Set the position attributes of links and nodes each time the simulation ticks. 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); }); // Reheat the simulation when drag starts, and fix the subject position. function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } // Update the subject (dragged node) position during drag. function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } // Restore the target alpha so the simulation cools after dragging ends. // Unfix the subject position now that it’s no longer being dragged. function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } // When this cell is re-run, stop the previous simulation. (This doesn’t // really matter since the target alpha is zero and the simulation will // stop naturally, but it’s a good practice.) invalidation.then(() => simulation.stop()); return svg.node(); }33:Tee4,networkOrdersWeightedChart = (data) => { // Specify the dimensions of the chart. const width = 428; const height = 280; // Specify the color scale. const color = d3.scaleOrdinal(d3.schemeCategory10); const colorLinks = d3.scaleOrdinal(d3.schemeGreys[8]); // The force simulation mutates links and nodes, so create a copy // so that re-evaluating this cell produces the same result. const links = data.links.map(d => ({...d})); const nodes = data.nodes.map(d => ({...d})); // Create a simulation with several forces. const simulation = d3.forceSimulation(nodes) //.force("link", d3.forceLink(links).id(d => d.id)) //.force("link", d3.forceLink(links).id(d => d.id).distance(0).strength(1)) .force("link", d3.forceLink(links).id(d => d.id).strength(1.9)) .force("charge", d3.forceManyBody()) .force("x", d3.forceX()) .force("y", d3.forceY()); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 3, -height / 3.5, width/2, height/2]) .attr("style", "max-width: 150%; height: auto;"); // Add a line for each link, and a circle for each node. const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => { console.log('link value: ', d, d.value) return Math.sqrt(d.value); }) .attr("stroke", d => d.value ) ; const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => { //console.log(d) return d.id === "THIS_PACKAGE" ? 12 : 2 * Math.sqrt(d.value); //return d.id === "THIS_PACKAGE" ? 12 : 7; }) // .attr("fill", d => color(d.group)); .attr("stroke", d => { return d.order === 0 ? "magenta" : "none"; }) .attr("stroke-width", 0.9) .attr("fill", d => { console.log('node: ', d) return d.order === 0 ? d3.interpolateBlues(d.value/10) : d3.interpolateGreys(d.value/10); }) // .attr("opacity", d => { // return d.order === 0 ? 1 : 0.5; // }) ; //TODO divide by max value node.append("title") .text(d => d.id); // Add a drag behavior. node.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); // Set the position attributes of links and nodes each time the simulation ticks. 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); }); // Reheat the simulation when drag starts, and fix the subject position. function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } // Update the subject (dragged node) position during drag. function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } // Restore the target alpha so the simulation cools after dragging ends. // Unfix the subject position now that it’s no longer being dragged. function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } // When this cell is re-run, stop the previous simulation. (This doesn’t // really matter since the target alpha is zero and the simulation will // stop naturally, but it’s a good practice.) invalidation.then(() => simulation.stop()); return svg.node(); }34:Tdf3,//First-order network only networkChart = (data) => { // Specify the dimensions of the chart. const width = 428; const height = 280; // Specify the color scale. const color = d3.scaleOrdinal(d3.schemeCategory10); const colorLinks = d3.scaleOrdinal(d3.schemeGreys[8]); // The force simulation mutates links and nodes, so create a copy // so that re-evaluating this cell produces the same result. const links = data.links.map(d => ({...d})); const nodes = data.nodes.map(d => ({...d})); // Create a simulation with several forces. const simulation = d3.forceSimulation(nodes) //.force("link", d3.forceLink(links).id(d => d.id)) //.force("link", d3.forceLink(links).id(d => d.id).distance(0).strength(1)) .force("link", d3.forceLink(links).id(d => d.id).strength(1)) .force("charge", d3.forceManyBody()) .force("x", d3.forceX()) .force("y", d3.forceY()); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 3, -height / 3.5, width/2, height/2]) .attr("style", "max-width: 150%; height: auto;"); // Add a line for each link, and a circle for each node. const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => { console.log('link value: ', d, d.value) return Math.sqrt(d.value); }) .attr("stroke", d => d.value ) ; const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => { console.log(d) return d.id === "THIS_PACKAGE" ? 12 : 2 * Math.sqrt(d.value); //return d.id === "THIS_PACKAGE" ? 12 : 7; }) // .attr("fill", d => color(d.group)); .attr("stroke", "grey") .attr("stroke-width", 0.2) .attr("fill", d => d3.interpolateBlues(d.value/10)); //TODO divide by max value node.append("title") .text(d => d.id); // Add a drag behavior. node.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); // Set the position attributes of links and nodes each time the simulation ticks. 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); }); // Reheat the simulation when drag starts, and fix the subject position. function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } // Update the subject (dragged node) position during drag. function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } // Restore the target alpha so the simulation cools after dragging ends. // Unfix the subject position now that it’s no longer being dragged. function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } // When this cell is re-run, stop the previous simulation. (This doesn’t // really matter since the target alpha is zero and the simulation will // stop naturally, but it’s a good practice.) invalidation.then(() => simulation.stop()); return svg.node(); }35:T46c,// Returns the name and english titles of each package_id from // the result returned by the API call. // Should have a better name. loadData = (o) => { const idArr = getIds(o); let urls = []; idArr.forEach(id => { let thisUrl = `https://data.ontario.ca/api/3/action/package_show?id=${id}`; urls.push(thisUrl); }); const promises = []; for (let i = 0; i < urls.length; i++) { const url = urls[i]; // make an HTTP request for each URL const promise = fetch(url) // transform the HTTP response into JSON .then(response => response.json()); // add the promise to the promises array promises.push(promise); } // wait for all the promises in the promises array to resolve let meta = []; let results = Promise.all(promises).then(results => { // all the fetch requests have completed, and the results are in the "results" array results.forEach((d, idx) => { let info = {}; info["id"] = d.result.id; info["name"] = d.result.name; info["title"] = d.result.title_translated["en"]; meta[idx] = info; }); }); return meta; }36:T1061,// Format the data obj into force-directed graph layout graphData = (o, metaDictionary) => { // Final object to Return let linksObj = []; let nodesObj = []; let graphObj = {}; // Things we know from the info inside the CSV file itself const centreNode = o[0].package_id; const level1_datasets = o[0].similar_datasets; let nodeList = level1_datasets.concat(o.map(d => d.package_id)); //provincial-watersheds-historical missing // Find any missing datasets, ie datasets listed in the similar_datasets // column that are not also in either the level1_datasets or in the // package_id column. let missingDatasets = []; o.map(d => { let thisRow = d.similar_datasets; thisRow.forEach(el => { let match = nodeList.find(item => item === el); if (! match) missingDatasets.push(el); }) }); // Extract only the unique values missingDatasets = Array.from(new Set(missingDatasets)) // Add any missing packages to nodeList if (missingDatasets.length > 0) { missingDatasets.forEach(name => { nodeList.push(name); }) } // Remove any dupes nodeList = Array.from(new Set(nodeList)) // **************************************************************** // Construct nodes obj. // **************************************************************** nodeList.forEach((n,idx) => { let thisNode = {}; let thisId = n; // Get metadata info from previously-defined dictionary let info = metaDictionary.find(item => item.id === n); let thisName = info ? info.name : "MISSING"; let thisTitle = info ? info.title : "MISSING"; thisNode['id'] = n; thisNode['name'] = thisName; thisNode['title'] = thisTitle; // If thisNode is the centre node, save it in node object if (thisId === centreNode) thisNode['centre'] = true; // Determine the order of each package_id let thisOrder; // If current n is contained in level1_datasets array, // or n is the centreNode, it is first order let match = level1_datasets.find(item => item === n); thisOrder = match ? 0 : n === centreNode ? -999 : 1; thisNode['order'] = thisOrder; nodesObj[idx] = thisNode; }) // **************************************************************** // Construct links obj. // Sources are all the datasets in first row plus the // packages in the package_id column (excluding the centre package) // **************************************************************** // First build the order-0 nodes, which we know are the ones in the // similar_datasets column of the first row. const sources_firstOrder = o[0].similar_datasets; sources_firstOrder.forEach((s,idx) => { let thisSource = {}; thisSource['source'] = s; thisSource['target'] = centreNode; thisSource['value'] = 1; // ******Similarity Score. Set as 1 for now. linksObj[idx] = thisSource; }) // save last idx let lastIdx = linksObj.length - 1; // **************************************************************** // Next build the order-1 nodes, which we are the packages // **************************************************************** // Find the number of new source-target pairs based on the number // of packages in the similar_datasets column, excluding the first // row (which has already been added to linksObj), and any package // equal to the centreNode (which has also been taken care of in linksObj). let numNewTargets = 0; o.map(item => { if (item.package_id !== centreNode) { // this row was already done let theseTargets = item.similar_datasets.filter(el => el !== centreNode); numNewTargets = numNewTargets + theseTargets.length; theseTargets.forEach(function(target) { lastIdx = lastIdx + 1; let thisSource = {}; thisSource['source'] = item.package_id; thisSource['target'] = target; thisSource['value'] = 1; // ******Similarity Score. Set as 1 for now. linksObj[lastIdx] = thisSource; }) } }); graphObj = {"nodes": nodesObj, "links": linksObj } return graphObj; }37:T112d,// Format the data obj into force-directed graph layout, excluding // the links between order-0 nodes to make it more like a // dendrogram. graphDataDendro = (o, metaDictionary) => { // Final object to Return let linksObj = []; let nodesObj = []; let graphObj = {}; // Things we know from the info inside the CSV file itself const centreNode = o[0].package_id; const order0_datasets = o[0].similar_datasets; let nodeList = order0_datasets.concat(o.map(d => d.package_id)); //provincial-watersheds-historical missing // Find any missing datasets, ie datasets listed in the similar_datasets // column that are not also in either the level1_datasets or in the // package_id column. let missingDatasets = []; o.map(d => { let thisRow = d.similar_datasets; thisRow.forEach(el => { let match = nodeList.find(item => item === el); if (! match) missingDatasets.push(el); }) }); // Extract only the unique values missingDatasets = Array.from(new Set(missingDatasets)) // Add any missing packages to nodeList if (missingDatasets.length > 0) { missingDatasets.forEach(name => { nodeList.push(name); }) } // Remove any dupes nodeList = Array.from(new Set(nodeList)) // **************************************************************** // Construct nodes obj. // **************************************************************** nodeList.forEach((n,idx) => { let thisNode = {}; let thisId = n; // Get metadata info from previously-defined dictionary let info = metaDictionary.find(item => item.id === n); let thisName = info ? info.name : "MISSING"; let thisTitle = info ? info.title : "MISSING"; thisNode['id'] = n; thisNode['name'] = thisName; thisNode['title'] = thisTitle; // If thisNode is the centre node, save it in node object if (thisId === centreNode) thisNode['centre'] = true; // Determine the order of each package_id let thisOrder; // If current n is contained in order0_datasets array, // or n is the centreNode, it is first order let match = order0_datasets.find(item => item === n); thisOrder = match ? 0 : n === centreNode ? -999 : 1; thisNode['order'] = thisOrder; nodesObj[idx] = thisNode; }) // **************************************************************** // Construct links obj. // Sources are all the datasets in first row plus the // packages in the package_id column (excluding the centre package) // **************************************************************** // First build the order-0 nodes that connect to the centre node. These // are in the similar_datasets column of the first row. const sources_firstOrder = o[0].similar_datasets; sources_firstOrder.forEach((s,idx) => { let thisSource = {}; thisSource['source'] = s; thisSource['target'] = centreNode; thisSource['value'] = 1; // ******Similarity Score. Set as 1 for now. linksObj[idx] = thisSource; }) // save last idx let lastIdx = linksObj.length - 1; // **************************************************************** // Next build the order-1 nodes // **************************************************************** // Find the number of new source-target pairs based on the number // of packages in the similar_datasets column, excluding the first // row (which has already been added to linksObj), and any package // equal to the centreNode (which has also been taken care of in linksObj). let numNewTargets = 0; o.map(item => { if (item.package_id !== centreNode) { // this row was already done let theseTargets = item.similar_datasets.filter(el => { let match = order0_datasets.includes(el); if (el !== centreNode && ! match) { if (el) return el; } }); numNewTargets = numNewTargets + theseTargets.length; theseTargets.forEach(function(target) { lastIdx = lastIdx + 1; let thisSource = {}; thisSource['source'] = item.package_id; thisSource['target'] = target; thisSource['value'] = 1; // ******Similarity Score. Set as 1 for now. linksObj[lastIdx] = thisSource; }) } }); graphObj = {"nodes": nodesObj, "links": linksObj } return graphObj; } 38:T152f,similarityChart = (data) => { // Specify the dimensions of the chart. const width = 428; const height = 280; // CSS const css = { "fill": {"centreNode": "#FDDA0D", "order0": "#add8e6", "order1": "grey"}, "stroke": {"node": "#969696", "link": "#999" }, "strokeWidth": {"node": 0.9, "link": 0.7}, "strokeOpacity": {"link": 0.6} }; // Specify the color scale. const color = d3.scaleOrdinal(d3.schemeCategory10); const colorLinks = d3.scaleOrdinal(d3.schemeGreys[8]); // The force simulation mutates links and nodes, so create a copy // so that re-evaluating this cell produces the same result. const links = data.links.map(d => ({...d})); const nodes = data.nodes.map(d => ({...d})); const isWeighted = Object.keys(nodes[0]).indexOf('value') < 0 ? false : true // Create a simulation with several forces. // const simulation = d3.forceSimulation(nodes) // //.force("link", d3.forceLink(links).id(d => d.id).strength(1.9)) // .force("link", d3.forceLink(links).id(d => d.id).strength(.05)) // .force("charge", d3.forceManyBody()) // .force("x", d3.forceX()) // .force("y", d3.forceY()); const simulation = d3.forceSimulation(nodes) //.force("link", d3.forceLink(links).id(d => d.id)) .force("link", d3.forceLink(links).id(d => d.id).distance(50).strength(.01)) //.force("link", d3.forceLink(links).id(d => d.id).strength(1.9)) //.force("charge", d3.forceManyBody().strength(-50)) .force("charge", d3.forceManyBody()) .force("x", d3.forceX()) .force("y", d3.forceY()); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 3, -height / 3.5, width/2, height/2]) .attr("style", "max-width: 150%; height: auto;"); // ************************************************ // LINKS // ************************************************ // Add a line for each link, and a circle for each node. const link = svg.append("g") .attr("stroke", css.stroke.link) .attr("stroke-opacity", css.strokeOpacity.link) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => { let thisWidth = isWeighted ? Math.sqrt(d.value) : css.strokeWidth.link; return thisWidth; }) .attr("stroke", d => d.value ) ; // ************************************************ // NODES // ************************************************ const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => { let isCentre = d.centre ? true: false; let circleVal = isWeighted ? 2 * Math.sqrt(d.value) : 5; return isCentre ? 12 : circleVal; }) .attr("stroke", d => { return css.stroke.node; }) .attr("stroke-width", css.strokeWidth.node) .attr("fill", d => { let isCentre = d.centre ? true: false; let thisFill; if (isCentre) { thisFill = css.fill.centreNode; } else { if (isWeighted) { //TODO divide by max value thisFill = d.order === 0 ? d3.interpolateBlues(d.value/10) : d3.interpolateGreys(d.value/10); } else { thisFill = d.order === 0 ? css.fill.order0 : css.fill.order1; } } return thisFill; }); node.append("title") .text(d => d.title); // Add a drag behavior. node.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); // ************************************************ // MOUSE ACTIONS // ************************************************ // Define the div for the tooltip let div = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); node.on("click", (event, d) => { window.open( `https://data.ontario.ca/dataset/${d.name}`, "_blank" ); }); // Set the position attributes of links and nodes each time the simulation ticks. 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); }); // Reheat the simulation when drag starts, and fix the subject position. function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } // Update the subject (dragged node) position during drag. function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } // Restore the target alpha so the simulation cools after dragging ends. // Unfix the subject position now that it’s no longer being dragged. function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } // When this cell is re-run, stop the previous simulation. (This doesn’t // really matter since the target alpha is zero and the simulation will // stop naturally, but it’s a good practice.) invalidation.then(() => simulation.stop()); return svg.node(); }39:T778,treeChart = (data) => { // Specify the chart’s dimensions. const width = 550; const height = 450; // Compute the graph and start the force simulation. const root = d3.hierarchy(data); const links = root.links(); const nodes = root.descendants(); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(2).strength(1)) .force("charge", d3.forceManyBody().strength(-100)) .force("x", d3.forceX()) .force("y", d3.forceY()); // Create the container SVG. const svg = d3.create("svg") .attr("width", width) .attr("height", height) //.attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("viewBox", [-width / 3, -height / 5.1, width/2, height/2]) .attr("style", "max-width: 100%; height: auto;"); // Append links. const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line"); // Append nodes. const node = svg.append("g") .attr("fill", "#fff") .attr("stroke", "#000") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("fill", d => { return d.children ? "#add8e6" : "grey"; }) .attr("stroke", d => d.children ? null : "#fff") .attr("r", d => { let thisSize; thisSize = d.data.name === "THIS_PACKAGE" ? 7 : 3.5; return thisSize; }) .call(drag(simulation)); node.append("title") .text(d => d.data.name); 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); }); invalidation.then(() => simulation.stop()); return svg.node(); }3a:[{"id":"270e4007d4aa19b74e8c2f4bacb2c42df1247cea1167b750e8228c1adb548535256aed3f0201eb74942e23c9b447b633d7c926f7dc69f4486655ce4194c3d2b9","href":"https://static.observableusercontent.com/files/270e4007d4aa19b74e8c2f4bacb2c42df1247cea1167b750e8228c1adb548535256aed3f0201eb74942e23c9b447b633d7c926f7dc69f4486655ce4194c3d2b9","name":"516005c7-ff91-4667-b5a2-8be8d32dc728@3.csv","type":"text/csv","lastModified":1709661738586.993,"size":1410},{"id":"988539fb82c2fcf1cda2e73db9866d220125f8584b519362e7ee40adec4063fc913021708cefa1432a1d147de00632db6fbd661157586f111aa8fa5aa77f0e0a","href":"https://static.observableusercontent.com/files/988539fb82c2fcf1cda2e73db9866d220125f8584b519362e7ee40adec4063fc913021708cefa1432a1d147de00632db6fbd661157586f111aa8fa5aa77f0e0a","name":"45a18ab6-9e72-40ba-afcf-833ca25c3495.csv","type":"text/csv","lastModified":1709662400177.451,"size":327},{"id":"5890f2381410c121f4906677c1fe320c68908bd2cca8bb410905953b68bce703cc3e8c181cb0c7cc867c01e338298dcc0b69ebae4149305152d13938292d3ff9","href":"https://static.observableusercontent.com/files/5890f2381410c121f4906677c1fe320c68908bd2cca8bb410905953b68bce703cc3e8c181cb0c7cc867c01e338298dcc0b69ebae4149305152d13938292d3ff9","name":"705313eb-1124-46c0-906d-42abf25c522d.csv","type":"text/csv","lastModified":1709666514920.353,"size":705},{"id":"b8d9e75762ea3dc707d20f846acedc612954a693cf386403f02ed04d780e558a5dfd99ea6b028643eb50fd9dd16d994fa4bed222e924b67140091e46a5c5f697","href":"https://static.observableusercontent.com/files/b8d9e75762ea3dc707d20f846acedc612954a693cf386403f02ed04d780e558a5dfd99ea6b028643eb50fd9dd16d994fa4bed222e924b67140091e46a5c5f697","name":"79f037d9-0b3a-41d1-abfa-7b3b1ef6882f.csv","type":"text/csv","lastModified":1709667102151.189,"size":1229},{"id":"f48db73fe2933f9cd1c4029cc03e3acc125a6988d1cdb6d4619228650425b8b4899cae69be2b1c5c876ecc03476692ca76b0ac15f9c6f2b63d4ba3c4cfbbc9d9","href":"https://static.observableusercontent.com/files/f48db73fe2933f9cd1c4029cc03e3acc125a6988d1cdb6d4619228650425b8b4899cae69be2b1c5c876ecc03476692ca76b0ac15f9c6f2b63d4ba3c4cfbbc9d9","name":"c7c19fd6-d004-46d1-83cf-cdd687c3588e.csv","type":"text/csv","lastModified":1709667697396.438,"size":517},{"id":"aa1c092651c6c90e75d5d2e4c4729d03618f6069de4e7577168b883b88ade43bc45cf3157b5ae04ff3568485fc9a5f18b463d5b7d263ff1f3644b6576d71c48b","href":"https://static.observableusercontent.com/files/aa1c092651c6c90e75d5d2e4c4729d03618f6069de4e7577168b883b88ade43bc45cf3157b5ae04ff3568485fc9a5f18b463d5b7d263ff1f3644b6576d71c48b","name":"eb7e73b2-767c-48f1-ba56-daf4fad59082.csv","type":"text/csv","lastModified":1709667971727.354,"size":68},{"id":"486a7a107e14321d1f70ed5e4fd4cf776a3078f827cd45a4f6fa8bda50586c62c3c3dd1d52988741fc2b171f62085a847f70331b99f0237a3f6288a38baa0ed6","href":"https://static.observableusercontent.com/files/486a7a107e14321d1f70ed5e4fd4cf776a3078f827cd45a4f6fa8bda50586c62c3c3dd1d52988741fc2b171f62085a847f70331b99f0237a3f6288a38baa0ed6","name":"f65d96dd-7e75-47d8-b1ef-164b3c66b917.csv","type":"text/csv","lastModified":1709668539586.385,"size":1192},{"id":"e5eabb13e8b8cea9be128825f08874f29fa5849db858e8e31190bb29107b1b7e79e985951aa0163d66fe4c9b8faf5c90966a45630969077718aad36fb7e80b27","href":"https://static.observableusercontent.com/files/e5eabb13e8b8cea9be128825f08874f29fa5849db858e8e31190bb29107b1b7e79e985951aa0163d66fe4c9b8faf5c90966a45630969077718aad36fb7e80b27","name":"fb273072-476b-4027-9b42-5022fb6d203b.csv","type":"text/csv","lastModified":1709672293261.355,"size":443},{"id":"2adea905db8a7a1321b91a0c94c553c39135937eaf17cbadb95548b808d8e9a53f5842108c642fcda08b10dca84c5d1a1fec4996f636972bf03f6ba49ab85d0d","href":"https://static.observableusercontent.com/files/2adea905db8a7a1321b91a0c94c553c39135937eaf17cbadb95548b808d8e9a53f5842108c642fcda08b10dca84c5d1a1fec4996f636972bf03f6ba49ab85d0d","name":"dc76c676-416f-4210-b2d9-526ae26860c4.csv","type":"text/csv","lastModified":1709750459267.689,"size":591},{"id":"8023b5aa96f4df55f6a4ee8d6555fdd2ee602db646faf1195e63b16cae2120fd1a3b54db8fc872bb6b0ec00cbbfef33a8be6d2b33c5aa1cb5a1d0234c5a0bfaf","href":"https://static.observableusercontent.com/files/8023b5aa96f4df55f6a4ee8d6555fdd2ee602db646faf1195e63b16cae2120fd1a3b54db8fc872bb6b0ec00cbbfef33a8be6d2b33c5aa1cb5a1d0234c5a0bfaf","name":"fake_similar_datasets_1category_custom@2.json","type":"application/json","lastModified":1709256271020.298,"size":1560},{"id":"3f971a515fff5f5f46000eecfc61f602e10ba7607643b9d1d28b8ae6bc267ab51c694bfd758fc5c7efb3509d865d0fd49cd046ac388c1fa1ff7fbef67b0ef0a4","href":"https://static.observableusercontent.com/files/3f971a515fff5f5f46000eecfc61f602e10ba7607643b9d1d28b8ae6bc267ab51c694bfd758fc5c7efb3509d865d0fd49cd046ac388c1fa1ff7fbef67b0ef0a4","name":"fake_similar_datasets_1category_custom_secondary_weighted.json","type":"application/json","lastModified":1709307991814.335,"size":2711},{"id":"ca9654a92ad9f07eda8b052bf310435d586020679b533f666eea36ec28a75790d2cc8d395ac63e9bdaa1914280f624867b3656b1127493423c572d794f23f7fe","href":"https://static.observableusercontent.com/files/ca9654a92ad9f07eda8b052bf310435d586020679b533f666eea36ec28a75790d2cc8d395ac63e9bdaa1914280f624867b3656b1127493423c572d794f23f7fe","name":"fake_similar_datasets_1category_custom_secondary@7.json","type":"application/json","lastModified":1709308095628.502,"size":2527},{"id":"6a17221af5491a35d80c4f4f25eba68c558e958943f741357cf4cb6f0dad8c354c7e1274c04fcb83ed511d1f0dadc1d9dd7ed1c1e289dd9c68509a78e879cce9","href":"https://static.observableusercontent.com/files/6a17221af5491a35d80c4f4f25eba68c558e958943f741357cf4cb6f0dad8c354c7e1274c04fcb83ed511d1f0dadc1d9dd7ed1c1e289dd9c68509a78e879cce9","name":"example_flare-2_subsample@1.json","type":"application/json","lastModified":1709318459434.586,"size":1039},{"id":"3983e4a0e56399c48a3515e570f318634ab3d660dd4d0c86255f3c76593e22bc60603a17a004c7e94002cb3c21ee2cf498e90b7fac642fed7a333c75efc750b2","href":"https://static.observableusercontent.com/files/3983e4a0e56399c48a3515e570f318634ab3d660dd4d0c86255f3c76593e22bc60603a17a004c7e94002cb3c21ee2cf498e90b7fac642fed7a333c75efc750b2","name":"fake_tree_network@3.json","type":"application/json","lastModified":1709319737570.476,"size":2002}] 30:{"id":"bc54eaf1b544220c","slug":null,"title":"Disjoint force-directed graph","thumbnail":"57c4e8d054878e5fd4ba027630904b7c8aacfe5562c6b4e6a3fda618152213d1","access_level":"public","create_time":"$D2024-02-29T20:55:56.227Z","update_time":"$D2024-03-06T21:57:09.971Z","view_time":null,"first_public_time":"$D2024-02-29T20:55:56.227Z","has_unpublished_edits":null,"fork":{"id":"ba609e7e6741119b","slug":"disjoint-force-directed-graph/2","title":"Disjoint force-directed graph","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"20f3bfaa8fa5c84a","login":"katirg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a052328a04d246ecd3076cd023a5aade2b30d382f43a2ddfcaa1227ede3e85fd","tier":"starter_2024"},"version":1936,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"eff7fee30ca2beb5","login":"katirg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a052328a04d246ecd3076cd023a5aade2b30d382f43a2ddfcaa1227ede3e85fd","tier":null}],"members":[{"type":"team","id":"20f3bfaa8fa5c84a","login":"katirg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a052328a04d246ecd3076cd023a5aade2b30d382f43a2ddfcaa1227ede3e85fd","tier":"starter_2024","role":"editor"},{"type":"individual","id":"eff7fee30ca2beb5","login":"katirg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a052328a04d246ecd3076cd023a5aade2b30d382f43a2ddfcaa1227ede3e85fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Disjoint force-directed graph","cells":[{"id":1,"value":"

Disjoint force-directed graph

D3 › Gallery

\n\n# Disjoint force-directed graph\n\nWhen using [D3’s force layout](https://d3js.org/d3-force) with a disjoint graph, you typically want the [positioning forces](https://d3js.org/d3-force/position) (d3.forceX and d3.forceY) instead of the [centering force](https://d3js.org/d3-force/center) (d3.forceCenter). The positioning forces, unlike the centering force, prevent detached subgraphs from escaping the viewport.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":519,"value":"## DEMO: Primary network with connectivity strength","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"// Primary connections only\nnetworkChart(data_primary)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"## DEMO: Primary + secondary network with connectivity strength","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":368,"value":"networkOrdersChart(data_secondary_weighted)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"## DEMO: Primary + secondary network, no connectivity strength","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":405,"value":"networkOrdersChart(data_secondary)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1812,"value":"### Demo Datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"data_primary = FileAttachment(\"fake_similar_datasets_1category_custom@2.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"data_secondary_weighted = FileAttachment(\"fake_similar_datasets_1category_custom_secondary_weighted.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"data_secondary = FileAttachment(\"fake_similar_datasets_1category_custom_secondary@7.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1814,"value":"## Datasets\n\nPipeline: \n\n1. Read in CSV file attachement and parse it into the proper array format\n\n2. Get metadata with `loadData()` function for each package_id by API call. Note this has to be done as a separate step since the API is called as a promise and only resolves once the promise returns true. From the API result, the package name and english title is retrieved and stored in the metadata dictionary for use in the final step.\n\n3. Format the data with function `graphData()` in the JSON layout required for the network graph.\n(Note: for \"dendrogram\" layout, where order-0 nodes are unconnected, use `graphDataDendro()`.)\n\n4. Finally, plot the network graph with function `similarityChart()` using the JSON data output in Step 3.\n\n**Tips** \nOptions for reading in local CSV files via `FileAttachement`: \n\nhttps://observablehq.com/documentation/data/files/file-attachments","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1823,"value":"// FileAttachment(\"516005c7-ff91-4667-b5a2-8be8d32dc728@3.csv\").csv()\n// .then(data => {\n// console.log('data: ', data)\n// const rmSquares = (d) => String(d.replace(\"[\", \"\").replace(\"]\", \"\"));\n// data.map(row => {\n// row.similar_datasets = rmSquares(row.similar_datasets).split(\";\");\n// })\n// return data;\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1434,"value":"### Dataset 1: \"Spring Phosphorous Program\"\n`516005c7-ff91-4667-b5a2-8be8d32dc728` => `spring-phosphorous-program` \n\nhttps://data.ontario.ca/api/3/action/package_show?id=516005c7-ff91-4667-b5a2-8be8d32dc728","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1352,"value":"id_516005c7 = await FileAttachment(\"516005c7-ff91-4667-b5a2-8be8d32dc728@3.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"id_516005c7","database":"$undefined"},{"id":1843,"value":"id_516005c7_obj = FileAttachment(\"516005c7-ff91-4667-b5a2-8be8d32dc728@3.csv\").csv()\n .then(data => {\n console.log('data: ', data)\n const rmSquares = (d) => String(d.replace(\"[\", \"\").replace(\"]\", \"\"));\n data.map(row => {\n row.similar_datasets = rmSquares(row.similar_datasets).split(\";\");\n })\n return data;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1566,"value":"id_516005c7_metadata = loadData(id_516005c7_obj);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1568,"value":"id_516_graphJSON = graphData(id_516005c7_obj, id_516005c7_metadata);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1570,"value":"similarityChart(id_516_graphJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1697,"value":"id_516_graphJSONDendro = graphDataDendro(id_516005c7_obj, id_516005c7_metadata);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1700,"value":"similarityChart(id_516_graphJSONDendro)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1547,"value":"### Dataset 2: \"Forest Resources Inventory leaf-on LiDAR\"\n`45a18ab6-9e72-40ba-afcf-833ca25c3495` => `forest-resources-inventory-leaf-on-lidar` \n\nhttps://data.ontario.ca/api/3/action/package_show?id=forest-resources-inventory-leaf-on-lidar","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1507,"value":"id_45a18ab6 = await FileAttachment(\"45a18ab6-9e72-40ba-afcf-833ca25c3495.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"id_45a18ab6","database":"$undefined"},{"id":1512,"value":"id_45a18ab6_obj = FileAttachment(\"45a18ab6-9e72-40ba-afcf-833ca25c3495.csv\").csv()\n .then(data => {\n console.log('data: ', data)\n const rmSquares = (d) => String(d.replace(\"[\", \"\").replace(\"]\", \"\"));\n data.map(row => {\n row.similar_datasets = rmSquares(row.similar_datasets).split(\";\");\n })\n return data;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1516,"value":"id_45a18ab6_metadata = loadData(id_45a18ab6_obj);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1521,"value":"id_45a18ab6_graphJSON = graphData(id_45a18ab6_obj, id_45a18ab6_metadata);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1525,"value":"similarityChart(id_45a18ab6_graphJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1484,"value":"### Dataset 3: \t\"Ontario Snow Survey location and data\"\n`705313eb-1124-46c0-906d-42abf25c522d` => `ontario-snow-survey-location-and-data` \n\nhttps://data.ontario.ca/api/3/action/package_show?id=705313eb-1124-46c0-906d-42abf25c522d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1859,"value":"id_705313eb = await FileAttachment(\"705313eb-1124-46c0-906d-42abf25c522d.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"id_705313eb","database":"$undefined"},{"id":1856,"value":"id_705313eb_obj = FileAttachment(\"705313eb-1124-46c0-906d-42abf25c522d.csv\").csv() \n .then(data => {\n console.log('data: ', data)\n const rmSquares = (d) => String(d.replace(\"[\", \"\").replace(\"]\", \"\"));\n data.map(row => {\n row.similar_datasets = rmSquares(row.similar_datasets).split(\";\");\n })\n return data;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1574,"value":"id_705313eb_metadata = loadData(id_705313eb_obj);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1576,"value":"id_705313eb_graphJSON = graphData(id_705313eb_obj, id_705313eb_metadata);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1578,"value":"similarityChart(id_705313eb_graphJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1711,"value":"id_705313eb_graphJSONDendro = graphDataDendro(id_705313eb_obj, id_705313eb_metadata);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1712,"value":"similarityChart(id_705313eb_graphJSONDendro)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1581,"value":"### Dataset 4: \t\"Industrial Wastewater Discharges\"\n`79f037d9-0b3a-41d1-abfa-7b3b1ef6882f` => `industrial-wastewater-discharges` \n\nhttps://data.ontario.ca/api/3/action/package_show?id=79f037d9-0b3a-41d1-abfa-7b3b1ef6882f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1584,"value":"id_79f037d9 = await FileAttachment(\"79f037d9-0b3a-41d1-abfa-7b3b1ef6882f.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"id_79f037d9","database":"$undefined"},{"id":1862,"value":"id_79f037d9_obj = FileAttachment(\"79f037d9-0b3a-41d1-abfa-7b3b1ef6882f.csv\").csv()\n .then(data => {\n console.log('data: ', data)\n const rmSquares = (d) => String(d.replace(\"[\", \"\").replace(\"]\", \"\"));\n data.map(row => {\n row.similar_datasets = rmSquares(row.similar_datasets).split(\";\");\n })\n return data;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1590,"value":"id_79f037d9_metadata = loadData(id_79f037d9_obj);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1583,"value":"id_79f037d9_graphJSON = graphData(id_79f037d9_obj,id_79f037d9_metadata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1597,"value":"similarityChart(id_79f037d9_graphJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1718,"value":"id_79f037d9_graphJSONDendro = graphDataDendro(id_79f037d9_obj,id_79f037d9_metadata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1720,"value":"similarityChart(id_79f037d9_graphJSONDendro)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"### Dataset 5: \t\"Ontario Landfills\"\n`c7c19fd6-d004-46d1-83cf-cdd687c3588e` => `ontario-landfills` \n\nhttps://data.ontario.ca/api/3/action/package_show?id=c7c19fd6-d004-46d1-83cf-cdd687c3588e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1605,"value":"id_c7c19fd6 = await FileAttachment(\"c7c19fd6-d004-46d1-83cf-cdd687c3588e.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"id_c7c19fd6","database":"$undefined"},{"id":1870,"value":"id_c7c19fd6_obj = FileAttachment(\"c7c19fd6-d004-46d1-83cf-cdd687c3588e.csv\").csv()\n .then(data => {\n console.log('data: ', data)\n const rmSquares = (d) => String(d.replace(\"[\", \"\").replace(\"]\", \"\"));\n data.map(row => {\n row.similar_datasets = rmSquares(row.similar_datasets).split(\";\");\n })\n return data;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1601,"value":"id_c7c19fd6_metadata = loadData(id_c7c19fd6_obj)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1603,"value":"id_c7c19fd6_graphJSON = graphData(id_c7c19fd6_obj,id_c7c19fd6_metadata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1612,"value":"similarityChart(id_c7c19fd6_graphJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1726,"value":"id_c7c19fd6_graphJSONDendro = graphDataDendro(id_c7c19fd6_obj,id_c7c19fd6_metadata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1727,"value":"similarityChart(id_c7c19fd6_graphJSONDendro)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1614,"value":"### Dataset 6: \t\"Visitation to Provincial Parks\"\n`eb7e73b2-767c-48f1-ba56-daf4fad59082` => `visitation-to-provincial-parks` \n\nhttps://data.ontario.ca/api/3/action/package_show?id=eb7e73b2-767c-48f1-ba56-daf4fad59082 \n\n**NO RELATED DATASETS ACCORDING TO AI** ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1618,"value":"id_eb7e73b2 = await FileAttachment(\"eb7e73b2-767c-48f1-ba56-daf4fad59082.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"id_eb7e73b2","database":"$undefined"},{"id":1616,"value":"id_eb7e73b2_obj = FileAttachment(\"eb7e73b2-767c-48f1-ba56-daf4fad59082.csv\").csv()\n .then(data => {\n console.log('data: ', data)\n const rmSquares = (d) => String(d.replace(\"[\", \"\").replace(\"]\", \"\"));\n data.map(row => {\n row.similar_datasets = rmSquares(row.similar_datasets).split(\";\");\n })\n return data;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1621,"value":"id_eb7e73b2_metadata = loadData(id_eb7e73b2_obj)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1623,"value":"id_eb7e73b2_graphJSON = graphData(id_eb7e73b2_obj,id_eb7e73b2_metadata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1625,"value":"similarityChart(id_eb7e73b2_graphJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1631,"value":"### Dataset 7: \t\"Great Lakes Shoreline Ecosystem inventory\"\n`f65d96dd-7e75-47d8-b1ef-164b3c66b917` => `great-lakes-shoreline-ecosystem-inventory` \n\nhttps://data.ontario.ca/api/3/action/package_show?id=f65d96dd-7e75-47d8-b1ef-164b3c66b917","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1633,"value":"id_f65d96dd = await FileAttachment(\"f65d96dd-7e75-47d8-b1ef-164b3c66b917.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"id_f65d96dd","database":"$undefined"},{"id":1880,"value":"id_f65d96dd_obj = FileAttachment(\"f65d96dd-7e75-47d8-b1ef-164b3c66b917.csv\").csv()\n .then(data => {\n console.log('data: ', data)\n const rmSquares = (d) => String(d.replace(\"[\", \"\").replace(\"]\", \"\"));\n data.map(row => {\n row.similar_datasets = rmSquares(row.similar_datasets).split(\";\");\n })\n return data;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1634,"value":"id_f65d96dd_metadata = loadData(id_f65d96dd_obj)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1636,"value":"id_f65d96dd_graphJSON = graphData(id_f65d96dd_obj,id_f65d96dd_metadata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1638,"value":"similarityChart(id_f65d96dd_graphJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1733,"value":"id_f65d96dd_graphJSONDendro = graphDataDendro(id_f65d96dd_obj,id_f65d96dd_metadata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1734,"value":"similarityChart(id_f65d96dd_graphJSONDendro)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1647,"value":"### Dataset 8: \t\"Ontario Growth and Yield data\"\n`fb273072-476b-4027-9b42-5022fb6d203b` => `ontario-growth-and-yield-data` \n\nhttps://data.ontario.ca/api/3/action/package_show?id=fb273072-476b-4027-9b42-5022fb6d203b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1649,"value":"id_fb273072 = await FileAttachment(\"fb273072-476b-4027-9b42-5022fb6d203b.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"id_fb273072","database":"$undefined"},{"id":1650,"value":"id_fb273072_obj = FileAttachment(\"f65d96dd-7e75-47d8-b1ef-164b3c66b917.csv\").csv()\n .then(data => {\n console.log('data: ', data)\n const rmSquares = (d) => String(d.replace(\"[\", \"\").replace(\"]\", \"\"));\n data.map(row => {\n row.similar_datasets = rmSquares(row.similar_datasets).split(\";\");\n })\n return data;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"id_fb273072_metadata = loadData(id_fb273072_obj);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1655,"value":"id_fb273072_graphJSON = graphData(id_fb273072_obj, id_fb273072_metadata);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1657,"value":"similarityChart(id_fb273072_graphJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1740,"value":"id_fb273072_graphJSONDendro = graphDataDendro(id_fb273072_obj, id_fb273072_metadata);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1742,"value":"similarityChart(id_fb273072_graphJSONDendro)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1753,"value":"### Dataset 9: \t\"Broadscale Monitoring Program Lake Water Chemistry\"\n`dc76c676-416f-4210-b2d9-526ae26860c4` => `broadscale-monitoring-program-lake-water-chemistry` \n\nhttps://data.ontario.ca/api/3/action/package_show?id=dc76c676-416f-4210-b2d9-526ae26860c4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1764,"value":"id_dc76c676 = await FileAttachment(\"dc76c676-416f-4210-b2d9-526ae26860c4.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"id_dc76c676","database":"$undefined"},{"id":1890,"value":"id_dc76c676_obj = FileAttachment(\"dc76c676-416f-4210-b2d9-526ae26860c4.csv\").csv()\n .then(data => {\n console.log('data: ', data)\n const rmSquares = (d) => String(d.replace(\"[\", \"\").replace(\"]\", \"\"));\n data.map(row => {\n row.similar_datasets = rmSquares(row.similar_datasets).split(\";\");\n })\n return data;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1756,"value":"id_dc76c676_metadata = loadData(id_dc76c676_obj);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1758,"value":"id_dc76c676_graphJSON = graphData(id_dc76c676_obj, id_dc76c676_metadata);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1761,"value":"similarityChart(id_dc76c676_graphJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1771,"value":"id_dc76c676_graphJSONDendro = graphDataDendro(id_dc76c676_obj, id_dc76c676_metadata);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1774,"value":"similarityChart(id_dc76c676_graphJSONDendro)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"## Data processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1776,"value":"FileAttachment(\"516005c7-ff91-4667-b5a2-8be8d32dc728@3.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1789,"value":"exampleData = FileAttachment(\"516005c7-ff91-4667-b5a2-8be8d32dc728@3.csv\").csv()\n .then(data => {\n const rmSquares = (d) => String(d.replace(\"[\", \"\").replace(\"]\", \"\"));\n data.map(row => {\n row.similar_datasets = rmSquares(row.similar_datasets).split(\";\");\n })\n return data;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"## Data Processing Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1065,"value":"// Called by loadData()\n// Returns unique package_id from the input data obj.\ngetIds = (o) => {\n let idArr = [];\n o.forEach(row => {\n // Push in the package_id column values\n idArr.push(row.package_id);\n // Loop through similar_dataset column and push in\n // array values\n row.similar_datasets.forEach(d => {\n idArr.push(d);\n })\n })\n\n return Array.from(new Set(idArr));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1667,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"## UI Discussion Notes\n\n- check if there is a time delay over tooltip hover\n- show dataset name in tooltip\n- add click to the nodes linking to the dataset\n- use a different colour for each level (blue, grey, complementary colour (pink, green))\n- make centre node yellow\n- dark grey outline for all circles, same grey for the links\n\n relationship strength:\n - size is not helpful\n - represent strength with thickness of the line and ditch size and colour\n \n\n stretch goals:\n - make the tooltip appear when clicking on a node. Tooltip stays there, and contains clickable content; tooltip automatically disappears after some defined delay. Newer tooltips should appear above the older ones.\n\n\nEmbedding:\n- to the right of the box with the list","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1927,"value":"## Similarity Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":884,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"# Force-directed tree\nFrom https://observablehq.com/@d3/force-directed-tree. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":453,"value":"treeChart(example_flare2_subsample)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"treeChart(fake_tree_network)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"## data for tree","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":452,"value":"example_flare2_subsample = FileAttachment(\"example_flare-2_subsample@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"fake_tree_network = FileAttachment(\"fake_tree_network@3.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 31:"$30:body"