2c:null 2d:["$","title",null,{"children":"Drawing SVG with D3 2 | Dynamic Data Visualization 373 | Observable"}] 32:T52a,{ let w = 800; let h = 150; let svg = d3 .create("svg") .attr("width", "100%") .attr("viewBox", [0, 0, w, h]) .style("border", "solid 1px black"); let [xmin, xmax, ymin, ymax] = [-3.5, 3.5, -0.2, 1.8]; let pad = 20; let x_scale = d3 .scaleLinear() .domain([xmin, xmax]) .range([pad, w - pad]); let y_scale = d3 .scaleLinear() .domain([ymin, ymax]) .range([h - pad, pad]); let path = d3 .line() .x((d) => x_scale(d[0])) .y((d) => y_scale(d[1])); let pt_lists = d3 .range(0.3, 2, 0.1) .map((s) => d3.range(-4, 4, 0.01).map((x) => [x, f(0, s)(x)])); let plots = svg.append("g").attr("fill", "none"); plots .selectAll("path") .data(pt_lists) .join("path") .attr("d", path) .attr("stroke-width", (_, i) => 0.1 * (22 - i)) .attr("stroke", (_, i) => d3.interpolateTurbo(0.05 + i / 10)); // Draw the axes svg .append("g") .attr("transform", `translate(0, ${y_scale(0)})`) .call( d3 .axisBottom(x_scale) .tickValues([-3, -2, -1, 1, 2, 3]) .tickFormat(d3.format("d")) .tickSizeOuter(0) ); svg .append("g") .attr("transform", `translate(${x_scale(0)})`) .call(d3.axisLeft(y_scale).tickValues([0.5, 1, 1.5]).tickSizeOuter(0)); return svg.node(); }33:T5cd,one_axis = { let w = 800; let h = 80; let svg = d3 .create("svg") .attr("width", "100%") .attr("overflow", "visible") .attr("viewBox", [0, 0, w, h]); let [xmin, xmax] = [-2, 8]; let x_scale = d3.scaleLinear().domain([xmin, xmax]).range([0, w]); // Draw the axis let axis = svg .append("g") .attr("transform", `translate(0, ${h / 2})`) .call(d3.axisBottom(x_scale)); let figure_text = svg .append("text") .attr("text-anchor", "middle") .attr("x", w / 2) .attr("y", 0.2 * h) .attr("font-size", 14) .attr("opacity", 1) .text("A desired domain from -2 to 8 relates to"); let image_text = svg .append("text") .attr("text-anchor", "middle") .attr("x", w / 2) .attr("y", 0.2 * h) .attr("font-size", 14) .attr("opacity", 0) .text("an image domain of 0 to 800, which relates back to"); svg.node().update = update; return svg.node(); // We'll learn about transitions and updates later. function update() { if (xmin == -2) { xmin = 0; xmax = w; figure_text.transition().duration(500).style("opacity", 0); image_text.transition().duration(500).style("opacity", 1); } else { xmin = -2; xmax = 8; figure_text.transition().duration(500).style("opacity", 1); image_text.transition().duration(500).style("opacity", 0); } x_scale.domain([xmin, xmax]); axis.transition().duration(500).call(d3.axisBottom(x_scale)); } }34:T5ae,#### Setting up an axis One thing that is super nice about `d3.scaleLinear` is that it interacts very nicely with the family of `d3.axis*` functions to facilitate the setup of axes, which can be quite tedious to do from scratch. Specifically, if `scale` is a linear scale and `g` is a D3 selection, then d3.axisBottom(scale)(g) will append nice graphics elements for a horizontal axis with tick marks below the axis to the selection `g`. Similarly, d3.axisLeft(scale)(g) will create a vertical axis with tick marks on the left side of the axis. Typically, these are applied via a process that looks like: g.call(d3.axis*(scale)) In that last bit of code, `g.call` is a method of every D3 selection. It accepts a function, applies it to the selection `g`, and returns the resulting selection. This might seem like a round about way of doing things but it facilitates method chaining. A common idiom ends up looking like so: svg .append("g") .attr("transform", `translate(\${where_you_want})`) .call(d3.axis*(scale)) You can always specify more attributes after the `.call`, if desired. #### Drawing a number line Let's put these ideas together to draw a number line with a few points on it. We'll build on the `x_scale` that maps ${tex`[-2,8]`} to ${tex`[0,800]`} that we already have and we'll plot the points ${tex`1`}, ${tex`e`}, and ${tex`\pi`} together with the endpoints. Here's how the whole process goes:35:T40e,#### Drawing two axes Let's revisit the pentagon we plotted last time. This time, though, we're going to use `d3.scaleLinear` to map the points into the specified `viewBox`. It still makes sense to use `viewBox`, since it helps with [responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) - that is, techniques that help the image work well on devices of a wide variety of sizes. Here are a few other things to note: - An axis will extend over the entire domain specified in the construction of the scale. We might sometimes use a `pad` variable to give the axis a little space on the edges. - I picked the figure domain ${tex.block`\begin{aligned}&-3\leq x \leq 5 \\ &-2 \leq y \leq 3\end{aligned}`} somewhat arbitrarily. It can be important, though, that your figure aspect ratio match that of the `viewBox` ratio, *if* you want your geometric figures to be true. Having said that, that's often not particularly important for data visualizations. - The pentagon isn't upside down anymore!36:T583,{ let w = 800; let h = 500; let svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", "100%") .style("max-width", `${w}px`) .style("border", "solid black 2px"); let pad = 10; let [xmin, xmax, ymin, ymax] = [-3, 5, -2, 3]; let x_scale = d3 .scaleLinear() .domain([xmin, xmax]) .range([pad, w - pad]); let y_scale = d3 .scaleLinear() .domain([ymin, ymax]) .range([h - pad, pad]); // Here are the vertices of the pentagon: let n = 5; let pts = d3 .range(n) .map((i) => [ Math.sin((2 * Math.PI * i) / n), Math.cos((2 * Math.PI * i) / n) ]); // You can examine the points, if you like. // return pts; // Append the polygon to the SVG and specify its // points and other attributes. svg .append("polygon") .attr( "points", pts.map(([x, y]) => [x_scale(x), y_scale(y)]) ) .attr("fill", "lightgray") // .attr("stroke-width", 1) // Default stroke is fine now! .attr("stroke", "black"); svg .append("g") .style("font-size", "14px") .attr("transform", `translate(0, ${y_scale(0)})`) .call(d3.axisBottom(x_scale).tickValues([-3, -2, -1, 1, 2, 3, 4, 5])); svg .append("g") .style("font-size", "14px") .attr("transform", `translate(${x_scale(0)}, 0)`) .call(d3.axisLeft(y_scale).tickValues([-2, -1, 1, 2, 3])); return svg.node(); }37:T426,### A few other scale items There's more to look forward to when it comes to scales. We've got to learn a bit more before we cover these items in detail, but they're worth mentioning now. - `d3.scaleLinear` is just one of quite a few scale functions. `d3.scaleLog` can be used for [logarithmic scales](https://en.wikipedia.org/wiki/Logarithmic_scale) and there are similar things like `d3.scaleSqrt` and `d3.scalePow`. - Scales aren't limited to numbers. - There are temporal scales that we can use when an axis represents time. - There are quantized scales that round continuous data to discrete values - There are ordinal scales for categorical data - There are chromatic scales for dealing with color - Some scales, like `d3.scaleLinear` expose an `invert` method that inverts the function. This is often useful for interaction. If you hover over an object, for example, the browser can tell you where the pointer is in `viewBox` coordinates but you might want to know where the pointer is in figure coordinates. Here's a little application of that:38:T50f,viewof pos = { let w = 800; let h = 500; let svg = d3 .create("svg") .attr("width", "100%") .attr("viewBox", [0, 0, w, h]) .style("border", "solid 1px black"); let [xmin, xmax, ymin, ymax] = [-1, 7, -1, 4]; let pad = 20; let x_scale = d3 .scaleLinear() .domain([xmin, xmax]) .range([pad, w - pad]); let y_scale = d3 .scaleLinear() .domain([ymin, ymax]) .range([h - pad, pad]); // Draw the axes svg .append("g") .attr("transform", `translate(0, ${y_scale(0)})`) .call(d3.axisBottom(x_scale).tickValues([-1, 1, 2, 3, 4, 5, 6, 7])); svg .append("g") .attr("transform", `translate(${x_scale(0)})`) .call( d3 .axisLeft(y_scale) .tickValues([-1, 1, 2, 3, 4]) .tickFormat(d3.format("d")) ); // Don't worry about this stuff just yet! svg.node().value = null; svg .on("pointermove", function (evt) { let [xx, yy] = d3.pointer(evt); let x = x_scale.invert(xx); let y = y_scale.invert(yy); svg.node().value = { x, y, xx, yy }; svg.node().dispatchEvent(new CustomEvent("input")); }) .on("pointerleave", function () { svg.node().value = null; svg.node().dispatchEvent(new CustomEvent("input")); }); return svg.node(); }39:T45a,{ let w = 600; let h = 600; let svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", "100%") .style("max-width", `${w}px`) .style("border", "solid black 2px"); let pad = 10; let [xmin, xmax, ymin, ymax] = [-1.2, 1.2, -1.2, 1.2]; let x_scale = d3 .scaleLinear() .domain([xmin, xmax]) .range([pad, w - pad]); let y_scale = d3 .scaleLinear() .domain([ymin, ymax]) .range([h - pad, pad]); // Here are the vertices of the pentagon: let n = 5; let pts = d3 .range(n) .map((i) => [ Math.sin((2 * Math.PI * i) / n), Math.cos((2 * Math.PI * i) / n) ]); // Here's the new stuff // The function that generates the path's 'd' attribute. let path = d3 .line() // .curve(d3.curveCardinalClosed.tension(0.5)) // Try this! .x((d) => x_scale(d[0])) .y((d) => y_scale(d[1])); // Appending the path svg .append("path") .attr("fill", "lightgray") .attr("stroke", "black") .attr("stroke-width", 3) .attr("d", path(pts)); // Try `path(pts) + 'Z' to close!` return svg.node(); }3a:T5fe,interactive_graph = { let w = 800; let h = 500; let svg = d3 .create("svg") .attr("width", "100%") .attr("viewBox", [0, 0, w, h]) .style("border", "solid 1px black"); let [xmin, xmax, ymin, ymax] = [-3.5, 3.5, -0.2, 1.8]; let pad = 20; let x_scale = d3 .scaleLinear() .domain([xmin, xmax]) .range([pad, w - pad]); let y_scale = d3 .scaleLinear() .domain([ymin, ymax]) .range([h - pad, pad]); let path = d3 .line() .x((d) => x_scale(d[0])) .y((d) => y_scale(d[1])); let pts = d3.range(-4, 4, 0.01).map((x) => [x, f(m, s)(x)]); // pts = [[pts[0][0], 0]].concat(pts).concat([[pts.slice(-1)[0][0], 0]]); let s_pts = pts.filter(([x, y]) => m - s < x && x < m + s); s_pts = [[s_pts[0][0], 0]].concat(s_pts).concat([[s_pts.slice(-1)[0][0], 0]]); svg .append("path") .attr("d", path(s_pts)) .attr("fill", "lightblue") .attr("stroke", "blue") .attr("stroke-width", 0.5); svg .append("path") .attr("d", path(pts)) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 3); // Draw the axes svg .append("g") .attr("transform", `translate(0, ${y_scale(0)})`) .call( d3 .axisBottom(x_scale) .tickValues([-3, -2, -1, 1, 2, 3]) .tickFormat(d3.format("d")) .tickSizeOuter(0) ); svg .append("g") .attr("transform", `translate(${x_scale(0)})`) .call(d3.axisLeft(y_scale).tickValues([0.5, 1, 1.5]).tickSizeOuter(0)); return svg.node(); }3b:T42b,## Assignment 3 For this assignment, you're going to create an interactive sine plot. Specifically, you'll explore the family of functions ${tex.block`f_a(x) = \sin(a\,x).`} Note that the frequency of the function increases with ${tex`a`}. Your mission is to build a plot that depends upon the value of ${tex`a`} and is responsive to a range slider that specifies that value. More specifically, your requirements are the following: - You should incorporate a range slider specifying a value of ${tex`a`} with initial value ${tex`a=1`} and always satisfies ${tex.block`1\leq a \leq 10.`} - Your plot of ${tex`y=\sin(a\,x)`} over the interval ${tex.block`-2\pi\leq x \leq 2\pi`} should respond to the slider. - The region between the graph and the ${tex`x`}-axis over the first half period with positive ${tex`x`} values should be filled. So I guess that, as you increase the value of ${tex`a`} with the slider, the waves should compress and the area of your filled region should get smaller. A static graph of my function when ${tex`a=1`} looks something like so:3c:[{"id":"17a6d9677ddbfa575558f274659ead9e34145726178afd0459192a3bce73fea6aa8178fbc1413361f33a4a43c9e9bf4fd2c1be7af28a498650d2fa7e581d9e09","href":"https://static.observableusercontent.com/files/17a6d9677ddbfa575558f274659ead9e34145726178afd0459192a3bce73fea6aa8178fbc1413361f33a4a43c9e9bf4fd2c1be7af28a498650d2fa7e581d9e09","name":"filled_sine@1.svg","type":"image/svg+xml","lastModified":1674129392179.542,"size":27144}] 30:{"id":"0fbd0c614cb56258","slug":null,"title":"Drawing SVG with D3 2","thumbnail":"06b35ac7e74110c3f511925a3a49ddb86cc5e6f43248d601967abc3f0889e52e","access_level":"public","create_time":"$D2023-01-15T17:52:29.673Z","update_time":"$D2023-09-07T16:37:28.267Z","view_time":null,"first_public_time":"$D2023-09-06T21:03:26.457Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"a07c87acf1b22f86","login":"ddv373","name":"Dynamic Data Visualization 373","avatar_url":"https://avatars-next.observableusercontent.com/aa07fb823a47852e43ceca20a9030290c7b3befd6ad2b87a17c17f4b47176d35","tier":"pro_2024"},"version":883,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null}],"members":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null,"role":"editor"},{"type":"team","id":"a07c87acf1b22f86","login":"ddv373","name":"Dynamic Data Visualization 373","avatar_url":"https://avatars-next.observableusercontent.com/aa07fb823a47852e43ceca20a9030290c7b3befd6ad2b87a17c17f4b47176d35","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Drawing SVG with D3 2","cells":[{"id":0,"value":"# Drawing SVG with D3 2\n## Day 3: Thursday, January 19","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":801,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"Last time we learned the basics of SVG and the not so basic stuff surrounding D3's selection/join operation to bind data into an SVG and mold it into a geometric element. Today, we're going to push those ideas further to generate high quality graphs. The key ideas we need to learn along the way are\n\n- scales and axes\n- and the path generator.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"## The nature of statistcal plots\n\nHere's a pretty standard statistical image that [comes from Wikimedia](https://commons.wikimedia.org/wiki/File:Standard_deviation_diagram.svg) according to their [CC BY SA 3.0 licence](https://creativecommons.org/licenses/by-sa/3.0/):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"There are a couple of things going on here that we don't quite know how to deal with just yet:\n\n- There's a pair of axes including tickmarks that clearly indicate the coordinate system.\n- There's a curve who's definition is a bit complicated; it's not a simple geometric shape like we've dealt with before. In addition, there's some filling under the curve.\n\nWe've got two new topics today that will help us deal with exactly these things\n\n- *Scales* - which will help us easily relate our SVG's coordinate system to the figure's coordinate system and also provides tools to attach axes to the plot and\n- *The `path` generator* - which is the most general and powerful geometric mark that SVG provides.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":495,"value":"## Scales\n\nLast time, we learned about the SVG `viewBox` attribute, which lets us specify the coordinate system within an SVG. While nice, it still has some issues:\n\n- It's unflippable, by which I mean the vertical axis always points down.\n- It affects stroke-widths.\n\nD3 provides a family of `d3.scale*` functions that are quite powerful and general to help describe the scale of a figure. The simplest of these is `d3.scaleLinear`, which we might use to define a scale function `s` as follows:\n\n s = d3.scaleLinear()\n .domain([a,b])\n .range([0,w])\n\nThis defines a function that stretches or compresses the interval of real numbers `[a,b]` uniformly onto the interval `[0,w]`. That's exactly what we would want to do, if we have a figure with ${tex`x`}-coordinates satisfying ${tex`a\\leq x \\leq b`} that we want to plot in an SVG with width `w`. You can see this kind of scale in action in the following figure:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":217,"value":"{\n let button = Inputs.button(\"Swap scales\");\n d3.select(button).on(\"input\", one_axis.update);\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"### Using `d3.scaleLinear`\n\nIf you examine the code for the example above, you'll notice a function called `x_scale` that looks something like so:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"x_scale = d3.scaleLinear().domain([-2, 8]).range([0, 800])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"We can apply that to a single number in `[-2,8]` to get the corresponding point in the ${tex`x`} portion of the `viewBox`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":315,"value":"x_scale(8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"We could also map it onto a list of numbers to get the image ${tex`x`}-coordinates of a bunch of points.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"[-2, 1, Math.E, Math.PI, 8].map(x_scale)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"{\n let w = 800;\n let h = 80;\n let svg = d3\n .create(\"svg\")\n .attr(\"overflow\", \"visible\") // So the ends aren't cut off\n .attr(\"viewBox\", [0, 0, w, h]);\n\n // Define the scale\n let [xmin, xmax] = [-2, 8];\n // let x_scale = d3.scaleLinear().domain([xmin, xmax]).range([0, w]);\n\n // We've got five points and we're using the selection join idiom that\n // we learned last time to add them all at once.\n svg\n .selectAll(\"circle\")\n .data([-2, 1, Math.E, Math.PI, 8])\n .join(\"circle\")\n .attr(\"cx\", x_scale) // Use the scale to place the points\n .attr(\"cy\", h / 2) // In lieu of a y_scale, we just translate half way down\n .attr(\"r\", 4);\n\n // Draw the axis\n svg\n .append(\"g\")\n // .style(\"font-size\", \"14px\") // The group can be styled\n .attr(\"transform\", `translate(0, ${h / 2})`)\n .call(\n d3.axisBottom(x_scale)\n // Several options\n // .tickSize(8)\n // .ticks(22)\n // .tickValues([-1, 1, 5])\n );\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

viewBox coordinates		figure coordinates
${tex`X`}	${tex`Y`}	${tex`x`}	${tex`y`}
${pos ? d3.format('0.1f')(pos.xx) : ''}	${pos ? d3.format('0.1f')(pos.yy) : ''}	${pos ? d3.format('0.2f')(pos.x) : ''}	${pos ? d3.format('0.2f')(pos.y) : ''}

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"## D3's SVG `path` generators\n\nThe other crucial element that we see at the top of the page is the curve, which can be represented in SVG using the [path element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path). This is the most general and powerful SVG shape. \n\nAn SVG path element has a single defining attribute, named `'d'`, which is a string that encodes a sequence (or sequences) of points with a little extra information. D3 has a number of so-called *shape generators* for generating these things. Here's a really simple example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":779,"value":"d3.line()([\n [0, 0],\n [1, 1],\n [2, 2]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"Let's make one more look at the pentagon:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":504,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"## Plotting the graph of a function\n\nLet's put a lot of this together to plot the graph of an interesting function - a whole family of them, in fact! The functions I have in mind are:\n${tex.block`f_{\\mu,\\sigma}(x) = \\frac{1}{\\sqrt{2\\pi}\\sigma} e^{-(x-\\mu)^2/(2\\sigma^2)}.`}\nNote that ${tex`f_{\\mu,\\sigma}`} is exactly the probability density function of the normal distribution with mean ${tex`\\mu`} and standard deviation ${tex`\\sigma`}. This won't play too big a role in this class on data visualization but it plays a *huge* role in statistics and the understanding of data! So it is worth taking a look at in this class.\n\nHere's a Javascript function `f(m,s)` that returns the mathematical function ${tex`f_{\\mu,\\sigma}`}:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":560,"value":"function f(m, s) {\n return (x) =>\n Math.exp(-((x - m) ** 2 / (2 * s ** 2))) / Math.sqrt(2 * Math.PI * s ** 2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"In order to build an *interactive* graph, we're going to use the little bit of reactivity that we learned [last week](https://observablehq.com/@ddv373/programming-with-javascript-and-d3-on-observable#inputs). Specifically, the cell that defines our graph will depend upon values of `m` and `s` those will be defined using `Inputs.range` and the `viewof` operator. Recall, for example, that if we define the variable `m` via an assignment like:\n\n viewof m = Inputs.range(...)\n\nthen anywhere we refer to `m`, we get the value and the cell is automatically re-evaluated to reflect that. In the code below, the first range slider is *labeled* ${tex`\\mu`} but the variable is `m`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":877,"value":"m","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"Here it is all together:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":636,"value":"viewof m = Inputs.range([-2, 2], { step: 0.01, label: tex`\\mu:` })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"viewof s = Inputs.range([0.2, 2], { step: 0.01, label: tex`\\sigma:`, value: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"As an aside, we might mention that another way to visualize a family of functions is to plot a list of them on a single set of axes. That's exactly the approach taken in the image at the very top of the notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":818,"value":"$3b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":838,"value":"filled_sine = FileAttachment(\"filled_sine@1.svg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 31:"$30:body"