From 6cc31d612a3efb609231c1226e67c9551f0c8986 Mon Sep 17 00:00:00 2001
From: "Weng, Chia-Ling" <75072960+ChiaLingWeng@users.noreply.github.com>
Date: Sun, 12 Nov 2023 08:53:32 +0800
Subject: [PATCH] [Doc] Add scatter plot with shaded area example (#3256)

* [Doc] Add scatter plot with shaded area example

* Delete tests/examples_methods_syntax/scatter_with_shaded_area.py

---------

Co-authored-by: Joel Ostblom <joelostblom@users.noreply.github.com>
---
 .../scatter_with_shaded_area.py               | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 tests/examples_arguments_syntax/scatter_with_shaded_area.py

diff --git a/tests/examples_arguments_syntax/scatter_with_shaded_area.py b/tests/examples_arguments_syntax/scatter_with_shaded_area.py
new file mode 100644
index 000000000..3096e420b
--- /dev/null
+++ b/tests/examples_arguments_syntax/scatter_with_shaded_area.py
@@ -0,0 +1,48 @@
+"""
+Scatter Plot with Shaded Area
+-----------------------------
+This example shows a scatter plot with shaded area, 
+constructed using :ref:`area mark <user-guide-area-marks>` and :ref:`rect mark <user-guide-rect-marks>`.
+"""
+# category: scatter plots
+
+import altair as alt
+import pandas as pd
+import numpy as np
+
+data = pd.DataFrame({
+    "x": np.random.uniform(-4, 5, size=50),
+    "y": np.random.uniform(2, 5, size=50),
+})
+
+rect_data = pd.DataFrame({
+    "x1": [-2],
+    "x2": [-1]
+})
+
+# define this interval between y = -x and y = -x 
+df = pd.DataFrame({ 
+    "x": range(7),
+    "ymin": range(7),
+    "ymax": range(1,8)
+})
+
+points = alt.Chart(data).mark_point().encode(
+    x="x",
+    y="y"
+)
+
+interval = alt.Chart(df).mark_area(opacity=0.3).encode(
+    x="x:Q",
+    y="ymin:Q",
+    y2="ymax:Q"
+)
+
+
+rect = alt.Chart(rect_data).mark_rect(opacity=0.3).encode(
+    x="x1",
+    x2="x2",
+    color=alt.ColorValue("#FF0000")
+)
+
+points + interval + rect
\ No newline at end of file