3e:null 3f:["$","title",null,{"children":"How do designers understand CI (Confidence Intervals)? | IXD Sheridan | Observable"}] 45:T546,Plot.plot({ marginBottom:20, height:500, // inset:80, width: 1000, x: { domain: finalData.map(d => d.date), axis:null, }, color: { type: "diverging", scheme: "burd", pivot: moodValueMean, legend: true, domain: [Math.min(...randomMoodValue), Math.max(...randomMoodValue)], range: [0, 1], // reverse:true, }, marks: [ Plot.ruleY([0,100]), // Plot.axisX({ // domain: finalData.map(d => d.date), // tickRotate: -45, // ticks: 15, // tickSize: 2, // line: true, // labelAnchor: "left", // labelOffset: 70, // // nice: true, // tickFormat: d3.utcFormat("%b,%Y"), // insetLeft:15, // }), Plot.areaY(finalData,{ //CI Area //The mood rate has a range of [0,100] x: "date", y1: d => ((moodValueMean - CI_Level * sigma) < 0 ) ? 0 : moodValueMean - CI_Level * sigma, y2: d => ((moodValueMean + CI_Level * sigma) > 100 ) ? 100 : moodValueMean + CI_Level * sigma, fill:"green", fillOpacity: 0.05, }), Plot.dot(finalData, { x: "date", y: "moodValue", fill: "moodValue" }), Plot.line(finalData,{x:"date", y:moodValueMean,stroke:"green"}), Plot.text([transCI(CI_Level)], { fontSize: 12, y: 90, fill:"green", // stroke:"#000", } ), ], }) 46:T4e1,Plot.plot({ marginBottom:50, height:500, // inset:80, width: 1000, x: { // tickRotate: -45, ticks: 10, tickSize: 2, // line: true, // tickPadding: 7, labelAnchor: "right", labelOffset: 32, nice: true, label: "Participant No.", }, color: { type: "diverging", scheme: "purples", pivot: sleepMean, legend: true, // domain: [Math.min(...sleepHoursFilt), Math.max(...sleepHoursFilt)], domain: [0, Math.max(...sleepHoursFilt)], // range: [0, 1], // reverse:true, }, marks: [ Plot.ruleX([0,110]), Plot.ruleY([0,15]), Plot.areaY(sleepData,{ //CI Area //Sleep Hours can't less than 0 hour y1: d => ((sleepMean - CI_Level2 * sleepSigma) < 0 ) ? 0:sleepMean - CI_Level2 * sleepSigma, y2: sleepMean + CI_Level2 * sleepSigma, x: "participant", fill:"green", fillOpacity: 0.04, }), Plot.dot(sleepData, { y: "sleepHours", x: "participant", fill: "sleepHours" }), Plot.line(sleepData,{y:sleepMean, x:"participant",stroke:"green"}), Plot.text([transCI(CI_Level2)], { fontSize: 12, y: 13, x: 55, fill:"green", // stroke:"#000", } ), ], })47:[{"id":"b097ffcbf121cb177be2b476557f763d15cafe2a30a9bcf69710026916b75cb417ee94832eaab0dddd4cc5de1700fd9f56d1dc404cdde6c635515433a08943e3","href":"https://static.observableusercontent.com/files/b097ffcbf121cb177be2b476557f763d15cafe2a30a9bcf69710026916b75cb417ee94832eaab0dddd4cc5de1700fd9f56d1dc404cdde6c635515433a08943e3","name":"Screen Shot 2023-02-22 at 23.10.36.png","type":"image/png","lastModified":1677125681621.176,"size":29400},{"id":"5e7a5723e1df14100d73a6112cc94f611912639b6dbc1f386ce9a0640ca0f26d12e125eed7cfa68ed81fd56adbfbb23430977d210500c6488635caabf6539ee0","href":"https://static.observableusercontent.com/files/5e7a5723e1df14100d73a6112cc94f611912639b6dbc1f386ce9a0640ca0f26d12e125eed7cfa68ed81fd56adbfbb23430977d210500c6488635caabf6539ee0","name":"SleepStudyData@2.csv","type":"text/csv","lastModified":1677110485061.662,"size":2395}] 43:{"id":"3a3de54c0c0889d8","slug":null,"title":"How do designers understand CI (Confidence Intervals)?","thumbnail":"ad0e44cefeb33b2cf94e7ad3e8f5d7fc74bb172f66a787cdf8555a9d36c0beda","access_level":"public","create_time":"$D2023-02-23T00:01:25.061Z","update_time":"$D2023-09-12T14:44:57.898Z","view_time":null,"first_public_time":"$D2023-05-05T08:05:08.937Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"0a8b950203491c0f","login":"ixd-sheridan","name":"IXD Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/5d0881196900a7350c64d546dd5099a2532e7060f4150f97c1375dae8cb92d45","tier":"education_2026","bio":"Interaction Design at Sheridan College","following":false},"version":2288,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"61fb8670c873e632","login":"dairuixin","name":"Ruixin Dai","avatar_url":"https://avatars-next.observableusercontent.com/abe1016db008932c58b2ed6fffea97a811984fa8b57de8558da2ec6caf3471b5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"61fb8670c873e632","login":"dairuixin","name":"Ruixin Dai","avatar_url":"https://avatars-next.observableusercontent.com/abe1016db008932c58b2ed6fffea97a811984fa8b57de8558da2ec6caf3471b5","tier":null,"role":"editor"},{"type":"team","id":"0a8b950203491c0f","login":"ixd-sheridan","name":"IXD Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/5d0881196900a7350c64d546dd5099a2532e7060f4150f97c1375dae8cb92d45","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"How do designers understand CI (Confidence Intervals)?","cells":[{"id":4,"value":"# How do designers understand CI (Confidence Intervals)?\n\nHello designers! Do you get confused about some data when you are working with data sets for data visualization? I bet CI is one of them. I'm sure you've seen data in databases like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1956,"value":"screenShot20230222At231036 = FileAttachment(\"Screen Shot 2023-02-22 at 23.10.36.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1953,"value":"This image is a piece of dataset [Weighted population characteristics](https://www150.statcan.gc.ca/n1/pub/82-003-x/2020005/article/00002/tbl/tbl01-eng.htm). LCL means Lower Confidence Limit, UCL means Upper Confidence Limit. These two values form the Confidence Interval.

\nHaving a confidence interval indicates that this is a [normally distributed](https://en.wikipedia.org/wiki/Normal_distribution) set of data. This set of data has a mean, and the confidence interval indicates the margin of error in the calculation of the mean. Did you noticed that the value of present is exactly the median of the LCL and UCL? That's how CI applied. present is the estimated mean, and the true mean may be within the confidence interval centered on the estimated mean.
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1967,"value":"Still feel confused? No problem at all! We're not statisticians, we just need to know how to visualize statisticians' works! Here I will explain you in a very simple way what is a confidence interval and how we can apply it in data visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1985,"value":"~~~\n\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1982,"value":"## Normal Distribution","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1980,"value":"[Normal Distribution](https://en.wikipedia.org/wiki/Normal_distribution) is a kind of probability distribution of continuous random variables, and a large number of phenomena in nature, human society, psychology and education are distributed in normal form, such as the level of ability, the good or bad performance of students, etc. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1989,"value":"Here, we use your daily mood as an example. There are times when you are in a good mood and times when you are in a bad mood, but in general, your mood usually tends to be stable over a period of time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2265,"value":"Let's generate an array of your mood rates to see how it looks like in a chart!
\nAt first, please inset these parameters below:
\n(Here's the thing, because we need to generate a dataset with a normal distribution of your mood values, we need you to provide the mean, the sample size and the standard deviation of the array. You can consider standard deviation as the approximate range of fluctuation of your mood values. If the data is given rather than generated, you can calculate its standard deviation. We will discuss this later.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":758,"value":"If you can rate your mood between 0 and 100, you think your average mood value (mean) is:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"viewof mean = Inputs.range([0, 100], {step: 1, label: \"Your average mood value\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2002,"value":"Give a number of days (simple size) you record your mood:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":760,"value":"viewof days = Inputs.range([30, 365], {value:100,step: 1, label: \"Days\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"Now we have to define the Standard Deviation σ.
\nTo easily understand this value now, you can consider it as representing how stable your mood is; the smaller the number, the more stable your mood is.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"viewof sig = Inputs.range([0, 15], {step: 1, label: \"Sigma σ\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"pachinko(d3.randomNormal(mean,sig),[0,100]); \n// Learn more at https://observablehq.com/@mbostock/pachinko-simulator","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2017,"value":"Now drag the three sliders above to see a model of the normal distribution of your emotions! The x-axis in the chart represents mood values, and each globule represents a record of your mood value. You can see that the globules are clustered around the mean of your mood value, with the mean as the center and dispersion toward the ends. This is the normal distribution that meets the [Central limit theorem](https://en.wikipedia.org/wiki/Central_limit_theorem).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"~~~\n\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":391,"value":"## Confidence Interval for Daily Mood Values","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2120,"value":"Now, let's briefly introduce the meaning of [Statistical population](https://en.wikipedia.org/wiki/Statistical_population) and [Sampling](https://en.wikipedia.org/wiki/Sampling_(statistics) in statistics.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2123,"value":"Still, take your mood value data as an example. You can calculate the average of mood values for a certain period of time, and this is if you record mood values everyday. However, maybe there are days when you forget to record them, or you are only recording them intermittently, and there are many times when the record is missing.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2125,"value":"At this point, the data you have is a \"sample\" of your mood values for all days, and we can use the sample data to estimate your overall mood data. There must exist a data that represents your overall mood average, but you can never get it because you don't have all the days' mood records. However, by calculating the sample data's mean and confidence interval, we can estimate the possible value of the \"real overall mean\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2199,"value":"We can make a chart to explain it. Let's generate some random mood values data for each rate record! This data should also be normal distributed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"// randomMoodValue = [d3.randomNormal(moodValue,sigma)()];\nrandomMoodValue = Array.from({length: n}, () => Math.floor(d3.randomNormal(moodValueMean,sigma)() ));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2258,"value":"Now try changing the following three parameters again and observe what happens to the chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2245,"value":"viewof n = Inputs.range([30, 365], {value:100,step: 1, label: \"Days\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2241,"value":"viewof moodValueMean = Inputs.range([0, 100], {step: 1, label: \"Your average mood value\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2253,"value":"viewof sigma = Inputs.range([0, 15], {step: 1, label: \"Sigma σ\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2194,"value":"And here are some choices of Confidence Levels.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1322,"value":"viewof CI_Level = Inputs.radio(new Map([[\"1σ interval = 68% CI\",1], [\"2σ interval = 95% CI\",2], [\"3σ interval = 99.7% CI\",3], [\"4σ interval = 99.99% CI\",4],[\"5σ interval = 99.99994% CI (Paticle Physics standard)\",5]]), {value:0, label: \"Confidence Interval Level\"})\n\n// About standard error and confidence level, learn more at: https://observablehq.com/@bluprince13/standard-error-of-the-mean","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2134,"value":"We can clearly see that the data is centered on the mean (green line) and diverges to the sides. Blue globules mean sad and red ones mean happy. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2127,"value":"You may have noticed that each confidence interval has a percentage number, and this number means the confidence level. We can simply interpret this as \" to what extent we are confident that the overall mean is within this interval?\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2138,"value":"Obviously, the wider the confidence interval, the more \"confidence\" we have that the true overall mean is within the interval. However, it is not good to have a high confidence level, as we may not be able to estimate the overall mean within such a wide range. The most common confidence levels are: 90%, 95%, and 99.97%. You need to set the confidence level according to different situations and requirements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1142,"value":"## The sleep Data Analyze","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1166,"value":"Now, let's use the given data to analyze the significance of the confidence intervals. This is the scenario in which confidence intervals are usually used: through surveys and data collection, statisticians collect a large amount of data. These data are still not all but a sample of the total.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2141,"value":"Here I have a dataset from a sleep survey of 104 random Americans (two missing data have been filtered). By analyzing this dataset, we may be able to estimate the average number of sleep hours for all Americans.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":928,"value":"sleepHours = sleepstudydata.filter(sleepstudydata => sleepstudydata[\"Hours\"] > 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2145,"value":"With the given data, we are able to calculate the sample mean and sample standard deviation by using the formula.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1174,"value":"sleepMean = Number(d3.mean(sleepHoursFilt).toString().match(/^\\d+(?:\\.\\d{0,2})?/))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"// sleepSigma = Math.floor(d3.deviation(hours))\nsleepSigma = Number(d3.deviation(sleepHoursFilt).toString().match(/^\\d+(?:\\.\\d{0,2})?/))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1154,"value":"Now we can do the same thing as we did for mood data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1170,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2209,"value":"viewof CI_Level2 = Inputs.radio(new Map([[\"1σ interval = 68% CI\",1], [\"2σ interval = 95% CI\",2], [\"3σ interval = 99.7% CI\",3], [\"4σ interval = 99.99% CI\",4],[\"5σ interval = 99.99994% CI (Paticle Physics standard)\",5]]), {value:0, label: \"Confidence Interval Level\"})\n\n// About standard error and confidence level, learn more at: https://observablehq.com/@bluprince13/standard-error-of-the-mean","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2164,"value":"Because it is a given data, you cannot change the mean, sample size or standard deviation like you can in the mood value chart. But you can still use the radio box above to change the confidence level.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2167,"value":"The larger the sample size (more people take the survey and provide the data), the closer the sample mean will be to the overall mean. If you have 100, or 1000 or more other Americans do this survey and apply the data to this chart, you would find that the sample mean (the green line) would move up and down, but it would be 68%-99.99% likely to still be within the green confidence interval if you selected the corresponding confidence level.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":924,"value":"~~~\n\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2173,"value":"## At the end...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2175,"value":"Confidence interval is an important concept in statistics and is widely used in many fields. In addition to the confidence intervals for individual arrays mentioned above, there are also cases where confidence intervals for variations are calculated for multiple samples. In the process of learning data visualization, designers will encounter more statistical concepts like this. I am still learning and exploring them as well. I hope my notes are useful to you!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2285,"value":"[Process Doc for this notebook](https://observablehq.com/d/e867d5605b3aef74)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2178,"value":"~~~\n\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"function* pachinko(random, extent, height = 250,width = 1000) {\n const radius = 5;\n const dodge = dodger(radius * 2 + 1);\n const margin = {top: 0, right: 30, bottom: 20, left: 30};\n const values = Float64Array.from({length: days}, random);\n if (extent === undefined) extent = d3.extent(values);\n const x = d3.scaleLinear(extent, [margin.left, width - margin.right]).nice();\n\n const svg = d3.select(DOM.svg(width, height)).style(\"overflow\", \"visible\");\n yield svg.node();\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x));\n\n for (let i = 0; i < days; ++i) {\n if (i % 20 == 0) yield svg.node();\n const cx = x(values[i]);\n const cy = height - margin.bottom - dodge(cx) - radius - 1;\n if (cy < margin.top) break;\n svg.append(\"circle\")\n .attr(\"cx\", cx)\n .attr(\"cy\", -400)\n .attr(\"r\", radius)\n .attr(\"cy\", cy)\n .attr(\"fill\", \"#d3b4e0\");\n }\n\n yield svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"dodger = radius => {\n const radius2 = radius ** 2;\n const bisect = d3.bisector(d => d.x);\n const circles = [];\n return x => {\n const l = bisect.left(circles, x - radius);\n const r = bisect.right(circles, x + radius, l);\n let y = 0;\n for (let i = l; i < r; ++i) {\n const { x: xi, y: yi } = circles[i];\n const x2 = (xi - x) ** 2;\n const y2 = (yi - y) ** 2;\n if (radius2 > x2 + y2) {\n y = yi + Math.sqrt(radius2 - x2) + 1e-6;\n i = l - 1;\n continue;\n }\n }\n circles.splice(bisect.left(circles, x, l, r), 0, { x, y });\n return y;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1923,"value":"randomDateArrayReap = Array.from({length: n}, () => (new getRandomDate()));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"randomDateArray = (randomDateArrayReap.reduce(function(a,b){if(a.indexOf(b)<0)a.push(b);return a;},[]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"function getRandomDate() {\n const maxDate = Date.now();\n const timestamp = Math.floor(Math.random() * maxDate);\n return new Date(timestamp);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1622,"value":"function randomDate(startDate) {\n return new Date(startDate.getTime() + Math.random() * (Date.now() - startDate.getTime()));\n}\n// Tried several method to generate random date.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1571,"value":"randomDateArrayRaw = randomDateArray.flatMap(n => n.toISOString().split('T')[0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1189,"value":"parNo = sleepHours.map(data => {\n return data.Participant\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"sleepHoursFilt = sleepHours.map(data => {\n return data.Hours\n})\n// sleepHourArr = sleepHours.map(d => [d.Participant, d.Hours])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1212,"value":"function jsonRecords4(arr1,arr2) {\n var sleepRecords = []\nfor(var i in arr1) {\n sleepRecords.push({\n \"participant\" : arr1[i],\n \"sleepHours\" : arr2[i],\n })\n}\n return sleepRecords;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"finalData = jsonRecords(randomDateArray,randomMoodValue)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"function jsonRecords(arr1,arr2) {\n var moodRecords = []\nfor(var i in arr1) {\n moodRecords.push({\n \"date\" : arr1[i],\n \"moodValue\" : arr2[i],\n // \"\"arr3[0]\"\" : arr1[i]\n })\n}\n return moodRecords;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"sleepData = jsonRecords4(parNo,sleepHoursFilt)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1353,"value":"function transCI(CIL) {\n // const CIL_txt = 0,\n if(CIL === null){\n return \"Please select a CI level\"\n }else if(CIL == 1){\n return \"1σ interval = 68%CI\"\n }else if(CIL == 2){\n return \"2σ interval = 95%CI\"\n }else if(CIL == 3){\n return \"3σ interval = 99.7%CI\"\n }else if(CIL == 4){\n return \"4σ interval = 99.99%CI\"\n }else if(CIL == 5){\n return \"5σ interval = 99.99994%CI (Paticle Physics standard)\"\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1715,"value":"sleepstudydata = await FileAttachment(\"SleepStudyData@2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"sleepstudydata","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"