[সঙ্গীত বাজানো] 

ডেভিড CHOUINARD: আমি ডেভিড করছি Chouinard, এবং এই D3 হয়. স্বাগতম. আজ D3 সম্পর্কে জানতে চলুন. D3 তে একটি জাভাস্ক্রিপ্ট কাঠামো একটি উচ্চ মানের নির্মাণের জন্য ওয়েব জন্য ইন্টারেক্টিভ দৃশ্য. আমরা কি ভালো জিনিস আমার পিছন দেখছি, আমরা যারা করতে জানতে চলুন জিনিস, এটা বেসিক ধরনের. কিন্তু এটা শীতল হতে যাচ্ছে. এর শুরু করা যাক সুন্দর ছবি তৈরীর. আমরা আরো গণদেবতা পেয়েছেন উপলব্ধ সম্ভাবনা. চলুন শুরু করা যাক. 

আইন আমি, DOM, manipulation-- আমরা চলুন শীতল জিনিস তৈরীর এখুনি শুরু করতে. প্রথম সব, বাম দিকে, আমরা কোড আছে. অধিকার, আমরা আছে আমাদের কোড ফলাফল. এটা দিয়ে যান. 

এর একটি বৃত্ত করা যাক. কিভাবে যে শব্দ আছে? svg.append circle-- আমরা শুধু একটি বৃত্ত তৈরি. আপনি ঠিক, আমাকে বিশ্বাস করেন না? এটা আছে না. 

সুতরাং আমরা অধিকার এখানে কি, এটি SVG আকার পরিবর্তনযোগ্য ভেক্টর গ্রাফিক্স হয়. এই আমরা ব্রাউজার বলতে উপায় ব্রাউজারে ভেক্টর গ্রাফিক্স করতে. আমরা কি শুধু ডান এখন করেনি ব্রাউজ একটি বৃত্ত যোগ করা হয়. 

প্রতিশ্রুতি বৃত্ত যে মৌলিক গুণাবলী একটি বিট প্রয়োজন আমরা আসলে এটি দেখতে পারেন. আমরা এটা তার এক্স অবস্থান বলা প্রয়োজন তার Y অবস্থান, তার ব্যাসার্ধ. আমরা যে কোনো এটা বলতে না, তাই আমরা ডান এখন এটা এইজন্য না. কিন্তু এর স্টাফ এটা বলছি. 

সুতরাং প্রথম সব, আপনি পেয়েছেন আমাদের বৃত্ত একটি নাম দিন. সুতরাং এর বৃত্ত কল করা যাক. আমাদের চেনাশোনা এখন একটি নাম আছে. এবং এটি একটি কয়েক বৈশিষ্ট্যাবলী দিতে. কিভাবে CX সম্পর্কে তাই, এক্স কেন্দ্র হবে এক্স অবস্থান কেন্দ্রে. এর 200 পিক্সেল জন্য, 200 বলে. 

এর পাশাপাশি এটি 200 পিক্সেল Y দিতে. এবং প্রায় 40 পিক্সেল একটি কিছু, একটি ব্যাসার্ধ,. এখন দেখুন. আমি বানান করতে পারেন. 

এখন পর্যন্ত আপনি যান. আমরা অবস্থান 200 এ একটি বৃত্ত আছে পিক্সেল, 200 পিক্সেল, 40 পিক্সেল ব্যাসার্ধ. শীতল ধরনের, ডান? আমরা একটি বৃত্ত আছে. হ্যাঁ. 

তাই কোন প্রয়োজন বরাবর অনুসরণ করা. এই উদাহরণ, সব আমি আজ করছি কোড শেষ অনলাইনে প্রদান করা হবে ইন্টারেক্টিভ উদাহরণ আকারে এ চেকপয়েন্ট সঙ্গে প্রতিটি আইন, এবং তাই. 

এর আরো স্টাফ করুক না. এই কালো বৃত্ত সত্যিই অরুপ. আমি যে ত্রুটির জন্য দুঃখিত ঠিক আছে বার্তা. এখন পর্যন্ত আমরা যেতে. 

এর এটি একটি রং দিতে. যে কেমন আছে? আমি ইস্পাত নীল করতে চান. ওয়েল, আমাদের বৃত্ত রং পরিবর্তন. দারুণ. এটা আধা স্বচ্ছ করা যাক too-- আধা স্বচ্ছ. 

সুতরাং এই গুণাবলী আমরা বৃত্ত সংজ্ঞা করছি. আমরা কি প্রথম জিনিস আমরা পৃষ্ঠায় একটি বৃত্ত করা. এবং তারপর আমরা সংজ্ঞা আরোপ করা একটি গুচ্ছ. এর মধ্যে কিছু প্রয়োজন হয়, CX, CY, এবং ব্যাসার্ধ মত. এবং অন্যদের ঐচ্ছিক. 

আরো অনেক বৈশিষ্ট্য আছে. তাদের অনেক আছে. উদাহরণস্বরূপ, আমরা একটি হতে পারে স্ট্রোক হিসাবে ভাল, লাল একটি স্ট্রোক. কিন্তু এর যে সরিয়ে দেওয়া. আমরা ফিরে একটি বৃত্ত, একটি নীল বৃত্ত করছি. 

তাই এর আরো সার্কেল করা যাক. যে কেমন আছে? এর অন্য একটি বৃত্ত করা যাক. এই অধিকার, উত্তেজনাপূর্ণ? 

তাই আমি ঠিক কপি আটকানো বলে কি ইতিমধ্যে আমরা ছিল. এটা circle2 কল দিন. এবং এর সঠিক না দেওয়া একই জিনিস এবং এটা দিতে 300 একটি এক্স স্থান দেওয়া, গুণাবলী. ইয়ে, আমরা এখন দুটি বৃত্ত আছে. 

এবং অবশ্যই, আমরা পারা এই মান আপডেট করুন. আমি 400 এ এটা করা যেতে পারে, এবং এখন এটা চলে আসে. এটা বিরক্তিকর এবং যেহেতু, আসুন তাই circle2.remove, এটা মুছে ফেলুন. এখন সর্বস্বান্ত করে. 

তাই আমরা কি করছেন এবং এই very-- মাত্র, খুব হয় আপনি কি অনুরূপ উদাহরণস্বরূপ, jQuery মধ্যে কাজ করতে পারে. আমরা শুধু সাধিত করছি DOM, এটা বলা হচ্ছে. আপনি আগে যে শব্দ শোনা হতে পারে. আমরা সেটিং, স্টাফ তৈরি করছেন স্টাফ অপসারণ, স্টাফ গুণাবলী. 

যেখানে সেটা আকর্ষণীয় এখন, এখানে. তাই পরে কোড, আমরা এখনও করতে পারে এখানে মূল বৃত্ত পড়ুন. সুতরাং এর CX তার বৈশিষ্ট্য রিসেট যাক. 400 তার এক্স অবস্থান, এর কথা বলা যাক. এবং আমি স্থানান্তর করা যাচ্ছে না যে, এটি সুস্পষ্ট, তাই. এখন পর্যন্ত আমরা যেতে. 

সুতরাং আমরা একটি বৃত্ত যোগ করা হয়েছে. আমরা কিছু বৈশিষ্ট্য সেট. আমরা অন্য একটি বৃত্ত যোগ করা হবে তা মুছে ফেলা. এবং তারপর আমরা পরিবর্তন করছি মূল বৃত্ত. 

সেটা কিন্তু এখানে যেখানে অনেক বেশি আকর্ষণীয়. নেই শুধু আমরা বৈশিষ্ট্যাবলী সেট করতে পারেন শুধু মান হিসাবে, আমরা বলতে পারেন, হেই, বৃত্ত, 200 উপস্থাপন যান. আমরা ফাংশন হিসাবে তাদের সেট করতে পারেন. 

সুতরাং পরিবর্তে, এখানে 400 দান আমরা কিছু হিসাব করতে পারেন কি জন্য উড়ে আমরা যে বৈশিষ্ট্য হতে চান. সুতরাং আপনি এই যে প্রকাশ চাই. আমরা পরিবর্তে 400, আমাকে বলে, পরিবর্তে আপনি যদি একটি ফাংশন দিতে. এবং এখানে, এই ফাংশন ভিতরে, আমরা কোন পাগল হিসাব করতে পারেন. 

আমরা সময় নিতে পারে এবং অন্য কিছু জিনিস তাকান এবং পরিবর্তনশীল সিদ্ধান্ত আমরা কি চাই, মান বৃত্ত. কিভাবে আমরা শুধু দিতে সম্পর্কে এটি একটি র্যান্ডম এক্স অবস্থান? সুতরাং যে যে. 

তাই কি বলছেন যে জন্য, প্রতি এক্স, এই ফাংশন চালানো. এবং কি আমরা করছেন হিসাবী হয় কিছু কিছু বিষয়, একটি র্যান্ডম বার প্রস্থ এবং যে ফিরে. তাই আমরা যে রান প্রতিটি সময়, আমরা একটি পেতে একটি র্যান্ডম জায়গায় যে যায় বৃত্ত. এটা শীতল ধরনের. আমি চেহারা পারে মনে একটু জন্য এই. আমরা পেতে শুরু করছেন এখানে কিছু আকর্ষণীয়. এর এখন চালিত এই তথ্য করা যাক. এখানে কোন তথ্য নেই. এর যে পরিবর্তন করা যাক. 

এক্ট ২, ডেটা চালিত Documents-- সুতরাং আসুন এখানে ফিরে যাক. এবং, এর ঠিক circle2 পরিত্রাণ পেতে দেওয়া আমরা শুধু যোগ ও অপসারণ করছি, কারণ এটা. সুতরাং আমরা সত্যিই এটা প্রয়োজন হবে না. আমরা এখানে অনেক বেশি চতুর হতে হবে. আমরা, এর কথা বলা যাক কিছু বাছাই করা কিছু তথ্য. এক, এর কথা বলা যাক মুহূর্ত আমরা এই ফর্ম তথ্য ছিল. আমরা শুধু একটি অ্যারের ছিল সংখ্যার একটি গুচ্ছ. আমরা এখানে সাত নম্বর আছে যাই হোক না কেন এই উপস্থাপন পরিমাণ মানুষের ব্যাংক অ্যাকাউন্ট, কিভাবে অনেক তারা দেবতা কি জানেন, তৌল করা. 

এই নম্বর আছে, এবং আমরা আমাদের চেনাশোনা ব্যবহার করতে চান যারা একরকম সংখ্যা প্রতিনিধিত্ব. আমরা আমাদের গিঁট করতে চান ঐ সংখ্যার বৃত্ত. তাই আমরা কি করব তা. চলুন শুরু করা যাক, আমরা চাই একটি প্রতি সংখ্যা জন্য বৃত্ত. আমরা পুরানো করতে পারে আমরা অনুরুপ ছিল জিনিস বৃত্ত লিখবেন এবং circle2 এবং circle3. কিন্তু এই হাতে পায় আউট, এবং যুক্তি পুনরায় একটি অনেক আছে. 

তাই এর সঙ্গে যে আরো চালাক পেতে. পরিবর্তে var বৃত্ত ব্যবহার করে , আমরা শুধু ব্যবহার করা হয়েছে যে svg.append আমরা ব্যবহার করতে যাচ্ছেন এখানে এই সামান্য ব্লক. আমি গভীরতা যেতে চান না কি করে এই সব অংশ না. এবং এটি একটি উন্নত বিষয় ধরনের. এবং আমি ইচ্ছা আমি পারা. 

কিন্তু কী জিনিস recognize-- এবং আপনি D3 কোড খুব প্রায়ই দেখতে পাবেন. টেক্সট মৌলিক এই ব্লক অনেক চেনাশোনা হিসাবে সৃষ্টি তথ্য উপাদান আছে ঠিক এই অ্যারের মধ্যে. তাই এই হিসাবে অনেক সৃষ্টি সেখানে বৃত্ত উপাদান. এটা আমাদের সাত বৃত্ত তৈরি করতে যাচ্ছে. এবং এটি একটি সত্যিই সত্যিই, কী জিনিস আছে. তাই এর যে চালানোর. আমাদের অন্যান্য বৃত্ত অপসারণ করা যাক. এর ঠিক এই মন্তব্য দিন আউট অংশ এবং আবার এই রান. 

এখন পর্যন্ত আমরা যেতে. তাই এখানে আমাদের বৃত্ত একটি অনেক গাঢ়, আমরা, কারণ সাত বৃত্ত আছে, এক অপরের উপর. আমরা মাত্র সাত বৃত্ত, এক নির্মিত এই তথ্য উপাদান প্রতিটি জন্য প্রতিটি. কিন্তু যে ঘটেছে একটি কী জিনিস আছে ঠিক এই স্নিপেট সঙ্গে. 

এটি তথ্য আবদ্ধ ছিল যে. তাই প্রতি একক এক ঐ তথ্য উপাদান, 10, 45, 105, আবদ্ধ ছিল একটি নির্দিষ্ট বৃত্তে. সুতরাং এই শুধুমাত্র তৈরি করা বৃত্ত একটি গুচ্ছ কিন্তু যারা একসাথে দুটি জিনিস বেঁধে. 

এবং ভবিষ্যতে, আমরা তৈরি কারণ এই D3 ফাংশন সঙ্গে যারা বৃত্ত, আমি আপনাকে একটি বৃত্ত দিতে, আপনি যা করতে পারেন আমার সাথে জড়িত তথ্য দিতে. সুতরাং আমরা D3 অনুরোধ করতে পারেন. আরে, D3, আমি এই বৃত্ত আছে. বৃত্ত রয়েছে তথ্য কি? এবং D3 আমাদের 10 বা 45 বা 105 বলতে হবে. 

এই জিনিস আবদ্ধ হয়. এটা একটা খুব খুব মৌলিক ধারণা. এর যে তাকান. 

তাই উপায় আমরা তাই D3-- জিজ্ঞাসা চাই এই, এই জন্য অপ্রাসঙ্গিক কিন্তু শুধু এটা আমার বিশ্বাস. এই আমরা D3 জিজ্ঞাসা করা হয়. আরে, D3 তে আমার প্রথম দিন আপনি খুঁজে পেতে পারেন যে বৃত্ত. আমাকে যদি আপনি খুঁজে পেতে পারেন প্রথম বৃত্ত দিন. এবং তারপর আমরা D3 চাইতে পারেন, কি এই মত যে তথ্য,, 10. 

তাই আমরা ঠিক D3, জিজ্ঞাসা আমাকে খুঁজে আপনি খুঁজে পেতে পারেন প্রথম বৃত্ত. তার তথ্য কি? 10, যে প্রকৃতপক্ষে আমাদের হয় প্রথম তথ্য উপাদান. আমরা, হেই, D3 এটা চাইতে পারেন আমাদের তৃতীয় বৃত্ত খুঁজে. 105. কেন এই সত্যিই গুরুত্বপূর্ণ? 

সুতরাং এখানে ডান, আমি উল্লেখ যে আমরা ফাংশন ব্যবহার করতে পারেন. এবং আমি যে ছিল উল্লেখ একটি খুব শক্তিশালী জিনিস. সুতরাং শুধুমাত্র আমাদের ফাংশন কাজ করতে পারেন না যেমন, কিছু গুনতি না, একটি র্যান্ডম সংখ্যা এটি করতে ফিরে এছাড়াও তথ্য উপর ভিত্তি করে কিছু না. এই তথ্য চালিত নথি মানে কি. যে D3 তে ঘোরা কি. 

তাই এই এক্স postition-- পরিবর্তে শুধু, সব বৃত্ত বলার অপেক্ষা রাখে না, এক্স অবস্থান 200 পেতে, আমরা এটি একটি ফাংশন দিতে পারে. এবং এখানে, আমরা কিছু হিসাব করতে পারেন. এবং ঘ এখানে তথ্য জায়গায় দাঁড়িয়েছে. তাই প্রত্যেক সময় আমরা একটি বৃত্ত, মূলত, D3 এই সাত বৃত্ত তৈরি করবে. এবং তারপর জন্য প্রতি 

বৃত্ত, এটা, হেই, যেতে যাচ্ছে circle1 আপনার এক্স অবস্থান কি. পূর্বে, আমরা ছিল সবসময় 200 উত্তর. কিন্তু এখন, প্রত্যেক সময় D3 জিজ্ঞেস আমাদের আপনার এক্স এর অবস্থান কি, এটা আমরা us-- দিতে যাচ্ছে যে বৃত্ত, তাই আমরা তথ্য আছে. এটা আমাদের তথ্য দিতে এবং বলে যাচ্ছে আপনি কি উদ্ভাস হতে চান না, যে তথ্য উপর ভিত্তি করে. 

এর প্রকৃত তথ্য ফিরে যাক. আমরা এই রান সুতরাং, এই দেয় আমাদের তথ্য নথি চালিত. এই বৃত্ত ভিত্তি করে সম্পর্ক position-- মধ্যে তারা তথ্য একটি ফাংশন হিসাবে ঘাঁটি করছি. 

প্রথম বৃত্ত জন্য, D3 তে একটি বৃত্ত রাখে. এবং তারপর থেকে D3 কি না, আমাদের জিজ্ঞেস করল আপনি উদ্ভাস হতে চান. এবং আমরা শুধু তথ্য যাই হোক না কেন, বলে. উদ্ভাস 10 করুন. 

তারপর এটা আপনি কি করতে চান, জিজ্ঞেস করে উদ্ভাস দ্বিতীয় বৃত্ত জন্য করা. এবং আমরা 45 উত্তর. এবং আমরা অবশ্যই করতে পারেন, এখানে কিছু গুনতি করা. আমি সেই সব বৃত্তের যে খুঁজে ধরনের আপ squished হয়. 

তাই 3 দ্বারা গুন করা তথ্য, 3 দ্বারা গুন করা. আমাদের চেনাশোনা শুধু প্রসারিত হবে. আমাদের মান তিনগুণ হয়েছে. 

বৃত্ত, সত্যিই উত্তেজিত হয় তাই এর হয়তো ধরনের এটি অফসেট যাক. এর 20 দ্বারা, বলা যাক. এখানে আপনি যান. 

এটি একটি তথ্য ঠাহর হয়. এটি একটি খুব মৌলিক এক, কিন্তু এই আমাদের তথ্য মধ্যে কিছু অন্তর্দৃষ্টি দেয়. এটা আমাদের বলে, যে যেমন, আমরা উপাদানের একটি সামান্য ক্লাস্টার আছে. এবং আমরা এখানে একটি বড় আউটলাইয়ার আছে. এই আমাদের কিছু তথ্য দেয় বন্টন সম্পর্কে. 

আমরা যদি, উদাহরণস্বরূপ, পরিবর্তন এখানে 150 এবং রিফ্রেশ তথ্য, আমাদের কল্পনা পরিবর্তিত হয়. এই নথির তথ্য চালিত হয়. 

অবশ্যই তাই, এই সব উপাদান, এখানে এই সব গুণাবলী, আমরা একটি ফাংশন না ব্যবহার করতে পারেন শুধু সংখ্যা, ঠিক না x এবং y অবস্থানের. সুতরাং আমরা রঙ জন্য একটি ফাংশন ব্যবহার করতে পারেন. তাই আমরা একই কাজ করতে হবে. আমরা এটি একটি ফাংশন দেব. 

এবং আমরা আছে, এর কথা বলা যাক আমাদের ফাংশন কন্ডিশন. এই ফাংশন হতে পারে দীর্ঘ লাইন শত. এটা খুব খুব, জটিল জিনিস করতে পারেন. 

তাই এর একটি বিবৃতি যদি এখানে করা যাক. আমাদের তথ্য কম হয়, এর কথা বলা যাক 50, যে কিছু প্রান্তিক মানের এর আমরা আগ্রহী যে কিছু কারণে এ. এটা সবুজ করা যাক. অন্যথা, এটা লাল করা যাক. যে কেমন আছে? খুশী হলাম. 

সুতরাং আমাদের তথ্য কল্পনা শুরু হয় আরো আকর্ষণীয় তথ্য বহন করা অনেক চ্যানেল. তাই এখন আমরা একটু জানতে বন্টন সম্পর্কে. এবং আমরা কিছু বাছাই করা আছে জানি যে আমরা আগ্রহী হন যে 50 এ কাটা বন্ধ. আমরা দুই তথ্য পয়েন্ট আছে জানি তাদের অধিকাংশই যে প্রান্তিক মানের নিচে এবং উপরে. 

সুতরাং একটি চূড়ান্ত পদক্ষেপ হিসেবে, এখানে এই তথ্য, এটি যে ভালো এই দেখতে খুব বিরল. তাই আসুন শুধু একটি পরিবর্তনশীল এটি সরাতে যে ভালো, ক্লিনার, কারণ. এবং তারপর আমরা এখানে যে ভেরিয়েবল ব্যবহার. এটা সঠিক একই জিনিস. এটি শুধু একটি বিট ক্লিনার এর. 

পরবর্তী আপ, আইনের তৃতীয়, Scales-- তাই এক সমস্যা ডান আমরা পরিবর্তন যদি এখানে, আমাদের এই 200 মান তথ্য আমরা 400 থেকে এটি পরিবর্তন করে বা কিছু এবং রিফ্রেশ করুন, তারপর এই মান ঠিক offscreen গিয়েছিলাম. অধিকার এখানে আমাদের যুক্তি তাই কিভাবে আমরা কি বার 3 এবং 20, তারপর, এটা ছড়িয়ে আউট এবং এটি অফসেট একটি বিট সত্যিই clunky হয়. 

যারা সংখ্যার মানে কি? তারা শুধু হার্ড কোডেড করছি. এবং তারা অনেক তথ্য বাঁধা করছি. আমরা একটি তথ্য চালিত ডকুমেন্ট চাই. আমরা একটি খুব নমনীয় ডকুমেন্ট চাই, প্রদত্ত তথ্য যে, এটি আত্তীকরণ করে এবং এটা প্রতিনিধিত্ব করে. 

আমরা কি মূলত প্রয়োজন আমরা, হয় সংখ্যা 10 এর এই পরিসীমা আছে. 45, 105. এবং আমরা সম্মুখের দিকে যে ম্যাপ আউট করতে চান প্রস্থ, এখানে পূর্ণ প্রস্থ. সুতরাং আমরা পরিসীমা আছে 0 থেকে 100 যাচ্ছে নম্বর. এবং আমরা এই ক্যাম্পাস আমি যায় এই ক্ষেত্রে, 700 20 থেকে. 

আমরা যে ধরনের উপর ম্যাপ চান. আমরা যে আকার পরিবর্তন করতে চান এবং তারপর এটি একটি সামান্য বিট অফসেট. এটা D3 এই আছে দেখা যাচ্ছে. এটি একটি স্কেল বলা হচ্ছে. তাই এটা ব্যবহার করা যাক. 

আমি যাচ্ছি আদৌ যে ভাবে এই টাইপ করুন এবং তারপর তা ব্যাখ্যা. এটি একটি স্কেল. কি এটা করতে হবে, এটা ম্যাপ করবে 20 থেকে 600 1 থেকে 200 মান. আমরা যে চেক করতে পারেন. আমরা এখানে দেখতে পারেন. 

তাই আমি এটা ভোজন 1 টি এক মুহূর্ত. আমার এক দ্বিতীয় দিন. আমি এটা জন্য নেটওয়ার্ক সক্রিয় কি করতে হবে. এখন পর্যন্ত আপনি যান. আমি যে বিষয়ে দুঃখিত. 

সুতরাং একটি স্কেল কি করতে হবে , এটি একটি মান নিতে হবে এবং তারপর যে রূপান্তর, যে প্রসারিত, তাই এটি আপনার জন্য বলছি পূর্ণ পরিসীমা fills. তাই এই ক্ষেত্রে, আমরা এটা এক দিতে, এটা 20 সম্মুখের দিকে যে ম্যাপ আউট করা যাচ্ছে. আমরা এটি 200 দিতে এবং যদি, এটা 600 যে ম্যাপ যাচ্ছে. এবং কোথাও মধ্যে, আমরা 100 পেতে, এটা কোথাও হতে যাচ্ছে 20 এবং 600 এর মধ্যে. 

এবং অবশ্যই, এখন এই কি আমরা যারা হার্ড কোডেড অপসারণ করতে হবে কিছু আমরা অধিকার আছে আছে. তাই আমরা যা করতে চাই আমরা যে তথ্য নিতে দেওয়া, যে ব্যক্তি তথ্য উপাদান, এবং প্রথম আকার পরিবর্তন করার জন্য এটি পাস. তাই স্কেল এটি আপ আকার পরিবর্তন করা হবে. 

ওহ Well--, আমরা এখানে একটু ভুল আছে. আমরা তথ্য অনুপস্থিত থাকেন. এখন পর্যন্ত আপনি যান. এবং যে এটি বিস্তৃতি. 

এটা আমাদের একই দেয় ফলে আমরা, আগে ছিল কিন্তু এর পরিবর্তে যারা হচ্ছে কঠিন সীমাবদ্ধতার কোডেড. এবং যদি এর আকার আমাদের ক্যানভাস পরিবর্তন, যেমন, আমরা এই বিষয়ে আছে করতে চান তাহলে 400 পিক্সেল এবং এটি squishes, আমরা এটা over-- থাকতে পারে আমরা এটি প্রসারিত করুন, অথবা আমরা করতে পারেন এই বাম মার্জিন কমে যায় কম বা বেশি 20 কিছু. এই নম্বর, এই হার্ড কোডেড সংখ্যা এখন আমাদের জানার জন্য. 

এবং আমরা আরো অনেক কাজ করতে পারে পাশাপাশি আকর্ষণীয়. সুতরাং পরিবর্তে একটি রৈখিক হচ্ছে স্কেল, আমরা একটি স্কেল লগ ইন করতে পারেন. এবং যে আমাদের একটি লগ স্কেল দিতে হবে. 

তাই এখন আমাদের স্কেল, পরিবর্তে শুধু যে পরিসীমা বিস্তৃত, এটা আরো পরিশীলিত কিছু করছেন. পরিবর্তে হার্ড এই পরিসীমা থাকার , এবং পরিবর্তে যে 600 থাকার কোডেড, আমরা শুধু প্রস্থ ব্যবহার করতে চাইবেন, তাই প্রস্থ বিয়োগ 40 20 থেকে, 2 বার অন্য দিকে মার্জিন. এবং এই অনেক বেশি জ্ঞান করে তোলে কোড তাকান পারে এমন কারো জন্য যিনি. 

মজার, দাঁড়িপাল্লা পেতে খুব খুব, অত্যাধুনিক হিসাবে ভাল. তারা কিছু আকর্ষণীয় অনেক কাজ. তাই দাঁড়িপাল্লা অগত্যা হবে না শুধু সংখ্যা দিয়ে কাজ চালানোর জন্য. এর একটি রঙ স্কেল করা যাক. 

তাই আমাদের পরিসীমা be-- পারে আমাদের ডোমেইন 200 1. যে ইনপুট জিনিস. কিন্তু আমরা থেকে মানচিত্র করতে পারেন উদাহরণস্বরূপ, লাল সবুজ. এবং এখন, আমরা এটি 1 পাস হলে, আমরা সবুজ পেতে যাচ্ছেন. আমরা এটি 200 দিতে, তাহলে আমরা লাল পাবেন. এবং আমরা মধ্যে এটা কিছু পাস হলে, এটা যে কিছু মিশ্রণ হতে যাচ্ছে, কোথাও গ্রেডিয়েন্ট উপর সবুজ ও লাল মধ্যে. 

এবং পরিবর্তে হচ্ছে clunky যুক্তি এই ধরনের আমরা এখানে আছে ঠিক আছে শর্তাধীন, আমরা কিছু একটি হতে পারে তাদের মধ্যে রৈখিক স্কেল. সুতরাং আমরা স্কেল ব্যবহার করতে চাই আমরা শুধু তৈরি আমরা রঙ বলা হয় যা. এবং আমরা এটি ঘ দিতে চাই যা আমাদের তথ্য উপাদান. এবং সেখানে আমরা যেতে. আমরা একটি রঙ স্কেল আছে. 

তাই এই ম্যাপিং হয়. এ পর্যন্ত বাম সম্পূর্ণভাবে সবুজ. দূরে ডান সম্পূর্ণ লাল হয়. এবং তাদের মধ্যে সবকিছু ঘ একটি ফাংশন. আমরা একটি আকর্ষণীয় আছে এখানে দৃশ্য. কিন্তু আমাদের তথ্য বিরক্তিকর ধরনের ছিল. আসুন আমরা যদি কাজ করতে পারে কি দেখতে দিন আমরা আরও বেশি আকর্ষণীয় তথ্য ছিল. 

আইনের চতুর্থ, সাথে কাজ করা প্রথম জিনিস ডাটা আমরা করতে করতে চাইবেন আমাদের আরো আকর্ষণীয় কল্পনা অন্য কোথাও তথ্য সরানো হয়. এটা আছে খুব clunky এর তথ্য হার্ড এখানে কোডেড. এবং সাধারণত, আমরা জিজ্ঞাসা করা হবে তথ্য অন্য কেউ. আমরা হয়তো সরকার জিজ্ঞাসা করা হবে আদমশুমারি ব্যুরো, আপনার তথ্য কি এবং তারপর যে অঙ্কন বা জিজ্ঞাসা কিছু তথ্য কিছু তৃতীয় পক্ষের সত্তা এবং তারপর একটি বিল্ডিং যে কল্পনা. 

প্রথম জিনিস তাই আমরা যা করতে চাই অন্য কোথাও যে সরানো হয়. তাই আমি একটি তৈরি করা যাচ্ছে না এখানে বলা data.json ফাইল. JSON তথ্য ফরম্যাট. আপনি যে সম্পর্কে অনেক কিছু জানতে হবে না. এবং আমরা কপি করতে যাচ্ছেন আমরা সেখানে আছে সামান্য তথ্য, সেখানে আক্ষরিকভাবে মধ্যে পেস্ট করুন, যেতে ফিরে আমাদের কল্পনা কোড এখানে, এবং ঠিক এই ফাংশন ব্যবহার করুন. আপনি বিস্তারিত জানতে হবে না. কিন্তু কি এই কাজ করতে হবে, হয় এটি যে ফাইল খুঁজে পেতে হবে, এটা আনা, এবং আমাদের তা ফেরত. তাই এই কি এটা যায়, হয় এবং data.json ফাইল পেতে. এবং তারপর সব কোড যে মূলত inside-- সংভৃত, সব কোড আমরা সেখানে ইচ্ছা আছে আমরা তথ্য ফিরে পেতে যখন শুধুমাত্র রান. এবং তারপর এটা যে চালানো যাচ্ছে আমরা তথ্য দিয়ে কোড. গ্রেট, আমরা একটি অনুসন্ধান যে কল্পনা কিছু কোড কোথাও অন্য, যা সাধারণত হয় যেখানে এটি থেকে কিছু তথ্য অনুসন্ধান অন্য কোথাও, সাধারণত যা দৃশ্য কিভাবে কাজ. 

কিন্তু আমি তথ্য ফিরে যেতে চান. D3-- D3 তে মৌলিকভাবে তাই তথ্য জিনিষ একটি তালিকা যে তথ্য হ্রাস. D3 তথ্য শুধু একটি তালিকা করা আশা জিনিস, জিনিস একটি অ্যারের. এটা কি সেই জিনিস কোন ব্যাপার না তাই দীর্ঘ এটা তাদের একটি অ্যারে হিসাবে, হয়. 

তাই এখানে, উদাহরণস্বরূপ, আমরা হতে পারে অবশ্যই ফ্লোটিং পয়েন্ট মান আছে. আমরা নেগেটিভ হতে পারে. D3, তাই দীর্ঘ, না যত্ন এটা একটা তালিকা হিসাবে. 

আমরা কিছু আকর্ষণীয় হতে পারে, আমরা পারা যে মত স্ট্রিং একটি তালিকা আছে. সুতরাং এই অরূণ শিরোনাম হয় আমি কয়েক দিন আগে কুড়ান. এবং হয়ত আপনি কিছু আকর্ষণীয় খুঁজে পেতে পারেন এই একটি শিরোনাম সম্পর্কে কিছু. 

তাই আবার, এই জিনিষ একটি তালিকা করা হয়. D3 গ্রাহ্য না করে. এই একটি স্ট্রিং হতে ঘটবে. আমরা আমাদের তথ্য পরিবর্তন করেছি. 

আমাদের কল্পনা ফিরে যাক. এখন, আমাদের কল্পনা আশা ইনপুট সংখ্যা হতে হবে. সুতরাং আমরা আছে চলুন কয়েক পরিবর্তন করা. সুতরাং উদাহরণস্বরূপ, প্রথম সব, হয়তো আমরা বরাবর এই বৃত্ত লাগাতে চান শিরোনামটি দৈর্ঘ্য দ্বারা, শিরোনামটি অক্ষরের সংখ্যা. 

তাই আমরা প্রত্যেক সময় হচ্ছে ÑÑ করব আমাদের ফাংশন একটি স্ট্রিং সঙ্গে বলা হয়, আমরা এটা দৈর্ঘ্য খুঁজে পাবেন এবং তারপর স্কেল যে পাস. রঙ, আমি ফিরে পাবেন ইস্পাত নীল যে. এবং সেখানে আমরা যেতে. আমরা একটি কল্পনা আছে এর অরূণ শিরোনাম. 

আমাদের স্কেল একটি বিট বন্ধ. দীর্ঘতম অনুমান করা যাক শিরোনাম, 100 অক্ষর দীর্ঘ তাই একটু যে লাগে. এবং আমরা একটি কল্পনা আছে. সুতরাং এটা যে সবচেয়ে শিরোনাম মনে হয় একসঙ্গে বেশ ঘনিষ্ঠ হয়, চরিত্র লাইন পদ. কিন্তু এক সত্যিই দাঁড়িয়েছে আউট. 

আমরা কিছু সরঞ্জাম নির্মাণ করতে পারে আরো যে অন্বেষণ. আমি এই কাজ ছিল, যখন আমি ছিল অদ্ভুত কিনা, এই তথ্য সেট, একটি কোলন সঙ্গে শিরোনাম তাদের মধ্যে আর হবে. আমি তারা হবে অনুমান. 

সুতরাং এর খুঁজে বের করা যাক. এর রঙ ব্যবহার করা যাক চ্যানেল আমরা, আগে কি ভালো কিনা তা সম্পর্কে কিছু সঙ্কেতাক্ষরে লিখা একটি কোলন বা কোন আছে. তাই আমরা আবার একটি শর্তাধীন ব্যবহার করব. আপনি জানেন করতে হবে না এই বিবরণ, কিন্তু এই আমরা একটি পরীক্ষা কিভাবে একটি বিশেষ অক্ষর জন্য স্ট্রিং জাভাস্ক্রিপ্ট, আবার, প্রাসঙ্গিক না. 

কিন্তু আমরা একটি খুঁজে না কোলন, আমরা সবুজ ফিরে আসবেন. যদি আমরা না, আমরা লাল ফিরে আসবেন. তাই আবার, যে শিরোনাম একটি কোলন লাল হতে হবে আছে. এই এই সুন্দর যথাযথভাবে হয়. 

সুতরাং এটা মনে হচ্ছে যে আমার অনুমান bumped করা হয়. মাত্র দুটি আছে. আমরা মাত্র ছয় তথ্য পয়েন্ট আছে এবং শুধুমাত্র দুটি কোলন ছিল. কিন্তু এটি একটি বিট আরো মনে হয় নিম্ন প্রান্তে, আসলে. কোলন সঙ্গে শিরোনাম বলে মনে হচ্ছে সাধারণত খাটো করা, আমাদের তথ্য অন্তত আকর্ষণীয় set--. 

এর যে ফিরে যাক ইস্পাত নীল এবং তারপর দেখতে আমরা এমনকি সঙ্গে করতে পারেন কি আরো আকর্ষণীয় তথ্য. তাই আবার, আমি উল্লেখ করেন যে, D3 তে তথ্য জিনিষ একটি তালিকা করা হয়. আমরা অনেক ধরনের সংখ্যা দেখা করেছি. আমরা স্ট্রিং দেখা করেছি. কিন্তু জিনিস এছাড়াও বস্তু হতে পারে. 

তারা জটিল কিছু হতে পারে যে জিনিস অনেক অন্তর্ভুক্ত. আরো পরিষ্কারভাবে বলে, অধিকাংশ ক্ষেত্রে, আমরা প্রতি ডাটা পয়েন্ট নির্মাণ করতে চান শুধু এক মূল্যের চেয়ে জটিল. আপনি একটি কল্পনা চাই ছাত্র সম্পর্কে ডাটাবেস, একটি ছাত্র হতে পারে নাম, একটি ছাত্র আইডি, এবং একটা অনেক যুক্ত একটি নির্দিষ্ট রেকর্ড সঙ্গে, না শুধু একটি স্ট্রিং বা নম্বর. তাই এর যে তাকান. 

এই সেট এক ধরনের তথ্য. এই ভূমিকম্প সম্পর্কে সেট একটি তথ্য. আমাদের তালিকা বা শৃঙ্খলার এখানে সবকিছু তাই জিনিস অনেক কিছু নিজেই রয়েছে. তাই প্রত্যেক ডাটা পয়েন্ট আছে একটি বিশালতা এবং একটি তুল্য. এবং নিজেদের স্থানাঙ্ক দুটি জিনিস থাকে. 

তাই প্রতিদিন এখন অনেক বেশি হয় জটিল এবং অনেক বেশি আকর্ষণীয় এবং আরো অনেক কিছু রয়েছে আকর্ষণীয় তথ্য. আসুন আমরা যে আউট নির্মাণ করতে পারে দেখুন. আবার, এখানে ফিরে ফিরে ব্যবহার করে আমাদের হিস্টোগ্রাম বৃত্ত কল্পনা আমরা তৈরি করেছি, আমরা একটি নির্মাণ করতে পারেন, এর দেখতে দিন মাত্রার বিতরণ কল্পনা আমাদের তথ্য সেট. 

তাই এখানে, এটি একই ধারণা. কিন্তু এখন, ঘ আরো অনেক রয়েছে. ঘ অনেক তথ্য উপাদান রয়েছে. তাই আমরা ফিরে ডি পেতে. D3 আমাদের ঘ দেয়. এবং আমরা মাত্রার ফাইন্ডিং দ্বারা সাড়া ঘ এবং তারপর স্কেল যে ক্ষণস্থায়ী. 

এবং তারপর আমরা পরিবর্তন করতে হবে আমাদের স্কেল, অবশ্যই. মাত্রার কেবল না, তাই আরো অনেক কিছু 10 যান. বাস্তবিক, সেখানে আগে কখনো ছিল না 10 মাত্রার ভূমিকম্প. কিন্তু যে আমাদের উপরের ধরনের শেষ, আমাদের উপরের বর্ণালী. 

এর রিফ্রেশ করা. খুশী হলাম, আমরা একটি কল্পনা আছে. এটি তাই note-- আকর্ষণীয় দুই তথ্য পয়েন্ট আছে প্রায় ঠিক প্রতিটি উপরে আছে অন্যান্য, মাত্রার পদ. আপনি আমরা ব্যবহার করছেন অস্বচ্ছতা দ্বারা এই দেখুন. 

আমরা এখন ভৌগলিক তথ্য আছে. আমরা অক্ষাংশে এবং দ্রাঘিমাংশ আছে. হয়তো আমরা কিছু একটি কাজ করতে পারে অনেক যে আরো আকর্ষণীয়. এর আরো কিছু খুঁজে ঠাহর করা আকর্ষণীয় উপায় এই আরো জটিল তথ্য আমরা এক্সেস আছে. 

আইন ভী, Mapping-- মৌলিকভাবে, আমরা একটি মানচিত্রে এই লাগাতে চান. আমি যেখানে এই যাচ্ছে, এই হল মানে. আমরা সম্পর্কে তথ্য সঙ্কেতাক্ষরে লিখা চাই এই ভূমিকম্প রিডিং অবস্থান, পাশাপাশি তাদের মাত্রার, আমরা এখন যে আছে. আমরা গ্রাস করতে কিভাবে বুঝতে আরো জটিল তথ্য. 

আমরা করব প্রথম জিনিস একটি মানচিত্র, একটি পটভূমি মানচিত্র তৈরি. আমি মধ্য দিয়ে যেতে যাচ্ছি এই খুব দ্রুত. এই চতুর কোড. এটা যারা অন্য এক ইসলাম যদি সত্যিই আপনি না আপনাকে ব্যবহার করার জন্য পুরোপুরি বুঝতে হবে. কিন্তু এই কোড. এই কোড অধিকার এখানে একটি ম্যাপ তৈরি করে. 

বিস্তারিত যেতে যাচ্ছেন না. কিন্তু কৃত্রিম কি, এটা কি হয়, এটা এই us.json ফাইল, অনুসন্ধান, যা একটি তথ্য ফাইল মত হল আমরা আগে এক. এটা অবশ্যই, আরো জটিল. কিন্তু এই ক্ষেত্রে, সব, প্রতি ডাটা পয়েন্ট এই রাষ্ট্র এবং এর একটি তালিকা আছে অক্ষাংশে এবং দ্রাঘিমাংশ যে বহুভুজের নির্ধারণ, যে ফর্ম, যে রাষ্ট্র. 

তাই D3 তে কি করতে হবে অনুরূপ আমরা আগে কি. এটা যে অনুরোধ করবে এবং একটি উপাদান যে আবদ্ধ. এবং একটি ফাংশন আছে যে যে উপাদান খুঁজে ম্যাপ হবে, অক্ষাংশে এবং দ্রাঘিমাংশ উপর ভিত্তি করে. আপনি যে আরও পড়তে পারেন. এবং আমি এটা বলতে. 

এ লিঙ্ক আছে এই কোড শেষ পোস্ট. এবং কোড মন্তব্য করা হয়. এই আরও জন্য লিঙ্ক আছে. আমি আপনি এটি খোঁজা সুপারিশ. কিন্তু আমরা কি বিষয়ে যত্ন এই অভিক্ষেপ ফাংশন. আমি যে মধ্য দিয়ে যেতে চান. 

প্রথম সব, আমাকে দেখান দিন আপনি যে, হ্যাঁ, আমরা একটি মানচিত্র আছে. মানচিত্র শান্ত. তাই এর এই তাকান উৎপাদন ফাংশন. 

অভিক্ষেপণ খুব একটি স্কেল মত, আবার দাঁড়িপাল্লা. তাই কি উত্পাদনের জন্য এই অভিক্ষেপ ফাংশন আমরা এটা দ্রাঘিমাংশ পাস হতে পারে হয় না এবং এই ক্ষেত্রে latitudes--, এখানে এই মান ভবনের পুস্তিকার-জন্য longs আমরা ডান বসা করছি now-- অভিক্ষেপ. এবং অভিক্ষেপ রূপান্তর হবে x এবং y পিক্সেল মান মধ্যে যে. 

তাই কি অভিক্ষেপ করছে আমাদের স্কেল অনুরূপ. এটা আমাদের অক্ষাংশে গ্রহণ এবং একটি পুরো পৃথিবী প্রতিনিধিত্ব করে দ্রাঘিমাংশ এবং মাপে এবং যে নির্ধারন আমরা চাই যে বর্গক্ষেত্র নিচে, আমরা দিয়েছি. এই ক্ষেত্রে, আমরা করছি এই মান ক্ষণস্থায়ী. এবং এটা যে, ভাল, আমাদের প্রদান এর আপনার পর্দায় 640 পিক্সেল মানে. এই পুরো পর্দা 700 পিক্সেল ব্যাপক, যে এখানে সম্পর্কে আমাদের করে তোলে তাই, নিচে এবং 154 পিক্সেল, যা আমি অনুমান প্রায় কাছাকাছি এখানে. 

সুতরাং যারা পুস্তিকার-জন্য longs, গ্রহণ, যা সমগ্র পৃথিবী কিছু প্রতিনিধিত্ব এবং squishing এবং যে চলন্ত কাছাকাছি আমাদের x এবং y পিক্সেল মান দিতে, এই যে প্রথম জিনিস এই ম্যাপিং কোড করা. এবং তারপর বাকি কোড তথ্য হ্রাস এবং তারপর যারা পুস্তিকার-জন্য longs মানচিত্র আপনার পর্দায় কিছু সম্মুখের দিকে. 

কিন্তু আমরা এই অভিক্ষেপ ব্যবহার করতে যাচ্ছেন কর্ম, কারণ এটি সক্রিয় আমরা পাশাপাশি পুস্তিকার-জন্য longs জন্য longs আছে. আমাদের এ তথ্য ফিরে দেখার জন্যে, আমরা অক্ষাংশে এবং দ্রাঘিমাংশ স্থানাঙ্ক প্রতি পর্যবেক্ষণের জন্য. সুতরাং এর অভিক্ষেপ ব্যবহার করা যাক. 

সুতরাং আমাদের উদ্ভাস এ খুঁজছেন, আমরা আমাদের exposition-- চান আমরা একটি অক্ষাংশ এবং দ্রাঘিমাংশ একটি আছে. কিন্তু আমরা পিক্সেল মান চাই. এবং এটি সক্রিয় আউট, আমরা ঠিক আছে আমরা কি অভিক্ষেপ want--. আমরা খুব ভালো এখানে ডান স্কেল ব্যবহার করে, আমরা এখন অভিক্ষেপ ব্যবহার করতে যাচ্ছেন এবং এটি স্থানাঙ্ক পাস. প্রথম জিনিস তাই আমরা তাই করছি অনুরুপ একটি পৃথক তথ্য, যা পেয়ে ডি, একটি পৃথক ভূমিকম্প উপাদান পড়া. আমরা কি প্রথম জিনিস স্থানাঙ্ক পেতে হয়. ঠিক আছে, আমরা স্থানাঙ্ক আছে. 

আমরা কি দ্বিতীয় জিনিস অভিক্ষেপ থেকে যে পাস. অভিক্ষেপণ যারা স্থানাঙ্ক পরিবর্তন পিক্সেল মান x এবং y মধ্যে. এবং তারপর শেষ জিনিস আমরা শুধু x পেতে হয় কাজ করতে চান, যা এই ক্ষেত্রে প্রথম এক. এটা দুই জিনিস প্রথম যে অভিক্ষেপ দ্বারা ফেরত দেওয়া হয়. 

আমরা y জন্য একই কাজ করব. কিন্তু পরিবর্তে, আমরা ফিরে পাবেন দ্বিতীয় উপাদান, Y. রিফ্রেশ করার জন্য প্রস্তুত করুন. উত্তেজনা, অতিরিক্ত অক্ষর এখানে সুন্দর, আমরা যে একটি ডাটা চালিত নথি বস্তু এই JSON ফাইল গোপন একটি মানচিত্র তৈরি, এবং পরিবর্তন তথ্য সম্পর্কিত বৈশিষ্ট্য একটি মানচিত্রের এটি প্রকল্পের. এই সত্যিই আকর্ষণীয়. এই শান্ত হয়. 

এর একটি খাঁজ পর্যন্ত গ্রহণ করা. আমি মনে করি আমরা দুই টুকরা আছে, মানে প্রতি ডাটা পয়েন্ট সঙ্গে তথ্য. আমি তিনটি, মানে. আমরা স্থানাঙ্ক আছে, যা একটি এক্স এবং ওয়াই হয়. এবং আমরা মাত্রার আছে. 

আমরা একরকম মাত্রার সঙ্কেতাক্ষরে লিখা দরকার. আমরা চ্যানেলের অনেক আছে. আমরা রং ব্যবহার করতে পারেন. আমরা ব্যাসার্ধ ব্যবহার করতে পারেন. আমরা অস্বচ্ছতা ব্যবহার করতে পারে. আমরা কোড মধ্যে অনেক কিছু ব্যবহার করতে পারে. এই বৈশিষ্ট্যাবলী এবং অনেক কোন সেখানে তালিকাভুক্ত না করা হয় যে আরো তারা ঐচ্ছিক কারণ, আমরা পারা এই তথ্য সঙ্কেতাক্ষরে লিখা ব্যবহার, স্ট্রোক এবং এই সব জিনিস আমি উল্লেখ করেছি. 

এর ব্যাসার্ধ করুক না. আমি ব্যাসার্ধ সবচেয়ে স্বজ্ঞাত মনে হয়. তাই আবার, আমরা যে হার্ড কোড প্রতিস্থাপন করব 40 এবং কিছু হিসাব করতে. আমরা আবার আমাদের প্রিয় স্কেল ব্যবহার করব. এবং আমরা ঘ গত করছি. আমরা মাত্রার চান, কারণ কিন্তু ঘ না ঘ. ঘ শুধু তথ্য বিন্দু. আমরা মাত্রার আকার পরিবর্তন করার জন্য পাস করব. 

এর আবার চেষ্টা করুন. বিস্ময়, এটি কাজ করে না. কেন এটা কাজ করে না? 

তাই কি স্কেল মনে রাখবেন. এর আবার স্কেল তাকান. 1 থেকে 10 স্কেলে মানচিত্রে 600 22, বা আরো কম. 600 বিপুল. আমরা এই পেয়ে থাকেন কেন. 

সুতরাং আমরা আমাদের স্কেল পরিবর্তন করতে চান অধিক যুক্তিসঙ্গত কিছু. আমরা 60 0 চান, এর কথা বলা যাক. 60 বড়, কিন্তু 10 ভূমিকম্প অবিশ্বাস্যভাবে বিরল. বস্তুত, তারা কি না করেছি. 

তাই এই কি, তা গ্রহণ করা হবে 1 থেকে 10 যে যায় আমাদের মাত্রার এবং এটি প্রসারিত এটি মানচিত্রে. এবং 60 0 মানচিত্র. এর রিফ্রেশ করা. 

খুশী হলাম, আমরা একটি কল্পনা আছে. এই মহান. এই প্রকৃত তথ্য. আপনি আমার সামান্য খেলনা, বিজ্ঞপ্তি পাবেন উদাহরণস্বরূপ, বৃহত্তম ভূমিকম্প অধিকার আমাদের উপরে হয়. কিন্তু যে এটি. আমরা একটি তারিখ চালিত কল্পনা আছে যে তথ্য হ্রাস এবং সত্যিই আমাদের দেয় আকর্ষণীয় তথ্য. হ্যাঁ, এর কিছু যোগ দিন এটা ইন্ট্যার্যাক্টিভিটির. আমি যে ছিল উল্লেখ D3 শক্তিশালী বল. 

তাই এখানে, প্রতিটি উপাদান জন্য, আমরা করছি আরোপ করা একটি গুচ্ছ বর্ণনা. কিন্তু আমরা আমরা কি চাই, বর্ণনা করতে পারেন ইন্ট্যার্যাক্টিভিটির উপাদানের সঙ্গে ঘটতে. উদাহরণস্বরূপ, আমরা বর্ণনা করতে পারে কি যখন আমরা মাউস উপর ঘটবে. এবং যে অনুরূপ, একটি ফাংশন যে নেব, অনুরূপ , আমরা আগে বৈশিষ্ট্যাবলী যেখানে আমরা কিছু করতে আমরা এটা উপর উপাদান বিলম্ব যখন. 

সুতরাং প্রথম জিনিস আমরা করতে হবে যে উপাদান নির্বাচন হয়, ব্রাউজার, মূলত এটা খুঁজে বের করতে. এবং তারপর আমরা সেট করতে পারে এটি একটি বৈশিষ্ট্য. আমরা বিলম্ব যখন তাই আমি এখানে করছি, হয় কিছু ধরে, আমরা যে উপাদান পাবেন এবং তারপর ফিরে তার অস্বচ্ছতা সেট 1, সম্পূর্ণ অস্বচ্ছ করতে. এর যে কি ভালো দেখায় দেখতে দিন. 

এটা আমরা একটি আছে প্রদর্শিত হবে এখানে অতিরিক্ত সেমিকোলন. আমরা এখানে উপর কার্সার রেখে দেখুন, তাই যদি এটা সম্পূর্ণ পায়. কিন্তু এখন, অবশ্যই, এটা পূর্ণ থাকে আমরা কারণ কি বর্ণনা আছে যখন আমাদের কার্সার মুছে ফেলুন. তাই এর যে ঠিক না দেওয়া mouseout, mouseover বিরোধিতা. 

এবং আমরা এটি পুনরায় সেট করব আমরা কি 0.5 আগে ছিল. এবং এখন, প্রত্যেক সময় আমরা উপর কার্সার রেখে দেখুন, আমরা একটি পূর্ণ বৃত্ত পেতে. এটা আমাদের তা দেখতে সাহায্য করে আমরা আমরা মূলত নির্বাচন করছেন. 

এবং এখন এর এই সত্যিই মহান করা যাক. এর প্রকৃত তথ্য এই সংযোগ দিন. সুতরাং এর জিজ্ঞাসা করা যাক করতে পারে ইউএসজিএস তাদের তথ্য সম্পর্কে. মার্কিন ভূতাত্ত্বিক জরিপ তাই ভূমিকম্প সম্পর্কে তথ্য আছে. তারা সক্ষম যে একটি পাবলিক API- আছে JSON বিন্যাসে খাওয়া হবে. তাই এর যে কাজ করতে দিন. 

তাই এই কোড একটি বিট যে ইউএসজিএস এপিআই সাথে সংযোগ করে. এবং এটা প্রক্রিয়াকরণের একটি বিট আছে. এই প্রাসঙ্গিক হয় না কিন্তু এটি সহজসাধ্য এক মত একটি সহজ তথ্য বিন্যাস আমরা আগে. তাই আমি আমাদের কল পরিত্রাণ পেতে ফাইল আমাদের জাল data.json. এর পরিবর্তে, আমি আহ্বান করছি মূলত ইউএসজিএস. 

, এর রিফ্রেশ চমৎকার যাক. এই প্রকৃত, বাস্তব জীবনের তথ্য ভূমিকম্পের জন্য এই সপ্তাহ থেকে. এই সত্যিই আকর্ষণীয়. এই বিস্ময়কর নয় আমাদের জন্য, কিন্তু আছে উপর ভূমিকম্প অনেক ক্যালিফোর্নিয়া ওয়েস্ট কোস্ট. কিন্তু আমি এটা খুব আকর্ষণীয় ছিল তাই অনেক ভূমিকম্প ছিল আলাস্কা, এবং দৃশ্যত, এখানে মিডওয়েস্ট মধ্যে. আমি, আকর্ষণীয়, অর্থ এবং আমরা ভাল. যে উপসংহার এর. 

কিন্তু মৌলিকভাবে, এই D3 আমাদের কি কি সাহায্য করে. এটা আমাদের তথ্য নিতে সাহায্য করে, বাঁধাই করা DOM মধ্যে উপাদান এটা, এবং যারা উপাদান পরিবর্তন আছে তথ্য একটি ফাংশন হিসাবে, যারা আরোপ করা, সব আছে উপাদান অনেক গুণাবলী, সব চ্যানেলের জন্য উপযোগী হতে তথ্য বহন করা. 

D3 তে একটি অবিশ্বাস্যভাবে শক্তিশালী হয় লাইব্রেরি এবং amazingly ভাল চলা. এই কিছু শক্তিশালী উপাদান. তথ্য ঠাহর হয় একটি অবিশ্বাস্যভাবে শক্তিশালী হাতিয়ার গভীর মানুষের conveying জন্য তাদের মূল পায় যে অর্ন্তদৃষ্টি এবং তাদের মধ্যে, বুঝতে সাহায্য করে এই গভীর এবং স্বজ্ঞাত উপায়, কিভাবে কাজ করে এবং কিভাবে তথ্য তথ্য আমাদের জীবন পরিবর্তন.