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

نوت‌بوک‌های رایگان و میزبانی شده Observable یک تجربه تعاملی و تعداد زیادی کد منبع باز Observable JS ارائه می‌کنند که می‌توانید دوباره از آنها استفاده کنید و از آن‌ها یاد بگیرید. در اینجا نحوه شروع به کار آمده است.

• مرحله ۱: یک نوت بوک جدید در ObservableHQ.com ایجاد کنید
• مرحله ۲: یک سلول JS قابل مشاهده جدید به نوت بوک اضافه کنید< /li>
• مرحله ۳: اضافه کردن جدول جاوا اسکریپت به نوت بوک
• مرحله ۴: وارد کردن اجزای جاوا اسکریپت برای استفاده مجدد
• استفاده مجدد از کد در نوت‌بوک‌های قابل مشاهده
• پشتیبانی زبان برای نوت‌بوک‌های قابل مشاهده

در راهنمای مبتدی برای استفاده از جاوا اسکریپت قابل مشاهده، R و پایتون با Quarto، نحوه استفاده از Observable را در فایل Quarto شرح دادم. با این حال، یکی از نکات مهم من برای کاربران Quarto که JavaScript قابل مشاهده را یاد می‌گیرند، نوشتن کد در وب‌سایت انجمن قابل مشاهده است< /a>. حتی اگر فقط قصد دارید از جاوا اسکریپت قابل مشاهده در اسناد Quarto استفاده کنید، ایده خوبی است که یک حساب رایگان راه‌اندازی کنید و از ابزارها در آنجا استفاده کنید. تکه‌های کد به تنهایی داشتن یک حساب کاربری را ارزشمند می‌کنند و به شما کمک می‌کنند کد مورد نیاز برای کارهای اساسی را بیاموزید.

یکی دیگر از مزایای داشتن یک حساب کاربری در ObservableHQ.com این است که می توانید به سرعت یک سلول نوت بوک را اجرا کنید تا آن را ببینید. نتایج. این می تواند یک صرفه جویی در زمان مفید در مقایسه با کدنویسی در یک فایل Quarto باشد. در RStudio، در حال حاضر نمی‌توانید سلول‌های ojs منفرد را در سند Quarto به روشی که با سلول‌های R و Python می‌توانید اجرا کنید. برای مشاهده نتایج سلول‌های ojs، باید یک سند کامل ارائه دهید.

یک سخنگوی RStudio از طریق پیام رسانی گفت که نوت بوک های Observable بهترین تجربه تعاملی برای اجرای کدهای ویژه Observable هستند. «من تکه‌های {ojs} را در Quarto به‌عنوان راهی برای ادغام برخی از جاوا اسکریپت/قابل مشاهده در اسناد R/Python Quarto، یا برای ادغام یک نوت‌بوک سنگین جاوا اسکریپت در یک دفترچه بزرگ‌تر می‌بینم. پروژه ای مانند یک کتاب یا وب سایت، فراتر از یک خروجی دفترچه یادداشت.”

هنگامی که کد خود را در یک نوت بوک میزبانی شده در وب سایت جامعه مشاهده پذیر نوشتید، می توانید آن را کپی و در یک سند Quarto جایگذاری کنید. حتی نرم‌تر، می‌توانید یک تابع یا یک متغیر با نام  را از هر نوت‌بوک عمومی – نه فقط خودتان – به دفترچه یادداشت یا سند Quarto خود وارد کنید و در آنجا استفاده کنید.

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

مرحله ۱: یک نوت بوک جدید در ObservableHQ.com ایجاد کنید

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

شکل ۱. پین رنگی به این معنی است که کد “پین شده” برای مشاهده باز است.

اگر نوت بوک خالی را انتخاب کنید، باید یک “سلول” نوت بوک با # بدون عنوان ببینید. آن  #  نماد Markdown برای متن تیتر بزرگ است. می‌توانید ادامه دهید و «Untitled» را به هر چیزی که می‌خواهید نوت‌بوک نامید تغییر دهید. ماوس را روی آن ناحیه از سند قرار دهید و باید یک پین کوچک در حاشیه سمت چپ ببینید. همانطور که در شکل ۱ نشان داده شده است، کد را “پین” می کند تا قابل مشاهده باشد. اگر روی پین رنگی کلیک کنید، “پین نشده” است و کد دیگر قابل مشاهده نیست. (کد هنوز وجود دارد – روی منوی سه نقطه کنار سلول کلیک کنید، پین را پیدا کنید و روی آن کلیک کنید. خواهید دید که کد پین شده و دوباره قابل مشاهده است.)

اگر روی مثلث سمت راست سلول کلیک کنید، می‌توانید کد را اجرا کنید تا نتایج را ببینید، در این مورد، فقط متن عنوان است. اگر از نوت‌بوک‌های Jupyter یا R Markdown استفاده کرده‌اید، یک تفاوت قابل توجه این است که نتایج بالا سلول نشان داده می‌شوند، نه زیر آن. این ممکن است کمی طول بکشد تا به آن عادت کنید.

مرحله ۲: یک سلول JS قابل مشاهده جدید به نوت بوک اضافه کنید

اگر ماوس را روی یک سلول باز شده قرار دهید، باید گزینه‌ای قابل کلیک ببینید که می‌تواند حالت سلول را تغییر دهد. گزینه‌ها Markdown هستند که به صورت چند خط افقی نشان داده می‌شوند، HTML به‌عنوان <>، و جاوا اسکریپت به‌عنوان {}. در زیر و بالای آن، علائم مثبت (+) را مشاهده خواهید کرد که به شما امکان می دهد یک سلول جدید به دفترچه یادداشت اضافه کنید. روی علامت مثبت پایین کلیک کنید تا یک سلول جدید در زیر عنوان اضافه شود. این مکانی است که ابزارهای مفید برای قطعه کد ظاهر می شود.

شکل ۲ برخی از گزینه های موجود برای یک سلول جاوا اسکریپت قابل مشاهده را نشان می دهد.

your_file_name = Array(32) [Object, Object, Object . . . ]

و یکی دیگر مانند

your_file_name = FileAttachment("your_file_name.csv").csv()

این خط اول نتیجه کد شما، آرایه‌ای از اشیاء جاوا اسکریپت است. اگر روی مثلث کنار Array کلیک کنید، بزرگ می‌شود تا بتوانید داده‌های خود را مشاهده کنید.

مرحله ۳: اضافه کردن جدول جاوا اسکریپت به نوت بوک

یک سلول جاوا اسکریپت دیگر اضافه کنید، به پایین بروید و گزینه جدول جاوا اسکریپت را در زیر جدول انتخاب کنید. کد viewof table = Inputs.table(cars) باید وارد سلول شود. اگر آن را اجرا کنید، جدولی از مجموعه داده های داخلی خودروها را دریافت خواهید کرد. به نام داده‌هایی که وارد کرده‌اید، cars را تغییر دهید، و جدولی با داده‌های خود دریافت خواهید کرد.

اگر روی علامت سوال در یک دایره در پایین لیست نمادها در حاشیه سمت راست کلیک کنید (یا فقط کلید ؟ را فشار دهید در حالی که مکان نما در یک سلول نیست)، شما لیستی از فایل های راهنما دریافت خواهید کرد. فایل راهنمای «افزودن جدول» توضیح می‌دهد که Inputs.table() نمایش جدول را نشان می‌دهد. می‌تواند گزینه‌های اضافی مانند مرتب‌سازی را بپذیرد. پیوندی در متن راهنمای جدول به یک دفترچه با اطلاعات بیشتر درباره ورودی: جدول.. p>

همان متن راهنما ؟ شما را در مورد نحوه افزودن نمودار یا نوار لغزنده تعاملی از کتابخانه داخلی Observable Plot راهنمایی می کند.

مرحله ۴: وارد کردن اجزای جاوا اسکریپت برای استفاده مجدد

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

یک تابع عمومی وارد کنید

برای استفاده از تابع شخص دیگری، موارد زیر را به نوت بوک خود اضافه کنید و طبق معمول با هر آرگومان مورد نیاز از تابع استفاده کنید:

import {TheFunctionName} from "@user/notebook-name"
 

می توانید نام تابع را نیز با استفاده از نحو تغییر دهید: 

import {their_function as my_function}
from "@username/notebook_name"

سپس می‌توانید از آن کد با my_function(mydata)  استفاده کنید (در صورت نیاز هر گونه آرگومان تابع اضافی را اضافه کنید).

توجه داشته باشید که می‌توانید از همان کد وارد کردن {TheFunctionName} از «@user/notebook-name» در قطعه کد ojs سند Quarto استفاده کنید، نه تنها در ObservableHQ .com.

وارد کردن یک سلول

در یک نوت بوک در ObservableHQ.com، کلیک کردن روی منوی سه نقطه در سمت چپ یک سلول نامگذاری شده باید گزینه ای برای Copy Import نشان دهد، اگر سلولی قابل کپی باشد. همانطور که در شکل ۳ نشان داده شده است، با کلیک بر روی آن کد واردات صحیح را به شما می دهد.

استفاده مجدد از کد در نوت‌بوک‌های Observable

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

بوستوک گفت: «ما دوست داریم ببینیم مردم راه‌های جدیدی برای استفاده از Observable [جاوا اسکریپت] در فناوری‌های دیگر ایجاد می‌کنند. اگر می‌خواهید بدون مجوز منبع باز اختصاص داده شده از کد در دفترچه یادداشت استفاده کنید، Bostock افزود: “ما مردم را تشویق می‌کنیم تا با نویسنده تماس بگیرند.”

Import همچنین با داده‌ها، گرافیک‌ها و حتی متن از نوت‌بوک دیگری، خواه مال شما یا شخص دیگری، کار می‌کند.

“سلول را به عنوان یک تابع در نظر بگیرید، به جز این که تابع هیچ آرگومان ندارد” این توصیه از Observable’s JavaScript نیست. Bostock همچنین یک مثال با توضیحات در نمودار نواری، نوت بوک افقی خود دارد.

این طرز تفکر می تواند به شما کمک کند کد خود را مدولار کنید و همچنین از کارهای دیگران استفاده مجدد کنید. و، می‌توانید هنگام وارد کردن با استفاده از import-with syntax، بوستوک گفت. “این به شما امکان می دهد تا از یک نوت بوک دیگر، مانند نمودار، محتوا را بگیرید و داده های آن را با خودتان جایگزین کنید، تا زمانی که داده های شما ساختار یکسانی دارند (همان نام ستون ها و انواع).” اگر داده‌های شما در قالب مورد نیاز نیستند، از چیزی مانند array.map برای تبدیل آن به آنچه لازم است استفاده کنید.

برای جزئیات بیشتر و معرفی Observable به واردات مراجعه کنید .github.io/quarto_tests/examples/quarto_observable_imports/quarto_observable_imports.html” rel=”nofollow”>مثال Quarto timelyportfolio از استفاده مجدد از جدول خلاصه داده‌ها همراه با گرافیک برای تولید چیزی شبیه آنچه در شکل ۴ نشان داده شده است

.

شکل ۴. جدولی که توسط تابع SummaryTable وارد شده ایجاد شده است.

شما فقط به دو خط کد نیاز دارید، هر کدام در سلول نوت بوک خود:

import { SummaryTable } from "@observablehq/summary-table"
SummaryTable(mydata)

این دو خط باید در سلول‌های جداگانه در ObservableHQ.com باشند (آنها می‌توانند در یک سلول مشاهده‌پذیر در یک سند Quarto باشند).

با تشکر از باب رودیس، معاون علم داده در شرکت امنیتی اطلاعات GreyNoise ، حتی می توانید یک دفترچه یادداشت قابل مشاهده را به عنوان یک سند محلی Quarto با یک برنامه Rust یا برنامه افزودنی Chrome، کوارتیز.

پشتیبانی زبان برای نوت‌بوک‌های Observable

از مایک بوستوک پرسیدم که آیا Observable, Inc. در حال بررسی میزبانی Quarto یا اسناد دیگری است که R و/یا Python و همچنین جاوا اسکریپت را در خود جای دهد.

Bostock گفت: “ما قطعاً در مورد آن زیاد صحبت می کنیم، اما برخی ملاحظات وجود دارد … ما در قلب خود مبتنی بر وب هستیم و روی اجرای کد در مشتری متمرکز هستیم”، با هدف ارائه تجربه ای “سریع و سریع” مایع.” با این حال، بوستوک گفت که در حال تماشای پروژه‌های WebAssembly مانند Pyodide است که محاسبات زبان درون مرورگر را ارائه می‌کنند.

در حال حاضر، حداقل، پلتفرم وب Observable فقط از جاوا اسکریپت، مارک داون و HTML پشتیبانی می کند. بعدی: تجسم داده ها را با جاوا اسکریپت قابل مشاهده بیاموزید.