31:T12e0,chart = { // Container dimensions (including margins) const containerWidth = 1152; const containerHeight = 800; const margin = { top: 50, right: 10, bottom: 50, left: 10 }; // Chart area const chartWidth = containerWidth - margin.left - margin.right; const chartHeight = containerHeight - margin.top - margin.bottom; const padding = 5; const horizontalOffset = (containerWidth - chartWidth) / 2; // Scales const xScale = d3 .scalePoint() .domain([0, 1]) .range([0, chartWidth]) .padding(0.5); const yScale = d3 .scaleLinear() .domain(d3.extent(chartData.flatMap((d) => [d["fromPrice"], d["toPrice"]]))) .range([chartHeight, 0]); const line = d3 .line() .x((d, i) => xScale(i)) .y(yScale); // SVG + dark background const svg = d3 .create("svg") .attr("viewBox", [0, 0, containerWidth, containerHeight]) .attr("width", containerWidth) .attr("height", containerHeight) .attr( "style", "max-width: 100%; height: auto; background-color:#1e1e2f; color: white;" ); const chartContainer = svg .append("g") .attr("transform", `translate(${horizontalOffset}, ${margin.top})`); // Vertical lines chartContainer .append("g") .selectAll("line") .data([0, 1]) .join("line") .attr("x1", (d) => xScale(d)) .attr("x2", (d) => xScale(d)) .attr("y1", 0) .attr("y2", chartHeight) .attr("stroke", "#888") .attr("stroke-width", "2px") .attr("stroke-dasharray", "4,2"); // Date labels chartContainer .append("g") .attr("text-anchor", "middle") .selectAll("g") .data([0, 1]) .join("g") .attr("transform", (i) => `translate(${xScale(i)},-20)`) .call((g) => g .append("text") .text((i) => (i ? "March 31, 2025" : "April 01, 2020")) .attr("fill", "#ccc") .attr("font-size", "14px") ) .call((g) => g.append("line").attr("y1", 3).attr("y2", 12).attr("stroke", "#ccc") ); // Midpoint label const midX = (xScale(0) + xScale(1)) / 2; chartContainer .append("text") .attr("x", midX) .attr("y", -30) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-style", "italic") .attr("fill", "#aaa") .text("*Return in CAGR"); // Color scale const filteredColors = d3.schemeCategory10.filter( (c) => c !== "#2ca02c" && c !== "#d62728" ); const colorScale = d3.scaleOrdinal(filteredColors); // Slope lines chartContainer .append("g") .attr("fill", "none") .attr("stroke-width", 4) .selectAll("path") .data(chartData) .join("path") .attr("d", (d) => line([d["fromPrice"], d["toPrice"]])) .attr("stroke", (d, i) => colorScale(i)); // Circles chartContainer .append("g") .selectAll("circle") .data( chartData.flatMap((d, i) => [ { x: xScale(0), y: yScale(d["fromPrice"]), color: colorScale(i) }, { x: xScale(1), y: yScale(d["toPrice"]), color: colorScale(i) } ]) ) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", 4) .attr("fill", (d) => d.color); // Price labels chartContainer .append("g") .selectAll("g") .data([0, 1]) .join("g") .attr( "transform", (i) => `translate(${xScale(i) + (i ? padding : -padding)},0)` ) .attr("text-anchor", (i) => (i ? "start" : "end")) .selectAll("text") .data((i) => d3.zip( chartData.map( i ? (d) => `${d["toPrice"].toFixed(2)}` : (d) => `${d["fromPrice"].toFixed(2)}` ), dodge(chartData.map((d) => yScale(d[i ? "toPrice" : "fromPrice"]))) ) ) .join("text") .attr("y", ([, y]) => y) .attr("dy", "0.35em") .attr("font-weight", "bold") .attr("font-size", "12px") .attr("fill", "#eee") .text(([text]) => text); // Index labels chartContainer .append("g") .selectAll("text") .data(chartData) .join("text") .each(function (d) { const x1 = xScale(0); const y1 = yScale(d["fromPrice"]); const x2 = xScale(1); const y2 = yScale(d["toPrice"]); const xMid = (x1 + x2) / 2; const yMid = (y1 + y2) / 2; const angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI; d3.select(this) .attr("x", xMid) .attr("y", yMid - 10) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("fill", "#ddd") .attr("transform", `rotate(${angle}, ${xMid}, ${yMid})`) .html( `${d.indexName} (${d.CAGR >= 0 ? "▲" : "▼"}${d.CAGR}%)` ); }); return svg.node(); }32:[{"id":"7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","href":"https://static.observableusercontent.com/files/7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","name":"observablehq.svg","type":"image/svg+xml","lastModified":1744208494272.931,"size":3168},{"id":"2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","href":"https://static.observableusercontent.com/files/2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","name":"d3-js.svg","type":"image/svg+xml","lastModified":1744208500426.881,"size":2966}] 2f:{"title":"How Indian Indices Performed","cells":[{"id":82,"value":"

How Indian Indices Performed

Chart Type: Slope Chart, Tech Stack: D3.js, SVG

Data Sources: NSE & BSE

","pinned":false,"hidden":false,"mode":"html"},{"id":94,"value":"

From April 2020 to March 2025, Indian stock indices showed strong growth. Mid and small-cap stocks outperformed large caps. The graph presents absolute and annualized returns for key indices, highlighting market trends.

","pinned":false,"hidden":false,"mode":"html"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"

\n#30DayChartChallenge (Edition 2025)

| Day-2: Comparison | Slope |

","pinned":false,"hidden":false,"mode":"html"},{"id":26,"value":"### CSS ","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":41,"value":"### Utility Function","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"// Function to avoid label overlap\nfunction dodge(positions, separation = 12, maxiter = 10, maxerror = 1e-1) {\n positions = Array.from(positions);\n let n = positions.length;\n if (!positions.every(isFinite)) throw new Error(\"invalid position\");\n if (!(n > 1)) return positions;\n let index = d3.range(positions.length);\n for (let iter = 0; iter < maxiter; ++iter) {\n index.sort((i, j) => d3.ascending(positions[i], positions[j]));\n let error = 0;\n for (let i = 1; i < n; ++i) {\n let delta = positions[index[i]] - positions[index[i - 1]];\n if (delta < separation) {\n delta = (separation - delta) / 2;\n error = Math.max(error, delta);\n positions[index[i - 1]] -= delta;\n positions[index[i]] += delta;\n }\n }\n if (error < maxerror) break;\n }\n return positions;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"### Chart Data ","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"chartData = [\n { indexName: \"Nifty 50\", fromPrice: 8597.75, toPrice: 23519.35, CAGR: 22.29 },\n {\n indexName: \"Nifty 500\",\n fromPrice: 6996.75,\n toPrice: 21339.55,\n CAGR: 24.98\n },\n {\n indexName: \"Nifty Bank\",\n fromPrice: 19144.0,\n toPrice: 51564.85,\n CAGR: 21.92\n },\n {\n indexName: \"Nifty Midcap 100\",\n fromPrice: 11703.75,\n toPrice: 51672.25,\n CAGR: 34.58\n },\n {\n indexName: \"Nifty SmallCap 100\",\n fromPrice: 3594.7,\n toPrice: 16095.7,\n CAGR: 34.96\n },\n { indexName: \"Sensex\", fromPrice: 29468.49, toPrice: 77414.92, CAGR: 21.31 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"### Tools and Methodologies","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"

\n \n $\"Observable$ \n \n \n $\"D3.js\"$ \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":225,"value":"### References","pinned":false,"hidden":false,"mode":"md"},{"id":227,"value":"*[D3.js Docs.](https://d3js.org/getting-started) | [Observable Notebook Docs.](https://observablehq.com/documentation/notebooks/) | [SVG Docs.](https://developer.mozilla.org/en-US/docs/Web/SVG)* ","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"### Acknowledgements","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"*The author has no acknowledgements to declare for this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":220,"value":"### AI Disclosure","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"*The author utilized AI tools such as Gemini and ChatGPT as coding assistants during the development of this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"

⚠️ Disclaimer ⚠️

\n This project provides data visualizations for informational purposes only. While we aim for accuracy, the data may contain errors or omissions. It should not be used as financial, legal, or professional advice. We are not responsible for any decisions made based on this information. Use at your own discretion.\n

","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}