Merge branch 'Codecademy:main' into python-plotly-graph-carpet

Author: aatidua

content/ai/concepts/machine-learning/terms/regression/regression.md

@@ -0,0 +1,72 @@
+---
+Title: 'Regression'
+Description: 'Regression models relationships between variables to predict a dependent variable utilizing one or more independent variables.'
+Subjects:
+  - 'AI'
+  - 'Data Science'
+Tags:
+  - 'Machine Learning'
+  - 'Python'
+CatalogContent:
+  - 'learn-python-3'
+  - 'paths/computer-science'
+---
+
+**Regression** is a mathematical process used to model data by identifying a function that best represents its patterns. In machine learning, regression functions are used for predictive analysis.
+
+There are various regression techniques and the choice depends on factors such as data distribution. A simple form is linear regression, represented by the equation:
+
+```
+y = a\*x + b
+```
+
+Visualizing this equation as a straight line on a 2D graph:
+
+- `y`: The dependent (outcome) variable, plotted on the y-axis (vertical).
+- `x`: The independent (predictor) variable, plotted on the x-axis (horizontal).
+- `b`: The intercept, representing the value of `y` when `x = 0`.
+- `a`: The slope, indicating how `y` changes when `x` increases by one unit.
+
+## Example
+
+The following code predicts a person's weight based on a person's height:
+
+```py
+import pandas as pd
+import statsmodels.api as sm
+import matplotlib.pyplot as plt
+
+# Sample data
+heights = [150, 152, 160, 172, 176, 176, 180, 189]
+weights = [50, 65, 65, 70, 80, 90, 90, 89]
+
+# Create a DataFrame
+measurements = pd.DataFrame({'height': heights, 'weight': weights})
+
+# Fit the linear regression model
+model = sm.OLS.from_formula("weight ~ height", data=measurements)
+results = model.fit()
+
+# Print the summary of the model
+print(results.summary())
+
+# Plot the data and the regression line
+plt.scatter(measurements['height'], measurements['weight'], label='Data')
+plt.plot(measurements['height'], results.predict(measurements), color='red', label='Regression Line')
+plt.xlabel('Height (cm)')
+plt.ylabel('Weight (kg)')
+plt.title('Height vs Weight with Regression Line')
+plt.legend()
+
+# Save the plot as an image file
+plt.savefig('height-vs-weight-plot.png')
+
+# Show the plot
+plt.show()
+```
+
+This code performs linear regression using `statsmodels` to analyze the relationship between height and weight. It fits a model of the form `weight = a * height + b`, prints the regression summary, and visualizes the data with a scatter plot and a best-fit line.
+
+The output of this code is as follows:
+
+![The output for the above example](https://raw.githubusercontent.com/Codecademy/docs/main/media/height-vs-weight-plot.png)

content/javascript/concepts/dom-manipulation/terms/getElementById/getElementById.md

@@ -0,0 +1,63 @@
+---
+Title: '.getElementById()'
+Description: 'Retrieve the first HTML element with the specified id, returning null if no match is found.'
+Subjects:
+  - 'Web Development'
+  - 'Web Design'
+Tags:
+  - 'DOM'
+  - 'Elements'
+  - 'JavaScript'
+  - 'Methods'
+CatalogContent:
+  - 'introduction-to-javascript'
+  - 'paths/front-end-engineer-career-path'
+---
+
+The **`.getElementById()`** method is a commonly used function in the Document Object Model (DOM) that allows developers to retrieve an HTML element by its `id` attribute. This method is part of the `document` object and returns the first element that matches the specified `id`. If no element is found, it returns `null`.
+
+## Key Characteristics
+
+- **Fast and efficient**: Since IDs are unique, this method quickly retrieves elements without searching the entire DOM.
+- **Returns a single element**: It always returns one element (or `null` if not found).
+- **Case-sensitive**: The provided `id` must match exactly, including letter casing.
+
+> **Note**: If multiple elements share the same `id` (which is invalid HTML), `getElementById()` still returns only the first match.
+
+## Syntax
+
+```pseudo
+document.getElementById("elementId");
+```
+
+- `elementId` (string): The `id` of the element to retrieve.
+
+## Example
+
+The following example demonstrates the usage of the `.getElementById()` method:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>getElementById Example</title>
+  </head>
+  <body>
+    <p id="demo">Hello, World!</p>
+    <button onclick="changeText()">Click Me</button>
+
+    <script>
+      function changeText() {
+        let element = document.getElementById('demo');
+        element.innerHTML = 'Text changed!';
+      }
+    </script>
+  </body>
+</html>
+```
+
+In this example, the `getElementById("demo")` function retrieves the `<p>` element with `id="demo"` and the `innerHTML` property is updated when the button is clicked.
+
+The output will look like:
+
+![A webpage with a paragraph displaying "Hello, World!" and a button labeled "Click Me", when clicked, the text changes to "Text changed!".](https://raw.githubusercontent.com/Codecademy/docs/main/media/get-element-by-id-example.gif)

content/javascript/concepts/dom-manipulation/terms/innerHTML/innerHTML.md

@@ -0,0 +1,84 @@
+---
+Title: '.innerHTML'
+Description: 'Sets or fetches the HTML content inside an element in the DOM.'
+Subjects:
+  - 'Web Development'
+  - 'Web Design'
+Tags:
+  - 'DOM'
+  - 'ES6'
+  - 'Properties'
+  - 'Strings'
+CatalogContent:
+  - 'introduction-to-javascript'
+  - 'paths/front-end-engineer-career-path'
+---
+
+The **`.innerHTML`** property in JavaScript is a fundamental DOM (Document Object Model) manipulation tool that allows setting or retrieving the HTML content inside an element. It allows developers to dynamically modify a webpage's content by reading or writing HTML markup as a string. When setting `.innerHTML`, the browser parses the provided string as HTML and updates the DOM accordingly. This property is particularly useful for inserting multiple elements or complex HTML structures at once.
+
+## Syntax
+
+```pseudo
+// Getting HTML content
+const content = element.innerHTML;
+
+// Setting HTML content
+element.innerHTML = htmlString;
+```
+
+- `element`: The DOM element whose content is being accessed or modified.
+- `htmlString`: A string containing HTML markup to be injected.
+
+When reading `.innerHTML`, it returns the current HTML string inside the element.
+
+### Notes
+
+- Setting `.innerHTML` replaces all existing content within the element.
+- The provided HTML string is parsed and valid HTML tags are converted to DOM elements.
+- Be cautious with user-provided content as `.innerHTML` can execute scripts, making it vulnerable to XSS (Cross-Site Scripting) attacks.
+- For plain text content, consider using `.textContent` for better security and performance.
+- If an element contains event handlers, replacing `.innerHTML` will remove them. Consider `.appendChild()` for better control.
+
+## Example
+
+Here's how to use `.innerHTML` to modify content in a `<div>`:
+
+```js
+// Select the <div> element with the id 'container'
+const container = document.getElementById('container');
+
+// Set new HTML content
+container.innerHTML = '<p>This paragraph was added using innerHTML!</p>';
+
+// Get the current HTML content
+console.log(container.innerHTML); // "<p>This paragraph was added using innerHTML!</p>"
+
+// Replace with more complex HTML
+container.innerHTML = `
+  <h2>Dynamic Content</h2>
+  <p>First paragraph</p>
+  <ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+  </ul>
+`;
+```
+
+The above code produces the following output:
+
+```shell
+"<p>This paragraph was added using innerHTML!</p>"
+```
+
+After execution, the `<div>` will contain:
+
+```html
+<div id="container">
+  <h2>Dynamic Content</h2>
+  <p>First paragraph</p>
+  <ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+  </ul>
+</div>
+```

content/javascript/concepts/dom-manipulation/terms/replaceChildren/replaceChildren.md

@@ -0,0 +1,69 @@
+---
+Title: '.replaceChildren()'
+Description: 'Replaces all child nodes of an element with new nodes or clears them if no arguments are provided.'
+Subjects:
+  - 'Web Development'
+  - 'Web Design'
+Tags:
+  - 'Arguments'
+  - 'DOM'
+  - 'ES6'
+  - 'Functions'
+CatalogContent:
+  - 'introduction-to-javascript'
+  - 'paths/front-end-engineer-career-path'
+---
+
+The **`.replaceChildren()`** method in JavaScript is a modern DOM manipulation method that replaces all child nodes of an element with new specified nodes or clears them if no arguments are provided.
+
+Unlike older methods such as `.innerHTML` or [`.removeChild()`](https://www.codecademy.com/resources/docs/javascript/dom-manipulation/removeChild), `.replaceChildren()` provides a cleaner, more efficient, and safer way to update the contents of an element without unnecessary parsing or manipulation overhead.
+
+This method is particularly useful when dynamically updating UI elements, such as replacing a list of items, updating content sections, or efficiently clearing an element's children without affecting event listeners on the parent.
+
+## Key Characteristics
+
+- More efficient than manually removing and appending children.
+- Accepts multiple nodes or strings as arguments.
+- Works similarly to `.innerHTML = ""` for clearing, but safer as it avoids HTML parsing.
+
+## Syntax
+
+```pseudo
+element.replaceChildren(...nodes);
+```
+
+- `nodes` (optional): One or more nodes or strings to insert as new children. If no arguments are provided, all child nodes are removed.
+
+## Example
+
+The following example demonstrates the usage of the `.replaceChildren()` method:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>replaceChildren Example</title>
+  </head>
+  <body>
+    <div id="container">
+      <p>Old content</p>
+    </div>
+    <button onclick="updateContent()">Replace Content</button>
+
+    <script>
+      function updateContent() {
+        let container = document.getElementById('container');
+        let newParagraph = document.createElement('p');
+        newParagraph.textContent = 'New content added!';
+        container.replaceChildren(newParagraph);
+      }
+    </script>
+  </body>
+</html>
+```
+
+In this example, the `.replaceChildren()` removes the existing `<p>` inside `#container` and replaces it with a new one. If called without arguments, it clears all children.
+
+The output will be:
+
+![A div showing "Old content" updates to "New content added!" when the button is clicked.](https://raw.githubusercontent.com/Codecademy/docs/main/media/replace-children-example.gif)

content/plotly/concepts/graph-objects/terms/contour/contour.md

@@ -0,0 +1,67 @@
+---
+Title: '.Contour()'
+Description: 'Creates a contour plot, which represents 3D surface data in 2D using contour lines or filled color regions to show variations in value.'
+Subjects:
+  - 'Data Science'
+  - 'Data Visualization'
+Tags:
+  - 'Data'
+  - 'Data Structures'
+  - 'Functions'
+  - 'Plotly'
+CatalogContent:
+  - 'learn-python-3'
+  - 'paths/data-science'
+---
+
+In Plotly, the **`.Contour()`** function creates a contour plot, which represents 3D surface data in a 2D projection using contour lines or filled color regions. This function is useful for visualizing gradual variations in a dataset over a 2D plane, such as temperature distributions, elevation maps, and probability density functions.
+
+## Syntax
+
+```pseudo
+plotly.graph_objects.Contour(z=None, x=None, y=None, colorscale=None, contours=None, ...)
+```
+
+- `z`: A 2D array (list or [NumPy array](https://www.codecademy.com/resources/docs/numpy/ndarray)) representing the values to be contoured.
+- `x`: A 1D or 2D array defining the x-coordinates corresponding to `z` values.
+- `y`: A 1D or 2D array defining the y-coordinates corresponding to `z` values.
+- `colorscale`: Defines the color scheme of the contour plot (e.g., `"Viridis"`, `"Jet"`, etc.).
+- `contours`: Controls the contour levels with a dictionary containing:
+  - `start`: The starting value of the contours.
+  - `end`: The ending value of the contours.
+  - `size`: The step size between contour levels.
+
+> **Note:** The ellipsis (...) in the syntax indicates that there can be additional optional parameters beyond those listed here.
+
+## Example
+
+The following example demonstrates the usage of the `.Contour()` function:
+
+```py
+import plotly.graph_objects as go
+
+# Define x and y coordinates
+x = [-2, -1, 0, 1, 2]
+y = [-2, -1, 0, 1, 2]
+
+# Define a 2D list for z values
+z = [[0.1, 0.2, 0.3, 0.2, 0.1],
+     [0.2, 0.4, 0.6, 0.4, 0.2],
+     [0.3, 0.6, 1.0, 0.6, 0.3],
+     [0.2, 0.4, 0.6, 0.4, 0.2],
+     [0.1, 0.2, 0.3, 0.2, 0.1]]
+
+# Create a contour plot
+fig = go.Figure(data=[go.Contour(z=z,  # Data values for contour levels
+                                 x=x,  # X-coordinates
+                                 y=y,  # Y-coordinates
+                                 colorscale="Viridis",  # Color scheme
+                                 contours=dict(start=0, end=1, size=0.1))])   # Define contour levels
+
+# Display the plot
+fig.show()
+```
+
+The above code generates the following output:
+
+![The output for the above example](https://raw.githubusercontent.com/Codecademy/docs/main/media/contour-plot.png)