31:T1aab,chart = { // --- Initial State & Data Selection --- let selectedIndex = "NIFTY50"; let dataToPlot = chartData[selectedIndex]; // --- Button Selections (Consider externalizing if reused elsewhere) --- const nifty50btn = d3.select("#nifty50btn"); const sensexbtn = d3.select("#sensexbtn"); // --- Dimensions & Layout --- const containerWidth = 1152; const containerHeight = 500; const margin = { top: 50, right: 50, bottom: 80, left: 50 }; const chartWidth = containerWidth - margin.left - margin.right; const chartHeight = containerHeight - margin.top - margin.bottom; // --- SVG Setup --- const svg = d3 .create("svg") .attr("viewBox", [0, 0, containerWidth, containerHeight]) .attr("width", "100%") .attr("height", "auto") .style("display", "block"); const chartContainer = svg .append("g") .attr("class", "chart-group") .attr("transform", `translate(${margin.left},${margin.top})`); // --- Scales (defined later) --- let xScale, yScale, colorScale; // --- Utility: Text Color Based on Value Position in Extent --- function getTextColorForValue(val, extent) { if (val < 0) return "#38f6ff"; const threshold1 = ((extent[0] + extent[1]) / 3) * 2; const threshold2 = extent[1] - (extent[1] - extent[0]) / 15; if (val <= threshold1) return "#3300ff"; if (val < threshold2) return "#0017b9"; return "#a8cbff"; } // --- Core Rendering Logic --- function updateChart(data) { const extent = d3.extent(data, (d) => d.Return); // --- X Scale & Histogram --- xScale = d3 .scaleLinear() .domain([extent[0], extent[1]]) .nice() .range([0, chartWidth]); const bins = d3 .bin() .value((d) => d.Return) .domain(xScale.domain()) .thresholds(xScale.ticks(15))(data); // --- Y Scale --- yScale = d3 .scaleLinear() .domain([0, d3.max(bins, (d) => d.length)]) .nice() .range([chartHeight, 0]); // --- Color Scale for Bars --- colorScale = d3 .scaleLinear() .domain([ extent[0], (extent[0] + extent[1]) / 3, 0, ((extent[0] + extent[1]) / 3) * 2, extent[1] ]) .range(["#800000", "#FF6347", "#FFFF00", "#ADFF2F", "#006400"]) .interpolate(d3.interpolateRgb); // --- Stack Data for Visualizing Bars --- let stackData = []; bins.forEach((bin) => { let yOffset = chartHeight; const barX = xScale(bin.x0); const barWidth = Math.max(0, xScale(bin.x1) - xScale(bin.x0) - 1); const binCenter = (bin.x0 + bin.x1) / 2; bin.forEach((d) => { const segmentHeight = (chartHeight - yScale(bin.length)) / bin.length; yOffset -= segmentHeight; stackData.push({ ...d, x: barX, y: yOffset, width: barWidth, height: segmentHeight, fill: colorScale(binCenter) }); }); }); // --- Render Bar Groups --- const barGroups = chartContainer .selectAll(".bar-group") .data(stackData, (d) => d.Year); // Exit barGroups.exit().transition().duration(500).style("opacity", 0).remove(); // Enter const barGroupsEnter = barGroups .enter() .append("g") .attr("class", "bar-group") .attr("transform", (d) => `translate(${d.x}, ${chartHeight})`) .style("opacity", 0); // Add Bars barGroupsEnter .append("rect") .attr("class", "bar") .attr("width", (d) => d.width) .attr("height", 0) .attr("fill", (d) => d.fill); // Add Year Label barGroupsEnter .append("text") .attr("class", "year-label") .attr("x", (d) => d.width / 2) .attr("y", (d) => d.height / 2 - 3) .style("text-anchor", "middle") .style("fill", (d) => { const c = d3.color(d.fill); const luminance = 0.299 * c.r + 0.587 * c.g + 0.114 * c.b; return luminance > 140 ? "#000" : "#fff"; }) .text((d) => d.Year); // Add Return Label barGroupsEnter .append("text") .attr("class", "return-label") .attr("x", (d) => d.width / 2) .attr("y", (d) => d.height / 2 + 8) .style("text-anchor", "middle") .style("fill", (d) => getTextColorForValue(d.Return, extent)) .attr("opacity", 0) .text((d) => `${d.Return.toFixed(2)}%`); // Merge & Transition const barGroupsMerged = barGroupsEnter.merge(barGroups); barGroupsMerged .transition() .duration(1000) .ease(d3.easeCubicInOut) .style("opacity", 1) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); barGroupsMerged .select("rect") .transition() .duration(1000) .ease(d3.easeCubicInOut) .attr("height", (d) => d.height) .attr("width", (d) => d.width) .attr("y", 0) .attr("fill", (d) => d.fill); barGroupsMerged .select(".year-label") .attr("x", (d) => d.width / 2) .attr("y", (d) => d.height / 2 - 3); barGroupsMerged .select(".return-label") .attr("x", (d) => d.width / 2) .attr("y", (d) => d.height / 2 + 8) .text((d) => `${d.Return.toFixed(2)}%`) .transition() .duration(1000) .attr("opacity", 1); // --- X Axis --- const xAxis = d3 .axisBottom(xScale) .tickFormat((d) => `${d}%`) .ticks(15); chartContainer .selectAll(".x-axis") .data([null]) .join( (enter) => enter .append("g") .attr("class", "axis x-axis") .attr("transform", `translate(0,${chartHeight})`) .call(xAxis), (update) => update .transition() .duration(500) .attr("transform", `translate(0,${chartHeight})`) .call(xAxis), (exit) => exit.remove() ); // --- X Axis Label --- chartContainer .selectAll(".x-label") .data([null]) .join("text") .attr("class", "axis-label x-label") .attr("x", chartWidth / 2) .attr("y", chartHeight + margin.bottom / 1.5) .attr("text-anchor", "middle") .text("*Returns are calculated on a calendar year basis."); } // --- Dataset Toggle Logic --- function handleButtonClick(index) { selectedIndex = index; dataToPlot = chartData[selectedIndex]; updateChart(dataToPlot); // Update active button style nifty50btn.classed("active", selectedIndex === "NIFTY50"); sensexbtn.classed("active", selectedIndex === "SENSEX"); } // --- Button Event Handlers --- nifty50btn.on("click", () => handleButtonClick("NIFTY50")); sensexbtn.on("click", () => handleButtonClick("SENSEX")); // --- Initial Chart Render --- updateChart(dataToPlot); return svg.node(); }32:T7a1,33:[{"id":"2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","href":"https://static.observableusercontent.com/files/2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","name":"d3-js.svg","type":"image/svg+xml","lastModified":1744806513737.932,"size":2966},{"id":"7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","href":"https://static.observableusercontent.com/files/7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","name":"observablehq.svg","type":"image/svg+xml","lastModified":1744806511276.611,"size":3168},{"id":"55d09b2e7e088ae2feb68cc7f364b4a9329ae95477efcc18caf7902be85d67aa96e36c28f86d40de9f2828472cc3f0dfd4aff11b6253041ac70b51cec6a2e78f","href":"https://static.observableusercontent.com/files/55d09b2e7e088ae2feb68cc7f364b4a9329ae95477efcc18caf7902be85d67aa96e36c28f86d40de9f2828472cc3f0dfd4aff11b6253041ac70b51cec6a2e78f","name":"chart-data@1.json","type":"application/json","lastModified":1744890852313.558,"size":3690}] 2f:{"title":"Nifty 50 & Sensex Returns Over Time","cells":[{"id":0,"value":"

Nifty 50 & Sensex Returns Over Time

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

Data Sources: NSE & BSE

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

\n \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":44,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"

\n#30DayChartChallenge (Edition 2025)

| Day-8: Distributions | Histogram |

","pinned":false,"hidden":false,"mode":"html"},{"id":25,"value":"### CSS ","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":23,"value":"### Chart Data ","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"chartData = FileAttachment(\"chart-data@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"### Tools and Methodologies","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"

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

","pinned":false,"hidden":false,"mode":"html"},{"id":15,"value":"### References","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"*[Chart Inspiration (Visual Capitalist)](https://www.visualcapitalist.com/sp-500-annual-returns-since-1874/) | [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":11,"value":"### Acknowledgements","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"*The author has no acknowledgements to declare for this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"### AI Disclosure","pinned":false,"hidden":false,"mode":"md"},{"id":9,"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":5,"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":"$W33","stdlib":"1","titling":"auto"}