ডি 3 এর একটি মৃদু ভূমিকা: কীভাবে পুনরায় ব্যবহারযোগ্য বুদবুদ চার্ট করা যায়

ডি 3 দিয়ে শুরু করুন

আমি যখন ডি 3 শিখতে শুরু করি তখন কিছুই আমার কাছে বোধগম্য হয়নি। বিষয়গুলি কেবল তখন পরিষ্কার হয়ে যায় যখন আমি পুনরায় ব্যবহারযোগ্য ডায়াগ্রামের সাথে কাজ করতে শুরু করি।

এই নিবন্ধে, আমি আপনাকে ডি 3-র মৃদু পরিচয় দেওয়ার সময় আপনাকে কীভাবে পুনরায় ব্যবহারযোগ্য বুদবুদ চার্ট তৈরি করবেন তা দেখাব। আমরা যে ডেটা সেটটি ব্যবহার করি তাতে এমন গল্পগুলি থাকে যা ফ্রি কোড কোডক্যাম্পে জানুয়ারী 2017 এ প্রকাশিত হয়েছিল।

এটি আপনার তৈরি করা ডায়াগ্রাম

প্রায় 3 ডি

ডেটা ভিজ্যুয়ালাইজেশনের জন্য ডি 3 হ'ল একটি জাভাস্ক্রিপ্ট লাইব্রেরি। এটি এইচটিএমএল, এসভিজি এবং সিএসএস ব্যবহার করে ডেটাতে প্রাণবন্ত করে তোলে।

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

আমরা এখানে D3 সংস্করণ 4.6.0 ব্যবহার করছি।

- পুনরায় ব্যবহারযোগ্য চার্ট

পুনরায় ব্যবহারযোগ্য চার্ট প্যাটার্ন অনুসরণ করে এমন চার্টগুলির দুটি বৈশিষ্ট্য রয়েছে:

  • Configurability। আমরা কোডটি নিজেই পরিবর্তন না করে ডায়াগ্রামের চেহারা এবং আচরণটি পরিবর্তন করতে চাই।
  • স্বাধীনভাবে তৈরি করার ক্ষমতা। আমরা চাইব যে প্রতিটি চার্ট উপাদান স্বাধীনভাবে আমাদের ডেটা সেটের একটি ডেটা পয়েন্টে নির্ধারিত হবে। এটি কীভাবে ডি 3 ডিওএম উপাদানগুলির সাথে ডেটা সংযোগগুলি যুক্ত করে তার সাথে সম্পর্কিত। এটি এক মিনিটের মধ্যে আরও পরিষ্কার হয়ে যাবে।
"উপসংহার: গিটার-সেটার পদ্ধতিগুলির সাথে ক্লোজার হিসাবে ডায়াগ্রামগুলি প্রয়োগ করুন" " - মাইক বোস্টক

বুদ্বুদ চার্ট

ডায়াগ্রামের কোন উপাদানগুলিকে সামঞ্জস্য করা যায় তা আপনাকে প্রথমে নির্ধারণ করতে হবে:

  • চার্টের আকার
  • ইনপুট ডেটাসেট

ডায়াগ্রামের আকার নির্ধারণ করুন

আসুন একটি ফাংশন তৈরি করে শুরু করুন যা চার্টের সমস্ত ভেরিয়েবলকে encapulates এবং ডিফল্ট মানগুলি সেট করে। এই কাঠামোটিকে উপসংহার বলা হয়।

// বুদ্বুদ_গ্রাফিক্স.জেএস
var বুদ্বুদচার্ট = ফাংশন () {ভেরি প্রস্থ = 600, উচ্চতা = 400; ফাংশন পরিকল্পনা (নির্বাচন) {// আপনি এখানে আসবেন} রিটার্ন টেবিল; }

আপনি কোডটি পরিবর্তন না করেই বিভিন্ন আকারের ডায়াগ্রাম তৈরি করতে চান। এটি করতে, নিম্নলিখিত হিসাবে চিত্রগুলি তৈরি করুন:

// বুদবুদ_গ্রাফিক্স html
var ডায়াগ্রাম = বুদ্বিচার্ট ()। প্রস্থ (300) উচ্চতা (200);

এটি করতে, আপনি এখন ভেরিয়েবলের প্রস্থ এবং উচ্চতার জন্য অ্যাকসেসরগুলি সংজ্ঞায়িত করেন।

// বুদ্বুদ_গ্রাফিক্স.জেএস
var বুদ্বুদচার্ট = ফাংশন () {ভর প্রস্থ = 600 উচ্চতা = 400;
ফাংশন পরিকল্পনা (নির্বাচন) {// আমরা এখানে এসেছি} চার্ট.উইথ = ফাংশন (মান) {যদি (! আর্গুমেন্টস: দৈর্ঘ্য) {ফেরতের প্রস্থ; } প্রস্থ = মান; রিটার্ন টেবিল; }
চার্ট.হাইট = ফাংশন (মান) - যদি (! আর্গুমেন্টস.লেন্থ) {রিটার্ন উচ্চতা; Ight উচ্চতা = মান; রিটার্ন টেবিল; } রিটার্ন টেবিল; }

আপনি যখন বাবলচার্ট () (কোনও প্রস্থ বা উচ্চতার কোনও বৈশিষ্ট্য ছাড়াই) কল করেন তখন চার্টটি প্রস্থ এবং উচ্চতার জন্য ডিফল্ট মানগুলির সাথে তৈরি করা হয় যা আপনি ক্লোজারের মধ্যে সংজ্ঞায়িত করেছেন। পদ্ধতিটি যদি তর্ক ছাড়াই ডাকা হয় তবে এটি ভেরিয়েবলের মান প্রদান করে।

// বুদবুদ_গ্রাফিক্স html
var চার্ট = বুদ্বিচার্ট (); বুদ্বাচার্ট ()। প্রস্থ (); // 600 রিটার্ন দেয়

আপনি ভাবছেন যে কেন পদ্ধতিগুলি চার্ট ফাংশনটি ফিরিয়ে দেয়। কোডটি সরল করার জন্য এটি একটি জাভাস্ক্রিপ্ট প্যাটার্ন। একে মেথড চেইনিং বলা হয়। এই নিদর্শন দিয়ে, আপনি নিম্নলিখিত হিসাবে নতুন অবজেক্ট তৈরি করতে পারেন:

// বুদবুদ_গ্রাফিক্স html
var ডায়াগ্রাম = বুদ্বিচার্ট ()। প্রস্থ (600)। উচ্চতা (400);

পরিবর্তে:

// বুদবুদ_গ্রাফিক্স html
var চার্ট = বুদ্বিচার্ট (); চার্ট.সেটউইথ (600); চার্ট.সেটহাইট (400);

আমাদের চিত্রের সাথে ডেটা সংযুক্ত করুন

এখন আসুন কীভাবে চার্ট উপাদানগুলির সাথে ডেটা সংযুক্ত করতে হয় তা শিখি। ডায়াগ্রামটি এভাবেই কাঠামোযুক্ত: ডায়াগ্রামের সাথে ডিভের একটি এসভিজি উপাদান রয়েছে এবং প্রতিটি ডেটা পয়েন্ট ডায়াগ্রামের একটি বৃত্তের সাথে মিলে যায়।

বুদ্বারচার্ট () ফাংশন কল করার পরে // বুদ্বুদ_গ্রাফিক্স html
// ডেটা থেকে একটি গল্প // ডেটা থেকে অন্য গল্প ...

🗄 d3.data ()

D3.selection.data ([তথ্য [, কী]]) ফাংশনটি একটি নতুন নির্বাচন প্রদান করে যা এমন একটি উপাদান উপস্থাপন করে যা সাফল্যের সাথে ডেটাতে আবদ্ধ ছিল। এটি করতে, আপনাকে প্রথমে CSV ফাইল থেকে ডেটা লোড করতে হবে। আপনি d3.csv (url [[, সারি], কলব্যাক]) ফাংশন ব্যবহার করবেন।

// বুদবুদ_গ্রাফিক্স html
d3.csv ('file.csv', ফাংশন (ত্রুটি, আমাদের_ডাটা) {var ডেটা = আমাদের_ডাটা; // এখানে আপনি যা চান ডেটা দিয়ে যা করতে পারেন}
// মাঝারি_জানারি.সিএসভি | শিরোনাম | বিভাগ | হৃদয় | | -------------------------------------- | ---------- ---- | -------- | | কেউ সফ্টওয়্যার ডেভলপমেন্ট ব্যবহার করতে চায় না 2700 | | ট্রেলেস সহ ক্ষতিকারক ওয়েব নেভিগেশন ডিজাইন | 688 | | ডেটা ইঞ্জিনিয়ার ডেটা সায়েন্সের উত্থান | 862 |

3 d3 নির্বাচন

আপনি আমাদের ডায়াগ্রামে ডেটা পাস করার জন্য ডি-সিলেক্ট () এবং ডেটা () ফাংশনটি ব্যবহার করবেন।

একটি নির্বাচন ডকুমেন্ট অবজেক্ট মডেল (ডিওএম) এর একটি শক্তিশালী, ডেটা-চালিত রূপান্তর সক্ষম করে: বৈশিষ্ট্য, শৈলী, বৈশিষ্ট্য, এইচটিএমএল বা পাঠ্য সামগ্রী এবং আরও অনেক কিছু নির্ধারণ করে। - ডি 3 ডকুমেন্টেশন
// বুদবুদ_গ্রাফিক্স html
d3.csv ('মাঝারি_জানারিসিএসভি', ফাংশন (ত্রুটি, আমাদের_ডাটা) {যদি (ত্রুটি) {কনসোল.অরর ('ডেটা পাওয়ার বা পার্স করার সময় ত্রুটি' '); নিক্ষেপ ত্রুটি;}
var ডায়াগ্রাম = বুদ্বিচার্ট ()। প্রস্থ (600)। উচ্চতা (400); d3.select ('# চার্ট')। ডেটা (আমাদের_ডাটা) .ক্যাল (চার্ট);
});

আর একটি গুরুত্বপূর্ণ নির্বাচক হলেন ডি 3.সিলিটআল ()। ধরুন আপনার নিম্নলিখিত কাঠামো রয়েছে:


    
    
    

d3.select ("দেহ")। সিলেক্টল ("ডিভ") আমাদের জন্য এই সমস্ত ডিভ নির্বাচন করে।

d3.enter ()

এখন আপনি একটি গুরুত্বপূর্ণ ডি 3 ফাংশন জানতে পারবেন: d3.enter ()। মনে করুন আপনার কাছে খালি বডি ট্যাগ এবং ডেটার একটি অ্যারে রয়েছে। আপনি অ্যারের প্রতিটি উপাদান দিয়ে যেতে চান এবং প্রতিটি উপাদানের জন্য একটি নতুন ডিভি তৈরি করতে চান। আপনি নিম্নলিখিত কোড সহ এটি করতে পারেন:

 // খালি 
---- // জেএস স্ক্রিপ্ট
var our_data = [1, 2, 3] var Div = d3.select ("body")। নির্বাচন করুন সমস্ত ("Div") .ডাটা (আমাদের_ডাটা)। এন্টার () .পেন্ড ("ডিভ"); ---


    
    
    

যখন ডিভগুলি উপস্থিত নেই তখন আপনার কেন নির্বাচন করা সমস্ত ("ডিভ") দরকার? কারণ ডি 3-তে আমরা কীভাবে কিছু করতে হয় তা বলার পরিবর্তে আমরা যা চাই তা বলি।

এই ক্ষেত্রে আপনি প্রতিটি ডিভের জন্য অ্যারের একটি উপাদান বরাদ্দ করতে চান। আপনি এটি নির্বাচনকারী সমস্ত ("ডিভ") দিয়ে বলছেন।

var div = d3.select ("body") .seseteAll ("Div") // এখানে আপনি বলছেন 'আরে ডি 3, পরেরে উপস্থিত অ্যারের প্রতিটি ডাটা উপাদান একটি ডিভ' .ডাটা (আমাদের_ডাটা) আবদ্ধ থাকে। ()। অ্যাপেন্ড ("ডিভ");

এন্টার কী () অ্যারের উপাদানের সাথে আবদ্ধ ডেটা সহ নির্বাচনকে ফিরিয়ে দেয়। তারপরে। অ্যাপেন্ড ("ডিভ") ব্যবহার করে এই নির্বাচনটি ডিওমে যুক্ত করুন।

3d3.forSimulation ()

চেনাশোনাগুলির পদার্থবিজ্ঞানের অনুকরণ করার জন্য আপনার কিছু দরকার। এর জন্য আপনি d3.forSimulation ([নোড]) ব্যবহার করেন। কোন ধরণের বল গিঁটের অবস্থান বা গতি পরিবর্তন করে তা আপনাকে উল্লেখ করতে হবে।

আমাদের ক্ষেত্রে আমরা d3.forManyBody () ব্যবহার করি।

// বুদ্বুদ_চার্ট.জেএস
ভার সিমুলেশন = ডি 3.ফোর্স সিমুলেশন (ডেটা)। ফোর্স ("চার্জ", ডি 3.ফোর্স ম্যানি বডি ()। শক্তি ([- 50]))। ফোর্স ("এক্স", ডি 3.ফোর্স ()) .ফোর্স ("y", d3.forY ()) .ওন ("টিক", টিক্সড);

একটি ধনাত্মক শক্তি মান নোডগুলিকে একে অপরকে আকৃষ্ট করে, অন্যদিকে নেতিবাচক শক্তির মান তাদের একে অপরকে পিছনে ফেলে দেয়।

শক্তি () প্রভাব

তবে, আমরা নোডগুলি পুরো এসভিজি স্থানটি ছড়িয়ে দিতে চাই না, তাই আমরা d3.forX (0) এবং d3.forY (0) ব্যবহার করি। এটি চেনাশোনাগুলিকে 0 অবস্থানে নিয়ে আসে dra কী হয় তা দেখতে কোড থেকে এটিকে সরাতে চেষ্টা করুন।

আপনি পৃষ্ঠাটি রিফ্রেশ করার সময় চেনাশোনাগুলি শেষ পর্যন্ত স্থিতিশীল না হওয়া পর্যন্ত সমন্বয় দেখতে পাবেন। টিকযুক্ত () ফাংশন চেনাশোনাগুলির অবস্থান আপডেট করে। ডি 3.ফোর্স্ম্যানবিডি () প্রতিটি নোডের এক্স এবং ওয়াই অবস্থানটি নিয়মিত আপডেট করে এবং টিকযুক্ত () ফাংশনটি এই মানগুলি (সিএক্স এবং সাই বৈশিষ্ট্যগুলি) সহ ডোমকে আপডেট করে।

// বুদ্বুদ_গ্রাফিক্স.জেএস
ফাংশন যাচাই করা হয়েছে (ঙ) ode নোড.এটিআর ("সিক্স", ফাংশন (ডি) {রিটার্ন ডেক্স;}) .আত্র ("সাই", ফাংশন (ডি) {রিটার্ন ডাই;}); // 'নোড' বুদ্বুদ চার্টের যে কোনও বৃত্ত
}

এখানে সমস্ত কিছুর কোড রয়েছে:

ভার সিমুলেশন = ডি 3.ফোর্স সিমুলেশন (ডেটা)। ফোর্স ("চার্জ", ডি 3.ফোর্স ম্যানি বডি ()। শক্তি ([- 50]))। ফোর্স ("এক্স", ডি 3.ফোর্স ()) .ফোর্স ("y", d3.forY ()) .ওন ("টিক", টিক্সড);
ফাংশন যাচাই করা হয়েছে (ঙ) ode নোড.এটিআর ("সিক্স", ফাংশন (ডি) {রিটার্ন ডেক্স;}) .আত্র ("সাই", ফাংশন (ডি) {রিটার্ন ডাই;}); }

সংক্ষেপে, এটি বলা যেতে পারে যে এই সিমুলেশন প্রতিটি বৃত্তকে একটি এক্স এবং y অবস্থান দেয়।

। D3.scales

এখানে সবচেয়ে উত্তেজনাপূর্ণ অংশটি আসে: চেনাশোনা যুক্ত করা। আপনি প্রবেশ () ফাংশন মনে আছে? আপনি এখন এটি ব্যবহার করবে। আমাদের সারণীতে প্রতিটি বৃত্তের ব্যাসার্ধ প্রতিটি গল্পের জন্য প্রস্তাবিত সংখ্যার সাথে সমানুপাতিক। এটি করতে, একটি রৈখিক স্কেল ব্যবহার করুন: d3.scaleLinear ()

আইশ ব্যবহার করতে, আপনাকে দুটি জিনিস সংজ্ঞায়িত করতে হবে:

  • ডোমেন: ইনপুট ডেটার সর্বনিম্ন এবং সর্বাধিক মান (আমাদের ক্ষেত্রে ন্যূনতম এবং সর্বাধিক সংখ্যক প্রস্তাবনা)। সর্বনিম্ন এবং সর্বাধিক মান পেতে, d3.min () এবং d3.max () ফাংশন ব্যবহার করুন।
  • ব্যাপ্তি: স্কেলের সর্বনিম্ন এবং সর্বাধিক আউটপুট মান। আমাদের ক্ষেত্রে, আমরা আকার 5 এর ক্ষুদ্রতম ব্যাসার্ধ এবং 18 মাপের বৃহত্তম ব্যাসার্ধ চাই।
// বুদ্বুদ_গ্রাফিক্স.জেএস
var স্কেলরেডিয়াস = d3.scaleLinear () .ডোমেন ([d3.min (ডেটা, ফাংশন (d) {রিটার্ন + ডি.ভিউস;}))), ডি 3.ম্যাক্স (ডেটা, ফাংশন (ডি) {রিটার্ন + ডি.ভিউস; })]) .আরঞ্জ ([5,18]);

এবং তারপরে অবশেষে চেনাশোনাগুলি তৈরি করুন:

// বুদ্বুদ_গ্রাফিক্স.জেএস
var নোড = এসভিজি.সিলিটএল ("ক্রাইস") .ডাটা (ডেটা প্রবেশ করান) ()। অ্যাপেন্ড ("বৃত্ত") .আউটআর ('আর', ফাংশন (ডি) {স্কেলর্যাডিয়াস (ডি.ভিউস) রিটার্ন})}) ;

চেনাশোনাগুলিকে রঙিন করতে একটি শ্রেণীবদ্ধ স্কেল ব্যবহার করুন: d3.scaleOrdinal ()। এই স্কেলটি পৃথক মান প্রদান করে।

আমাদের ডেটা সেটে 3 টি বিভাগ রয়েছে: ডিজাইন, উন্নয়ন এবং ডেটা বিজ্ঞান। আপনি এই বিভাগগুলির প্রত্যেককে একটি রঙের জন্য বরাদ্দ করেন। d3.schemeCategory10 10 টি রঙ সহ আমাদের একটি তালিকা দেয় যা আমাদের পক্ষে যথেষ্ট।

// বুদ্বুদ_গ্রাফিক্স.জেএস
var colorCircles = d3.scaleOrdinal (d3.schemeCategory10); var নোড = এসভিজি.সিলিটআল ("ক্রেইস") .ডাটা (ডেটা প্রবেশ করান) () .পেনড ("বৃত্ত") .আউটআর ('আর', ফাংশন (ডি) {রিটার্ন স্ক্র্যাডিয়াস (ডি.ভিউস)}) স্টাইল ("ভরাট", ফাংশন (ডি) {রিটার্ন কালারক্রাইক্লস (ডি। ক্যাটাগরি)});

আপনি যদি চান যে চেনাশোনাগুলিকে এসভিজি ফাইলের মাঝখানে আঁকতে হয় তবে প্রতিটি বৃত্তটি কেন্দ্রে সরান (অর্ধেক প্রস্থ এবং অর্ধেক উচ্চতা)। কী হয় তা দেখতে কোড থেকে এটি সরান।

// বুদ্বুদ_গ্রাফিক্স.জেএস
var নোড = এসভিজি.সিলিটআল ("ক্রেইস") .ডাটা (ডেটা প্রবেশ করান) ()। অ্যাপেন্ড ("বৃত্ত") .আউটআর ('আর', ফাংশন (ডি) {রিটার্ন স্কেলরেডিয়াস (ডি.ভিউস)}) স্টাইল ("পূরণ", রিটার্ন ফাংশন (d) {colorCircles (d.category) at) .attr ('রূপান্তর', 'অনুবাদ (' + [প্রস্থ / 2, উচ্চতা / 2] + ')');

এবার ডায়াগ্রামে টুলটিপস যুক্ত করুন। যখনই আমরা চেনাশোনাগুলির উপরে মাউস সরিয়ে নিয়েছি তখন তাদের এগুলি প্রদর্শন করতে হবে।

var টুলটিপ = নির্বাচন। অ্যাপেন্ড ("ডিভ")। স্টাইল ("অবস্থান", "পরম")। স্টাইল ("দৃশ্যমানতা", "লুকানো")। স্টাইল ("রঙ", "সাদা")। স্টাইল ("প্যাডিং" , "8px")। স্টাইল ("পটভূমির রঙ", "# 626D71")। স্টাইল ("ফ্রেম ব্যাসার্ধ", "6px")। স্টাইল ("পাঠ্য বিন্যাস করুন", "কেন্দ্র")। স্টাইল ("ফন্ট পরিবার", "মনোস্পেস" )। স্টাইল ("প্রস্থ", "400px")। পাঠ্য ("");
var নোড = এসভিজি.সিলিটআল ("ক্রেইস") .ডাটা (ডেটা প্রবেশ করান) ()। অ্যাপেন্ড ("বৃত্ত") .আউটআর ('আর', ফাংশন (ডি) {রিটার্ন স্কেলরেডিয়াস (ডি.ভিউস)}) স্টাইল ("ভরাট", ফাংশন রিটার্ন (d) {colorCircles (d.category) at) .ttr ('রূপান্তর', 'অনুবাদ (' + [প্রস্থ / 2, উচ্চতা / 2] + ')') .অন ("মাউসওভার ", ফাংশন (d) {টুলটিপ এইচটিএমএল (ডি। "+ d.title +" "+ ডি.ভিউস); রিটার্ন টুলটিপ.স্টাইল (" দৃশ্যমানতা "," দৃশ্যমান ");}) .অন (" মাউসমোভ ", ফাংশন () {রিটার্ন টুলটিপ.স্টাইল (" শীর্ষ ", (d3.event.pageY- 10) + "পিক্স")। স্টাইল ("বাম", (d3.event.pageX + 10) + "px");}) .অন ("মাউসআউট", ফাংশন () {রিটার্ন টুলটিপ.স্টাইল ("দৃশ্যমানতা") , "লুকানো");});

মাউস পয়েন্টার যখন মাউসটি সরায় তখন কার্সার অনুসরণ করে। d3.event.pageX এবং d3.event.pageY মাউস স্থানাঙ্কগুলি ফেরত দেয়।

আর এটাই! আপনি এখানে চূড়ান্ত কোড দেখতে পারেন।

আপনি এখানে বুদ্বুদ টেবিলের সাথে খেলতে পারেন।

আপনি এই নিবন্ধটি সহায়ক খুঁজে পেয়েছেন? আমি প্রতি মাসে একটি গভীর ডুব নিবন্ধ লেখার জন্য যথাসাধ্য চেষ্টা করি। আমি যখন একটি নতুন পোস্ট করি তখন আপনি একটি ইমেল পেতে পারেন।

প্রশ্ন বা পরামর্শ? তাদের মন্তব্যে ছেড়ে দিন। পড়ার জন্য ধন্যবাদ!

জন কারমাইকেল এবং আলেকজান্দ্রে সিজনিরসকে বিশেষ ধন্যবাদ

আরো দেখুন

কীভাবে আমার একজন প্রাক্তন শিক্ষককে একটি সুপারিশ পত্রের জন্য জিজ্ঞাসা করতে হবেওয়েবসাইট রক্ষণাবেক্ষণের জন্য আমার বার্ষিক কত টাকা জিজ্ঞাসা করা উচিত? আমি কীভাবে ওয়েব বিকাশ শিখতে শুরু করব? এবং আমার কোন ফ্রেমওয়ার্ক এবং ভাষাগুলি শিখতে হবে?আমি কীভাবে কিছু প্রাথমিক জ্ঞান সহ নিজেরাই প্রোগ্রামিং শিখতে পারি? গোলকের ভলিউম কীভাবে চেষ্টা করবে তার পরিধিটি তৈরি করেওয়েব ব্রাউজার কীভাবে ওয়েব কোড (এইচটিএমএল, সিএসএস এবং জেএস) পড়বে? আমি কীভাবে এমন একটি ডেটাবেস তৈরি করব যা কোনও ওয়েবসাইট থেকে ব্যবহারকারীদের ইনপুটগুলি সঞ্চয় করে? কিভাবে পুরানো মোটরোলা ফ্লিপ ফোন থেকে ছবি পেতে