[پخش موسیقی] 

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

قانون من، DOM manipulation-- ما قصد داریم برای شروع از حق دور ساختن چیزهای سرد. اول از همه، در سمت چپ، ما باید کد. در سمت راست، ما در نتیجه کد ما. بیایید از طریق آن بروید. 

بیایید یک دایره را. چگونه است که صدا؟ svg.append circle-- ما فقط ساخته شده یک دایره. شما به من اعتقاد ندارند، درست است؟ آن وجود ندارد. 

بنابراین آنچه که ما حق در اینجا انجام داد، SVG گرافیک برداری مقیاس پذیر است. این راه ما مرورگر بگویید که است را گرافیک برداری در مرورگر. چیزی که ما فقط در حال حاضر انجام یک دایره به فهرست اضافه شده است. 

وعده این است که دایره نیاز به یک بیت از ویژگی های عمومی قبل از ما در واقع می تواند آن را ببینید. ما باید به آن موقعیت X خود را بگویید، موقعیت Y آن، شعاع آن است. ما آن را بگویید هر یک از که نیست، بنابراین ما در حال از آن دیدن نیست در حال حاضر. اما اجازه دهید آن را چیزهای بگویید. 

بنابراین اول از همه، شما رو یک نام را به دایره ما. بنابراین اجازه دهید آن دایره تماس بگیرید. دایره ما دارای یک نام کن. و اجازه دهید آن را چند ویژگی را. چگونه در مورد CX خواهد X مرکز، به طوری مرکز موقعیت X. بیایید می گویند، 200 200 پیکسل می باشد. 

بیایید آن Y از 200 پیکسل و همچنین به شما بدهد. و R، شعاع، در حدود 40 پیکسل. حالا ببینید. من نمی توانم طلسم. 

شما بروید وجود دارد. ما یک دایره در موقعیت 200 پیکسل، 200 پیکسل، شعاع 40 پیکسل. نوع سرد، درست است؟ ما یک دایره. آره. 

بنابراین نیازی به دنبال همراه. همه این مثال ها، همه کد من انجام امروز به صورت آنلاین در پایان ارائه در قالب مثال های تعاملی با ایست های بازرسی در هر عمل، و غیره. 

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

اجازه دهید آن را یک رنگ می دهد. چگونه است که؟ من به رنگ آبی فولاد را دوست دارم. خوب، دایره ما تغییر رنگ. عالیه. اجازه دهید آن را نیمه شفاف را too-- نیمه شفاف. 

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

هستند ویژگی های بسیار بیشتری وجود دارد. در بسیاری از آنها وجود دارد. به عنوان مثال، ما می تواند داشته باشد سکته مغزی و همچنین، سکته مغزی از رنگ های قرمز. اما اجازه دهید حذف. ما به یک دایره، یک دایره آبی هستید. 

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

بنابراین می گویند من فقط کپی-جایگذاری آنچه که ما در حال حاضر به حال. بیایید آن را circle2. و اجازه دهید دقیق انجام همان چیزی که و آن را ویژگی های، با توجه به موقعیت X 300. ماهواره، ما باید دو دایره در حال حاضر. 

و البته، ما می تواند به روز رسانی این ارزش ها. من می توانم آن را در 400 قرار داده، و در حال حاضر آن حرکت می کند. و از آنجایی که این آزاردهنده است، اجازه دهید حذف آن، بنابراین circle2.remove. این در حال حاضر رفته است. 

بنابراین آنچه که ما در حال انجام و فقط بسیار، very-- این بسیار شبیه به آنچه شما ممکن است در jQuery انجام دهید، به عنوان مثال. ما فقط دستکاری DOM، آن را به نام. شما ممکن است که کلمه قبل از شنیده می شود. ما در حال ایجاد مسائل، تنظیم ویژگی بر روی مسائل، از بین بردن مسائل. 

در حال حاضر، در اینجا است که آن را جالب می شود. بنابراین بعد در کد، ما هنوز هم می تواند به دایره اصلی در اینجا مراجعه کنید. بنابراین اجازه دهید ویژگی آن CX را بازنشانی کنید. بیایید می گویند، موقعیت X آن به 400. و من قصد دارم به انتقال که، پس از آن آشکار است. ما وجود دارد. 

بنابراین ما یک دایره اضافه شده است. ما مجموعه ای از ویژگی های. ما اضافه دایره دیگر، آن را حذف. و سپس ما در حال تغییر دایره اصلی است. 

اما در اینجا که در آن می شود بسیاری جالب است. نه تنها می تواند ما مجموعه صفات فقط به عنوان ارزش، می توان گفت، با سلام، دایره، به موقعیت 200. ما همچنین می توانیم آنها را به عنوان توابع تنظیم شده است. 

بنابراین به جای دادن 400 در اینجا، ما می توانیم برخی محاسبات را در پرواز برای چه ما می خواهم که ویژگی است. پس این است که چگونه شما می خواهم بیان که. ما می گویند، به جای 400، به من اجازه شما یک تابع به جای می دهد. و در اینجا، در داخل این تابع، ما می توانیم هر محاسبه دیوانه را. 

ما می تواند زمان را و در برخی از چیز دیگری نگاه و به صورت پویا برای تصمیم گیری دایره چه مقدار ما می خواهیم. چگونه در مورد ما فقط به من بدهید آن موقعیت X تصادفی؟ به طوری که که. 

پس چه که می گوید، برای هر x، اجرای این تابع. و آنچه ما انجام می دهیم است محاسبه برخی از چیزهایی، زمان های تصادفی عرض و بازگشت است. بنابراین هر زمان که ما اجرا است که، ما یک دایره که می رود به یک جای تصادفی. این نوع از خنک است. من احساس می کنم می تواند نگاه در این یک کمی. ما در حال شروع به گرفتن به چیزی جالب در اینجا. بیایید این اطلاعات در حال حاضر هدایت می شود. هیچ داده در اینجا وجود دارد. بیایید تغییر دهد. 

Documents-- قانون دوم، داده ها رانده بنابراین اجازه دهید به اینجا بازگشت. و اجازه دهید فقط خلاص شدن از شر circle2، چون ما فقط با اضافه کردن و از بین بردن آن. بنابراین ما واقعا به آن نیاز دارید. ما باید هوشمندانه خیلی بیشتر در اینجا. بیایید می گویند، ما باید برخی از داده های از نوعی. یکی moment-- اجازه دهید بگویم، ما داده از این فرم بود. ما تا به حال یک آرایه، فقط یک دسته از اعداد. ما هفت عدد در اینجا، هر این مقدار represent-- در حساب بانکی مردم، چگونه مقدار از آنها وزن، خدا می داند چه. 

این اعداد هستند، و ما مایل به استفاده از حلقه ما برای نشان دادن این اعداد به نحوی. ما می خواهیم به کراوات ما محافل به آن اعداد. پس چه کار می کنیم. بیایید می گویند، ما می خواهیم دایره برای هر تعداد. ما می تواند قدیمی انجام چیزی که ما doing-- شد اضافه دایره و circle2 و circle3. اما این می شود از دست، و در بسیاری از تکرار منطق وجود دارد. 

بنابراین اجازه دهید هوشمندانه تر با آن دریافت کنید. به جای استفاده از دایره ور svg.append که ما فقط با استفاده از شد، ما قصد استفاده از این بلوک کمی اینجا. من نمی خواهم برای رفتن در عمق به چه تمام این قطعات را انجام دهد. و این نوع موضوع و جوی پیشرفته است. و ای کاش می توانستم. 

اما نکته کلیدی برای recognize-- و شما خواهید دید بسیار اغلب در کد D3. این بلوک از پایه متن به عنوان بسیاری از محافل ایجاد به عنوان عناصر داده ها وجود دارد در این آرایه در اینجا ببینید. بنابراین این ایجاد به عنوان بسیاری از محافل به عنوان وجود دارد عناصر هستند. این به ما ایجاد هفت محافل. و آن چیزی که واقعا، واقعا کلیدی است. بنابراین اجازه دهید اجرا است. بیایید دایره دیگر ما حذف شده است. بیایید فقط این نظر بخشی از و اجرای این دوباره. 

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

این که داده های متصل شد. بنابراین هر یک از این عناصر داده ها، 10، 45، 105، متصل شد به یک حلقه خاص. بنابراین این نه تنها ایجاد یک دسته از محافل اما روابط این دو چیز با هم. 

و در آینده، چرا که ما ایجاد کسانی که محافل با این تابع D3، اگر من به شما یک دایره را، شما می توانید من اطلاعات مرتبط با آن را. بنابراین ما می توانیم D3 بپرسید. با سلام، D3، من این دایره داشته باشد. داده هایی را که دایره است چه خبر؟ و D3 به ما 10 یا 45 یا 105 بگویید. 

این چیزها محدود شده است. این مفهوم بسیار، بسیار اساسی است. بیایید در آن نگاه کنید. 

پس راه ما می خواهم بپرسم D3-- تا این بی ربط برای این است، اما فقط به من بر روی آن اعتماد. این است که چگونه درخواست ما D3. با سلام، D3، من اولین را دایره که شما می توانید پیدا کنید. من اولین دایره شما می توانید پیدا کردن بدهید. و سپس ما می تواند D3 بپرسید، چه چیزی داده ها بر روی آن، مانند این، 10. 

بنابراین ما فقط D3 بپرسید، من پیدا اولین دایره شما می توانید پیدا کنید. داده های آن چیست؟ 10، این است که در واقع ما عنصر داده است. ما می تواند آن را بپرسید، با سلام، D3، دایره سوم ما ما. 105. چرا این واقعا مهم است؟ 

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

پس این X postition-- به جای فقط گفت: تمام محافل، دریافت X موقعیت 200، ما می تواند از آن یک تابع را. و در اینجا، ما می توانیم برخی محاسبه کند. و د در اینجا در محل برای اطلاعات است. بنابراین هر بار ما یک دایره، در واقع، D3 این هفت حلقه ایجاد کنید. و سپس برای هر 

دایره، آن را برای رفتن، با سلام، circle1 چه موقعیت X خود را. پیش از این، ما بودند همیشه پاسخ 200. اما در حال حاضر، هر زمان D3 می پرسد ما چه موقعیت X خود را، آن را به من بدهید us-- ما که دایره، بنابراین ما باید داده. این به ما داده می دهد و می گویند، چه چیزی می خواهید این نمایشگاه می شود، بر اساس آن داده است. 

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

بنابراین برای دایره اول، D3 قرار می دهد یک دایره. و سپس D3 ما می پرسد، چه شما می خواهید این نمایشگاه است. و ما فقط می گویند، هر آنچه که داده است. را شرح 10. 

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

پس از آن توسط 3 ضرب، داده ضرب 3. دایره ما فقط از گسترش کردم. ارزش ما سه برابر شده است. 

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

این تجسم داده است. این بسیار اساسی است، اما این به ما می دهد برخی از بینش را به داده های ما است. این به ما می گوید که، برای مثال، ما یک خوشه کمی از عناصر. و ما باید پرت بزرگ در اینجا. این به ما می دهد برخی از اطلاعات در مورد توزیع. 

اگر ما، به عنوان مثال، برای تغییر داده ها به 150 اینجا و تازه کردن، تجسم ما تغییر می کند. این سند داده محور است. 

بنابراین البته، همه این عناصر، همه این ویژگی ها در اینجا، ما می توانیم یک تابع استفاده کنید، نمی فقط اعداد، نه فقط X و Y موقعیت. بنابراین ما می توانیم یک تابع برای رنگ استفاده کنید. بنابراین ما همین کار را. ما آن را یک تابع را. 

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

بنابراین اجازه دهید در اینجا قرار داده اگر بیانیه. بیایید می گویند، اگر داده های ما کمتر است از 50، که برخی از آستانه است که ما علاقه مند هستید در برای برخی از دلیل. اجازه دهید آن را سبز می کند. در غیر این صورت، اجازه دهید آن را قرمز می کند. چگونه است که؟ زیبا. 

بنابراین تجسم داده های ما شروع برای انتقال اطلاعات جالب تر در بسیاری از کانال های. بنابراین در حال حاضر ما یک کمی می دانم در مورد توزیع. و ما می دانیم که نوعی از وجود دارد قطع 50 که ما علاقه مند هستید. ما می دانیم که دو نقطه داده ها وجود دارد این آستانه و بسیاری از آنها بالا. 

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

تا بعد، قانون III، Scales-- به همین دلیل یک مشکل راست در اینجا این است، اگر تغییر ما ما داده ها در این 200 value-- اگر ما آن را به 400 تغییر دهید و یا چیزی و تازه کردن، سپس این مقدار فقط offscreen رفت. بنابراین منطق ما حق در اینجا چگونه کار می کنیم بار 3 و 20، به آن گسترش و پس از آن جبران آن را کمی واقعا clunky است. 

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

چیزی که ما اساسا نیاز است، ما این محدوده از اعداد 10. 45، 105. و ما می خواهیم به نقشه که بر روی عرض، عرض کامل در اینجا. بنابراین ما باید طیف وسیعی از تعداد رفتن از 0 تا 100. و ما باید این دانشگاه من می رود 20-700، در این مورد. 

ما نوع می خواهید به نقشه که در. ما می خواهیم به مقیاس که تا و سپس آن را جبران کمی. به نظر می رسد که D3 دارای این. آن را به نام مقیاس. بنابراین اجازه دهید آن استفاده کنید. 

راه که works-- من قصد دارم به نوع این و بعد آن را توضیح دهید. این مقیاس است. چه این کار را انجام خواهد است، نقشه ای حاوی ارزش 1-200 در 20 تا 600 ما می توانیم بررسی کنید که. ما در اینجا می توانید ببینید که. 

بنابراین اگر من آن را تغذیه 1-- یک لحظه. من یک ثانیه را. من باید آن را اشتباه وارد. شما بروید وجود دارد. من متاسفم که در مورد هستم. 

پس چه مقیاس را انجام خواهد داد است، آن را به یک ارزش را و سپس تبدیل آن، گسترش که از، پس از آن پر طیف گسترده شما برای درخواست. بنابراین در این مورد، اگر ما آن را یکی را، این رفتن به نقشه که بر روی 20. و اگر ما آن 200 را، آن را رفتن به نقشه است که به 600. و جایی در میان، اگر ما 100، آن را رفتن به جایی در بین 20 و 600. 

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

Well-- اوه، ما باید یک خطای کوچک در اینجا. ما در حال از دست رفته داده. شما بروید وجود دارد. و آن را گسترش است. 

که به ما می دهد همان نتیجه ما قبل از به حال، اما به جای داشتن آن سخت محدودیت کد. و اگر به اندازه ما تغییرات بوم، به عنوان مثال، اگر ما می خواهیم به این بیش از 400 پیکسل و آن را squishes از، ما می توانیم آن over-- دارند ما می توانیم آن گسترش، و یا ما می توانید این حاشیه چپ به کاهش چیزی کمتر یا بیشتر از 20. این اعداد، این سخت کدگذاری تعداد در حال حاضر احساس به ما را. 

و ما می تواند خیلی بیشتر انجام چیزهای جالب و همچنین. بنابراین به جای داشتن یک خطی مقیاس، ما ممکن است بخواهید برای ورود مقیاس. و این ما را مقیاس ورود می دهد. 

بنابراین در حال حاضر در مقیاس ما، به جای فقط در حال گسترش است که محدوده، آن را انجام کارها پیچیده تر. به جای داشتن این محدوده سخت کد و به جای داشتن که 600، ما ممکن است بخواهید فقط با استفاده از عرض، تا از 20 تا عرض منهای 40، 2 بار حاشیه در طرف دیگر. و این را حس می کند خیلی بیشتر به کسی که ممکن است در کد نگاه کنید. 

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

بنابراین محدوده ما می تواند be-- دامنه ما 1 تا 200 است. چیزی که ورودی است. اما ما ممکن است بخواهید به نقشه از سبز به رنگ قرمز، به عنوان مثال. و در حال حاضر، اگر ما آن را 1 عبور، ما در حال رفتن به سبز. اگر ما آن را 200 را خواهیم قرمز دریافت کنید. و اگر ما آن چیزی عبور در میان، آن را به برخی از ترکیبی از که، جایی در شیب بین سبز و قرمز. 

و به جای داشتن این نوع از منطق clunky ما با در اینجا مشروط سمت راست وجود دارد، ما می تواند something-- دارند مقیاس خطی بین آنها بوده است. بنابراین ما می خواهم مقیاس استفاده می کنیم فقط ایجاد، که ما به نام رنگ. و ما می خواهم آن را D، که عنصر داده های ما است. وجود دارد و ما بروید. ما یک مقیاس رنگ. 

بنابراین این نقشه است. بنابراین سمت چپ به طور کامل به رنگ سبز است. سمت راست به طور کامل قرمز است. و همه چیز را در بین یک تابع از D است. در حال حاضر جالب تصویری در اینجا. اما داده های ما نوع خسته کننده بود. بیایید ببینید چه ما می تواند در صورت انجام ما اطلاعات جالب تر بود. 

قانون IV، کار با Data-- اولین چیزی که ما می خواهیم انجام دهیم به ما تجسم جالب تر این است که حرکت داده در جایی دیگر. این بسیار clunky به داده های سخت در اینجا کد. و به طور کلی، ما خواهید بود درخواست کسی دیگری برای داده ها. ما می شود شاید درخواست دولت، اداره آمار، چه اطلاعات شما است و سپس توطئه که یا درخواست برخی از نهاد های شخص ثالث برای برخی از داده و پس از آن ساخت تجسم در آن. 

بنابراین اولین چیزی که ما می خواهیم انجام دهیم حرکت می کند که به جایی دیگر. بنابراین من قصد دارم برای ایجاد یک فایل اینجا به نام data.json. JSON فرمت داده است. شما لازم نیست که می دانم بسیار در مورد آن. و ما قصد داریم برای کپی کردن اطلاعات کمی ما وجود دارد، آن را در وجود کلمه به کلمه رب، به بازگشت به کد تجسم ما در اینجا، و استفاده از این تابع در اینجا ببینید. شما لازم نیست به دانستن جزئیات. اما آنچه انجام این کار خواهد شد، از آن خواهد شد که فایل پیدا کنید، واکشی آن، و بازگشت آن را به ما. پس چه می کند این است، آن می رود و دریافت فایل data.json. و پس از آن تمام کد که فاصله دار inside-- اساسا، تمام کد ما there-- خواهد شد اجرا تنها زمانی که ما دریافت داده ها به عقب. و سپس آن را به اجرا که کد با داده ما. بزرگ، ما یک تجسم که نمایش داده شد برای برخی از کد جایی دیگری است که معمولا که در آن نمایش داده شد برخی از داده ها از در جایی دیگر، که معمولا چگونه تصویری کار می کنند. 

اما من می خواهم برای رفتن به داده ها. بنابراین داده اساسا در D3-- D3 مصرف داده است که یک لیست از چیزهایی است. D3 انتظار داده فقط یک لیست است از همه چیز، مجموعه ای از چیزها می شود. مهم چه کسانی که همه چیز نمی هستند، تا زمانی که آن را مجموعه ای از آنها را. 

بنابراین در اینجا، به عنوان مثال، ما می تواند از البته ارزش ممیز شناور. ما می تواند منفی داشته باشد. D3 مراقبت می کند، تا زمانی آن را به عنوان یک لیست از چیزهایی است. 

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

بنابراین دوباره، این یک لیست از چیزهایی است. D3 مراقبت می کند. این اتفاق می افتد به یک رشته است. ما داده های ما تغییر کرده است. 

بیایید به تجسم ما بازگشت. در حال حاضر، تجسم ما انتظار ورودی به شماره. بنابراین ما قصد داریم به به چند تغییر. بنابراین برای مثال، اول از همه، شاید ما می خواهیم برای قرار دادن این محافل همراه توسط طول تیتر، تعداد کاراکتر در تیتر. 

پس چه کنیم is-- هر زمان ما تابع با یک رشته به نام، ما پیدا کردن آن است طول و پس از آن عبور که به مقیاس. رنگ، من بازگشت که به رنگ آبی فولاد است. وجود دارد و ما بروید. ما یک تجسم سرفصل های زرشکی. 

مقیاس ما خاموش بیت است. بیایید فرض کنیم که طولانی ترین تیتر است 100 کاراکتر، تا دهانه که یک کمی. و ما باید تجسم. بنابراین به نظر می رسد که اکثر سرفصل خیلی نزدیک به هم، از نظر خط شخصیت. اما یکی واقعا وجود دارد و خارج از غرفه. 

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

بنابراین در پیدا کردن اجازه دهید. بیایید با استفاده از رنگ کانال مثل ما قبل انجام داد، به رمز برخی در مورد اینکه آیا یک روده بزرگ و یا وجود ندارد. بنابراین ما دوباره مشروط استفاده کنید. شما لازم نیست که می دانم از جزئیات این، اما این است که چگونه ما را چک کنید رشته برای یک شخصیت خاص در جاوا اسکریپت، دوباره، مربوط نیست. 

اما اگر ما پیدا کند روده بزرگ، ما سبز گشت. و اگر ما، ما قرمز بازگشت. بنابراین دوباره، سرفصل که یک روده بزرگ قرمز خواهد بود. این چیزی است که این means-- خوب. 

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

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

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

این یکی داده مانند تنظیم است. این داده ها مجموعه ای در مورد زلزله است. بنابراین همه چیز در اینجا در لیست یا آرایه ما از چیزهایی شامل بسیاری از چیزهایی است. بنابراین هر نقطه داده است اندازه و هماهنگ می کند. و خود را هماهنگ شامل دو چیز. 

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

بنابراین در اینجا، آن همان مفهوم است. اما در حال حاضر، D شامل همه چیز است. د شامل بسیاری از عناصر داده. بنابراین ما به طور د. D3 به ما می دهد د. و ما با پیدا کردن قدر پاسخ از د و سپس عبور که به مقیاس. 

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

بیایید تازه. خوب، ما یک تجسم. جالب است به note-- تا دو نقطه داده ها وجود دارد که تقریبا دقیقا در بالای هر یک هستند دیگر، از نظر قدر. شما این کار را با کدورت ما با استفاده از را ببینید. 

ما اطلاعات جغرافیایی در حال حاضر. ما عرض و طول جغرافیایی. شاید ما می تواند چیزی را انجام دهید بسیاری جالب تر با آن. بیایید پیدا کردن بعضی از تر راه جالب برای تجسم این پیچیده تر ما اطلاعات دسترسی داشته باشند. 

قانون V، Mapping-- اساسا، ما می خواهیم برای قرار دادن این بر روی نقشه. منظور من، این است که این است که. ما می خواهیم برای رمزگذاری اطلاعات در مورد موقعیت این خوانش زلزله، و همچنین قدر خود، چون ما که در حال حاضر. ما درک می کنیم که چگونه به مصرف اطلاعات پیچیده تر است. 

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

ما قصد داریم به رفتن در جزئیات. اما سطحی، چه میکند، آن نمایش داده شد این فایل us.json، که یک فایل داده ها مانند است یکی از ما قبل از به حال. این پیچیده تر، البته. اما در این مورد، همه چیز، هر نقطه داده این دولت است و تا به یک لیست از عرض و طول جغرافیایی که تعریف چند ضلعی، که فرم، که دولت. 

پس چه D3 را انجام خواهد داد مشابه است به آنچه که ما قبل از انجام. این درخواست که و متصل است که به یک عنصر. و یک تابع وجود دارد که خواهد شد که عنصر نقشه، بر اساس عرض و طول جغرافیایی. شما می توانید به عنوان خوانده شده بیشتر در که. و من آن را توصیه. 

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

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

پروجکشن بسیار است مانند یک مقیاس، مقیاس دوباره. پس چه تولید برای این تابع طرح ریزی کند است، ما می تواند آن را طول جغرافیایی عبور و latitudes-- در این مورد، این ارزش ها در اینجا LAT-پوزیشن های خرید از ساختمان ما در سمت راست نشسته now-- به طرح ریزی. و طرح ریزی تبدیل خواهد شد که به x و y مقدار پیکسل. 

پس چه طرح در حال انجام بسیار شبیه به مقیاس ما است. این در نظر گرفتن عرض ما و طول جغرافیایی است که نشان دهنده جهان کل و کاهش و اندازه که پایین به مربع که ما می خواهیم، که ما آن را داده ام. در این مورد، ما هستیم عبور از این ارزش ها. و آن را به ما، به خوبی، که بر روی صفحه نمایش خود را به معنای 640 پیکسل می باشد. این صفحه کل 700 پیکسل است گسترده، به طوری که ما می سازد در مورد اینجا، و 154 پیکسل پایین، که من برآورد است که تقریبا در اینجا. 

بنابراین مصرف آن LAT-پوزیشن های خرید است که نشان دادن چیزی در کل جهان و متخصص ماموگرافی و در حال حرکت است که در اطراف به ما x و ارزش Y پیکسل را، این اولین چیزی که است انجام شده در این کد نقشه برداری. و سپس بقیه کد مصرف داده و سپس آن LAT-پوزیشن های خرید نقشه بر روی چیزی بر روی صفحه نمایش خود را. 

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

بنابراین به دنبال در نمایشگاه ما، ما می خواهیم exposition-- ما ما یک طول و عرض جغرافیایی. اما ما می خواهیم مقدار پیکسل. و معلوم است، ما باید دقیقا آنچه که ما want-- طرح ریزی. بسیار شبیه ما بودند با استفاده از مقیاس حق در اینجا، ما در حال حاضر قصد استفاده از طرح و با تصویب آن مختصات. پس اولین کاری که ما در حال doing-- بنابراین ما گرفتن د، که داده های فردی عنصر زلزله فردی خواندن. اولین چیزی که ما انجام می دهیم این است که مختصات. همه حق است، ما باید مختصات. 

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

ما برای Y همان را انجام دهید. اما در عوض، ما بازگشت عنصر دوم، Y. آماده به روز کردن دریافت کنید. آه، شخصیت اضافی here-- خوب، ما اطلاعات سند رانده که پنهان کردن این فایل JSON از اشیاء، ساخت یک نقشه، و تغییر نسبت در رابطه با داده به آن پروژه بر روی نقشه. این واقعا جالب است. این خنک است. 

بیایید آن را تا درجه یک. منظور من، ما باید دو قطعه از اطلاعات با هر نقطه داده. منظور من، سه. ما مختصات، که x و y است. و ما باید قدر. 

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

بیایید انجام شعاع. من فکر می کنم شعاع بصری است. بنابراین دوباره، ما جایگزین که سخت رمزی 40 و ایجاد برخی از محاسبات. ما مقیاس های مورد علاقه ما دوباره استفاده کنید. و ما گذشته D هستند. اما د نمی کند چرا که ما می خواهیم قدر از د. D فقط نقطه داده است. ما تصویب قدر به مقیاس. 

بیایید سعی کنید که دوباره. آه، آن کار نمی کند. چرا کار نمی کند؟ 

بنابراین به یاد داشته باشید آنچه که مقیاس کند. بیایید در مقیاس نگاه دوباره. نقشه مقیاس از 1 تا 10 در تا 22 روی 600 و بیشتر یا کمتر. 600 بزرگ است. به همین دلیل است که ما در حال گرفتن این. 

بنابراین ما می خواهم برای تغییر مقیاس ما به چیزی معقول تر است. بیایید می گویند، ما می خواهیم 0 تا 60. 60 بزرگ است، اما 10 زمین لرزه فوق العاده نادر است. در واقع، آنها هرگز اتفاق افتاده است ام. 

پس چه انجام این کار خواهد شد، آن را را قدر ما می رود که از 1 تا 10 و نقشه آن را در آن گسترش است. و نقشه آن را به 0 تا 60. بیایید تازه. 

خوب، ما یک تجسم. این عالی است. این داده های واقعی است. شما متوجه، در اسباب بازی کوچک من به عنوان مثال، بزرگترین زلزله سمت راست در بالای ما است. اما که این. ما یک تاریخ رانده تجسم که مصرف داده و به ما می دهد واقعا اطلاعات جالب است. آره، اجازه دهید اضافه کردن برخی از تعامل به آن. من به ذکر است که بود نیروی قوی از D3. 

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

بنابراین اولین چیزی که ما به نیاز انجام شده است را انتخاب کنید که عنصر، برای پیدا کردن آن را اساسا، در مرورگر. و سپس ما می تواند تنظیم یک ویژگی به آن. بنابراین آنچه من در اینجا انجام است، زمانی که ما شناور بیش از چیزی، ما که عنصر دریافت و پس از آن مجموعه کدورت آن بازگشت تا 1، به طور کامل مات. بیایید ببینید که به نظر می رسد مانند. 

به نظر می رسد ما نقطه و ویرگول اضافی در اینجا. بنابراین اگر ما بیش از اینجا شناور، آن کامل می شود. اما در حال حاضر، البته، آن را باقی می ماند کامل، چون ما به توصیف آنچه اتفاق می افتد زمانی که مکان نما ما حذف شده است. بنابراین اجازه دهید انجام دقیقا همان است که در mouseout، به عنوان مخالف به اسم خلاصه. 

و ما آن را به تنظیم مجدد آنچه که ما before-- 0.5 بود. و در حال حاضر، هر زمان که ما شناور، ما یک دایره کامل دریافت کنید. این کمک می کند ما ببینیم که چه چیزی ما ما در حال انتخاب اساسا. 

و در حال حاضر اجازه دهید این واقعا بزرگ است. بیایید این به داده های واقعی ارتباط برقرار کنند. بنابراین اجازه دهید بپرسم می تواند USGS در مورد داده های خود را. بنابراین سازمان زمین شناسی ایالات متحده داده هایی در مورد زلزله. آنها یک API عمومی که قادر در فرمت JSON مصرف شود. بنابراین اجازه دهید انجام این کار. 

بنابراین این یک بیت از کد است که متصل به API USGS. و کمی از پردازش بر روی آن وجود دارد. این مربوط نیست اما ساده به یک فرمت داده های ساده مانند یک ما قبل از به حال. بنابراین من می توانید از تماس ما را به خلاص شدن از شر data.json جعلی ما را در فایل. و به جای آن، من تماس USGS اساسا. 

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

اما اساسا، این چیزی است که D3 کمک می کند تا ما انجام می دهید. این کمک می کند ما را داده، اتصال آن را به عناصر در DOM، و آن عناصر را تغییر دهید به عنوان یک تابع از داده ها، دارای آن ویژگی، همه ویژگی های بسیاری از عناصر، همه برای کانال های مفید باشد برای انتقال اطلاعات. 

D3 فوق العاده قدرتمند است کتابخانه و شگفت آور به خوبی اجرا شود. این برخی چیزهای قدرتمند است. تجسم داده است ابزار فوق العاده قدرتمند برای انتقال به مردم عمیق بینش می شود که به هسته خود و کمک می کند آنها را درک کنند، در این راه عمیق و بصری، چگونه اطلاعات آثار و چگونه اطلاعات زندگی ما را تغییر میدهد.