2f:Tc24,network = { // first add the locations to the nodes list, from the locations lookup table. This assumes they are not already in there. // if the links file already has locations, this step is not needed. nodes.forEach(d => { d.lat = locations[d.id].lat; d.lon = locations[d.id].lon; }); // build the dots. Here they are mapped onto the us map using the projection. // if this were not on a map, you would not use the projection and only tell it the x and y field from the data to use. let nodeDots = mapViz.select("#nodes").selectAll(".node").data(nodes).join("circle") .attr("r",5) .attr("cx", d=>projection([d.lon,d.lat])[0]) .attr("cy", d=>projection([d.lon,d.lat])[1]) .classed("node",true); // and now the link lines or curves between source and destination. let linkLines = mapViz.select("#nodes").selectAll(".link").data(links).join("path") .classed("link",true) .attr("d", d=> { let sourceNode = nodes.find(n => n.id == d.source); let targetNode = nodes.find(n => n.id == d.target); let sourceLoc = projection([sourceNode.lon,sourceNode.lat]); let targetLoc = projection([targetNode.lon,targetNode.lat]); let sourceXY = sourceLoc[0] + " " + sourceLoc[1]; let targetXY = targetLoc[0] + " " + targetLoc[1]; // There are two options for the links: // straight lines between nodes. //let pathString = "M" + sourceXY + " L" + targetXY; // Uncomment this line to use this // or arcs between nodes let arcMultiplier = 1.5; // this scale factor flattens or rounds the arc, and could calculate from a data value var dx = sourceLoc[1] - sourceLoc[0], dy = targetLoc[1] - targetLoc[0], dr = Math.sqrt(dx * dx + dy * dy) * arcMultiplier; let pathString = "M" + sourceLoc[0] + "," + sourceLoc[1] + "A" + dr + "," + dr + " 0 0,1 " + targetLoc[0] + "," + targetLoc[1]; return pathString; }) .attr("marker-end", "url(#arrow)") // this arrow can be included or commented out. .style("stroke-width", d => Math.random()*3 + "px") // instead of random in the example, this could be from a data field. .style("stroke", "#aa5") // here one color, but can also be be based on data. .attr("id", d=> "link_" + d.source + "-" +d.target); let nodeText = mapViz.select("#nodes").selectAll(".nodeText").data(nodes).join("text") .classed("nodeText",true) .text(d => d["id"]) .attr("dx", 8) .attr("transform", d => { let loc = projection([d.lon,d.lat]) return "translate(" + loc[0] + "," + loc[1] +")"; }) let linkText = mapViz.select("#nodes").selectAll(".linkText").data(links).join("text") .classed("linkText",true) .attr("dy", -5) .append("textPath") .text(d => d["type"]) .attr("xlink:href", d => "#link_" + d.source + "-" +d.target) // attach it to the id of the curve .style("text-anchor", "middle") .attr("startOffset", "50%"); return [nodeDots,linkLines,nodeText,linkText]; }30:[{"id":"e53b86b10f7c4353ee7b827fc45e95989b2759ba93ecb1b690e0a6fdc221a7872696b0b68ef56af06fa98061bdef81410d47f5d5dc3f7e8787973f1150c5e137","href":"https://static.observableusercontent.com/files/e53b86b10f7c4353ee7b827fc45e95989b2759ba93ecb1b690e0a6fdc221a7872696b0b68ef56af06fa98061bdef81410d47f5d5dc3f7e8787973f1150c5e137","name":"lawsuits.csv","type":"text/csv","lastModified":1683598993252.3,"size":612}] 2d:{"title":"Add text labels to Fixed location Network Graph","cells":[{"id":0,"value":"# Add text labels to Fixed location Network Graph\nThis get's a little messy, but shows how to add text labels at the nodes and along the midpoint of the curves.\n\n**Source -> Target data links** \nIn this case drawn on a map (using the map projection) for demonstration, but this could just as readily be done without the map underlay using just fixed X,Y locations on the page rather than lat,long values","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":372,"value":"The `links` data is brought in as a CSV, and contains `source` and `target` fields. In this case the links data file does not include any location (lat,long or x,y), but it could.","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"links = FileAttachment(\"lawsuits.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"links","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"### Create the nodes list from the links \ngathering both of the source and target records into one list to build the complete set of dots.","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"import {nodesFromLinks} with {nodes} from \"@emfielduva/dvlib_layout\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"nodes = nodesFromLinks(links)","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"### Then they need locations, either lat,long or x,y. \nHere I'm building a dummy dataset of locations as a lookup table, but this would more likely be brought in as a CSV file attachment.","pinned":false,"hidden":false,"mode":"md"},{"id":152,"value":"locations = { // create a lookup table of locations. this might more likely be an uploaded dataset\n let locs = [];\n links.forEach(d => {\n let nameS = d.source;\n let lonS = -118 + Math.random()*40;\n let latS = 30 + Math.random()*20;\n \n let nameT = d.target;\n let lonT = -118 + Math.random()*40;\n let latT = 30 + Math.random()*20;\n \n let source = {\"lat\": latS, \"lon\": lonS};\n let target = {\"lat\": latT, \"lon\": lonT};\n locs[nameS] = source;\n locs[nameT] = target;\n });\n return locs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"### then build the network graph","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"---\n## The map base underlay\nJust for show. \nFrom the regular [map examples](https://observablehq.com/@emfielduva/maps_corecode?collection=@emfielduva/maps).","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"projection = d3.geoAlbers()","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"import {getMapData, drawMapLayer} with {projection} from \"@emfielduva/dvlib_maps\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"usstates = getMapData(\"us_states20m\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"mapViz = d3.select(svg)","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"mapLayers = {\n let mapLayers = [];\n mapLayers[\"usstates\"] = drawMapLayer(mapViz,\"usstates\",usstates.features,\"properties.NAME\");\n return mapLayers;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}