ভিজ্যুয়ালাইজেশন কোড লেখা
ডেটা স্টুডিও হেল্পার লাইব্রেরিটি আপনার এবং ডেটা স্টুডিওর মধ্যে একটি ইন্টারফেস প্রদান করে। লাইব্রেরিটি ব্যবহার করতে, একটি কলব্যাক ফাংশন প্রদান করুন যা ভিজ্যুয়ালাইজেশনটি রেন্ডার করে।
লাইব্রেরিটির সবচেয়ে উল্লেখযোগ্য ফাংশন হলো 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 ফাংশন থেকে আপডেটগুলো কার্যকর হয়।
উদাহরণস্বরূপ:
// 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
}
লুকার স্টুডিও জাভাস্ক্রিপ্ট ফাইল লোড ও রান করে, এইচটিএমএল নয়। সমস্ত ডম (DOM) ম্যানিপুলেশন জাভাস্ক্রিপ্টের মাধ্যমেই করতে হবে।
উদাহরণস্বরূপ: নিচের কোডটি একটি div সংজ্ঞায়িত করে এবং DOM-এ যুক্ত করে।
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
কোড বান্ডিল করা
লুকার স্টুডিও কমিউনিটি ভিজ্যুয়ালাইজেশনে আপনি শুধুমাত্র একটি জাভাস্ক্রিপ্ট ফাইল লোড করতে পারবেন। আপলোড করা কোডটি একটি একক ফাইল হতে হবে, যার মধ্যে dscc হেল্পার লাইব্রেরি , যেকোনো জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন লাইব্রেরি এবং আপনার ভিজ্যুয়ালাইজেশন কোড অন্তর্ভুক্ত থাকবে।
ব্যাশে এটি করার জন্য, আপনি নিচের মতো করে ` cat কমান্ডটি ব্যবহার করতে পারেন।
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
ম্যানিফেস্টের সংজ্ঞা নির্ধারণ
ভিজ্যুয়ালাইজেশন ম্যানিফেস্ট ফাইলটি ভিজ্যুয়ালাইজেশন সম্পর্কিত মেটাডেটা এবং ভিজ্যুয়ালাইজেশন রিসোর্সগুলোর অবস্থান সম্পর্কে তথ্য প্রদান করে। ম্যানিফেস্ট ফাইলটির অবস্থানকে "কম্পোনেন্ট আইডি" বলা হয় এবং এটি একটি কমিউনিটি ভিজ্যুয়ালাইজেশন লোড করতে ব্যবহৃত হয়।
একটি নমুনা ম্যানিফেস্ট দেখতে ম্যানিফেস্ট রেফারেন্সটি পর্যালোচনা করুন।
ম্যানিফেস্টের devMode প্যারামিটারটি ভিজ্যুয়ালাইজেশনের ক্যাশিং আচরণ নির্ধারণ করে। ভিজ্যুয়ালাইজেশনটি তৈরি করার সময়, devMode মান true হওয়া উচিত, যাতে হার্ড রিফ্রেশের সময় রিসোর্সগুলোর সর্বশেষ সংস্করণ লোড হয়। কোডটি স্থিতিশীল হয়ে গেলে, devMode মান false হওয়া উচিত, যাতে কমিউনিটি ভিজ্যুয়ালাইজেশনসহ রিপোর্টগুলো দ্রুত লোড হয়। ক্যাশিং সম্পর্কে আরও জানতে, ক্যাশিং অ্যাডভান্সড গাইডটি দেখুন।
পরবর্তী পদক্ষেপ
এখন যেহেতু আপনার ভিজ্যুয়ালাইজেশনের জন্য কোড লেখা হয়ে গেছে, আপনার ভিজ্যুয়ালাইজেশনটি কীভাবে হোস্ট করবেন তা শিখে নিন।