31:T139d,chart = { // Container dimensions (including margins) const containerWidth = 1152; const containerHeight = 600; const margin = { top: 50, right: 30, bottom: 100, left: 60 }; // Adjusted margins // Calculate chart area dimensions const chartWidth = containerWidth - margin.left - margin.right; const chartHeight = containerHeight - margin.top - margin.bottom; // Create SVG element and set viewBox for responsiveness 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:#0B0B16"); // Create chart container within SVG const chartContainer = svg .append("g") .attr("class", "g-chart-container") .attr("transform", `translate(${margin.left},${margin.top})`); // Create xScale const xScale = d3 .scaleBand() .domain(chartData.map((d) => d.asset)) .range([0, chartWidth]) .padding(0.4); // Calculate Max and Min value const maxReturn = d3.max(chartData, (d) => d.return); const minReturn = d3.min(chartData, (d) => d.return); // Create yScale const yScale = d3 .scaleLinear() .domain([minReturn - 2, maxReturn + 2]) .nice() .range([chartHeight, 0]); // Add the y-axis const yAxis = chartContainer .append("g") .call(d3.axisLeft(yScale).tickFormat((d) => d + "%")) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick line") .clone() .attr("x2", chartWidth) .attr("stroke", "#444") .attr("stroke-dasharray", "3,3") ) .call((g) => g.selectAll(".tick text").attr("fill", "#dcdcee").attr("font-size", 12) ) .call((g) => g .append("text") .attr("x", -margin.left / 2) .attr("y", -20) .attr("fill", "#dcdcee") .attr("text-anchor", "start") .attr("font-size", 14) .text("↑ Return") ); // Add color scale const colorScale = d3 .scaleSequential() .domain([minReturn, maxReturn]) .interpolator(d3.interpolateRdYlGn); // Red → Yellow → Green // Define a threshold for outliers (e.g., 2 standard deviations from the mean, or a fixed value) const returnValues = chartData.map((d) => d.return); const meanReturn = d3.mean(returnValues); const stdDevReturn = d3.deviation(returnValues); const outlierThreshold = 2 * stdDevReturn; // Identify outliers const outliers = chartData.filter( (d) => Math.abs(d.return - meanReturn) > outlierThreshold ); // Add Circles const circles = chartContainer .selectAll("circle") .data(chartData) .join("circle") .attr("cx", (d) => xScale(d.asset) + xScale.bandwidth() / 2) .attr("cy", (d) => yScale(d.return)) .attr("r", 20) .attr("fill", (d) => colorScale(d.return)) .attr("stroke", "#222") .attr("stroke-width", 0.5); // Add outlier markers const outlierMarkers = chartContainer .selectAll(".outlier-marker") .data(outliers) .join("circle") .attr("class", "outlier-marker") .attr("cx", (d) => xScale(d.asset) + xScale.bandwidth() / 2) .attr("cy", (d) => yScale(d.return)) .attr("r", 25) .attr("fill", "none") .attr("stroke", "yellow") // Or any other distinctive color .attr("stroke-width", 2); // Add return percentage inside each circle const circleLabels = chartContainer .selectAll("text.circle-label") .data(chartData) .join("text") .attr("class", "circle-label") .attr("x", (d) => xScale(d.asset) + xScale.bandwidth() / 2) .attr("y", (d) => yScale(d.return)) .attr("dy", "0.35em") .attr("text-anchor", "middle") .text((d) => `${d.return.toFixed(1)}%`) .attr("fill", (d) => { const color = d3.color(colorScale(d.return)); const luminance = 0.299 * color.r + 0.587 * color.g + 0.114 * color.b; return luminance > 140 ? "#000" : "#fff"; }) .attr("font-size", 11); // Add the x-axis with rotated and slightly adjusted multi-line labels const xAxis = chartContainer .append("g") .attr("transform", `translate(0, ${chartHeight})`) .call(d3.axisBottom(xScale)) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").attr("stroke", "#dcdcee")) .selectAll(".tick text") .attr("font-size", 11) .attr("fill", "#dcdcee") .style("text-anchor", "middle") .each(function (d) { const text = d3.select(this); const words = d.split(" "); const lineHeight = 1.0; const y = text.attr("y"); const dy = parseFloat(text.attr("dy")); text.text(null); // Remove the original text for (let i = 0; i < words.length; ++i) { text .append("tspan") .attr("x", 0) .attr("y", y) .attr("dy", i * lineHeight + dy + "em") .attr("text-anchor", "middle") .text(words[i]); } }); return svg.node(); }32:T4f2,chartData = [ { asset: "Gold", index: null, return: 19.0, image: "gold.png" }, { asset: "Europe Equities", index: "STOXX Europe 600", return: 5.2, image: "europe-equities.png" }, { asset: "Emerging Market Equities", index: "iShares MSCI Emerging Index Fund", return: 4.5, image: "emerging-markets.png" }, { asset: "Long Duration Treasurys", index: "iShares 20+ Year Treasury Bond ETF", return: 4.2, image: "treasury-bonds.png" }, { asset: "Commodities", index: "S&P Goldman Sachs Commodity Index", return: 3.4, image: "commodities.png" }, { asset: "Dow Jones Real Estate Index", index: null, return: 2.6, image: "real-estate.png" }, { asset: "Crude Oil", index: "WTI", return: -0.7, image: "oil.png" }, { asset: "U.S. Dollar Index", index: "U.S. Dollar Index", return: -4.0, image: "usd.png" }, { asset: "U.S. Large Caps", index: "S&P 500", return: -4.6, image: "large-caps.png" }, { asset: "U.S. Small Caps", index: "Russell 2000", return: -9.8, image: "small-caps.png" }, { asset: "Bitcoin", index: null, return: -11.5, image: "bitcoin.png" } ]33:[{"id":"7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","href":"https://static.observableusercontent.com/files/7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","name":"observablehq.svg","type":"image/svg+xml","lastModified":1744209133246.77,"size":3168},{"id":"2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","href":"https://static.observableusercontent.com/files/2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","name":"d3-js.svg","type":"image/svg+xml","lastModified":1744209142328.311,"size":2966}] 2f:{"title":"Asset Class Returns – Q1 2025 Insights","cells":[{"id":0,"value":"

Asset Class Returns – Q1 2025 Insights

Chart Type: Scatter Plot Chart, Tech Stack: D3.js, SVG

Data Sources: TradingView & S&P Global

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

In Q1 2025, gold led the markets with a 19% gain, hitting record highs as investors turned to it during global trade tensions and inflation concerns. European stocks also performed well, rising 5.2%, driven by strong defense sector growth. Meanwhile, U.S. stocks struggled — the S&P 500 fell 4.6%, marking its weakest quarter since 2022.\n\n

","pinned":false,"hidden":false,"mode":"html"},{"id":40,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"

\n#30DayChartChallenge (Edition 2025)

| Day-7: Distributions | Outliers |

","pinned":false,"hidden":false,"mode":"html"},{"id":13,"value":"### CSS ","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":11,"value":"### Chart Data ","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"### Tools and Methodologies","pinned":false,"hidden":false,"mode":"md"},{"id":356,"value":"

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

","pinned":false,"hidden":false,"mode":"html"},{"id":350,"value":"### References","pinned":false,"hidden":false,"mode":"md"},{"id":352,"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":9,"value":"### Acknowledgements","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"*The author has no acknowledgements to declare for this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":345,"value":"### AI Disclosure","pinned":false,"hidden":false,"mode":"md"},{"id":347,"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"}