Spaces:

singhn9
/

AMCAnalysis

Sleeping

App Files Files Community

singhn9 commited on Nov 14, 2025

Commit

ce7273b

verified ·

1 Parent(s): 10676c2

Update graph.html

Browse files

Files changed (1) hide show

graph.html +418 -0

graph.html CHANGED Viewed

	@@ -0,0 +1,418 @@

+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>MF Churn Diagram</title>
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<style>
+body {
+    margin: 0;
+    background: white;
+    font-family: sans-serif;
+}
+</style>
+</head>
+<body>
+<!-- Main container -->
+<div id="arc-container" style="width:100%; height:800px;"></div>
+<!-- Reset button -->
+<div style="margin:12px;">
+    <button id="arc-reset"
+        style="padding:8px 14px; font-size:15px; border-radius:6px; background:#eee;">
+        Reset View
+    </button>
+</div>
+<!-- Legend -->
+<div style="margin:12px; font-size:14px; line-height:1.5;">
+    <b>Legend</b><br>
+    <span style="color:#1a9850; font-weight:bold;">BUY</span>: green solid<br>
+    <span style="color:#d73027; font-weight:bold;">SELL</span>: red dotted<br>
+    <span style="color:#636363; font-weight:bold;">TRANSFER</span>: grey (inferred)<br>
+    <span style="color:#1f9e89; font-weight:bold;">LOOP</span>: teal external arc<br>
+    <small style="color:#666;">Click a node → show full labels outside the circle for that node & connected nodes.</small>
+</div>
+<script>
+// =============================
+// DATA injected inline
+// =============================
+const NODES = [
+"SBI MF","HDFC Bank","ICICI Pru MF","ICICI Bank","HDFC MF","Bajaj Finance",
+"Nippon India MF","Bajaj Finserv","Kotak MF","Adani Ports",
+"UTI MF","Tata Motors","Axis MF","Shriram Finance","Aditya Birla SL MF","HAL",
+"Mirae MF","TCS","DSP MF","AU Small Finance Bank",
+"Pearl Global","Hindalco","Tata Elxsi","Cummins India","Vedanta"
+];
+const NODE_TYPE = {
+"SBI MF":"amc","HDFC Bank":"company","ICICI Pru MF":"amc","ICICI Bank":"company",
+"HDFC MF":"amc","Bajaj Finance":"company","Nippon India MF":"amc","Bajaj Finserv":"company",
+"Kotak MF":"amc","Adani Ports":"company","UTI MF":"amc","Tata Motors":"company",
+"Axis MF":"amc","Shriram Finance":"company","Aditya Birla SL MF":"amc","HAL":"company",
+"Mirae MF":"amc","TCS":"company","DSP MF":"amc","AU Small Finance Bank":"company",
+"Pearl Global":"company","Hindalco":"company","Tata Elxsi":"company","Cummins India":"company",
+"Vedanta":"company"
+};
+// BUY edges: (amc, company, weight)
+const BUYS = [
+["SBI MF","Bajaj Finance",1],["SBI MF","AU Small Finance Bank",1],
+["ICICI Pru MF","HDFC Bank",1],["HDFC MF","Tata Elxsi",3],["HDFC MF","TCS",1],
+["Nippon India MF","Hindalco",1],["Kotak MF","Bajaj Finance",1],
+["UTI MF","Adani Ports",3],["UTI MF","Shriram Finance",1],
+["Axis MF","Tata Motors",1],["Axis MF","Shriram Finance",1],
+["Aditya Birla SL MF","AU Small Finance Bank",1],
+["Mirae MF","Bajaj Finance",1],["Mirae MF","HAL",3],
+["DSP MF","Tata Motors",1],["DSP MF","Bajaj Finserv",1]
+];
+// SELL edges reversed to: (company, amc, weight)
+const SELLS = [
+["Tata Motors","SBI MF",1],
+["Bajaj Finance","ICICI Pru MF",1],["Adani Ports","ICICI Pru MF",1],
+["HDFC Bank","HDFC MF",1],["Hindalco","Nippon India MF",1],
+["AU Small Finance Bank","Kotak MF",1],["Hindalco","UTI MF",1],
+["TCS","UTI MF",1],["TCS","Axis MF",1],["Adani Ports","Aditya Birla SL MF",1],
+["TCS","Mirae MF",1],["HAL","DSP MF",1],["Shriram Finance","DSP MF",3]
+];
+// Transfers: (amc → amc, weight)
+const TRANSFERS = [
+["Kotak MF","SBI MF",1],
+["Axis MF","SBI MF",2],
+["DSP MF","Axis MF",1],
+["DSP MF","UTI MF",1],
+["Axis MF","HDFC MF",1],
+["Nippon India MF","UTI MF",1],
+["DSP MF","ICICI Pru MF",1],
+["UTI MF","Nippon India MF",1],
+["ICICI Pru MF","Axis MF",1],
+["Mirae MF","UTI MF",1],
+["DSP MF","Aditya Birla SL MF",1],
+["HDFC MF","UTI MF",1],
+["ICICI Pru MF","UTI MF",1],
+["IIT??","??",1]  // Safety note: ignore if malformed
+].filter(e => NODE_TYPE[e[0]] && NODE_TYPE[e[1]]); // Remove junk if any
+// Loop edges: (amc, company, amc)
+const LOOPS = [
+["SBI MF","Bajaj Finance","ICICI Pru MF"],
+["Kotak MF","Bajaj Finance","ICICI Pru MF"],
+["Mirae MF","Bajaj Finance","ICICI Pru MF"],
+["UTI MF","Adani Ports","ICICI Pru MF"],
+["Aditya Birla SL MF","Adani Ports","ICICI Pru MF"],
+["HDFC MF","HDFC Bank","ICICI Pru MF"],
+["Nippon India MF","Hindalco","UTI MF"],
+["UTI MF","Hindalco","Nippon India MF"],
+["UTI MF","TCS","HDFC MF"],
+["Axis MF","TCS","HDFC MF"],
+["Mirae MF","TCS","HDFC MF"],
+["DSP MF","HAL","Mirae MF"],
+["Axis MF","Shriram Finance","DSP MF"],
+["UTI MF","Shriram Finance","DSP MF"]
+];
+const SHORT_LABEL = {
+"SBI MF":"SBI","HDFC Bank":"HDFCB","ICICI Pru MF":"ICICI","ICICI Bank":"ICICB",
+"HDFC MF":"HDFC","Bajaj Finance":"BajFin","Nippon India MF":"NIPP","Bajaj Finserv":"BajFsv",
+"Kotak MF":"KOT","Adani Ports":"AdPorts","UTI MF":"UTI","Tata Motors":"TataM",
+"Axis MF":"AXIS","Shriram Finance":"ShrFin","Aditya Birla SL MF":"ABSL","HAL":"HAL",
+"Mirae MF":"MIR","TCS":"TCS","DSP MF":"DSP","AU Small Finance Bank":"AUSFB",
+"Pearl Global":"PearlG","Hindalco":"Hind","Tata Elxsi":"Elxsi","Cummins India":"Cumm",
+"Vedanta":"Ved"
+};
+// full labels
+const FULL_LABEL = {};
+for (const k in SHORT_LABEL) FULL_LABEL[k] = k;
+// =====================================================
+// Draw the radial arc diagram
+// =====================================================
+function drawArc() {
+    const container = document.getElementById("arc-container");
+    container.innerHTML = "";
+    const w = Math.min(1100, container.clientWidth || 1000);
+    const h = Math.max(650, Math.floor(w * 0.75));
+    const svg = d3.select(container).append("svg")
+        .attr("width", "100%")
+        .attr("height", h)
+        .attr("viewBox", [-w/2, -h/2, w, h].join(" "));
+    const radius = Math.min(w, h) * 0.36;
+    const n = NODES.length;
+    function angle(i){
+        return (i / n) * 2 * Math.PI;
+    }
+    const pos = NODES.map((name, i) => {
+        const ang = angle(i) - Math.PI/2;
+        return {
+            name,
+            angle: ang,
+            x: Math.cos(ang) * radius,
+            y: Math.sin(ang) * radius
+        };
+    });
+    const index = {};
+    NODES.forEach((nm, i) => index[nm] = i);
+    // Node group
+    const nodeG = svg.append("g")
+        .selectAll("g")
+        .data(pos)
+        .enter()
+        .append("g")
+        .attr("transform", d => `translate(${d.x},${d.y})`);
+    nodeG.append("circle")
+        .attr("r", 17)
+        .style("fill", d => NODE_TYPE[d.name] === "amc" ? "#003f5c" : "#f59e0b")
+        .style("stroke", "#111")
+        .style("stroke-width", 1)
+        .style("cursor", "pointer");
+    nodeG.append("text")
+        .attr("dy", "0.35em")
+        .style("font-size", "10px")
+        .style("fill", "#fff")
+        .style("text-anchor", "middle")
+        .style("pointer-events", "none")
+        .text(d => SHORT_LABEL[d.name]);
+    // Function for arc path
+    function arcPath(x0, y0, x1, y1, above) {
+        const mx = (x0 + x1) / 2;
+        const my = (y0 + y1) / 2;
+        const len = Math.sqrt(mx*mx + my*my) || 1;
+        const ux = mx / len, uy = my / len;
+        const offset = (above ? -1 : 1) * Math.max(40, radius * 0.9);
+        const cx = mx + ux * offset;
+        const cy = my + uy * offset;
+        return `M ${x0} ${y0} Q ${cx} ${cy} ${x1} ${y1}`;
+    }
+    const allWeights = [
+        ...BUYS.map(d => d[2]),
+        ...SELLS.map(d => d[2]),
+        ...TRANSFERS.map(d => d[2])
+    ];
+    const sw = d3.scaleLinear()
+        .domain([1, Math.max(...allWeights, 1)])
+        .range([1.2, 6]);
+    // BUY arcs
+    const buyG = svg.append("g");
+    BUYS.forEach(([a, c, w])=>{
+        if (!(a in index) || !(c in index)) return;
+        const s = pos[index[a]], t = pos[index[c]];
+        buyG.append("path")
+            .attr("d", arcPath(s.x, s.y, t.x, t.y, true))
+            .attr("stroke", "#1a9850")
+            .attr("fill", "none")
+            .attr("stroke-width", sw(w))
+            .attr("data-src", a)
+            .attr("data-tgt", c)
+            .attr("opacity", 0.9);
+    });
+    // SELL arcs
+    const sellG = svg.append("g");
+    SELLS.forEach(([c, a, w])=>{
+        if (!(a in index) || !(c in index)) return;
+        const s = pos[index[c]], t = pos[index[a]];
+        sellG.append("path")
+            .attr("d", arcPath(s.x, s.y, t.x, t.y, false))
+            .attr("stroke", "#d73027")
+            .attr("stroke-width", sw(w))
+            .attr("stroke-dasharray", "4,3")
+            .attr("fill", "none")
+            .attr("data-src", c)
+            .attr("data-tgt", a)
+            .attr("opacity", 0.85);
+    });
+    // TRANSFERS (grey)
+    const trG = svg.append("g");
+    TRANSFERS.forEach(([s, b, w]) => {
+        if (!(s in index) || !(b in index)) return;
+        const sp = pos[index[s]], tp = pos[index[b]];
+        const mx = (sp.x + tp.x)/2, my = (sp.y + tp.y)/2;
+        trG.append("path")
+            .attr("d", `M ${sp.x} ${sp.y} Q ${mx*0.3} ${my*0.3} ${tp.x} ${tp.y}`)
+            .attr("stroke", "#636363")
+            .attr("fill", "none")
+            .attr("stroke-width", sw(w))
+            .attr("opacity", 0.7)
+            .attr("data-src", s)
+            .attr("data-tgt", b);
+    });
+    // LOOPS (teal)
+    const loopG = svg.append("g");
+    LOOPS.forEach(([a,c,b])=>{
+        if (!(a in index) || !(b in index)) return;
+        const s = pos[index[a]], t = pos[index[b]];
+        const mx = (s.x + t.x)/2, my = (s.y + t.y)/2;
+        const len = Math.sqrt((s.x - t.x)**2 + (s.y - t.y)**2);
+        const outward = Math.max(50, radius * 0.25 + len * 0.12);
+        const dx = mx, dy = my;
+        const dl = Math.sqrt(dx*dx + dy*dy) || 1;
+        const ux = dx/dl, uy = dy/dl;
+        const cx = mx + ux*outward, cy = my + uy*outward;
+        loopG.append("path")
+            .attr("d", `M ${s.x} ${s.y} Q ${cx} ${cy} ${t.x} ${t.y}`)
+            .attr("stroke", "#1f9e89")
+            .attr("fill", "none")
+            .attr("stroke-width", 3)
+            .attr("opacity", 0.95);
+    });
+    // Outside label layer
+    const outsideLayer = svg.append("g");
+    // Expand labels on click
+    function expandLabels(nodeName){
+        // reset
+        outsideLayer.selectAll("*").remove();
+        // Dim all nodes
+        nodeG.selectAll("circle").style("opacity", d => d.name === nodeName ? 1 : 0.2);
+        nodeG.selectAll("text").style("opacity", 0);
+        const connected = new Set([nodeName]);
+        buyG.selectAll("path").each(function(){
+            const s = this.getAttribute("data-src");
+            const t = this.getAttribute("data-tgt");
+            if (s === nodeName || t === nodeName){
+                connected.add(s);
+                connected.add(t);
+            }
+        });
+        sellG.selectAll("path").each(function(){
+            const s = this.getAttribute("data-src");
+            const t = this.getAttribute("data-tgt");
+            if (s === nodeName || t === nodeName){
+                connected.add(s);
+                connected.add(t);
+            }
+        });
+        trG.selectAll("path").each(function(){
+            const s = this.getAttribute("data-src");
+            const t = this.getAttribute("data-tgt");
+            if (s === nodeName || t === nodeName){
+                connected.add(s);
+                connected.add(t);
+            }
+        });
+        // Show outward labels
+        connected.forEach(nm => {
+            const p = pos[index[nm]];
+            const offset = radius + 30;
+            const x = p.x + Math.cos(p.angle)*offset;
+            const y = p.y + Math.sin(p.angle)*offset;
+            const deg = p.angle * 180 / Math.PI;
+            const anchor = (deg > -90 && deg < 90) ? "start" : "end";
+            outsideLayer.append("text")
+                .attr("x", x)
+                .attr("y", y)
+                .attr("dy", "0.35em")
+                .text(FULL_LABEL[nm] || nm)
+                .style("font-size","12px")
+                .style("font-weight","600")
+                .style("fill", "#0c0c10")
+                .style("text-anchor", anchor);
+        });
+        // Dim unrelated arcs
+        buyG.selectAll("path")
+            .style("opacity", function(){
+                const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt");
+                return (s===nodeName || t===nodeName) ? 0.95 : 0.05;
+            });
+        sellG.selectAll("path")
+            .style("opacity", function(){
+                const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt");
+                return (s===nodeName || t===nodeName) ? 0.95 : 0.05;
+            });
+        trG.selectAll("path")
+            .style("opacity", function(){
+                const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt");
+                return (s===nodeName || t===nodeName) ? 0.9 : 0.05;
+            });
+        loopG.selectAll("path")
+            .style("opacity", 0.95);
+    }
+    // Reset function
+    function resetView(){
+        outsideLayer.selectAll("*").remove();
+        nodeG.selectAll("circle").style("opacity", 1);
+        nodeG.selectAll("text").style("opacity", 1);
+        buyG.selectAll("path").style("opacity", 0.9);
+        sellG.selectAll("path").style("opacity", 0.85);
+        trG.selectAll("path").style("opacity", 0.7);
+        loopG.selectAll("path").style("opacity", 0.95);
+    }
+    nodeG.selectAll("circle")
+        .on("click", (event, d) => {
+            event.stopPropagation();
+            expandLabels(d.name);
+        });
+    nodeG.selectAll("text")
+        .on("click", (event, d) => {
+            event.stopPropagation();
+            expandLabels(d.name);
+        });
+    document.getElementById("arc-reset").onclick = resetView;
+    svg.on("click", () => resetView());
+}
+drawArc();
+window.addEventListener("resize", drawArc);
+</script>
+</body>
+</html>