30:T14f2,heatmap = { const element = this || scrollSVG(html``); const svg = d3.select(element).select("svg"); const g = svg .selectAll("g") .data(data, (d) => d.id) .join( (enter) => { // create the initial heatmap for all tickers const g = enter .append("g") .attr("opacity", 0) .attr("transform", (d, i) => `translate(${d.translate})`) .attr("id", (d) => d.ticker) .on("mouseover", (e, d) => getTT(d)) .on("mouseleave", function (e, d) { svg.select("#ttBackground").remove(); svg.select("#ttTicker").remove(); svg.select("#ttName").remove(); svg.select("#ttValue").remove(); svg.select("#ttFrame").remove(); }); g.append("rect") // .attr("id", d => d.ticker) .attr("class", "background") .attr("width", (d) => d.size[0]) .attr("height", (d) => d.size[1]) .attr("fill", (d) => d.color); g.append("text") .attr("class", "headline") // .style("font", "13px TradeGothic LT CondEighteen") .style("font", "13px Roboto Condensed") .style("font-weight", "700") .attr("x", 4) .attr("y", 14) .attr("fill", "#000") .attr("fill-opacity", 0.7) .text((d) => d.ticker); g.append("text") .attr("class", "subline") // .style("font", "10px TradeGothic LT CondEighteen") // .style("font-weight", "400") .style("font", "11px Roboto Condensed") .style("font-weight", "400") .attr("x", 4) .attr("y", 26) .attr("fill", "#000") .attr("fill-opacity", 0.7) .text((d) => d.value.length > 10 ? d.value.substring(0, 10) + "..." : d.value ); return g; }, (update) => update, (exit) => { if (data.length > exit._groups[0].length) { setTransition(true); } else { setTransition(false); } exit.transition().duration(500).attr("opacity", 0).remove(); } ); var dir; function setTransition(n) { dir = n; } if (dir) { g.transition() .duration(750) .delay((d, i) => i) .attr("transform", (d, i) => `translate(${d.translate})`) .transition() .delay(250) .duration(250) .attr("opacity", 1); } else { g.transition() .delay((d, i) => i) .duration(250) .attr("opacity", 1) .transition() .delay(250) .duration(750) .attr("transform", (d, i) => `translate(${d.translate})`); } g.select(".background") .transition() .delay((d, i) => i) //.delay((d,i) => i * 10) .duration(500) .attr("fill", (d) => d.color) .attr("width", (d) => d.size[0]) .attr("height", (d) => d.size[1]); g.select(".subline") .transition() .delay((d, i) => i) .duration(500) .text((d) => d.value.length > 10 ? d.value.substring(0, 10) + "..." : d.value ); // Tooltip function getTT(data) { console.log("mouseover: ", data.ticker); var canvas = document.createElement("canvas"), context = canvas.getContext("2d"); context.font = "14px Roboto Condensed"; var posX, posY, h = 64; const w = context.measureText(data.name).width + 20; data.translate[0] < w ? (posX = data.translate[0] + data.size[0]) : (posX = data.translate[0] - w); data.translate[1] < h ? (posY = data.translate[1] + data.size[1]) : (posY = data.translate[1] - h); svg .append("rect") .attr("id", "ttFrame") .attr("width", data.size[0]) .attr("height", data.size[1]) .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 2) .attr("x", data.translate[0]) .attr("y", data.translate[1]); svg .append("rect") .attr("id", "ttBackground") .attr("width", w) .attr("height", h) .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) // .attr('fill', '#000') .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) // .attr('fill', '#000') .text((d) => data.name); svg .append("text") .attr("id", "ttValue") // .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 + 56) // .attr('fill', '#000') .text((d) => primary.toUpperCase() + ": " + data.value); } return element; }31:T5c8,theme_Flat = ` :scope { position: relative; display: inline-block; width: 240px; --thumb-size: 15px; --thumb-radius: calc(var(--thumb-size) / 2); padding: var(--thumb-radius) 0; color: #3b99fc; margin: 2px; vertical-align: middle; } :scope .range-track { box-sizing: border-box; position: relative; height: 7px; background-color: hsl(0, 0%, 80%); overflow: visible; border-radius: 4px; padding: 0 var(--thumb-radius); } :scope .range-track-zone { box-sizing: border-box; position: relative; } :scope .range-select { box-sizing: border-box; position: relative; left: var(--range-min); width: calc(var(--range-max) - var(--range-min)); cursor: ew-resize; background: currentColor; height: 7px; border: inherit; } /* Expands the hotspot area. */ :scope .range-select:before { content: ""; position: absolute; width: 100%; height: var(--thumb-size); left: 0; top: calc(2px - var(--thumb-radius)); } :scope .range-select:focus, :scope .thumb:focus { outline: none; } :scope .thumb { box-sizing: border-box; position: absolute; width: var(--thumb-size); height: var(--thumb-size); background: #fcfcfc; top: -4px; border-radius: 100%; border: 1px solid hsl(0,0%,55%); cursor: default; margin: 0; } :scope .thumb:active { box-shadow: inset 0 var(--thumb-size) #0002; } :scope .thumb-min { left: calc(-1px - var(--thumb-radius)); } :scope .thumb-max { right: calc(-1px - var(--thumb-radius)); } `32:[{"id":"bbba0be65c9153cfe3930957f13ede3c1d122ed6e166d3f47f2888cb2d5e98ee4420a2a8c43589de548f5ac72f5643c0cf4b5a073b4aa0197a1564022e25ddc9","href":"https://static.observableusercontent.com/files/bbba0be65c9153cfe3930957f13ede3c1d122ed6e166d3f47f2888cb2d5e98ee4420a2a8c43589de548f5ac72f5643c0cf4b5a073b4aa0197a1564022e25ddc9","name":"FT_Funds_3.csv","type":"text/csv","lastModified":1634822118308.349,"size":104667},{"id":"af30c19de39a02aa6c1e23de634a952b0de115ddaaf7cfebcf1ae0ef55fb5fd812278f76ae08cee3851d8eaadea7553b66ccfb97bb9dc51c25d15a405b8b460d","href":"https://static.observableusercontent.com/files/af30c19de39a02aa6c1e23de634a952b0de115ddaaf7cfebcf1ae0ef55fb5fd812278f76ae08cee3851d8eaadea7553b66ccfb97bb9dc51c25d15a405b8b460d","name":"Trade Gothic LT Bold Condensed No. 20.ttf","type":"font/ttf","lastModified":1634833434020.66,"size":75280},{"id":"81176e0a120f1e2dc406c2e1037730976cfb205941c6c152a3912ba44a14ac87f393e2918b12ac40f891b2ef5ab64f5970e70203eff6eab41e09db9a3438705b","href":"https://static.observableusercontent.com/files/81176e0a120f1e2dc406c2e1037730976cfb205941c6c152a3912ba44a14ac87f393e2918b12ac40f891b2ef5ab64f5970e70203eff6eab41e09db9a3438705b","name":"Trade Gothic LT Condensed No. 18.ttf","type":"font/ttf","lastModified":1634833434076.571,"size":83792}] 2e:{"title":"FT Products Heatmap","cells":[{"id":0,"value":"md`# FT Products Heatmap\nThis notebook illustrates the concept of filtering and sorting of the heatmap view of Mutual Funds. In this example we are showing 860 funds from the Franklin Templeton family. \nUse the **Color by** option to select a value from the drop-down. The slider below allows you to filter the selected metric.\nUse the **Sort by** drop-down to rearrange the heatmap. Using the **Filter by** checkboxes will add/remove funds groups by Investment Type and Size Type. Hover over an element on the heatmap to see the full name and selected metric.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"viewof primary = select({\n title: \"Color by:\",\n description: \"Pick a metric to color the heatmap.\",\n options: keys,\n value: keys\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1664,"value":"viewof range = rangeSlider({\n min: d3.min(filteredData, d => d[primary]),\n max: d3.max(filteredData, d => d[primary]),\n theme: theme_Flat,\n // value: this ? this.value : [d3.min(filteredData, d => d[primary]), d3.max(filteredData, d => d[primary])],\n // color,\n precision: '1',\n separator: ' to ',\n //format: '0000',\n title: 'Select '+primary.toUpperCase()+' range',\n description: 'Move slider to select a data range.',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"viewof secondary = select({\n title: \"Sort by:\",\n description: \"Pick a metric to sort the heatmap.\",\n options: keys,\n value: keys\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"viewof filteredSectors = checkbox({\n title: \"Filter by Investment Type\",\n description: \"Select/unselect investment styles to remove/add to the heatmap\",\n options: _.map(sectors, sector => {\n return {value: sector, label: sector}\n }),\n value: sectors,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1385,"value":"viewof dynamicFilters = checkbox({\n title: \"Filter by Size Type\",\n options: _.map([\"Large\", \"Medium\", \"Small\"], sector => { \n return {value: sector, label: sector}\n }),\n value: [\"Large\", \"Medium\", \"Small\"],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"colorLegend = {\n //console.log(data[0].value)\n let [minAvg, maxAvg] = d3.extent(filteredData, d => d[primary])\n let max,min\n \n if(isNaN(data[0].value)){\n //Categories\n return Swatches(d3.scaleOrdinal(d3.schemeTableau10).domain(__sectors))\n } else {\n //Numbers\n if(Math.abs(minAvg) > maxAvg){ \n min = minAvg\n maxAvg < 0 ? max = Math.abs(minAvg)*-1 : max = Math.abs(minAvg)\n }else{\n max = maxAvg\n minAvg < 0 ? min = Math.abs(maxAvg)*-1 : min = Math.abs(maxAvg)\n }\n\n return Legend(\n d3.scaleLinear([min,0,max],[\"green\", \"white\", \"red\"]),{\n title: primary.toUpperCase(),// +\" [from:\"+minAvg+\" to: \"+maxAvg+\"]\",\n tickSize: 2,\n // tickFormat: \".0s\"\n })\n // return Legend(\n // d3.scaleSequential([minAvg,0,maxAvg], d3.interpolateRdYlGn), \n // { title: primary+\" from:\"+minAvg+\" to: \"+maxAvg })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1660,"value":"viewof rows = Inputs.table(filteredData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2117,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1796,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2110,"value":"import { toDataURL } from \"@mootari/embedding-fonts-into-an-svg@171\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1667,"value":"import { rangeSlider } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1943,"value":"import { Tooltip } from \"@clhenrick/tooltip-component\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}