30:T1397,scatterplot = { const element = this || scrollSVG(html``); const svg = d3.select(element).select("svg"); //Create x & y axis svg.append("g").attr("class", "x-axis"); svg.append("g").attr("class", "y-axis"); // Create Scatterplot const g = svg .selectAll("g") //.data(data, d => d.id) .data(data, (d, i) => i) .join( (enter) => { const dots = enter.append("g").attr("class", "dot").attr("opacity", 0); dots.transition().duration(500).attr("opacity", 1); dots .append("circle") .attr("class", "bubbles") .attr("opacity", 0.9) .attr("cx", (d) => x(d[xval])) .attr("cy", (d) => y(d[yval])) .attr("r", (d) => (zval == null ? 5 : z(d[zval]))) .style("fill", (d) => myColor(d.investment_type)) .on("mouseover", (d) => getTT(d)) .on("mouseleave", function (e, d) { svg.select("#ttBackground").remove(); svg.select("#ttTicker").remove(); svg.select("#ttName").remove(); svg.select("#ttValue").remove(); }); // dots .append("text") .attr("class", "labels") .attr("opacity", 0) .attr("class", "bubble-text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("fill", "black") .attr( "transform", (d) => `translate(${x(d[xval]) + 6 + z(d[zval])},${y(d[yval]) + 3})` ) .text((d) => d.ticker); }, (update) => update, (exit) => { exit.transition().duration(500).attr("opacity", 0).remove(); } ); //Updates g.select(".bubbles") .transition() .duration(500) .attr("cx", (d) => x(d[xval])) .attr("cy", (d) => y(d[yval])) .attr("r", (d) => (zval == null ? 5 : z(d[zval]))) .style("fill", (d) => myColor(d.investment_type)); g.select(".bubble-text") .transition() .duration(500) .attr( "transform", (d) => `translate(${x(d[xval]) + 6 + z(d[zval])},${y(d[yval]) + 3})` ); svg .select(".x-axis") .transition() .duration(500) .attr("transform", (d) => { var ypos = y(0); if (ypos > dimensions.height - dimensions.margin.top) { ypos = dimensions.height - dimensions.margin.top; } return "translate(0," + ypos + ")"; }) //.attr("transform", "translate(0," + (dimensions.height - dimensions.margin.top) + ")") //.attr("transform", "translate(0," + y(0) + ")") .call(d3.axisBottom(x).tickFormat((d) => d + "%")); svg .select(".y-axis") .transition() .duration(500) .attr("transform", (d) => { var xpos = x(0); if (xpos < dimensions.margin.left) { xpos = dimensions.margin.left; } return "translate(" + xpos + ",0)"; }) //.attr("transform", "translate("+ dimensions.margin.left + ",0)") //.attr("transform", "translate("+ x(0) + ",0)") .call(d3.axisLeft(y).tickFormat((d) => d + "%")); // // Tooltip function getTT(data) { // console.log("mouseover: ", data, x(data[xval])); var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); context.font = "14px Roboto Condensed"; var posX = x(data[xval]); var posY = y(data[yval]); var h = 65; var w = context.measureText(data.name).width + 20; posX + w + 10 > width ? (posX = x(data[xval]) - w - 10) : (posX = x(data[xval]) + 10); posY + h + 10 > dimensions.height ? (posY = y(data[yval]) - h - 10) //too far down : (posY = y(data[yval]) + 10); svg .append("rect") .attr("id", "ttBackground") .attr("width", w) .attr("height", 64) .attr("fill", "#ffffcc") .attr("stroke", "#ccc") .attr("x", posX) .attr("y", posY) .attr("rx", 4) .attr("ry", 4); svg .append("text") .attr("id", "ttTicker") // .style("font", "18px TradeGothic LT CondEighteen") // .style("font-weight", "600") .style("font", "18px Roboto Condensed") .style("font-weight", "700") .attr("x", posX + 8) .attr("y", posY + 20) .text((d) => data.ticker); svg .append("text") .attr("id", "ttName") // .style("font", "16px TradeGothic LT CondEighteen") // .style("font-weight", "400") .style("font", "14px Roboto Condensed") .style("font-weight", "400") .attr("x", posX + 8) .attr("y", posY + 38) .text((d) => data.name); svg .append("text") .attr("id", "ttValue") // .style("font", "14px TradeGothic LT CondEighteen") // .style("font-weight", "400") .style("font", "14px Roboto Condensed") .style("font-weight", "400") .attr("x", posX + 8) .attr("y", posY + 56) .text("Return: " + data[yval] + " Risk: " + data[xval]); } // return element; }31:[{"id":"7f12f2058f1f6b428ec18d87583bc366ca03811ceb06abc89d80501dfcbef21fdf03c0ad539343b2cdc2e6e72776bdd9fdca3ac5bdb8d9b63c6ee4211d63260a","href":"https://static.observableusercontent.com/files/7f12f2058f1f6b428ec18d87583bc366ca03811ceb06abc89d80501dfcbef21fdf03c0ad539343b2cdc2e6e72776bdd9fdca3ac5bdb8d9b63c6ee4211d63260a","name":"FT_Funds@1.csv","type":"text/csv","lastModified":1634823930233.235,"size":180333}] 2e:{"title":"FT Funds Scatterplot","cells":[{"id":0,"value":"md`# FT Funds Scatterplot\nThis notebook illustrates the concept of filtering and sorting of the performance/risk scatterplot view of Mutual Funds. In this example we are showing 860 funds from the Franklin Templeton family. \nUse the **Period** radio buttons to select the timeframe for the risk and return values.\nUse the **Fund Rating** checkboxes to add/remove funds of a certain Morningstar Rating. Using the **Investment Type** checkboxes will add/remove funds groups by Investment Type. The **Size by** will size each circle (fund) on the scatterplot by the selected value.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"viewof period = Inputs.radio([\"3\", \"5\", \"10\"], {value: \"3\", label: html`Period (Years)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"viewof fundsRating = Inputs.checkbox([\"★★★★★\", \"★★★★\", \"★★★\", \"★★\", \"★\"], {value: [\"★★★★★\", \"★★★★\", \"★★★\", \"★★\", \"★\"], label: html`Fund Rating`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"viewof investmentType = Inputs.checkbox([\"Blend\", \"Growth\",\"Value\"], {\n value: [\"Blend\", \"Growth\",\"Value\"], \n label: html`Investment Type`, \n format: (d,i) => {\n var colors = [\"#4e9d2d\",\"#00a0dc\",\"#f7bc00\"]\n return html`${d}`\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"viewof zval = Inputs.radio(new Map([[\"Expense Ratio\",\"expense_ratio\"], [\"NAV\",\"net_asset_value\"], [\"None\",null]]), {value: \"expense_ratio\", label: html`Size by`})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"viewof rows = Inputs.table(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"md`Reference: https://www.d3-graph-gallery.com/graph/bubble_template.html`","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}