ভিজ্যুয়ালাইজেশন কোড লেখা
লুকার স্টুডিও হেল্পার লাইব্রেরি আপনার এবং লুকার স্টুডিওর মধ্যে একটি ইন্টারফেস প্রদান করে। লাইব্রেরি ব্যবহার করতে, একটি কলব্যাক ফাংশন প্রদান করুন যা ভিজ্যুয়ালাইজেশন রেন্ডার করে।
লাইব্রেরির সবচেয়ে গুরুত্বপূর্ণ ফাংশন হল subscribeToData , যা দুটি আর্গুমেন্ট নেয়: একটি callback ফাংশন যা ভিজ্যুয়ালাইজেশন রেন্ডার করে এবং একটি options অবজেক্ট যা নির্দিষ্ট করে যে আপনি আপনার ডেটা কী ধরনের রূপান্তর করতে চান৷ আরও জানতে, লাইব্রেরি রেফারেন্স পর্যালোচনা করুন।
নিচে আপনার ভিজ্যুয়ালাইজেশন জাভাস্ক্রিপ্ট কেমন হতে পারে তার একটি রূপরেখা প্রদান করে।
function drawViz(vizData){
var height = dscc.getHeight();
var width = dscc.getWidth();
console.log(vizData);
// this is where you write your viz code
}
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})
কমিউনিটি ভিজ্যুয়ালাইজেশন লেখার সময় কয়েকটি মূল বিষয় মাথায় রাখতে হবে।
subscribeToData ফাংশন থেকে আপডেটগুলি ঘটে যখন ডেটা, স্টাইলিং, বা iframe আকার পরিবর্তন হয়৷
যেমন:
// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);
function drawViz(data){
// clear the canvas
var ctx = canvasElement.getContext('2d');
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
// viz code goes here
}
লুকার স্টুডিও জাভাস্ক্রিপ্ট ফাইল লোড করে এবং চালায়, HTML নয়। সমস্ত DOM ম্যানিপুলেশন জাভাস্ক্রিপ্টের মাধ্যমে ঘটতে হবে।
উদাহরণস্বরূপ: নিম্নলিখিত কোডটি DOM-এ একটি div সংজ্ঞায়িত করে এবং যুক্ত করে।
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
কোড বান্ডলিং
লুকার স্টুডিও কমিউনিটি ভিজ্যুয়ালাইজেশন আপনাকে শুধুমাত্র একটি জাভাস্ক্রিপ্ট ফাইল লোড করার অনুমতি দেয়। আপলোড করা কোডটি একটি একক ফাইল হওয়া উচিত যাতে dscc হেল্পার লাইব্রেরি , যেকোনো JavaScript ভিজ্যুয়ালাইজেশন লাইব্রেরি এবং আপনার ভিজ্যুয়ালাইজেশন কোড অন্তর্ভুক্ত থাকে।
ব্যাশে এটি করতে, আপনি নীচের মত cat কমান্ড ব্যবহার করতে পারেন।
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
ম্যানিফেস্ট সংজ্ঞায়িত করা
ভিজ্যুয়ালাইজেশন ম্যানিফেস্ট ফাইল ভিজ্যুয়ালাইজেশন সম্পর্কে মেটাডেটা প্রদান করে, সেইসাথে ভিজ্যুয়ালাইজেশন রিসোর্সের অবস্থান সম্পর্কে তথ্য। ম্যানিফেস্ট ফাইলের অবস্থানটিকে "কম্পোনেন্ট আইডি" হিসাবে উল্লেখ করা হয় এবং একটি সম্প্রদায়ের ভিজ্যুয়ালাইজেশন লোড করতে ব্যবহৃত হয়৷
একটি নমুনা ম্যানিফেস্ট দেখতে ম্যানিফেস্ট রেফারেন্স পর্যালোচনা করুন।
ম্যানিফেস্টের devMode প্যারামিটার ভিজ্যুয়ালাইজেশনের ক্যাশিং আচরণ নির্ধারণ করে। ভিজ্যুয়ালাইজেশন ডেভেলপ করার সময়, devMode true হওয়া উচিত যাতে হার্ড রিফ্রেশগুলি রিসোর্সের সর্বশেষ সংস্করণ লোড করে। কোডটি স্থিতিশীল হয়ে গেলে, কমিউনিটি ভিজ্যুয়ালাইজেশন সহ রিপোর্টগুলি দ্রুত লোড হয় তা নিশ্চিত করতে devMode false হওয়া উচিত। ক্যাশিং সম্পর্কে আরও জানতে, ক্যাশিং অ্যাডভান্স গাইড দেখুন।
পরবর্তী পদক্ষেপ
এখন আপনার ভিজ্যুয়ালাইজেশনের কোড লেখা আছে, কীভাবে আপনার ভিজ্যুয়ালাইজেশন হোস্ট করবেন তা শিখুন।