2c:null 2d:["$","title",null,{"children":"RIC Profit /Loss Bar Chart | Steve Pegg | Observable"}] 32:T8cf,nodes = { // this is a JS Array of Objects; the key-value pairs consist of the column headers and the cell data let names =[]; let tmp = 0; let cluster = "other" let clusterid = 1 let clusterX = 0 let clusterY = 0 let m = 10 const spreadsheet = await d3.tsv(url).then(nodes => nodes.forEach(function (d,i) { if(!isNaN(d.month3) && !isNaN(d["PL%"])){ d["PL%"] = parseFloat(d["PL%"]) d.PL = +d.PL switch (true) { case (d["PL%"] > 200): cluster = ">200" clusterid = 1 clusterX = 100 clusterY = 10 break; case ((d["PL%"] > 100) && (d["PL%"] < 200)): cluster = ">100<200" clusterid = 2 clusterX = 100 clusterY = 250 break; case ((d["PL%"] > 50) && (d["PL%"] <100)): cluster = ">50<100" clusterid = 3 clusterX = 100 clusterY = 450 break; case ((d["PL%"] > 0) && (d["PL%"] <50)): cluster = ">0<50" clusterid = 3 clusterX = 100 clusterY = 250 break; case ((d["PL%"] < 0) && (d["PL%"] > -25)): cluster = "<0>-25" clusterid = 4 clusterX = 800 clusterY = 250 break; case ((d["PL%"] < -25) && (d["PL%"] > -50)): cluster = "<-25>-50" clusterid = 5 clusterX = 800 clusterY = 450 break; case ((d["PL%"] < -50) && (d["PL%"] > -75)): cluster = "<-50>-75" clusterid = 6 clusterX = 800 clusterY = 250 break; case (d["PL%"] < -75): cluster = "<-75" clusterid = 6 clusterX = 800 clusterY = 10 break; } let focusX = 110 * Math.cos(clusterid / m * Math.PI * 2) let focusY = 110 * Math.sin(clusterid / m * Math.PI * 2) return names.push({"id": i,"cluster": cluster, "radius": ((Math.abs(d["PL%"]))/10)+10||10, "name": d.ShortCode, "m3": +d.month3,"m6": +d.month6,"m9": +d.month9,"m12": +d.month12,"focusX": clusterX,"focusY": clusterY, "PL%": d["PL%"]||0,"PL": +d.PL, "value":+d.PL}) }})) //((Math.abs(d["PL%"]))/10)+20||0 BY PERCENTAGE return names; }33:Tbde,function forceClusterCollision() { let nodes let radii let strength = 1 let iterations = 1 let clusterPadding = 0 //addition function radius(d) { return d.r } function x(d) { return d.x + d.vx } function y(d) { return d.y + d.vy } function constant(x) { return function() { return x } } function jiggle() { return 1e-6 } //change - PLEASE no Math.random() in there ಥ﹏ಥ // function jiggle() { return (Math.random() - 0.5) * 1e-6 } function force() { let i let n = nodes.length let tree let node let xi let yi let ri let ri2 for (let k = 0; k < iterations; ++k) { tree = d3.quadtree(nodes, x, y).visitAfter(prepare) for (i = 0; i < n; ++i) { node = nodes[i] ri = radii[node.index] ri2 = ri * ri xi = node.x + node.vx yi = node.y + node.vy tree.visit(apply) }//for i }//for k function apply(quad, x0, y0, x1, y1) { let data = quad.data let rj = quad.r let r = ri + rj + clusterPadding //change if (data) { if (data.index > node.index) { let x = xi - data.x - data.vx let y = yi - data.y - data.vy let l = x * x + y * y r = ri + rj + (node.cluster !== quad.data.cluster ? clusterPadding : 0) //addition if (l < r * r) { if (x === 0) x = jiggle(), l += x * x if (y === 0) y = jiggle(), l += y * y l = (r - (l = Math.sqrt(l))) / l * strength node.vx += (x *= l) * (r = (rj *= rj) / (ri2 + rj)) node.vy += (y *= l) * r data.vx -= x * (r = 1 - r) data.vy -= y * r }//if }//if return }//if return x0 > xi + r || x1 < xi - r || y0 > yi + r || y1 < yi - r }//apply }//force function prepare(quad) { if (quad.data) return quad.r = radii[quad.data.index]; for (let i = quad.r = 0; i < 4; ++i) { if (quad[i] && quad[i].r > quad.r) { quad.r = quad[i].r }//if }//for i } function initialize() { if (!nodes) return; let i, n = nodes.length, node radii = new Array(n) for (i = 0; i < n; ++i) node = nodes[i], radii[node.index] = +radius(node, i, nodes) } force.initialize = function (_) { nodes = _ initialize() return force } force.iterations = function (_) { return arguments.length ? (iterations = +_, force) : iterations } //I wish strength could be a function of the node as well... force.strength = function (_) { return arguments.length ? (strength = +_, force) : strength } force.radius = function (_) { return arguments.length ? (radius = typeof _ === "function" ? _ : constant(+_), force) : radius } //addition - the actual pixels of padding force.clusterPadding = function (_) { return arguments.length ? (clusterPadding = +_, force) : clusterPadding } return force }//function forceCollision34:T52c,function swatches({ colour, swatchRadius = 6, swatchPadding = swatchRadius * (2/3), labelFont = "12px sans-serif", labelFormat = x => x, labelPadding = swatchRadius * 1.5, marginLeft = 0 } = {}) { const spacing = colour .domain() .map(d => labelFormat(d)) .map(d => getLabelLength(d, labelFont) + (swatchRadius * 2) + swatchPadding + labelPadding) .map((_, i, g) => d3.cumsum(g)[i] + marginLeft) const width = d3.max(spacing) const height = swatchRadius * 2 + swatchPadding * 2 const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); const g = svg .append("g") .attr("transform", `translate(0, ${height / 2})`) .selectAll("g") .data(colour.domain()) .join("g") .attr("transform", (d, i) => `translate(${spacing[i - 1] || marginLeft}, 0)`); g.append("circle") .attr("fill", colour) .attr("r", swatchRadius) .attr("cx", swatchRadius) .attr("cy", 0); g.append("text") .attr("x", swatchRadius * 2 + swatchPadding) .attr("y", 0) .attr("dominant-baseline", "central") .style("font", labelFont) .text(d => labelFormat(d)); return svg.node() }35:[] 30:{"id":"5e0ea169f6cdb1f6","slug":"ric-profit-loss-bar-chart","title":"RIC Profit /Loss Bar Chart","thumbnail":"2e566b9bae15f19b98be1192834e3e67b06c9b2878869e516610ff7baca600ad","access_level":"public","create_time":"$D2021-02-14T10:44:49.968Z","update_time":"$D2021-02-14T10:50:26.850Z","view_time":null,"first_public_time":"$D2021-02-14T10:48:50.068Z","has_unpublished_edits":null,"fork":{"id":"cae2aa34e1b65f80","slug":"ric-profit-loss/2","title":"RIC % Profit /Loss by bubble size if >0","owner":{"id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":"starter_2024","bio":"Mainly coding for fun these days!"},"version":848,"publish_version":848,"role":null,"authored":false,"authors":[{"type":"individual","id":"1281bb8ce5440734","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":null,"bio":"Mainly coding for fun these days!"}],"members":[{"type":"individual","id":"1281bb8ce5440734","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6ff40e8e4a2133a9","slug":"ric","title":"RIC","owner":{"id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg"}},"type":"notebook","body":{"titling":"auto","title":"RIC Profit /Loss Bar Chart","cells":[{"id":0,"value":"md` # RIC Profit /Loss Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"bar","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"collide = function(alpha) {\n // https://bl.ocks.org/mbostock/7882658\n const quadtree = d3.quadtree()\n .x(function (d) { return d.x; })\n .y(function (d) { return d.y; })\n .extent([[0, 0], [width, height]])\n .addAll(nodes);\n return function (d) {\n let r = d.radius + (maxRadius * 8) + Math.max(padding, clusterPadding),\n nx1 = d.x - r,\n nx2 = d.x + r,\n ny1 = d.y - r,\n ny2 = d.y + r;\n quadtree.visit(function (quad, x1, y1, x2, y2) {\n let data = quad.data;\n if (data && data !== d) {\n let x = d.x - data.x,\n y = d.y - data.y,\n l = Math.sqrt(x * x + y * y),\n r = d.radius + data.radius + (d.cluster == data.cluster ? padding : clusterPadding);\n if (l < r) {\n l = (l - r) / l * alpha;\n d.x -= x *= l;\n d.y -= y *= l;\n data.x += x;\n data.y += y;\n }\n }\n return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;\n });\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"cluster = function(alpha) {\n // https://bl.ocks.org/mbostock/7881887\n return function (d) {\n const cluster = clusters[d.cluster];\n if (cluster === d || d.cluster == 0) return;\n let x = d.x - cluster.x,\n y = d.y - cluster.y,\n l = Math.sqrt(x * x + y * y),\n r = d.radius + cluster.radius + 3;\n if (l != r) {\n l = (l - r) / l * alpha;\n d.x -= x *= l;\n d.y -= y *= l;\n cluster.x += x;\n cluster.y += y;\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"hullPoints = function (data) {\n let pointArr = [];\n const padding = 2.5;\n data.each(d => {\n const pad = d.radius + padding;\n pointArr = pointArr.concat([\n [d.x - pad, d.y - pad],\n [d.x - pad, d.y + pad],\n [d.x + pad, d.y - pad],\n [d.x + pad, d.y + pad]\n ]);\n });\n return pointArr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"clusters = {\n const clusterMap = {};\n nodes.forEach(n => {\n if (!clusterMap[n.cluster] || (n.radius > clusterMap[n.cluster].radius)) clusterMap[n.cluster] = n;\n });\n return clusterMap;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"factor = 20/mini","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"mini = Math.abs(d3.min(nodes, d => d.radius))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"formatn = d3.format(\"($.2f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"labels = [{\n text: 'Profit',\n x: 225,\n y: 150\n }, {\n text: 'Loss',\n x: 650,\n y: 150\n }, {\n text: 'Loss',\n x: 650,\n y: 400\n }, {\n text: 'Profit',\n x: 225,\n y: 400\n }]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"google_sheet_url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRoXVuUvF6D6iCd-CK31QERBtrS87n-l18qhqz1az6-SpvpYAbP42LAez9rdeylkMuFvozMpZCx51wL/pub?output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"url = `https://sjp7001.herokuapp.com/${google_sheet_url}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"google_sheet_url2 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQENoHMvrKf_PqLPjOTQDr_1fyNIYV67RhCZmltgfcxSJ3HLiPH5_JBGc5G4rn5MsQTsPs-VFUNKPn0/pub?output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"padding = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"clusterPadding = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"numClusters = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"maxRadius = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"color = d3.scaleOrdinal()\n .domain([\">200\",\">100<200\",\">50<100\",\">0<50\",\"<0>-25\",\"<-25>-50\",\"<-50>-75\",\"<-75\" ]) .range([\"#a6cee3\",\"#1f78b4\",\"#b2df8a\",\"#33a02c\",\"#fb9a99\",\"#e31a1c\",\"#fdbf6f\",\"#ff7f00\",\"#cab2d6\",\"#6a3d9a\",\"#ffff99\",\"#b15928\"]);\n \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"radius = d3.scaleLinear().domain([0, 10]).range([3, maxRadius])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"function replaceStr(str, find, replace) {\n for (var i = 0; i < find.length; i++) {\n str = str.replace(new RegExp(find[i], 'gi'), replace[i]);\n }\n return str;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"// adapted from https://observablehq.com/@mbostock/autosize-svg\ngetLabelLength = (label, labelFont = \"12px sans-serif\") => {\n const id = DOM.uid(\"label\").id;\n const svg = html``;\n\n // Add the SVG element to the DOM so we can determine its size.\n document.body.appendChild(svg);\n\n // Compute the bounding box of the content.\n const width = svg.getElementById(id).getBBox().width;\n\n // Remove the SVG element from the DOM.\n document.body.removeChild(svg);\n\n return width;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"function entity(character) {\n return `&#${character.charCodeAt(0).toString()};`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-array@2.4\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"barcode = nodes.sort((a, b) => d3.descending(Math.abs(a.PL), Math.abs(b.PL)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"format = d3.format(\"+,d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"tickFormat = d3.formatPrefix(\"+.1\", 1e3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"import {chart as bar} with {barcode as data, tickFormat as tickFormat, format as format} from \"@d3/diverging-bar-chart\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"