2b:null 2c:["$","title",null,{"children":"SJP Portfolio Control Chart | Steve Pegg | Observable"}] 31:T1e89,chart = { let parent = this; parent = document.createElement("div"); const svg = d3.select(DOM.svg(width + 190, height + 60)) .attr("id", "svg"); // .style("overflow", "visible") //const svg = d3.create("svg") // .attr("viewBox", [0, 0, width, height]); data.sort(function (a, b) { return a.dayID - b.dayID; }); var i,ii var clabel clabel = order //console.log("test" + plot) var mean, total = 0; for (i = 0; i < data.length; i++) { total += data[i][plot]; //console.log("total" + data[i][plot] +" "+data[i].date) } var xx = []; for (i = 0; i < data.length; i++) { xx.push(data[i][plot]); } mean = (total / data.length).toFixed(2); // console.log("mean" + mean) var sdev = 0 for (i = 0; i < data.length; i++) { sdev += Math.pow((mean - data[i][plot]), 2); } var sd = (Math.sqrt(sdev / (data.length - 1))).toFixed(2); var lcl = (+mean - (3 * +sd)); var ucl = (+mean + (3 * +sd)); for (i = 0; i < data.length; i++) { data[i].mean = mean; data[i].sd = sd; data[i].ucl = ucl; data[i].lcl = lcl; //console.log("lcl" + data[i].lcl) } var count = 1, log = [], countdown, logdown = []; for (i = 0; i < data.length; i++) { data[i].colour = "black"; if (data[i][plot] > mean) { if (countdown > 8) { for (ii = 0; ii < logdown.length; ii++) { data[logdown[ii]].colour = "red" } } countdown = 1; logdown = []; count += 1; log.push(i); } else { if (count > 8) { for (ii = 0; ii < log.length; ii++) { data[log[ii]].colour = "#98fb98" } } count = 1; log = []; countdown += 1; logdown.push(i); } } for (i = 0; i < data.length; i++) { if (data[i][plot] > ucl) { data[i].colour = "#98fb98" } if (data[i][plot]< lcl) { data[i].colour = "red" } if (data[i].buydate === data[i].dayID) { data[i].colour = "yellow" } } data.sort(function (a, b) { return a.dayID - b.dayID; }); //here // Set the dimensions of the canvas / graph var margin = { top: 30, right: 40, bottom: 30, left: 50 }; // Parse the date / time // var parseDate = d3.timeParse("%Y-%m-%dT%H:%M:%S"); // Set the ranges var x = d3.scaleTime().range([0, width]); //var x = d3.scale.linear().range([0, width]); var y = d3.scaleLinear().range([height, 0]); var y2 = d3.scaleLinear().range([height, 0]); // Define the axes var xAxis = d3.axisBottom().scale(x) .ticks(5); var yAxis = d3.axisLeft().scale(y) .ticks(5); var y2Axis = d3.axisRight().scale(y2) .ticks(5); // Define the line var valueline = d3.line() .x(function (d) { return x(d.date); }) .y(function (d) { return y(d[plot]); }); //var valueline2 = d3.svg.line() // .x(function (d) { return x(d.date); }) // .y(function (d) { return y(d.deltaPC); }); var priceline = d3.line() .x(function (d) { return x(d.date); }) .y(function (d) { return y2(d.mid); }); var ucl = d3.line() .x(function (d) { return x(d.date); }) .y(function (d) { return y(d.ucl); }); var lcl = d3.line() .x(function (d) { return x(d.date); }) .y(function (d) { return y(d.lcl); }); var mean = d3.line() .x(function (d) { return x(d.date); }) .y(function (d) { return y(d.mean); }); // Adds the svg canvas svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Scale the range of the data x.domain(d3.extent(data, function (d) { return d.date; })); y.domain([d3.min(data, function (d) { return d[plot]-5; }), d3.max(data, function (d) { return d[plot]+5; })]); y2.domain([d3.min(data, function (d) { return d.mid; }), d3.max(data, function (d) { return d.mid; })]); // console.log(d3.min(data, function (d) { return d.mid; })); // Add the valueline path. svg.append("path") .attr("class", "line") //.style('fill', "red") .style('stroke', "grey") .attr("d", valueline(data)); svg.append("path") .attr("class", "line") //.style('fill', "red") .style('stroke', "blue") .attr("d", priceline(data)); svg.append("path") //.attr("class", "line") .attr("d", ucl(data)); svg.append("path") .attr("class", "line") .attr("d", lcl(data)); svg.append("path") .attr("class", "line") .attr("d", mean(data)); svg.selectAll("dot") .data(data) .enter().append("circle") .filter(function (d) { return d.colour === "black" }) .attr("r", 3.5) .attr("cx", function (d) { return x(d.date); }) .attr("cy", function (d) { return y(d[plot]); }) .attr("fill", function (d) { return d.colour; }) .append("svg:title") .text(function(d) { return d.date; }); svg.selectAll("doti") .data(data) .enter().append("rect") .filter(function (d) { return d.colour === "red" || d.colour === "#98fb98" || d.colour === "yellow" }) //.attr("r", 3.5) .attr("x", function (d) { return x(d.date); }) .attr("y", function (d) { return y(d[plot]); }) .attr("width", 8) .attr("height", 8) .attr("fill", function (d) { return d.colour; }) .attr("transform", "translate(" + -4 + "," + -4 + ")"); // Add the X Axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .style("stroke-width", "1px") // .style("stroke", "yellow") .attr("fill", "yellow") .style("shape-rendering", "crispEdges") .call(xAxis); // Add the Y Axis svg.append("g") .attr("class", "y axis") .style("stroke-width", "1px") //.style("stroke", "yellow") .attr("fill", "yellow") .style("shape-rendering", "crispEdges") .call(yAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + width + ",0)") .style("stroke-width", "1px") //.style("stroke", "yellow") .attr("fill", "yellow") .style("shape-rendering", "crispEdges") .call(y2Axis); svg.append("text") .attr("transform", "translate(" + width/2 + ",0)") //.attr("y", 0 – margin.left) //.attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .style("opacity", 1) // .style("stroke", "white") .attr("fill", "black") .text(clabel); parent.appendChild(svg.node()); // parent.appendChild(tooltip.node()); //return Object.assign(svg.node(), { // update(order) { return Object.assign(parent, { update(order) { } }) } 32:[] 2f:{"id":"1ee8d1c472221979","slug":null,"title":"SJP Portfolio Control Chart","thumbnail":"7a777f6e3b5de5cccbfb3ae86f519f9136fc18828b243f3ad082d3b1988643c6","access_level":"public","create_time":"$D2023-01-05T13:47:59.086Z","update_time":"$D2023-01-10T22:14:20.190Z","view_time":null,"first_public_time":"$D2023-01-05T13:47:59.086Z","has_unpublished_edits":null,"fork":{"id":"af84aea48cce2bc7","slug":null,"title":"ftse350 Control Chart v2","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":989,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SJP Portfolio Control Chart","cells":[{"id":0,"value":"# SJP Portfolio Control Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"viewof order= select({\n title: \"Companies\",\n options: filter,\n value: \"GSK plc\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"viewof dat = date({\n title: \"Select date\", \n min: \"2022-01-01\",\n max: \"2023-01-05\",\n value: \"2021-11-03\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"viewof plot = select([\"param\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"width = 1100;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"html`\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"parseDate = d3.timeParse(\"%d/%m/%Y\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"timeFormat = d3.timeFormat(\"%d/%m/%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"filter = [...new Set(parseData.map(d => d.company).sort(d3.ascending))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":" data = parseData.filter(d => d.company === order && d.date > new Date(dat))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"parseData = {\n dynamic2.forEach(function (d) {\n d.date = parseDate(d.date);\n d.mid = +d.mid;\n d.high = +d.high;\n d.param = +d.param;\n d.dayID = Date.parse(d.date);\n });\n return dynamic2\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"dynamic1 = 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":233,"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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"dynamic2 = { \n var arr = []\n \n const columns = dynamic1.columns.slice(3,812);\n var x = 0\n var FTSEindex\n \n \n dynamic1.forEach(function (d) { \n \n for (x = 0; x < columns.length; x+=2) {\n \n arr.push({\"buydate\": Date.parse(parseDate(d.dayID)), \"dayID\": Date.parse(parseDate(columns[x])), \"symbol\": d.symbol, \"company\": d.company, \"date\":timeFormat(parseDate(columns[x])), \"mid\": (+d[columns[x+1]]).toFixed(2),\"param\": (+d[columns[x]]).toFixed(2)})\n } \n \n })\n \n return arr\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"url = \"https://docs.google.com/spreadsheets/d/1jPMf04dYBheYfymcRt0xaLUa0u6KEUBOTsBucQFTf8k/edit#gid=170925788\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"f = d3.format(\".1f\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"import {date} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"