27:null 28:["$","title",null,{"children":"Chat with Visualization - A Simple Test | LiangweiOIO | Observable"}] 2d:T16f7,chart = { let parent = this; parent = document.createElement("div"); const svg = d3.select(DOM.svg(width + 90, height + 60)).attr("id", "svg"); var i, ii; var clabel; clabel = order; var mean, total = 0; var xx = []; var sdev = 0; for (i = 0; i < data.length; i++) { total += data[i].param; xx.push(data[i].mid); } mean = (total / data.length).toFixed(2); 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 y = d3.scaleLinear().range([height, 0]); var y2 = d3.scaleLinear().range([height, 0]); var xAxis = d3.axisBottom().scale(x).ticks(5); var yAxis = d3.axisLeft().scale(y).ticks(5); var y2Axis = d3.axisRight().scale(y2).ticks(5); var valueline = d3 .line() .x(function (d) { return x(d.date); }) .y(function (d) { return y(d.param); }); 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); }); 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("stroke", "grey") .attr("d", valueline(data)); svg .append("path") .attr("class", "line") .style("stroke", "blue") .attr("d", priceline(data)); svg.append("path").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()); return Object.assign(parent, { update(order) {} }); }2e:[{"id":"c4aacf2a4d0dcb538fd1735f12b67fcf09d963b7e594232349b7239150bca538b7b125fc7bf5ee8dfa18920333b308892183c3c1694781122dea1b07ab1341d4","href":"https://static.observableusercontent.com/files/c4aacf2a4d0dcb538fd1735f12b67fcf09d963b7e594232349b7239150bca538b7b125fc7bf5ee8dfa18920333b308892183c3c1694781122dea1b07ab1341d4","name":"Stock3-2.csv","type":"text/csv","lastModified":1698842131749.267,"size":17146},{"id":"0a92f8f34740357236755dad314cd2cd65923f4af7e0a78fdacb610841a16d2f3bb96699ae2823be704975ff152703099531fde00e460128c2dc84f6d9ae9d2e","href":"https://static.observableusercontent.com/files/0a92f8f34740357236755dad314cd2cd65923f4af7e0a78fdacb610841a16d2f3bb96699ae2823be704975ff152703099531fde00e460128c2dc84f6d9ae9d2e","name":"Proto.csv","type":"text/csv","lastModified":1698842695674.518,"size":54337}] 2b:{"id":"3a9a035c9b0f1992","slug":null,"title":"Chat with Visualization - A Simple Test","thumbnail":"fb923a06845158aef4fbd84e40332e667fbdf80054b4697dda93e49671628049","access_level":"public","create_time":"$D2023-11-01T12:23:53.756Z","update_time":"$D2023-11-01T12:57:15.821Z","view_time":null,"first_public_time":"$D2023-11-01T12:23:53.756Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5b1f845af070d16a","login":"liangweioio","name":"LiangweiOIO","avatar_url":"https://avatars-next.observableusercontent.com/3b431401e188c19af0c2179ded1d97a2859f4388e4169e94bc8ebec04b269a41","tier":"starter_2024"},"version":96,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d8b9f18ecdde6a17","login":"liangweioio","name":"LiangweiOIO","avatar_url":"https://avatars-next.observableusercontent.com/3b431401e188c19af0c2179ded1d97a2859f4388e4169e94bc8ebec04b269a41","tier":null}],"members":[{"type":"individual","id":"d8b9f18ecdde6a17","login":"liangweioio","name":"LiangweiOIO","avatar_url":"https://avatars-next.observableusercontent.com/3b431401e188c19af0c2179ded1d97a2859f4388e4169e94bc8ebec04b269a41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Chat with Visualization - A Simple Test","cells":[{"id":3,"value":"# Chat with Visualization - A Simple Test","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"## 1. Setup OpenAI","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"To bign, provide an OpenAI key.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"viewof gptKey = {\n return Inputs.password({label: \"OpenAI Key\", submit: true, width: 400, password: true, required: false})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"## 2. Import Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"viewof order = select(company)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"company = [...new Set(parseData.map(d=>d.company))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":" data = parseData.filter(d => d.company === order)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"parseData = {\n part.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 part\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"parseDate = d3.timeParse(\"%d/%m/%Y\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"part = FileAttachment(\"Proto.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"unemployment = FileAttachment(\"Stock3-2.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"