element provides an accessible, short-text description of any SVG container element or graphics element. //Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. link.append("title") .text(d => d.type); const edgepaths = svg.selectAll(".edgepath") //make path go along with the link provide position for link labels .data(dataset.links) .enter() .append('path') .attr('class', 'edgepath') .attr('fill-opacity', 0) .attr('stroke-opacity', 0) .attr('id', function (d, i) {return 'edgepath' + i}) .style("pointer-events", "none"); const edgelabels = svg.selectAll(".edgelabel") .data(dataset.links) .enter() .append('text') .style("pointer-events", "none") .attr('class', 'edgelabel') .attr('id', function (d, i) {return 'edgelabel' + i}) .attr('font-size', 10) .attr('fill', '#aaa'); edgelabels.append('textPath') //To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. .attr('xlink:href', function (d, i) {return '#edgepath' + i}) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text(d => d.type); // Initialize the nodes const node = svg.selectAll(".nodes") .data(dataset.nodes) .enter() .append("g") .attr("class", "nodes") .call(d3.drag() //sets the event listener for the specified typenames and returns the drag behavior. .on("start", dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart). .on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove). //.on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). ); node.append("circle") .attr("r", d=> 5 + d.importance/2 ) .style("stroke", "grey") .style("stroke-opacity",0.3) .style("stroke-width", d => d.importance/10) .style("fill", d => colorScale(d.group)) node.append("title") .text(d => d.id + "\n" + d.label + " \n\n- " + d.group); node.append("text") .attr("dy", 4) .attr("dx", -15) .text(d => d.id); //Listen for tick events to render the nodes as they update in your Canvas or SVG. simulation .nodes(dataset.nodes) .on("tick", ticked); simulation.force("link") .links(dataset.links); // This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated). function ticked() { 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("transform", d => `translate(${d.x},${d.y})`); edgepaths.attr('d', d => 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y); } //When the drag gesture starts, the targeted node is fixed to the pointer //The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value. function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart();//sets the current target alpha to the specified number in the range [0,1]. d.fy = d.y; //fx - the node’s fixed x-position. Original is null. d.fx = d.x; //fy - the node’s fixed y-position. Original is null. } //When the drag gesture starts, the targeted node is fixed to the pointer function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } //drawing the legend const legend_g = svg.selectAll(".legend") .data(colorScale.domain()) .enter().append("g") .attr("transform", (d, i) => `translate(${width},${i * 20})`); legend_g.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 5) .attr("fill", colorScale); legend_g.append("text") .attr("x", 10) .attr("y", 5) .text(d => d); return div }</article></body></html>

myChart={ const div = html`

`; const svg = d3.select(div) .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); //appending little triangles, path object, as arrowhead //The element is used to store graphical objects that will be used at a later time //The element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given , , or element. svg.append('defs').append('marker') .attr("id",'arrowhead') .attr('viewBox','-0 -5 10 10') //the bound of the SVG viewport for the current SVG fragment. defines a coordinate system 10 wide and 10 high starting on (0,-5) .attr('refX',23) // x coordinate for the reference point of the marker. If circle is bigger, this need to be bigger. .attr('refY',0) .attr('orient','auto') .attr('markerWidth',13) .attr('markerHeight',13) .attr('xoverflow','visible') .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#999') .style('stroke','none'); //create some data const dataset = { nodes: [ //Organisations {id: 'Cult of 3', label: 'The villains of this campaign', group: 'Organisations', importance: 40}, {id: 'Council of 6', label: 'The council of houses running Athkatla', group: 'Organisations', importance: 40}, {id: 'Slavers', label: 'Slavers', group: 'Organisations', importance: 20}, {id: 'Drug Cartel', label: 'Drug Cartel', group: 'Organisations', importance: 20}, {id: 'Cowled Wizards', label: 'Cowled Wizards', group: 'Organisations', importance: 20}, {id: 'City Watch', label: 'City Watch', group: 'Organisations', importance: 10}, {id: 'Thieves Guild', label: 'Thieves Guild', group: 'Organisations', importance: 20}, {id: 'Merchant Coalition', label: 'Merchant Coalition', group: 'Organisations', importance: 10}, {id: 'Red Wizards', label: 'Red Wizards', group: 'Organisations', importance: 20}, //Houses {id: 'House Gavalrey', label: 'Gavalrey', group: 'Houses', importance: 10}, {id: 'House Vulova', label: 'Vulova', group: 'Houses', importance: 10}, {id: 'House Farrahd', label: 'Farrahd', group: 'Houses', importance: 10}, {id: 'House Roenall', label: 'Roenall', group: 'Houses', importance: 20}, {id: 'House De Arnise', label: 'De Arnise', group: 'Houses', importance: 10}, {id: 'House Delryn', label: 'House Delryn', group: 'Houses', importance: 20}, {id: 'House Drakenhoff', label: 'House Drakenhoff', group: 'Houses', importance: 10}, {id: 'House Procator', label: 'Procator', group: 'Houses', importance: 10}, {id: 'House Gysstev', label: 'Gysstev', group: 'Houses', importance: 10}, //Characters {id: "Hareishan", label: 'Vampire on the drug cartel. DEAD', group: 'Characters', importance: 10}, {id: "Voros", group: 'Characters', importance: 10}, {id: "Woman Dealer", group: 'Characters', importance: 10}, {id: "Moira Delryn", group: 'Characters', importance: 10}, {id: "Lord Delryn", group: 'Characters', importance: 10}, {id: "Diego", label: "The snake guy from the mines", group: 'Characters', importance: 20}, {id: "Diego's boss", label: "Unknown. Wants the book of Cyric.", group: 'Characters', importance: 20}, //Slavers {id: "Bleiz", group: 'Characters', importance: 10}, {id: "Eric", group: 'Characters', importance: 5}, {id: "Rell", group: 'Characters', importance: 5}, {id: "Jan", group: 'Characters', importance: 5}, {id: "Declan", group: 'Characters', importance: 5}, {id: "Scallop", group: 'Characters', importance: 5}, {id: "Elina", group: 'Characters', importance: 5}, {id: "Thumb", group: 'Characters', importance: 10}, {id: "Lehtinan", group: 'Characters', importance: 10}, {id: "Haegan", group: 'Characters', importance: 10}, {id: "Yuan ti Leader", group: 'Characters', importance: 10}, {id: "Hendak", group: 'Characters', importance: 10}, {id: "Ketta", group: 'Characters', importance: 10}, {id: "Koshi", group: 'Characters', importance: 10}, {id: "Sion", group: 'Characters', importance: 10}, {id: "Stahlman", group: 'Characters', importance: 10}, {id: "Maferon", group: 'Characters', importance: 10}, {id: "Olaf Rassmussen", group: 'Characters', importance: 10}, {id: "Dirth", group: 'Characters', importance: 10}, {id: "Isaea Roenall", group: 'Characters', importance: 10}, // {id: "Gaelan Bale", group: 'Characters', importance: 10}, {id: "Idra", group: 'Characters', importance: 10}, //Cowled Wizards {id: "Tolgerias", group: 'Characters', importance: 10}, {id: "Rayic Gethras", group: 'Characters', importance: 10}, {id: "Farl Deverell", group: 'Characters', importance: 10 }, {id: 'Cromwell', label: 'Cromwell', group: 'Characters', importance: 10}, {id: 'Ribald', label: 'Ribald', group: 'Characters', importance: 10}, {id: "Althonal Procator", group: 'Characters', importance: 10}, //The Cult of the 3 {id: "Venyra", group: 'Villains', importance: 20}, {id: "Shay/Nilex Laharo/Abomination", group: 'Villains', importance: 20}, {id: "Varrow Nightshade/Human Necromancer", group: 'Villains', importance: 20}, {id: "Armored Guy", group: 'Villains', importance: 20}, {id: "Master Dace", group: 'Characters', importance: 10}, {id: "Tarana Lyr", label: "Red hair woman. follower of Bane", group: 'Villains', importance: 20}, {id: "Gorm", group: 'Villains', importance: 10}, {id: "Mercher", group: 'Characters', importance: 10} ], links: [ //Council of 6 {source: 'House Delryn', target: 'Council of 6', type: 'member of'}, {source: 'House Roenall', target: 'Council of 6', type: 'member of'}, {source: 'House Farrahd', target: 'Council of 6', type: 'member of'}, {source: 'House Gavalrey', target: 'Council of 6', type: 'member of'}, {source: 'House Gysstev', target: 'Council of 6', type: 'member of'}, {source: 'House Vulova', target: 'Council of 6', type: 'member of'}, //Cult of 3 {source: "Shay/Nilex Laharo/Abomination", target: "Venyra", type: 'mentor of'}, {source: "Armored Guy", target: "Tarana Lyr", type: 'mentor of'}, {source: "Armored Guy", target: 'Cult of 3', type: 'leader of'}, {source: "Shay/Nilex Laharo/Abomination", target: 'Cult of 3', type: 'leader of'}, {source: "Varrow Nightshade/Human Necromancer", target: 'Cult of 3', type: 'leader of'}, //Merchant Coalition {source: "Sion", target: 'Merchant Coalition', type: 'leader of'}, {source: 'Cromwell', target: 'Merchant Coalition', type: 'leader of'}, {source: 'Ribald', target: 'Merchant Coalition', type: 'leader of'}, //Houses {source: "Isaea Roenall", target: 'House Roenall', type: 'member of'}, {source: "Moira Delryn", target: 'House Delryn', type: 'member of'}, {source: "Lord Delryn", target: 'House Delryn', type: 'leader of'}, {source: "Althonal Procator", target: 'House Procator', type: 'member of'}, {source: 'House Farrahd', target: 'House Drakenhoff', type: 'allies'}, {source: 'House Farrahd', target: 'House Roenall', type: 'allies'}, {source: 'House Farrahd', target: 'House Delryn', type: 'enemies'}, //Slavers {source: "Ketta", target: 'Slavers', type: 'leader of'}, {source: "Koshi", target: 'Slavers', type: 'leader of'}, {source: "Sion", target: 'Slavers', type: 'leader of'}, {source: "Stahlman", target: 'Slavers', type: 'leader of'}, {source: "Maferon", target: 'Slavers', type: 'leader of'}, {source: "Olaf Rassmussen", target: 'Slavers', type: 'leader of'}, {source: "Yuan ti Leader", target: "Haegan", type: 'working with'}, {source: "Haegan", target: 'Slavers', type: 'member of'}, {source: "Bleiz", target: "Haegan", type: 'dealing with'}, {source: "Isaea Roenall", target: "Haegan", type: 'finds slaves for'}, {source: "Yuan ti Leader", target: "Shay/Nilex Laharo/Abomination", type: 'enhanced by?'}, {source: "Dirth", target: "Haegan", type: 'bribed by'}, {source: "Eric", target: "Bleiz", type: 'ex-goon of'}, {source: "Rell", target: "Bleiz", type: 'goon of'}, {source: "Jan", target: "Bleiz", type: 'goon of'}, {source: "Declan", target: "Bleiz", type: 'goon of'}, {source: "Scallop", target: "Eric", type: 'sick brother of'}, {source: "Thumb", target: "Bleiz", type: 'goon of'}, //Drug Cartel {source: "Woman Dealer", target: 'Drug Cartel', type: 'member of'}, {source: "Hareishan", target: 'Drug Cartel', type: 'member of'}, {source: "Master Dace", type: 'ex-leader of', target: 'Hareishan'}, {source: "Tarana Lyr", target: 'Drug Cartel', type: 'member of'}, {source: "Gorm", target: 'Drug Cartel', type: '???'}, {source: "Mercher", target: 'Drug Cartel', type: 'recruited by'}, {source: "Tarana Lyr", target: 'Hareishan', type: 'approached'}, {source: "Moira Delryn", target: 'Hareishan', type: 'captured by'}, //Cowled Wizards {source: "Tolgerias", type: 'member of', target: 'Cowled Wizards'}, {source: "Rayic Gethras", type: 'member of', target: 'Cowled Wizards'}, {source: "Farl Deverell", type: 'member of', target: 'Cowled Wizards'}, {source: "Farl Deverell", type: 'helps', target: 'Rayic Gethras'}, {source: "Tolgerias", type: 'enemy of', target: 'Rayic Gethras'}, {source: "Rayic Gethras", type: 'enemy of', target: 'Tolgerias'}, //Thieves Guild {source: "Idra", target: 'Thieves Guild', type: 'member of'}, {source: "Gaelan Bale", target: 'Thieves Guild', type: 'facilitated'}, //City Watch {source: "Dirth", target: 'City Watch', type: 'officer of'}, {source: "Isaea Roenall", target: 'City Watch', type: 'officer of'}, //OTHER {source: "Gaelan Bale", target: "Venyra", type: 'facilitated'}, {source: "Diego", target: "Althonal Procator", type: 'wants book of Cyric from'}, {source: "Althonal Procator", target: "Diego", type: 'bought marked book from'}, {source: "Diego", target: "Red Wizards", type: 'works with'}, {source: "Diego", target: "Diego's boss", type: 'works for'}, ] }; // Initialize the links const link = svg.selectAll(".links") .data(dataset.links) .enter() .append("line") .attr("class", "links") .attr('marker-end','url(#arrowhead)') //The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape. //The element provides an accessible, short-text description of any SVG container element or graphics element. //Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. link.append("title") .text(d => d.type); const edgepaths = svg.selectAll(".edgepath") //make path go along with the link provide position for link labels .data(dataset.links) .enter() .append('path') .attr('class', 'edgepath') .attr('fill-opacity', 0) .attr('stroke-opacity', 0) .attr('id', function (d, i) {return 'edgepath' + i}) .style("pointer-events", "none"); const edgelabels = svg.selectAll(".edgelabel") .data(dataset.links) .enter() .append('text') .style("pointer-events", "none") .attr('class', 'edgelabel') .attr('id', function (d, i) {return 'edgelabel' + i}) .attr('font-size', 10) .attr('fill', '#aaa'); edgelabels.append('textPath') //To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. .attr('xlink:href', function (d, i) {return '#edgepath' + i}) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text(d => d.type); // Initialize the nodes const node = svg.selectAll(".nodes") .data(dataset.nodes) .enter() .append("g") .attr("class", "nodes") .call(d3.drag() //sets the event listener for the specified typenames and returns the drag behavior. .on("start", dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart). .on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove). //.on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). ); node.append("circle") .attr("r", d=> 5 + d.importance/2 ) .style("stroke", "grey") .style("stroke-opacity",0.3) .style("stroke-width", d => d.importance/10) .style("fill", d => colorScale(d.group)) node.append("title") .text(d => d.id + "\n" + d.label + " \n\n- " + d.group); node.append("text") .attr("dy", 4) .attr("dx", -15) .text(d => d.id); //Listen for tick events to render the nodes as they update in your Canvas or SVG. simulation .nodes(dataset.nodes) .on("tick", ticked); simulation.force("link") .links(dataset.links); // This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated). function ticked() { 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("transform", d => `translate(${d.x},${d.y})`); edgepaths.attr('d', d => 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y); } //When the drag gesture starts, the targeted node is fixed to the pointer //The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value. function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart();//sets the current target alpha to the specified number in the range [0,1]. d.fy = d.y; //fx - the node’s fixed x-position. Original is null. d.fx = d.x; //fy - the node’s fixed y-position. Original is null. } //When the drag gesture starts, the targeted node is fixed to the pointer function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } //drawing the legend const legend_g = svg.selectAll(".legend") .data(colorScale.domain()) .enter().append("g") .attr("transform", (d, i) => `translate(${width},${i * 20})`); legend_g.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 5) .attr("fill", colorScale); legend_g.append("text") .attr("x", 10) .attr("y", 5) .text(d => d); return div }</article></body></html>