2b:null 2c:["$","title",null,{"children":"Control Chart v1 | Steve Pegg | Observable"}] 31:T1d71,chart = { let parent = this; parent = document.createElement("div"); const svg = d3.select(DOM.svg(width + 90, 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 var mean, total = 0; for (i = 0; i < data.length; i++) { total += data[i].param; console.log("total" + data[i].param) } var xx = []; for (i = 0; i < data.length; i++) { xx.push(data[i].mid); } 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].param), 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].param > 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].param > ucl) { data[i].colour = "#98fb98" } if (data[i].param < lcl) { data[i].colour = "red" } } 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.param); }); //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.param -5; }), d3.max(data, function (d) { return d.param + 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.param); }) .attr("fill", function (d) { return d.colour; }); svg.selectAll("doti") .data(data) .enter().append("rect") .filter(function (d) { return d.colour === "red" || d.colour === "#98fb98" }) //.attr("r", 3.5) .attr("x", function (d) { return x(d.date); }) .attr("y", function (d) { return y(d.param); }) .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:[{"id":"901a50158311b64f452bae5818ac58af5d7ec2e82cf1eb481a7c8f49b9172ab01f7b71efc3a55cfa3d9d0f53944058d494e1082c464c9818c3c9f9f9b25caa71","href":"https://static.observableusercontent.com/files/901a50158311b64f452bae5818ac58af5d7ec2e82cf1eb481a7c8f49b9172ab01f7b71efc3a55cfa3d9d0f53944058d494e1082c464c9818c3c9f9f9b25caa71","name":"Stock3.csv","type":"text/csv","lastModified":1672479671741.164,"size":54234},{"id":"e2ff5315ed3a7661bc050f340adc8678f086ea353007fff86d627e3f0e07f7c5e3aded5046adc5aa25286a675c2cc7d50de9bb7e11f88c53d156d62b3869d466","href":"https://static.observableusercontent.com/files/e2ff5315ed3a7661bc050f340adc8678f086ea353007fff86d627e3f0e07f7c5e3aded5046adc5aa25286a675c2cc7d50de9bb7e11f88c53d156d62b3869d466","name":"Stock2@2.csv","type":"text/csv","lastModified":1672416622556.934,"size":131195},{"id":"19ed1e0977b186a5999e52fa682fe50fe5397340d99df02a051872156071e57002ee98f69f9eac1a944e1125425b71e1f316ccd5a59e90fb520a41e5ba3033a7","href":"https://static.observableusercontent.com/files/19ed1e0977b186a5999e52fa682fe50fe5397340d99df02a051872156071e57002ee98f69f9eac1a944e1125425b71e1f316ccd5a59e90fb520a41e5ba3033a7","name":"bg.gif","type":"image/gif","lastModified":1672419352254.451,"size":1503},{"id":"1c0142b7d1ebfc8fa83e53aadc4b94d0b6bce7e916a4b947fa690d73966a09c5a4da5016793e8792b49170f8ac372bdb129dc78e52da04546b5ead3f0d240095","href":"https://static.observableusercontent.com/files/1c0142b7d1ebfc8fa83e53aadc4b94d0b6bce7e916a4b947fa690d73966a09c5a4da5016793e8792b49170f8ac372bdb129dc78e52da04546b5ead3f0d240095","name":"Stock3@1.csv","type":"text/csv","lastModified":1672480768831.124,"size":54819},{"id":"54fd7ccd438b9e23506c604de74fb175b95ec1d2d496b97d15d9c0f31c774d65c78d788d75bf93b4319a90f649afd592229352fdd3f4544f16cb6876c86b3423","href":"https://static.observableusercontent.com/files/54fd7ccd438b9e23506c604de74fb175b95ec1d2d496b97d15d9c0f31c774d65c78d788d75bf93b4319a90f649afd592229352fdd3f4544f16cb6876c86b3423","name":"Stock3@2.csv","type":"text/csv","lastModified":1672498305745.291,"size":17146}] 2f:{"id":"61e25dfe2ad67f04","slug":null,"title":"Control Chart v1","thumbnail":"be6909c0f712b84a8da77ad8ef8f08af3fd9c834f99955a9b32c374b16e6ba09","access_level":"public","create_time":"$D2022-12-30T10:24:51.168Z","update_time":"$D2023-01-01T13:18:31.782Z","view_time":null,"first_public_time":"$D2022-12-30T10:24:51.168Z","has_unpublished_edits":null,"fork":{"id":"c918b864becc00a2","slug":null,"title":"Google Sheets Starter","owner":{"id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg"}},"stars":1,"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":712,"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":null,"type":"notebook","body":{"titling":"auto","title":"Control Chart v1","cells":[{"id":0,"value":"# Control Chart v1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"viewof order = select(filter)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"height = 500;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"width = 1100;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"bg = FileAttachment(\"bg.gif\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"bg.url()","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":true,"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))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"file = FileAttachment(\"Stock3@2.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"//part1 = d3.csvParse(await file.text())","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)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"//combo = [].concat(part1, part2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"parseData = {\n part2.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 });\n return part2\n}","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":"part2 = 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":true,"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/1UqYcM4PiluFhdakhymfNfvFxmPIE2ykryUFK_qAwZeU/edit#gid=0\"","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"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"