بیاموزید که چگونه از JavaScript قابل مشاهده و کتابخانه Observable Plot بهترین استفاده را ببرید، از جمله راهنمای گام به گام هشت وظیفه اصلی تجسم داده در Plot.
- ایجاد جدول قابل مشاهده اولیه
- ایجاد فیلترهای تعاملی برای داده ها در Observable
- شامل مقدار متغیر در یک رشته متن
- تجسم داده با Plot
- گزینههای چیدمان برای سند Quarto شما
- استفاده از سایر کتابخانه های جاوا اسکریپت
واکنشپذیری داخلی یکی از بزرگترین ارزشهای جاوا اسکریپت قابل مشاهده است. در دو مقاله قبلی خود، شما را با استفاده از جاوا اسکریپت قابل مشاهده با R یا پایتون در Quarto و یادگیری جاوا اسکریپت قابل مشاهده با نوت بوک های قابل مشاهده آشنا کرده ام. در این مقاله، به بخش سرگرم کننده می رسیم: ایجاد جداول و گرافیک های تعاملی با جاوا اسکریپت قابل مشاهده و کتابخانه جاوا اسکریپت قابل مشاهده.
ایجاد جدول قابل مشاهده اولیه
من معمولاً جدول را به عنوان “خروجی” در نظر میگیرم—یعنی راهی مفید برای مشاهده و کاوش دادهها. با این حال، در Observable، یک جدول پایه را میتوان یک «ورودی» نیز در نظر گرفت. این به این دلیل است که جدولهای مشاهدهپذیر دارای ردیفهایی هستند که بهطور پیشفرض قابل کلیک و انتخاب هستند و این مقادیر انتخابشده میتوانند برای تأثیر بر نمودارها و سایر دادههای صفحه شما استفاده شوند. این به شما کمک میکند. توضیح دهید که چرا تابع Inputs.table(your_dataset)
یک جدول ایجاد می کند.
جدول پیشفرض اگر روی سرصفحههای ستون کلیک کنید قابل مرتبسازی است و چندین ردیف را همراه با یک نوار پیمایش نشان میدهد.
برای تعیین تعداد ردیفهایی که میخواهید در پنجره قابل پیمایش قابل مشاهده باشد، آرگومان ردیفها
را اضافه کنید. آرگومان نشان داده شده در اینجا ۲۰ ردیف اول را در پنجره قابل پیمایش نشان می دهد:
Inputs.table(mydata, {
rows: 20
})
توجه داشته باشید که گزینههای جدول در پرانتزهای فرفری قرار دارند، حتی اگر فقط یک گزینه وجود داشته باشد.
برای انتخاب ستونهای خاص برای نمایش در جدول، یک گزینه ستونها
به Inputs.table()
با این نحو اضافه کنید:
Inputs.table(mydata, {
columns: ["column_name_1", "column_name_2", "column_name3"]
})
توجه داشته باشید که columns:
با یک آرایه جاوا اسکریپت دنبال میشود که توسط []
براکتهای مشابه Python و نه c()
ایجاد میشود. مانند R. نام ستون ها باید در گیومه باشد.
برای تغییر نام ستونها، از header:
با نحو زیر استفاده کنید:
header: {
original_name1: "NewName1",
original_name2: "NewName2"
}
برای ترکیب انتخاب و تغییر نام ستونها، از هر دو ستونها:
و header:
:
استفاده کنید
Inputs.table(mydata, {
columns: [
"column_name_1",
"column_name_2"
],
header: {
original_name1: "NewName1",
original_name2: "NewName2"
}
})
پیشفرض حاصل با استفاده از دادههای ایالتهای ایالات متحده و جمعیت آنها چیزی شبیه به این خواهد بود:
شکل ۱. یک جدول پیش فرض قابل مشاهده با استفاده از Inputs.table().
چندین گزینه دیگر برای Inputs.table()
موجود است، از جمله مرتبسازی و مرتبسازی معکوس، که میتوانید با نحو انجام دهید: sort: "ColumnName"، معکوس: true< /code>.
اگر در یک نوت بوک میزبانی شده در 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}.`
در اینجا، md
نشان میدهد که آنچه در بکتیکها موجود است باید بهعنوان متن Markdown ارزیابی شود، نه کد جاوا اسکریپت. اگر میخواهید HTML حاوی مقدار متغیری مانند:
بنویسید، میتوانید قبل از بکتیکها از html
استفاده کنید.
html <p>The value of x is <strong>${x}</strong>.
توجه داشته باشید که md
و html
فقط در اسناد Quarto مورد نیاز هستند. اگر از یک نوت بوک میزبان در ObservableHQ.com استفاده میکنید، میتوانید Markdown یا HTML را برای حالت سلول انتخاب کنید، بنابراین نیازی به نشان دادن md
یا html
ندارید. p>
اگر متنی را در متغیری در داخل سلول جاوا اسکریپت نوتبوک ذخیره میکنید، باید از بکتیک در ObservableHQ.com برای نشان دادن اینکه محتوا متن است و نه کد استفاده کنید.
پست های مرتبط
تجسم داده ها با جاوا اسکریپت قابل مشاهده
تجسم داده ها با جاوا اسکریپت قابل مشاهده
تجسم داده ها با جاوا اسکریپت قابل مشاهده