تجسم داده ها با جاوا اسکریپت قابل مشاهده

اگر در یک نوت بوک میزبانی شده در ObservableHQ.com کدنویسی می‌کنید، خواهید دید که موارد دیگر ساخته شده وجود دارد. -انواع جدول موجود برای یک سلول، مانند سلول های جدول داده. برخی از این انواع بخشی از پلتفرم وب Observable هستند. آنها توابع استاندارد جاوا اسکریپت نیستند و شما نمی توانید از آنها در یک سند Quarto استفاده کنید. چطور میتوانی بگویی؟ اگر پس از ایجاد جدول، خطی از کد را نمی‌بینید که ظاهر می‌شود، احتمالاً در خارج از پلتفرم در دسترس نیست مگر اینکه خودتان آن را کدنویسی کنید.

ایجاد فیلترهای تعاملی برای داده ها در Observable

یکی از بزرگترین ارزش افزوده Observable واکنش پذیری داخلی آن است. برای ایجاد یک فیلتر تعاملی، نحو معمولاً در امتداد خطوط

است

viewof new_variable_name = Inputs.the_filter_type()

جایی که the_filter_type یکی از انواع فیلترهای قابل مشاهده داخلی است.

انواع فیلتر شامل چک باکس، رادیو، محدوده (برای یک نوار لغزنده)، انتخاب (برای یک منوی کشویی)، جستجو، و متن (برای متن تک خطی آزاد) است. آرگومان های تابع فیلتر Inputs به نوع فیلتر بستگی دارد.

viewof فیلتر را فعال می کند. در نوت بوک خود معرفی مختصر بر viewof مایک بوستوک، مدیر ارشد فناوری و بنیانگذار Observable, Inc.، می‌نویسد: «راهی که می‌توان درباره viewof foo  فکر کرد این است که، علاوه بر viewof foo  که ورودی را نمایش می‌دهد. عنصر، viewof یک دومین سلول مخفی foo  را ایجاد می‌کند که مقدار فعلی این عنصر ورودی را در معرض بقیه نوت بوک قرار می‌دهد."

Inputs.search()

Inputs.search() هم یک کادر جستجوی متنی و هم یک مجموعه داده واکنشی ایجاد می‌کند که به‌طور خودکار بر اساس آنچه کاربر در کادر تایپ می‌کند فیلتر و زیر مجموعه می‌شود. برای کاربران R Shiny، انگار یک تابع واحد، هم رابط کاربری فیلد متنی و هم کد سمت سرور را برای مجموعه داده‌های واکنشی ایجاد کرده است.

نحو این است:

viewof my_filtered_data = Inputs.search(mydata)

برای استفاده از مجموعه داده‌های واکنشی در جای دیگری از کدتان، کافی است به جای mydata به my_filtered_data مراجعه کنید، مانند:

Inputs.table(my_filtered_data)

کد بالا یک جدول از my_filtered_data ایجاد می‌کند. هر زمان که کاربر چیزی را در کادر جستجو تایپ کند، مجموعه داده و جدول به‌روزرسانی می‌شوند و به دنبال موارد منطبق در تمام ستون‌ها می‌گردند.

می توانید از مجموعه داده های فیلتر شده چندین بار در یک صفحه در انواع نمودارها یا به روش های دیگر استفاده کنید.

Inputs.select()

Inputs.search() تا حدودی یک مورد خاص است زیرا برای فیلتر کردن مجموعه داده‌ها به روشی خاص طراحی شده است، با جستجوی تمام ستون‌ها برای یک تطابق جزئی. این ساده است اما ممکن است آن چیزی نباشد که شما می خواهید، زیرا ممکن است نیاز باشد فقط یک ستون را جستجو کنید یا یک فیلتر عددی ایجاد کنید.

اکثر ورودی‌های قابل مشاهده دیگر ورودی‌ها به دو مرحله نیاز دارند:

• ورودی را ایجاد کنید.
• یک تابع برای فیلتر کردن داده ها بر اساس مقدار ورودی بنویسید.

به عنوان مثال، اگر می‌خواهید یک لیست کشویی مقادیر ممکن را از یک ستون در داده‌های شما نمایش دهد و داده‌ها را بر اساس آن انتخاب فیلتر کند، کد ایجاد آن کرکره باید مشخص کند که چه مقادیری نمایش داده شود و کدام ستون باید برای آن استفاده شود. زیرمجموعه کد زیر یک لیست کشویی بر اساس مقادیر مرتب شده و منحصر به فرد از ستون my_column در مجموعه داده mydata ایجاد می‌کند:

viewof my_filtering_value = 
  Inputs.select(my_initial_data.map(d => d.my_column), {sort: true, unique: true, label: "Label for dropdown:"})

همانطور که ممکن است از نام متغیر my_filtering_value نتیجه بگیرید، به لطف viewof، هم فهرست کشویی ایجاد می شود و هم هر مقداری که انتخاب شده است ذخیره می شود.

map() یک تابع را برای هر مورد در یک آرایه اعمال می‌کند، در این مورد همه مقادیر موجود در my_initial_data را در my_column دریافت می‌کند.

کد بالا از پیکان جدیدتر جاوا اسکریپت استفاده می کند ( قالب =>) برای نوشتن توابع. می‌توانید همان کد را با دستور function و return  قدیمی‌تر جاوا اسکریپت بنویسید، همچنین:

viewof my_filtering_value2 = 
  Inputs.select(mydata.map(function(d) {return d.my_column}), {sort: true, unique: true, label: "Label for dropdown:"})

اگر می‌خواهید کد واکنش‌پذیر باشد، یک بار دیگر، قبل از تعریف Inputs viewof را فراموش نکنید.

برخلاف Inputs.search()، که به طور خودکار بر روی کل مجموعه داده عمل می‌کند، Inputs.select() فقط مقادیر  را از کشویی بنابراین، همچنان باید کد بنویسید تا مجموعه داده‌ها را بر اساس آن مقادیر انتخابی زیرمجموعه قرار دهید و یک مجموعه داده فیلتر شده جدید ایجاد کنید. این کد مانند یک مجموعه داده ثابت است.

همانطور که در مستندات قابل مشاهده Quarto توضیح داده شده است: "ما به نحو خاصی نیاز نداریم برای ارجاع به مقادیر ورودی پویا، آنها «فقط کار می کنند» و کد فیلتر به طور خودکار با تغییر ورودی ها دوباره اجرا می شود. قبل از عبارتی که مجموعه داده را تعریف می کند، به viewof نیاز ندارید. فقط قبل از ورودی‌ها از آن استفاده کنید.

my_filtered_data2 = 
  mydata.filter(function(d) {return d.my_column === my_filtering_value2})

در صورت تمایل، می‌توانید از نحو قدیمی‌تر جاوا اسکریپت با  function() و return استفاده کنید:

my_filtered_data2 = 
  mydata.filter(function(d) {return d.my_column === my_filtering_value2})
  

می توانید از مجموعه داده های فیلتر شده مانند مجموعه داده های ثابت استفاده کنید، مانند:

Inputs.table(my_filtered_data2)

فیلترهای عددی و تاریخ مانند Input.select() کار می کنند.

 ورودی‌های Hello و ورودی های قابل مشاهده نوت بوک برای اطلاعات بیشتر درباره ورودی ها.

شامل مقدار متغیر در یک رشته متن

اگر می‌خواهید سرفصل نمودار یا پاراگراف خلاصه‌ای ایجاد کنید که با داده‌های شما تغییر می‌کند، گنجاندن مقدار متغیر در یک رشته متن برای تولید متن پویا می‌تواند مفید باشد. اگر متغیری در یک قطعه کد ojs تعریف شده است، می‌توانید مقدار آن متغیر را در یک قطعه کد Quarto ojs با قرار دادن نام متغیر با ${}< وارد کنید. /code>، مانند:

md`You have selected ${my_filtering_value2}.`

html <p>The value of x is <strong>${x}</strong>.