2b:null 2c:["$","title",null,{"children":"groupedGraph | Kalle Westerling | Observable"}] 31:T903,In order to produce a graph, you need to run the function `groupedGraph`, and access its `.node()` method. The reason for this is for you to receive an `svg` node as a result from the function, which you can continue to build on. The `graph` data, as an object, is passed as the first argument to `groupedGraph`. Other variables that you can pass in to the visualization function includes: - `height`: in pixels, how tall do you want the rendered SVG element to be? - `color`: a [d3 scale](/@d3/color-schemes) which provides the coloring of the nodes. - `margin`: percent expressed as decimal, how far away from the nodes that the group border should be rendered, for example 110% = 1.1. - `curve`: a [d3 curve type](https://github.com/d3/d3-shape#curves) which provides the shape of the curves rendered around grouped nodes. - `onHover` and `onClick`: here you can provide functions that accept d3's regular arrow functionality, declaring what you want to happen when hovering and clicking respectively on nodes. _Note: See below for an example to clarify._ - `groupX` and `groupY`: a list of x and y values respectively (expressed in pixels on the SVG) where you'd like each group's gravity to pull towards. (Note that the number of entries in the list must match the number of groups, and that groups should start numbering at zero—alternatively keep the zero entry of the list empty.) _Note: you can try different settings for `margin` and `curve` in the visualization above._ Here is a summary of the function's settings, and its default values: ```js groupedGraph( { nodes: [], links: [] }, { height: 600, color: d3.scaleOrdinal().range(["red", "green", "blue", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]), margin: ${margin}, curve: "${curveType}", onHover: undefined, onClick: undefined, groupX: [], groupY: [], groupColorNames = [], r = 5, // accessor function or integer label = undefined, labelStyle = { fontFamily: "sans-serif", fontSize: 10, color: true }, strokeWidth = (d) => Math.sqrt(d.value), // accessor function or integer onLeave = undefined, displayGroupOnHover = false, chargeStrength = undefined, linkStrength = undefined, excludeGroups = [], fade = true } ) ```32:T1ed3,groupedGraph = ( graph = {}, { height = 600, color = d3 .scaleOrdinal() .range([ "red", "green", "blue", "#6b486b", "#a05d56", "#d0743c", "#ff8c00" ]), groupColorNames = [], margin = 1.2, curve = "curveCatmullRomClosed", r = 5, label = undefined, labelStyle = { fontFamily: "sans-serif", fontSize: 10, color: true }, strokeWidth = (d) => Math.sqrt(d.value), strokeStyle = { color: "gray", opacity: 0.6 }, nodeStyle = { stroke: "white", strokeWidth: "1.5px" }, groupStyle = { fillOpacity: 0.1, strokeOpacity: 1 }, onHover = undefined, onClick = undefined, onLeave = undefined, groupX = [], // in development groupY = [], // in development displayGroupOnHover = false, chargeStrength = undefined, linkStrength = undefined, excludeGroups = [], fade = true } = {} ) => { if ( !Object.keys(graph).includes("links") || !Object.keys(graph).includes("nodes") ) throw new Error( "The visualization must be provided a graph object containing links and nodes." ); if (graph.links.length === 0) throw new Error( `No links were provided. See documentation for detailed instructions on the required data structure for the graph.` ); if (graph.nodes.length === 0) throw new Error( `No nodes were provided. See documentation for detailed instructions on the required data structure for the graph.` ); if (groupX.length || groupY.length) { const _ = [...new Set(graph.nodes.map((d) => d.group))] .sort((a, b) => a - b) .forEach((group) => { if (groupX.length && groupX[group] === undefined) throw new Error( `groupX provided but not of correct length: group ${group} has no value.` ); if (groupY.length && groupY[group] === undefined) throw new Error( `groupY provided but not of correct length: group ${group} has no value.` ); }); } const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // create groups, links and nodes const groups = svg.append("g").attr("class", "groups"); const link = svg .append("g") .attr("class", "links") .selectAll("line") .data(graph.links) .join("line") .attr("stroke-width", strokeWidth) .attr("stroke", strokeStyle.color) .attr("stroke-opacity", strokeStyle.opacity); const node = svg .append("g") .attr("class", "nodes") .selectAll("circle") .data(graph.nodes) .join("circle") .attr("r", r) .attr("stroke", nodeStyle.stroke) .attr("stroke-width", nodeStyle.strokeWidth) .attr("fill", (d) => { if (!groupColorNames.length) return color(d.group); return color(groupColorNames[d.group]); }) .call( d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ); let _label = svg .append("g") .attr("class", "labels") .selectAll("text") .data(graph.nodes) .join("text") .text(label) .attr("text-anchor", "middle") .attr("font-family", labelStyle.fontFamily) .attr("font-size", labelStyle.fontSize) .attr("fill", (d) => { if (!labelStyle.color) return "black"; if (!groupColorNames.length) return color(d.group); return color(groupColorNames[d.group]); }) .call( d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ); if (typeof onHover === "function") { node.on("mouseover", onHover); } if (typeof onLeave === "function") { node.on("mouseout", onLeave); } if (typeof onClick === "function") { node.on("click", onClick); } const simulation = d3.forceSimulation().nodes(graph.nodes); if (linkStrength && typeof linkStrength === "number") { simulation.force( "link", d3 .forceLink() .links(graph.links) .id((d) => d.id) .strength(linkStrength) ); } else { simulation.force( "link", d3 .forceLink() .links(graph.links) .id((d) => d.id) ); } if (chargeStrength && typeof chargeStrength === "number") { simulation.force("charge", d3.forceManyBody().strength(chargeStrength)); } else { simulation.force("charge", d3.forceManyBody()); } if (groupX.length === 0 && groupY.length === 0) { simulation.force("center", d3.forceCenter(width / 2, height / 2)); } if (groupX.length) { simulation .force( "x", d3.forceX().x((d) => groupX[+d.group]) ) .force( "y", d3.forceY().y((d) => height / 2) ); } if (groupY.length) { simulation .force( "y", d3.forceY().y((d) => groupY[+d.group]) ) .force( "x", d3.forceX().x((d) => width / 2) ); } simulation.on("tick", tick); function 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); _label.attr("x", (d) => d.x).attr("y", (d) => d.y); updateGroups(paths, groupIds, node, curve, margin); } // count members of each group. Groups with less // than 3 member will not be considered (creating // a convex hull need 3 points at least) const groupIds = [...new Set(graph.nodes.map((n) => +n.group))] .map((groupId) => ({ groupId: groupId, count: graph.nodes.filter((n) => +n.group == groupId).length })) .filter( (group) => group.count > 2 && !excludeGroups.includes(group.groupId) ) .map((group) => group.groupId); const paths = groups .selectAll(".path_placeholder") .data(groupIds, (d) => +d) .join("g") .attr("class", "path_placeholder") .attr("fill-opacity", groupStyle.fillOpacity) .attr("stroke-opacity", groupStyle.strokeOpacity) .append("path") .attr("stroke", (d) => { if (!groupColorNames.length) return color(d); return color(groupColorNames[d]); }) .attr("fill", (d) => { if (!groupColorNames.length) return color(d); return color(groupColorNames[d]); }) .attr("opacity", 0); // TODO: THIS LOOK UNFINISHED if (!displayGroupOnHover) { fade ? paths.transition().duration(2000).attr("opacity", 1) : paths.attr("opacity", 1); } else { } // add interaction to the groups groups .selectAll(".path_placeholder") .call( d3 .drag() .on("start", group_dragstarted) .on("drag", group_dragged) .on("end", group_dragended) ); node.append("title").text(function (d) { return d.id; }); // drag nodes function dragstarted(evt, d) { if (!evt.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(evt, d) { d.fx = evt.x; d.fy = evt.y; } function dragended(evt, d) { if (!evt.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } // drag groups function group_dragstarted(evt, groupId) { if (!evt.active) simulation.alphaTarget(0.3).restart(); d3.select(this).select("path").style("stroke-width", 3); } function group_dragged(evt, groupId) { node .filter(function (d) { return d.group == groupId; }) .each(function (d) { d.x += evt.dx; d.y += evt.dy; }); } function group_dragended(evt, groupId) { if (!evt.active) simulation.alphaTarget(0.3).restart(); d3.select(this).select("path").style("stroke-width", 1); } invalidation.then(() => simulation.stop()); return svg; }33:T49aa,miserables = ({ "nodes": [ {"id": "Myriel", "group": 1}, {"id": "Napoleon", "group": 1}, {"id": "Mlle.Baptistine", "group": 1}, {"id": "Mme.Magloire", "group": 1}, {"id": "CountessdeLo", "group": 1}, {"id": "Geborand", "group": 1}, {"id": "Champtercier", "group": 1}, {"id": "Cravatte", "group": 1}, {"id": "Count", "group": 1}, {"id": "OldMan", "group": 1}, {"id": "Labarre", "group": 2}, {"id": "Valjean", "group": 2}, {"id": "Marguerite", "group": 3}, {"id": "Mme.deR", "group": 2}, {"id": "Isabeau", "group": 2}, {"id": "Gervais", "group": 2}, {"id": "Tholomyes", "group": 3}, {"id": "Listolier", "group": 3}, {"id": "Fameuil", "group": 3}, {"id": "Blacheville", "group": 3}, {"id": "Favourite", "group": 3}, {"id": "Dahlia", "group": 3}, {"id": "Zephine", "group": 3}, {"id": "Fantine", "group": 3}, {"id": "Mme.Thenardier", "group": 4}, {"id": "Thenardier", "group": 4}, {"id": "Cosette", "group": 5}, {"id": "Javert", "group": 4}, {"id": "Fauchelevent", "group": 0}, {"id": "Bamatabois", "group": 2}, {"id": "Perpetue", "group": 3}, {"id": "Simplice", "group": 2}, {"id": "Scaufflaire", "group": 2}, {"id": "Woman1", "group": 2}, {"id": "Judge", "group": 2}, {"id": "Champmathieu", "group": 2}, {"id": "Brevet", "group": 2}, {"id": "Chenildieu", "group": 2}, {"id": "Cochepaille", "group": 2}, {"id": "Pontmercy", "group": 4}, {"id": "Boulatruelle", "group": 6}, {"id": "Eponine", "group": 4}, {"id": "Anzelma", "group": 4}, {"id": "Woman2", "group": 5}, {"id": "MotherInnocent", "group": 0}, {"id": "Gribier", "group": 0}, {"id": "Jondrette", "group": 7}, {"id": "Mme.Burgon", "group": 7}, {"id": "Gavroche", "group": 8}, {"id": "Gillenormand", "group": 5}, {"id": "Magnon", "group": 5}, {"id": "Mlle.Gillenormand", "group": 5}, {"id": "Mme.Pontmercy", "group": 5}, {"id": "Mlle.Vaubois", "group": 5}, {"id": "Lt.Gillenormand", "group": 5}, {"id": "Marius", "group": 8}, {"id": "BaronessT", "group": 5}, {"id": "Mabeuf", "group": 8}, {"id": "Enjolras", "group": 8}, {"id": "Combeferre", "group": 8}, {"id": "Prouvaire", "group": 8}, {"id": "Feuilly", "group": 8}, {"id": "Courfeyrac", "group": 8}, {"id": "Bahorel", "group": 8}, {"id": "Bossuet", "group": 8}, {"id": "Joly", "group": 8}, {"id": "Grantaire", "group": 8}, {"id": "MotherPlutarch", "group": 9}, {"id": "Gueulemer", "group": 4}, {"id": "Babet", "group": 4}, {"id": "Claquesous", "group": 4}, {"id": "Montparnasse", "group": 4}, {"id": "Toussaint", "group": 5}, {"id": "Child1", "group": 10}, {"id": "Child2", "group": 10}, {"id": "Brujon", "group": 4}, {"id": "Mme.Hucheloup", "group": 8} ], "links": [ {"source": "Napoleon", "target": "Myriel", "value": 1}, {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8}, {"source": "Mme.Magloire", "target": "Myriel", "value": 10}, {"source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6}, {"source": "CountessdeLo", "target": "Myriel", "value": 1}, {"source": "Geborand", "target": "Myriel", "value": 1}, {"source": "Champtercier", "target": "Myriel", "value": 1}, {"source": "Cravatte", "target": "Myriel", "value": 1}, {"source": "Count", "target": "Myriel", "value": 2}, {"source": "OldMan", "target": "Myriel", "value": 1}, {"source": "Valjean", "target": "Labarre", "value": 1}, {"source": "Valjean", "target": "Mme.Magloire", "value": 3}, {"source": "Valjean", "target": "Mlle.Baptistine", "value": 3}, {"source": "Valjean", "target": "Myriel", "value": 5}, {"source": "Marguerite", "target": "Valjean", "value": 1}, {"source": "Mme.deR", "target": "Valjean", "value": 1}, {"source": "Isabeau", "target": "Valjean", "value": 1}, {"source": "Gervais", "target": "Valjean", "value": 1}, {"source": "Listolier", "target": "Tholomyes", "value": 4}, {"source": "Fameuil", "target": "Tholomyes", "value": 4}, {"source": "Fameuil", "target": "Listolier", "value": 4}, {"source": "Blacheville", "target": "Tholomyes", "value": 4}, {"source": "Blacheville", "target": "Listolier", "value": 4}, {"source": "Blacheville", "target": "Fameuil", "value": 4}, {"source": "Favourite", "target": "Tholomyes", "value": 3}, {"source": "Favourite", "target": "Listolier", "value": 3}, {"source": "Favourite", "target": "Fameuil", "value": 3}, {"source": "Favourite", "target": "Blacheville", "value": 4}, {"source": "Dahlia", "target": "Tholomyes", "value": 3}, {"source": "Dahlia", "target": "Listolier", "value": 3}, {"source": "Dahlia", "target": "Fameuil", "value": 3}, {"source": "Dahlia", "target": "Blacheville", "value": 3}, {"source": "Dahlia", "target": "Favourite", "value": 5}, {"source": "Zephine", "target": "Tholomyes", "value": 3}, {"source": "Zephine", "target": "Listolier", "value": 3}, {"source": "Zephine", "target": "Fameuil", "value": 3}, {"source": "Zephine", "target": "Blacheville", "value": 3}, {"source": "Zephine", "target": "Favourite", "value": 4}, {"source": "Zephine", "target": "Dahlia", "value": 4}, {"source": "Fantine", "target": "Tholomyes", "value": 3}, {"source": "Fantine", "target": "Listolier", "value": 3}, {"source": "Fantine", "target": "Fameuil", "value": 3}, {"source": "Fantine", "target": "Blacheville", "value": 3}, {"source": "Fantine", "target": "Favourite", "value": 4}, {"source": "Fantine", "target": "Dahlia", "value": 4}, {"source": "Fantine", "target": "Zephine", "value": 4}, {"source": "Fantine", "target": "Marguerite", "value": 2}, {"source": "Fantine", "target": "Valjean", "value": 9}, {"source": "Mme.Thenardier", "target": "Fantine", "value": 2}, {"source": "Mme.Thenardier", "target": "Valjean", "value": 7}, {"source": "Thenardier", "target": "Mme.Thenardier", "value": 13}, {"source": "Thenardier", "target": "Fantine", "value": 1}, {"source": "Thenardier", "target": "Valjean", "value": 12}, {"source": "Cosette", "target": "Mme.Thenardier", "value": 4}, {"source": "Cosette", "target": "Valjean", "value": 31}, {"source": "Cosette", "target": "Tholomyes", "value": 1}, {"source": "Cosette", "target": "Thenardier", "value": 1}, {"source": "Javert", "target": "Valjean", "value": 17}, {"source": "Javert", "target": "Fantine", "value": 5}, {"source": "Javert", "target": "Thenardier", "value": 5}, {"source": "Javert", "target": "Mme.Thenardier", "value": 1}, {"source": "Javert", "target": "Cosette", "value": 1}, {"source": "Fauchelevent", "target": "Valjean", "value": 8}, {"source": "Fauchelevent", "target": "Javert", "value": 1}, {"source": "Bamatabois", "target": "Fantine", "value": 1}, {"source": "Bamatabois", "target": "Javert", "value": 1}, {"source": "Bamatabois", "target": "Valjean", "value": 2}, {"source": "Perpetue", "target": "Fantine", "value": 1}, {"source": "Simplice", "target": "Perpetue", "value": 2}, {"source": "Simplice", "target": "Valjean", "value": 3}, {"source": "Simplice", "target": "Fantine", "value": 2}, {"source": "Simplice", "target": "Javert", "value": 1}, {"source": "Scaufflaire", "target": "Valjean", "value": 1}, {"source": "Woman1", "target": "Valjean", "value": 2}, {"source": "Woman1", "target": "Javert", "value": 1}, {"source": "Judge", "target": "Valjean", "value": 3}, {"source": "Judge", "target": "Bamatabois", "value": 2}, {"source": "Champmathieu", "target": "Valjean", "value": 3}, {"source": "Champmathieu", "target": "Judge", "value": 3}, {"source": "Champmathieu", "target": "Bamatabois", "value": 2}, {"source": "Brevet", "target": "Judge", "value": 2}, {"source": "Brevet", "target": "Champmathieu", "value": 2}, {"source": "Brevet", "target": "Valjean", "value": 2}, {"source": "Brevet", "target": "Bamatabois", "value": 1}, {"source": "Chenildieu", "target": "Judge", "value": 2}, {"source": "Chenildieu", "target": "Champmathieu", "value": 2}, {"source": "Chenildieu", "target": "Brevet", "value": 2}, {"source": "Chenildieu", "target": "Valjean", "value": 2}, {"source": "Chenildieu", "target": "Bamatabois", "value": 1}, {"source": "Cochepaille", "target": "Judge", "value": 2}, {"source": "Cochepaille", "target": "Champmathieu", "value": 2}, {"source": "Cochepaille", "target": "Brevet", "value": 2}, {"source": "Cochepaille", "target": "Chenildieu", "value": 2}, {"source": "Cochepaille", "target": "Valjean", "value": 2}, {"source": "Cochepaille", "target": "Bamatabois", "value": 1}, {"source": "Pontmercy", "target": "Thenardier", "value": 1}, {"source": "Boulatruelle", "target": "Thenardier", "value": 1}, {"source": "Eponine", "target": "Mme.Thenardier", "value": 2}, {"source": "Eponine", "target": "Thenardier", "value": 3}, {"source": "Anzelma", "target": "Eponine", "value": 2}, {"source": "Anzelma", "target": "Thenardier", "value": 2}, {"source": "Anzelma", "target": "Mme.Thenardier", "value": 1}, {"source": "Woman2", "target": "Valjean", "value": 3}, {"source": "Woman2", "target": "Cosette", "value": 1}, {"source": "Woman2", "target": "Javert", "value": 1}, {"source": "MotherInnocent", "target": "Fauchelevent", "value": 3}, {"source": "MotherInnocent", "target": "Valjean", "value": 1}, {"source": "Gribier", "target": "Fauchelevent", "value": 2}, {"source": "Mme.Burgon", "target": "Jondrette", "value": 1}, {"source": "Gavroche", "target": "Mme.Burgon", "value": 2}, {"source": "Gavroche", "target": "Thenardier", "value": 1}, {"source": "Gavroche", "target": "Javert", "value": 1}, {"source": "Gavroche", "target": "Valjean", "value": 1}, {"source": "Gillenormand", "target": "Cosette", "value": 3}, {"source": "Gillenormand", "target": "Valjean", "value": 2}, {"source": "Magnon", "target": "Gillenormand", "value": 1}, {"source": "Magnon", "target": "Mme.Thenardier", "value": 1}, {"source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9}, {"source": "Mlle.Gillenormand", "target": "Cosette", "value": 2}, {"source": "Mlle.Gillenormand", "target": "Valjean", "value": 2}, {"source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1}, {"source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1}, {"source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1}, {"source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2}, {"source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1}, {"source": "Lt.Gillenormand", "target": "Cosette", "value": 1}, {"source": "Marius", "target": "Mlle.Gillenormand", "value": 6}, {"source": "Marius", "target": "Gillenormand", "value": 12}, {"source": "Marius", "target": "Pontmercy", "value": 1}, {"source": "Marius", "target": "Lt.Gillenormand", "value": 1}, {"source": "Marius", "target": "Cosette", "value": 21}, {"source": "Marius", "target": "Valjean", "value": 19}, {"source": "Marius", "target": "Tholomyes", "value": 1}, {"source": "Marius", "target": "Thenardier", "value": 2}, {"source": "Marius", "target": "Eponine", "value": 5}, {"source": "Marius", "target": "Gavroche", "value": 4}, {"source": "BaronessT", "target": "Gillenormand", "value": 1}, {"source": "BaronessT", "target": "Marius", "value": 1}, {"source": "Mabeuf", "target": "Marius", "value": 1}, {"source": "Mabeuf", "target": "Eponine", "value": 1}, {"source": "Mabeuf", "target": "Gavroche", "value": 1}, {"source": "Enjolras", "target": "Marius", "value": 7}, {"source": "Enjolras", "target": "Gavroche", "value": 7}, {"source": "Enjolras", "target": "Javert", "value": 6}, {"source": "Enjolras", "target": "Mabeuf", "value": 1}, {"source": "Enjolras", "target": "Valjean", "value": 4}, {"source": "Combeferre", "target": "Enjolras", "value": 15}, {"source": "Combeferre", "target": "Marius", "value": 5}, {"source": "Combeferre", "target": "Gavroche", "value": 6}, {"source": "Combeferre", "target": "Mabeuf", "value": 2}, {"source": "Prouvaire", "target": "Gavroche", "value": 1}, {"source": "Prouvaire", "target": "Enjolras", "value": 4}, {"source": "Prouvaire", "target": "Combeferre", "value": 2}, {"source": "Feuilly", "target": "Gavroche", "value": 2}, {"source": "Feuilly", "target": "Enjolras", "value": 6}, {"source": "Feuilly", "target": "Prouvaire", "value": 2}, {"source": "Feuilly", "target": "Combeferre", "value": 5}, {"source": "Feuilly", "target": "Mabeuf", "value": 1}, {"source": "Feuilly", "target": "Marius", "value": 1}, {"source": "Courfeyrac", "target": "Marius", "value": 9}, {"source": "Courfeyrac", "target": "Enjolras", "value": 17}, {"source": "Courfeyrac", "target": "Combeferre", "value": 13}, {"source": "Courfeyrac", "target": "Gavroche", "value": 7}, {"source": "Courfeyrac", "target": "Mabeuf", "value": 2}, {"source": "Courfeyrac", "target": "Eponine", "value": 1}, {"source": "Courfeyrac", "target": "Feuilly", "value": 6}, {"source": "Courfeyrac", "target": "Prouvaire", "value": 3}, {"source": "Bahorel", "target": "Combeferre", "value": 5}, {"source": "Bahorel", "target": "Gavroche", "value": 5}, {"source": "Bahorel", "target": "Courfeyrac", "value": 6}, {"source": "Bahorel", "target": "Mabeuf", "value": 2}, {"source": "Bahorel", "target": "Enjolras", "value": 4}, {"source": "Bahorel", "target": "Feuilly", "value": 3}, {"source": "Bahorel", "target": "Prouvaire", "value": 2}, {"source": "Bahorel", "target": "Marius", "value": 1}, {"source": "Bossuet", "target": "Marius", "value": 5}, {"source": "Bossuet", "target": "Courfeyrac", "value": 12}, {"source": "Bossuet", "target": "Gavroche", "value": 5}, {"source": "Bossuet", "target": "Bahorel", "value": 4}, {"source": "Bossuet", "target": "Enjolras", "value": 10}, {"source": "Bossuet", "target": "Feuilly", "value": 6}, {"source": "Bossuet", "target": "Prouvaire", "value": 2}, {"source": "Bossuet", "target": "Combeferre", "value": 9}, {"source": "Bossuet", "target": "Mabeuf", "value": 1}, {"source": "Bossuet", "target": "Valjean", "value": 1}, {"source": "Joly", "target": "Bahorel", "value": 5}, {"source": "Joly", "target": "Bossuet", "value": 7}, {"source": "Joly", "target": "Gavroche", "value": 3}, {"source": "Joly", "target": "Courfeyrac", "value": 5}, {"source": "Joly", "target": "Enjolras", "value": 5}, {"source": "Joly", "target": "Feuilly", "value": 5}, {"source": "Joly", "target": "Prouvaire", "value": 2}, {"source": "Joly", "target": "Combeferre", "value": 5}, {"source": "Joly", "target": "Mabeuf", "value": 1}, {"source": "Joly", "target": "Marius", "value": 2}, {"source": "Grantaire", "target": "Bossuet", "value": 3}, {"source": "Grantaire", "target": "Enjolras", "value": 3}, {"source": "Grantaire", "target": "Combeferre", "value": 1}, {"source": "Grantaire", "target": "Courfeyrac", "value": 2}, {"source": "Grantaire", "target": "Joly", "value": 2}, {"source": "Grantaire", "target": "Gavroche", "value": 1}, {"source": "Grantaire", "target": "Bahorel", "value": 1}, {"source": "Grantaire", "target": "Feuilly", "value": 1}, {"source": "Grantaire", "target": "Prouvaire", "value": 1}, {"source": "MotherPlutarch", "target": "Mabeuf", "value": 3}, {"source": "Gueulemer", "target": "Thenardier", "value": 5}, {"source": "Gueulemer", "target": "Valjean", "value": 1}, {"source": "Gueulemer", "target": "Mme.Thenardier", "value": 1}, {"source": "Gueulemer", "target": "Javert", "value": 1}, {"source": "Gueulemer", "target": "Gavroche", "value": 1}, {"source": "Gueulemer", "target": "Eponine", "value": 1}, {"source": "Babet", "target": "Thenardier", "value": 6}, {"source": "Babet", "target": "Gueulemer", "value": 6}, {"source": "Babet", "target": "Valjean", "value": 1}, {"source": "Babet", "target": "Mme.Thenardier", "value": 1}, {"source": "Babet", "target": "Javert", "value": 2}, {"source": "Babet", "target": "Gavroche", "value": 1}, {"source": "Babet", "target": "Eponine", "value": 1}, {"source": "Claquesous", "target": "Thenardier", "value": 4}, {"source": "Claquesous", "target": "Babet", "value": 4}, {"source": "Claquesous", "target": "Gueulemer", "value": 4}, {"source": "Claquesous", "target": "Valjean", "value": 1}, {"source": "Claquesous", "target": "Mme.Thenardier", "value": 1}, {"source": "Claquesous", "target": "Javert", "value": 1}, {"source": "Claquesous", "target": "Eponine", "value": 1}, {"source": "Claquesous", "target": "Enjolras", "value": 1}, {"source": "Montparnasse", "target": "Javert", "value": 1}, {"source": "Montparnasse", "target": "Babet", "value": 2}, {"source": "Montparnasse", "target": "Gueulemer", "value": 2}, {"source": "Montparnasse", "target": "Claquesous", "value": 2}, {"source": "Montparnasse", "target": "Valjean", "value": 1}, {"source": "Montparnasse", "target": "Gavroche", "value": 1}, {"source": "Montparnasse", "target": "Eponine", "value": 1}, {"source": "Montparnasse", "target": "Thenardier", "value": 1}, {"source": "Toussaint", "target": "Cosette", "value": 2}, {"source": "Toussaint", "target": "Javert", "value": 1}, {"source": "Toussaint", "target": "Valjean", "value": 1}, {"source": "Child1", "target": "Gavroche", "value": 2}, {"source": "Child2", "target": "Gavroche", "value": 2}, {"source": "Child2", "target": "Child1", "value": 3}, {"source": "Brujon", "target": "Babet", "value": 3}, {"source": "Brujon", "target": "Gueulemer", "value": 3}, {"source": "Brujon", "target": "Thenardier", "value": 3}, {"source": "Brujon", "target": "Gavroche", "value": 1}, {"source": "Brujon", "target": "Eponine", "value": 1}, {"source": "Brujon", "target": "Claquesous", "value": 1}, {"source": "Brujon", "target": "Montparnasse", "value": 1}, {"source": "Mme.Hucheloup", "target": "Bossuet", "value": 1}, {"source": "Mme.Hucheloup", "target": "Joly", "value": 1}, {"source": "Mme.Hucheloup", "target": "Grantaire", "value": 1}, {"source": "Mme.Hucheloup", "target": "Bahorel", "value": 1}, {"source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1}, {"source": "Mme.Hucheloup", "target": "Gavroche", "value": 1}, {"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1} ] })34:[] 2f:{"id":"877d94a7b24663b1","slug":"groupedgraph","title":"groupedGraph","thumbnail":"abccf86b62c4fc9b428e0865fb7bdb51560339ff7d5c9087447db62f775a80cd","access_level":"public","create_time":"$D2022-01-05T15:21:49.713Z","update_time":"$D2022-11-24T19:42:19.166Z","view_time":null,"first_public_time":"$D2022-01-05T16:42:55.866Z","fork":false,"stars":25,"starred":false,"owner":{"type":"team","id":"32362545e9f3330d","login":"kallewesterling","name":"Kalle Westerling","avatar_url":"https://avatars-next.observableusercontent.com/f759a45dfbde6f2da561a90bcc8852bd0efd30d6a12ae3031f4d0bedc2464b65","tier":"starter_2024"},"version":788,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a4098a3e48d12fd5","login":"kallewesterling","name":"Kalle Westerling","avatar_url":"https://avatars-next.observableusercontent.com/f759a45dfbde6f2da561a90bcc8852bd0efd30d6a12ae3031f4d0bedc2464b65","tier":null}],"members":[{"type":"individual","id":"a4098a3e48d12fd5","login":"kallewesterling","name":"Kalle Westerling","avatar_url":"https://avatars-next.observableusercontent.com/f759a45dfbde6f2da561a90bcc8852bd0efd30d6a12ae3031f4d0bedc2464b65","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":17,"collection":null,"type":"notebook","body":{"title":"groupedGraph","cells":[{"id":0,"value":"# `groupedGraph`\n## Grouping nodes in a Force-Directed Graph\n\nThis is a construction of a network visualization that:\n\n- ports the bl.ocks.org created by [Xavier Gimenez](http://bl.ocks.org/XavierGimenez) (found [here](https://bl.ocks.org/XavierGimenez/a8e8c5e9aed71ba96bd52332682c0399)) into Observable's format,\n- makes it reusable for other intents and purposes.\n\nGreat features:\n\n- Clear grouping of nodes in different groups.\n- The nodes and the groups are draggable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":267,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":6,"value":"## Example\n\nThe example below is the Les Miserables dataset that Xavier Gimenez provided in his original visualization. The data can be found [below](#miserables).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":11,"value":"viewof margin = Inputs.range([1, 3], {\n value: 1.2,\n step: 0.1,\n label: \"Scale of the groups\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"viewof curveType = Inputs.select(['curveBasisClosed', 'curveCardinalClosed', 'curveCatmullRomClosed', 'curveLinearClosed'], {label: 'Type of curve', value: 'curveCatmullRomClosed'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"groupedGraph(miserables, {\n margin: margin,\n curve: curveType\n}).node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":285,"value":"## Usage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":478,"value":"### Use in Your Own Notebook\n\nUsing this construction in your own notebook is very easy. Just add the following line in one cell and run it:\n\n```js\nimport { groupedGraph } from '@kallewesterling/groupedgraph'\n```\n\nNow you’re all ready to implement the visualization above in your own notebook. But you will likely want to use your own data? No problem — just follow the instructions below, and it should be no problems. If you have any issues, drop me a DM on Twitter and I'd be happy to take a look: [@kallewesterling](https://www.twitter.com/kallewesterling)\n\n_For a more detailed walk-through of the possible settings, see below._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":495,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":318,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":786,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":525,"value":"## Examples\n\nHere are some examples to illustrate what you can do.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":785,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":784,"value":"### Adding labels\n\nYou can easily add labels for your nodes, and change the label styles.\n\nTry changing things around in the script below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":783,"value":"groupedGraph(miserables, {\n height: 350,\n label: (node) => node.id,\n labelStyle: {\n fontSize: 12,\n fontFamily: \"serif\",\n color: true\n }\n}).node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":782,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":527,"value":"### Change the colors and other styling\n\nHere, we have added an ordinal `color` scale for the groups.\n\nAlso added is some other styling. Try changing it below to see what happens.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":533,"value":"groupedGraph(miserables, {\n height: 350,\n color: d3.scaleOrdinal().range([\"#ff8c00\", \"#d0743c\", \"#a05d56\"]),\n nodeStyle: {\n stroke: \"black\",\n strokeWidth: \"1px\"\n },\n strokeStyle: {\n color: \"green\",\n opacity: 0.1\n },\n groupStyle: {\n fillOpacity: 0.4,\n strokeOpacity: 0.6\n }\n}).node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":779,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":539,"value":"### Hovering\n\nTo see the result of this example, open the developer tools in your browser, and look at the Console as you hover over nodes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":543,"value":"groupedGraph(miserables, {\n onHover: (evt, d) => {\n console.log(d.id, \"is in group\", d.group);\n }\n}).node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":778,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":777,"value":"### Exclude certain groups from clustering\n\nTo exclude certain groups from clustering, you just need to pass an array of the group IDs to exclude as `excludeGroups`. See below for an example.\n\n**Bonus:** You will also see that `fade` is set to `false` here, which prevents the fade in whenever the graph re-renders.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":776,"value":"viewof excludeGroups = {\n const validGroups = d3\n .groups(miserables.nodes, (d) => d.group)\n .filter((d) => d[1].length > 3)\n .map((d) => d[0])\n .sort();\n\n return Inputs.select(validGroups, {\n label: \"Exclude groups from graph\",\n multiple: true,\n value: [0, 1, 2, 3]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":775,"value":"groupedGraph(miserables, {\n height: 350,\n excludeGroups: excludeGroups,\n fade: false\n}).node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":521,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":774,"value":"## All possible settings\n\nWhile the examples above showcases what the package can do, here's a walk-through of all the options that you can pass to the `groupedGraph` call.\n\nThe only required setting (when running on Observable, at least) is the `graph` setting. It should follow the [miserables](#miserables) example below. Here is a quick explanation of the format:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":773,"value":"```json\n{\n \"nodes\": [\n {\n \"id\": \"Napoleon\",\n \"group\": 1\n },\n {\n \"id\": \"Mme.Hucheloup\",\n \"group\": 2\n },\n {\n \"id\": \"Myriel\",\n \"group\": 3\n },\n ...\n ],\n \"links\": [\n {\n \"source\": \"Napoleon\",\n \"target\": \"Myriel\",\n \"value\": 1\n },\n {\n \"source\": \"Mlle.Baptistine\",\n \"target\": \"Myriel\",\n \"value\": 8\n },\n ...\n ]\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":772,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":771,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":279,"value":"## Error messaging\n\nI have added some error messaging so that it should be clear when the construction is wrong, like below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":231,"value":"groupedGraph()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":458,"value":"groupedGraph({\n nodes: [],\n links: []\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":462,"value":"groupedGraph({\n nodes: [],\n links: [\n {\n source: \"source-id\",\n target: \"target-id\"\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":465,"value":"groupedGraph(miserables, {\n groupX: [100, 200, 300]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":624,"value":"**Note:** Forgetting to access the `.node()` method at the end of the function call (or whichever variable you may have assigned the SVG node to) will _not_ produce an error (because it isn’t) but instead results in a `d3` \"selection\" like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":622,"value":"groupedGraph(miserables)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":37,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"polygonGenerator = function(groupId, node) {\n // select nodes of the group, retrieve its positions and return the convex hull of the specified points\n // (3 points as minimum, otherwise returns null)\n \n var node_coords = node\n .filter(d => d.group == groupId)\n .data()\n .map(d => [d.x, d.y]);\n \n return d3.polygonHull(node_coords);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"function updateGroups(paths, groupIds, node, curve, margin) {\n const valueline = d3.line()\n .x(d => d[0])\n .y(d => d[1])\n .curve(d3[curveType])\n\n groupIds.forEach(groupId => {\n let centroid = [];\n let path = paths.filter(d => d == groupId)\n .attr('transform', 'scale(1) translate(0,0)')\n .attr('d', d => {\n const polygon = polygonGenerator(d, node); \n centroid = d3.polygonCentroid(polygon);\n\n // to scale the shape properly around its points: move the 'g' element to the centroid point, translate\n // all the path around the center of the 'g' and then we can scale the 'g' element properly\n return valueline(polygon.map(point => [point[0] - centroid[0], point[1] - centroid[1]]));\n });\n\n d3.select(path.node().parentNode)\n .attr('transform', 'translate(' + centroid[0] + ',' + (centroid[1]) + ') scale(' + margin + ')');\n\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":24,"value":"basicStyling = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":573,"value":"ClickedElement = ({message: undefined})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"