DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এর উপর ভিত্তি করে তৈরি এবং ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। Time Series Chart (যেমন লাইন চার্ট) ব্যবহার করে সময়ের সাথে সাথে পরিবর্তনশীল ডেটা ভিজ্যুয়ালাইজ করা যায়। এই চার্টে Tooltip এবং Interaction যোগ করা ব্যবহারকারী অভিজ্ঞতাকে আরও উন্নত করতে সাহায্য করে।
এখানে আমরা দেখব কীভাবে Time Series Chart তৈরির সময় Tooltip এবং Interaction যোগ করা যায়।
১. DC.js Time Series Chart তৈরি
Time Series Chart সাধারণত Line Chart হিসাবে পরিচিত, যেখানে X-অক্ষে সময়ের সাথে সাথে পরিবর্তিত মান এবং Y-অক্ষে পরিমাপের মান থাকে।
Time Series Chart এর জন্য Tooltip এবং Interaction যোগ করার উদাহরণ:
HTML এবং JavaScript কোড:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Time Series Chart with Tooltip and Interaction</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.css">
<style>
.tooltip {
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px;
border-radius: 3px;
pointer-events: none;
}
</style>
</head>
<body>
<h1>DC.js Time Series Chart with Tooltip and Interaction</h1>
<div id="time-series-chart"></div>
<script>
// ডেটাসেট
const data = [
{ date: "2023-12-01", value: 30 },
{ date: "2023-12-02", value: 50 },
{ date: "2023-12-03", value: 70 },
{ date: "2023-12-04", value: 40 },
{ date: "2023-12-05", value: 60 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
// ডেটার ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => new Date(d.date));
// গ্রুপ তৈরি
const valueGroup = dateDimension.group().reduceSum(d => d.value);
// DC.js লাইন চার্ট তৈরি
const timeSeriesChart = dc.lineChart("#time-series-chart");
timeSeriesChart
.width(800)
.height(400)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")])) // এক্স-অক্ষের স্কেল
.xAxisLabel("Date") // এক্স-অক্ষের লেবেল
.yAxisLabel("Value") // ওয়াই-অক্ষের লেবেল
.renderHorizontalGridLines(true) // গ্রিড লাইন
.on("pretransition", function(chart) {
// Tooltip এবং Interaction
const tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);
chart.selectAll("path")
.on("mouseover", function(event, d) {
tooltip.transition().duration(200).style("opacity", 0.9);
tooltip.html("Date: " + d3.timeFormat("%Y-%m-%d")(d.key) + "<br>Value: " + d.value)
.style("left", (event.pageX + 5) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function(event, d) {
tooltip.transition().duration(200).style("opacity", 0); // Tooltip হাইড
});
});
// চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
ব্যাখ্যা:
- ডেটাসেট:
- এখানে একটি সিম্পল Time Series ডেটাসেট তৈরি করা হয়েছে যেখানে প্রতিটি দিন এবং তার সাথে সংশ্লিষ্ট value রয়েছে।
- Crossfilter সেটআপ:
crossfilter(data)দিয়ে ডেটাকে Crossfilter ইনডেক্সে লোড করা হয়েছে।dateDimensionতৈরি করা হয়েছে যেটি date প্রপার্টির উপর ভিত্তি করে ডেটাকে গ্রুপ করবে।
- DC.js লাইন চার্ট:
dc.lineChart("#time-series-chart")দিয়ে একটি লাইন চার্ট তৈরি করা হয়েছে।x(d3.scaleTime().domain([start_date, end_date]))দিয়ে এক্স-অক্ষ-এ সময় নির্ধারণ করা হয়েছে।
- Tooltip এবং Interaction:
- Tooltip:
- Tooltip তৈরি করার জন্য একটি
divতৈরি করা হয়েছে যেটি ব্যবহারকারী যখন লাইন চার্টে মাউসের উপর নিয়ে যাবে, তখনmouseoverইভেন্টে date এবং value প্রদর্শন করবে। mouseoutইভেন্টে Tooltip মুছে ফেলা হয়।
- Tooltip তৈরি করার জন্য একটি
- Tooltip-এর অবস্থান কাস্টমাইজ করা হয়েছে যাতে তা মাউসের অবস্থান অনুযায়ী চলে।
- Tooltip:
- Interaction:
- লাইন চার্টের ডেটা পয়েন্টের উপর মাউসের mouseover ইভেন্টে Tooltip প্রদর্শিত হয় এবং mouseout এ এটি গাঢ় হয়ে যায় (opacity কমিয়ে দেয়)।
২. অন্যান্য ইন্টারঅ্যাকশন এবং কাস্টমাইজেশন
কাস্টম মার্কার (Data Points) যোগ করা:
DC.js এবং D3.js এর মাধ্যমে ডেটা পয়েন্টে কাস্টম মার্কার যোগ করা যায়। যেমন, আপনি ডেটা পয়েন্টে circle যোগ করে বা size পরিবর্তন করে কাস্টমাইজ করতে পারেন।
chart.selectAll("circle.dot")
.attr("r", 6) // মার্কারের আকার পরিবর্তন
.style("fill", "red") // রঙ পরিবর্তন
.on("mouseover", function(event, d) {
d3.select(this).style("fill", "orange"); // হোভার হলে মার্কারের রঙ পরিবর্তন
})
.on("mouseout", function(event, d) {
d3.select(this).style("fill", "red"); // মাউস আউট হলে আগের রঙে ফিরিয়ে আনা
});
জুম এবং ব্রাশিং:
DC.js এ জুম এবং ব্রাশিং সক্ষম করতে brushOn(true) সেটিং ব্যবহার করতে পারেন, যা ব্যবহারকারীদের নির্দিষ্ট ডেটা পরিসরের মধ্যে zoom in/out করতে দেয়।
timeSeriesChart
.brushOn(true); // জুম সক্ষম করা
৩. সারাংশ
- Time Series Chart ব্যবহার করে আপনি সময়ের সাথে সাথে পরিবর্তনশীল ডেটা ভিজ্যুয়ালাইজ করতে পারেন।
- Tooltip যোগ করে চার্টে মাউসের উপরে যাওয়ার সময় ডেটার বিস্তারিত দেখতে পারেন।
- Interaction ইভেন্টগুলির মাধ্যমে আপনি ডেটা পয়েন্টের উপর হোভার বা ক্লিকের মাধ্যমে ব্যবহারকারী অভিজ্ঞতা উন্নত করতে পারেন।
- DC.js এবং D3.js এর মাধ্যমে আরও কাস্টম মার্কার, জুম, এবং ব্রাশিংয়ের মত ফিচার যোগ করা সম্ভব, যা আপনার চার্টকে আরও ইন্টারেক্টিভ এবং ব্যবহারকারীর জন্য সুবিধাজনক করে তোলে।
Content added By
Read more
