31:Tcf5,# Improved Sankey paths II Paths are a key visual element in Sankey diagrams. Sankey diagrams can be seen as a particular way of representing graphs representing flow between entities of a given process, such as the production and consumption of different kinds of energies in the energy matrix of a country. Thus, the entities are nodes in the graphs, typically drawn as rectangles, whereas paths are edges of the graph, typically represented as cubic Bézier curves with thickness proportional to the amount of flow. There is, however, a problem when a thick path curve must bridge two nodes that are too close to each other in the direction of the flow but too distant in the direction perpendicular to the flow. In this case, the algorithm to draw thick Bézier curves may result in severe visual artifacts. Moreover, if there are several _parallel_ paths linking the same source and target nodes, these will very likely overlap each other. In this notebook we show **two** methods that aim at improving the Bézier approach. ## Separate Bézier curves This is an improved version of a method first presented [here](https://observablehq.com/@esperanc/improved-sankey-paths). The idea is to use two separate Bézier curves delimiting each side of the path and estimating the control points of each curve by taking into account the geometry of the separation between the nodes. In rough lines, the algorithm is the following: 1. A reference line segment between the two nodes is computed. 2. A line segment perpendicular to the reference line passing through its center and having length equal to the breadth of the path is computed; 3. The two endpoints of this line segment are used for computing the two middle control points of each curve. An important issue is how to define the reference line segment. - A reasonable alternative is to choose the middle point of the _path_ as it touches the two nodes. This works fine, but it may cause overlap between parallel paths joining the same source and target nodes. - Another option is to use the middle of the source/target _node_ as endpoints. In this case, parallel paths never overlap, although some paths connecting a source node to different target nodes (and vice-versa) might still overlap. For very skewed paths, the reference line may become too inclined with respect to the flow direction, which may cause unseemly deformations in the path shape. Thus, it is useful to impose a restriction to this _inclination angle_. By default, we allow up to 30 degrees inclination, but this limit can also be tuned. Note that allowing no inclination leads to non-overlapping paths in all cases, but will result in 'pinched' paths. The curviness of the path can also be adjusted with a _bias_ parameter, which control how far away the two middle control points are placed with respect to the two end points. ## Circle arcs The second idea consists of creating paths by stitching together two arcs - one for the source node and another for the target node - joined by a line segment that is a tangent to the two circles. The overall aspect of the curve can also be tuned using a _bias_ parameter, which control the circles' radii. The following demo allows you to draw a simplified Sankey diagram with two layers and play with these parameters.32:T489,viewof demoParms = Inputs.form({ width: Inputs.range([100, 800], { label: "width", value: 300, step: 1 }), height: Inputs.range([300, 800], { label: "height", value: 500, step: 1 }), nleft: Inputs.range([1, 10], { label: "nodes left", step: 1, value: 3 }), nright: Inputs.range([1, 10], { label: "nodes right", step: 1, value: 5 }), nodeWidth: Inputs.range([1, 50], { label: "node width", step: 1, value: 15 }), spaceRatio: Inputs.range([0.1, 0.5], { label: "white space ratio", step: 0.01, value: 0.25 }), bias: Inputs.range([0, 2], { label: "bias", value: 1, step: 0.05 }), maxAngle: Inputs.range([0, 60], { label: "maximum angle for reference line", value: 30, step: 1 }), refLine: Inputs.radio(["path", "node", "layer"], { label: "reference line for improved method", value: "node" }), pathDrawing: Inputs.radio(["standard", "improved", "arcs"], { label: "path drawing algorithm", value: "improved" }), diagramOrientation: Inputs.radio(["horizontal", "vertical"], { label: "diagram orientation", value: "horizontal" }) })33:T8e1,{ const canvas = htl.html`