ASP.NET Core Sankey Diagram – Powerful and Interactive Visualization

<div class="control-section" align="center">
        <ejs-sankey id="sankey-container" title="Device Usage">
            <e-sankey-nodes>
                @foreach (var node in Model.Nodes)
                {
                    <e-sankey-node id="@node.Id" color="@node.Color"></e-sankey-node>
                }
            </e-sankey-nodes>
            <e-sankey-links>
                @foreach (var link in Model.Links)
                {
                    <e-sankey-link sourceId="@link.SourceId" targetId="@link.TargetId" value="@link.Value"></e-sankey-link>
                }
            </e-sankey-links>
            <e-sankey-nodesettings width="30" padding="10"></e-sankey-nodesettings>
            <e-sankey-linksettings colorType="Source"></e-sankey-linksettings>
            <e-sankey-legendsettings visible="true" position="Bottom"></e-sankey-legendsettings>
        </ejs-sankey>
</div>

public class HomeController : Controller 
{
    public ActionResult Index() 
    {  
        public class SankeyNode
        {
            public string Id { get; set; } = "";
            public string? Color { get; set; }
        }

        public class SankeyLink
        {
            public string SourceId { get; set; } = "";
            public string TargetId { get; set; } = "";
            public double Value { get; set; }
        }

        public List<SankeyNode> Nodes { get; set; } = new();
        public List<SankeyLink> Links { get; set; } = new();

        public void OnGet()
        {
            Nodes = new()
            {
                new SankeyNode { id = "Female", label = new { text = "Female (58%)" } },
                new SankeyNode { id = "Male", label = new { text = "Male (42%)" } },
                new SankeyNode { id = "Tablet", label = new { text = "Tablet (12%)" } },
                new SankeyNode { id = "Mobile", label = new { text = "Mobile (40%)" } },
                new SankeyNode { id = "Desktop", label = new { text = "Desktop (48%)" } },
                new SankeyNode { id = "< 18", label = new { text = "< 18 years (8%)" } },
                new SankeyNode { id = "18-26", label = new { text = "18-26 years (35%)" } },
                new SankeyNode { id = "27-40", label = new { text = "27-40 years (38%)" } },
                new SankeyNode { id = "> 40", label = new { text = "> 40 years (19%)" } }
            };

            Links = new()
            {
                new SankeyLink { sourceId = "Female", targetId = "Tablet", value = 12 },
                new SankeyLink { sourceId = "Female", targetId = "Mobile", value = 14 },
                new SankeyLink { sourceId = "Female", targetId = "Desktop", value = 32 },
                new SankeyLink { sourceId = "Male", targetId = "Mobile", value = 26 },
                new SankeyLink { sourceId = "Male", targetId = "Desktop", value = 16 },
                new SankeyLink { sourceId = "Tablet", targetId = "< 18", value = 4 },
                new SankeyLink { sourceId = "Tablet", targetId = "> 40", value = 8 },
                new SankeyLink { sourceId = "Mobile", targetId = "< 18", value = 4 },
                new SankeyLink { sourceId = "Mobile", targetId = "18-26", value = 24 },
                new SankeyLink { sourceId = "Mobile", targetId = "27-40", value = 10 },
                new SankeyLink { sourceId = "Mobile", targetId = "> 40", value = 2 },
                new SankeyLink { sourceId = "Desktop", targetId = "18-26", value = 11 },
                new SankeyLink { sourceId = "Desktop", targetId = "27-40", value = 28 },
                new SankeyLink { sourceId = "Desktop", targetId = "> 40", value = 9 }
            };
        }
    }
}