2c:null 2d:["$","title",null,{"children":"Rolling 12m share price data by quarter | Steve Pegg | Observable"}] 32:T17c5, chart = async () => { const svg = d3.select(DOM.svg(width, height)) .attr('id', 'chart'); //----------------- var margin = {top: 0, right: 0, bottom: 0, left: 0}, domainwidth = width - margin.left - margin.right, domainheight = height - margin.top - margin.bottom; var x = d3.scaleLinear() .domain([1,6]) .range([0, domainwidth]); var y = d3.scaleLinear() .domain([1,6]) .range([domainheight, 0]); var g = svg.append("g") .attr("transform", "translate(" + margin.top + "," + margin.top + ")"); g.append("rect") .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom) .attr("fill", "#F6F6F6"); g.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + y.range()[0] / 2 + ")") // `translate(0, ${y.range()[0]} / 2)` ??? .call(d3.axisBottom(x).ticks(6)); g.append("g") .attr("class", "y axis") .attr("transform", "translate(" + x.range()[1] / 2 + ", 0)") .call(d3.axisLeft(y).ticks(6)); g.append("g") .attr('class', 'quadrant-label') .selectAll(".quadrant-label") .data(labels) .enter() .append('text') .attr('x', function (d) { return d.x; }) .attr('y', function (d) { return d.y; }) .attr('text-anchor', 'middle') .text(function (d) { return d.text; }); var seg1 = g.append("svg") .attr('class', 'seg') .attr("x", x(3.5)) .attr("y", y(3.5)) seg1.append("rect") .attr("width", x(6) - x(3.5)) .attr("height", y(3.5)) .attr("fill", "#ffffcc") .attr("opacity", 0.7); var seg2 = g.append("svg") .attr('class', 'seg') .attr("x", x(1)) .attr("y", y(3.5)) seg2.append("rect") .attr("width", x(6) - x(3.5)) .attr("height", y(3.5)) .attr("fill", "#ffffcc") .attr("opacity", 0.7); var seg3 = g.append("svg") .attr('class', 'seg') .attr("x", x(1)) .attr("y", y(6)) seg3.append("rect") .attr("width", x(6) - x(3.5)) .attr("height", y(3.5)) .attr("fill", "#ffffcc") .attr("opacity", 0.7); var seg4 = g.append("svg") .attr('class', 'seg') .attr("x", x(3.5)) .attr("y", y(6)) seg4.append("rect") .attr("width", x(6) - x(3.5)) .attr("height", y(3.5)) .attr("fill", "#ffffcc") .attr("opacity", 0.7); //-------------------- const line = d3.line().curve(d3.curveBasisClosed) const simulation = d3.forceSimulation() .alpha(0.2) // .force("center", d3.forceCenter(width / 3, height / 2)) .force("x", d3.forceX().x(d => d.focusX).strength(0.5)) .force("y", d3.forceY().y(d => d.focusY).strength(0.5)) .force("collide", forceClusterCollision() .radius(d => d.r + 1) .strength(0.8) .clusterPadding(10)) .nodes(nodes, d => d.id) .on("tick", ticked) .restart(); let showCells = true; const hullG = svg.append('g') .attr('class', 'hulls'); const node = svg.append("g") .attr("stroke", "#111") .attr("stroke-width", 2) .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => d.radius) .attr('fill', function(d) { return color(d.cluster)}) .on("click", clickNode) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ); function clickNode(node) { console.log(node) // loadTooltipContent(node); } const text = svg.append("g") .attr("class", "text") .selectAll("text") .data(nodes) .enter().append("text") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "start") .text(d => d.name); node.append("title") .text(d => d.id); const hulls = hullG .selectAll('path') .data(Object.keys(clusters).map(c => { return { cluster: c, nodes: node.filter(d => d.cluster == c) }; }).filter(d => d.cluster != 0), d => d.cluster) .enter().append('path') .attr('d', d => line(d3.polygonHull(hullPoints(d.nodes)))) .attr('fill', function(d) { return color(d.cluster)}) .attr('opacity', 0.4);; function ticked() { node .each(cluster(0.1)) .each(collide(0.2)) .attr('cx', d => d.x = Math.max(d.radius, Math.min(width - d.radius, d.x))) .attr('cy', d => d.y = Math.max(d.radius, Math.min(height - d.radius, d.y))); hulls .attr('d', d => line(d3.polygonHull(hullPoints(d.nodes)))); text .attr("x", d => d.x - 18) //position of the lower left point of the text .attr("y", d => d.y + 5); //position of the lower left point of the text } //viewof updateButton = html`` d3.select('#updateButton').on('click', () => { showCells = !showCells; const useNodes = showCells ? nodes : nodes.map(d => ({ ...d, radius: 3, cluster: 0 })); simulation .force('collide', d3.forceCollide(d => d.radius + padding)) .nodes(useNodes); simulation.alpha(0.1).restart(); node .data(useNodes, d => d.id) .transition() .duration(1000) .attr('class', d => `cluster${d.cluster}`) .attr('r', d => d.radius) .attr('fill', function(d) { return color(d.cluster)}); hulls .transition() .duration(1000) .attr('opacity', showCells ? 0.4 : 0) }); function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.1).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } return svg.node(); }33:T746,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 data.forEach(function (d,i) { if(!isNaN(d.month3)){ switch (true) { case ((+d["Local price"] < +d.month3) && (+d.month3 < +d.month6) && (+d.month6 < +d.month9)): cluster = "0<3<6<9" clusterid = 1 clusterX = 800 clusterY = 10 break; case ((+d["Local price"] > +d.month3) && (+d.month3 > +d.month6) && (+d.month6 > +d.month9)): cluster = "0>3>6>9" clusterid = 2 clusterX = 100 clusterY = 450 break; case ((+d["Local price"] < +d.month3) && (+d.month3 < +d.month6)): cluster = "0<3<6" clusterid = 3 clusterX = 800 clusterY = 250 break; case ((+d["Local price"] > +d.month3) && (+d.month3 > +d.month6)): cluster = "0>3>6" clusterid = 4 clusterX = 300 clusterY = 250 break; case ((+d["Local price"] <= +d.month3)) : cluster = "0<3" clusterid = 5 clusterX = 800 clusterY = 450 break; case ((+d["Local price"] >= +d.month3)): cluster = "0>3" clusterid = 6 clusterX = 100 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": 25, "name": d.ShortCode, "m3": +d.month3,"m6": +d.month6,"m9": +d.month9,"m12": +d.month12,"focusX": clusterX,"focusY": clusterY}) }}) return names; }34: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 forceCollision35: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() }36:[] 30:{"id":"52e590140e9755bd","slug":"rolling-12m-share-price-data-by-quarter-wip2","title":"Rolling 12m share price data by quarter","thumbnail":"b0650b4a8f70100a508ef197ca0c4eeb0a76b85a79899f0837de02e29a932b0c","access_level":"public","create_time":"$D2021-02-03T11:13:30.027Z","update_time":"$D2023-02-19T12:26:32.004Z","view_time":null,"first_public_time":"$D2021-02-03T19:40:49.569Z","has_unpublished_edits":null,"fork":true,"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":636,"publish_version":null,"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":2,"collection":{"id":"6ff40e8e4a2133a9","slug":"ric","title":"RIC","owner":{"id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg"}},"type":"notebook","body":{"titling":"auto","title":"Rolling 12m share price data by quarter","cells":[{"id":0,"value":"md` # Rolling 12m share price data by quarter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"menu = swatches({\n colour: color, \n// columns: \"180px\",\n // swatchRadius: 20,\n labelFormat: function (l) { \n const find = [\"0\",\"3\",\"6\",\"9\"];\n const replace = [\"today\",\"3m\",\"6m\",\"9m\"]\n l = replaceStr(l, find, replace);\n return l} \n}) \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"chart();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":false,"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":197,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"labels = [{\n text: 'lower Risk',\n x: 225,\n y: 150\n }, {\n text: 'highest Risk',\n x: 650,\n y: 150\n }, {\n text: 'medium Risk',\n x: 650,\n y: 400\n }, {\n text: 'lowest Risk',\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":"url = \"https://docs.google.com/spreadsheets/d/1VKH8eFHuz2hfekH8Mra_60WX6lDdIAP70gKRO0Nao-Y/edit#gid=2012009870\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"data = d3.csv(getCsvUrl(url), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"getCsvUrl = url => {\n url = new URL(url);\n const id = url.pathname.split(\"/\")[3]\n const gid = new URLSearchParams(url.hash.slice(1)).get(\"gid\") || 0;\n return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`\n}\n","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([\"0<3<6<9\",\"0>3>6>9\",\"0<3<6\",\"0>3>6\",\"0<3\",\"0>3\"]) \n .range([\"#BF0A30\",\"#4682B4\",\"#FA8072\",\"#00BFFF\",\"#7CFC00\",\"#FFFF00\",\"#000080\"]);\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":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"$35","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"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"