diff --git a/test/Sensor_datas/visualization.html b/test/Sensor_datas/visualization.html
index 87166a8..ddde0a1 100644
--- a/test/Sensor_datas/visualization.html
+++ b/test/Sensor_datas/visualization.html
@@ -2,28 +2,13 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>D3.js Line Chart - Local File with Point Details</title>
-    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <title>D3.js Multiple Line Chart</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
     <style>
-        .line {
-            fill: none;
-            stroke: steelblue;
-            stroke-width: 2px;
-        }
-        .axis {
-            font: 10px sans-serif;
-        }
-        .axis path,
-        .axis line {
-            fill: none;
-            stroke: #000;
-            shape-rendering: crispEdges;
-        }
-        .dot {
-            fill: steelblue;
-            stroke: #fff;
-        }
+        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
+        .line { fill: none; stroke-width: 2px; }
+        .axis { font-size: 12px; }
+        .legend { font-size: 12px; }
         .tooltip {
             position: absolute;
             text-align: center;
@@ -39,28 +24,22 @@
     </style>
 </head>
 <body>
-    <h1>D3.js Line Chart from Local JSON File with Point Details</h1>
-    <input type="file" id="fileInput">
+    <input type="file" id="fileInput" />
     <div id="chart"></div>
 
     <script>
-        // Set the dimensions and margins of the graph
-        const margin = {top: 20, right: 20, bottom: 30, left: 50};
-        const width = 960 - margin.left - margin.right;
-        const height = 500 - margin.top - margin.bottom;
-
-        // Parse the date / time
-        const parseTime = d3.timeParse("%Y-%m-%d");
-        const formatTime = d3.timeFormat("%Y-%m-%d");
-
-        // Set the ranges
-        const x = d3.scaleLinear().range([0, width]);
-        const y = d3.scaleLinear().range([height, 0]);
-
-        // Define the line
-        const valueline = d3.line()
-            .x(d => x(d.timestamp))
-            .y(d => y(d.lux));
+        // Sample multiple dataset
+        const data = [
+            {"lux":10.0,"timestamp":442470841810000},
+            {"lux":20.0,"timestamp":442471010509000},
+            {"lux":30.0,"timestamp":442471182576000},
+            {"lux":40.0,"timestamp":442471360117000},
+            {"lux":100.0,"timestamp":442471522264000}
+        ];
+        const colorMap = new Map();
+        colorMap.set('original', 'steelblue');
+        colorMap.set('fastLuxData', 'green');
+        colorMap.set('slowLuxData', 'red');
 
         function weightIntegral(x) {
             return x * (x * 0.5 + 4000000000);
@@ -80,8 +59,8 @@
             return sum / totalWeight;
         }
 
-        // Function to create the chart
-        function createChart(data) {
+        // Render multiple line chart
+        function renderMultiLineChart(data) {
             var timestampNow;
             var fastLuxData = [];
             var slowLuxData = [];
@@ -114,115 +93,141 @@
             datasets.push(slowLuxDataObj);
             console.log(datasets.length);
             console.log(datasets[0]);
-            datasets = JSON.parse(JSON.stringify(datasets));
-            // Clear previous chart if any
+
+            // Clear previous chart
             d3.select("#chart").html("");
 
-            // Append the svg object to the body of the page
-            const svg = d3.select("#chart").append("svg")
-                .attr("width", width + margin.left + margin.right)
-                .attr("height", height + margin.top + margin.bottom)
-                .append("g")
-                .attr("transform", `translate(${margin.left},${margin.top})`);
+            // Chart dimensions
+            const margin = {top: 50, right: 50, bottom: 50, left: 50};
+            const width = 800 - margin.left - margin.right;
+            const height = 400 - margin.top - margin.bottom;
 
-            // Create tooltip
-            const tooltip = d3.select("body").append("div")
+            // Tooltip
+            const tooltip = d3.select("body")
+                .append("div")
                 .attr("class", "tooltip")
                 .style("opacity", 0);
 
-            // Format the data
-            /*fastLuxData.forEach(function(d) {
-                d.timestamp = d.timestamp;//parseTime(d.timestamp);
-                d.lux = +d.lux;
+            // Create SVG
+            const svg = d3.select("#chart")
+                .append("svg")
+                    .attr("width", width + margin.left + margin.right)
+                    .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+                    .attr("transform", `translate(${margin.left},${margin.top})`);
+
+            // Parse dates
+            const parseTime = d3.timeParse("%Y-%m-%d");
+            const formatTime = d3.timeFormat("%Y-%m-%d");
+            /*datasets.forEach(series => {
+                series.values.forEach(d => {
+                    d.timestamp = parseTime(d.timestamp);
+                });
             });*/
 
-            // Scale the range of the data
-            // Scale the range of the data
-            x.domain(d3.extent(datasets[0].values.flatMap(d => d.timestamp), d => d.timestamp));
-            y.domain([0, d3.max(datasets[0].values.flatMap(d => d.lux), d => d.lux)]);
+            // Combine all values for scale
+            const allValues = datasets.flatMap(series => series.values.map(d => d.lux));
 
-            // Add the valueline paths
-            const dataset = svg.selectAll(".dataset")
-                .data(datasets)
-                .enter().append("g")
-                .attr("class", "dataset");
-            dataset.append("path")
-                .attr("class", "line")
-                .attr("d", d => valueline(d.values))
-                .style("stroke", d => color(d.name));
+            // Scales
+            const x = d3.scaleLinear()
+                .domain(d3.extent(datasets[0].values, d => d.timestamp))
+                .range([0, width]);
 
-            // Add the X Axis
+            const y = d3.scaleLinear()
+                .domain([
+                    d3.min(allValues) * 0.9, 
+                    d3.max(allValues) * 1.1
+                ])
+                .range([height, 0]);
+
+            // Line generator
+            const line = d3.line()
+                .x(d => x(d.timestamp))
+                .y(d => y(d.lux));
+
+            // X-axis
             svg.append("g")
+                .attr("class", "axis")
                 .attr("transform", `translate(0,${height})`)
                 .call(d3.axisBottom(x));
 
-            // Add the Y Axis
+            // Y-axis
             svg.append("g")
+                .attr("class", "axis")
                 .call(d3.axisLeft(y));
 
-            // Add the dots
-            dataset.each(function(dataset) {
-                d3.select(this).selectAll(".dot")
-                    .data(dataset.values)
+            // Lines and data points for each dataset
+            datasets.forEach(series => {
+                // Line
+                svg.append("path")
+                    .datum(series.values)
+                    .attr("class", "line")
+                    .attr("fill", "none")
+                    .attr("stroke", colorMap.get(series.name))
+                    .attr("stroke-width", 2)
+                    .attr("d", line);
+
+                // Data points
+                svg.selectAll(`.dot-${series.name}`)
+                    .data(series.values)
                     .enter().append("circle")
-                    .attr("class", "dot")
-                    .attr("r", 5)
-                    .attr("cx", d => x(d.timestamp))
-                    .attr("cy", d => y(d.lux))
-                    .style("fill", color(dataset.name))
-                    .on("mouseover", function(event, d) {
-                        tooltip.transition()
-                            .duration(200)
-                            .style("opacity", .9);
-                        tooltip.html(`${dataset.name}<br/>timestamp: ${d.timestamp}<br/>lux: ${d.lux}`)
-                            .style("left", (event.pageX + 5) + "px")
-                            .style("top", (event.pageY - 28) + "px");
-                    })
-                    .on("mouseout", function(d) {
-                        tooltip.transition()
-                            .duration(500)
-                            .style("opacity", 0);
-                    });
+                        .attr("class", `dot dot-${series.name}`)
+                        .attr("cx", d => x(d.timestamp))
+                        .attr("cy", d => y(d.lux))
+                        .attr("r", 5)
+                        .attr("fill", colorMap.get(series.name))
+                        .on("mouseover", function(event, d) {
+                            tooltip.transition()
+                                .duration(200)
+                                .style("opacity", .9);
+                            tooltip.html(`${series.name}<br/>timestamp: ${d.timestamp}<br/>lux: ${d.lux}`)
+                                .style("left", (event.pageX + 5) + "px")
+                                .style("top", (event.pageY - 28) + "px");
+                        })
+                        .on("mouseout", function(d) {
+                            tooltip.transition()
+                                .duration(500)
+                                .style("opacity", 0);
+                        });
             });
 
-            // Add a legend
-            const legend = svg.selectAll('.legend')
+            // Legend
+            const legend = svg.selectAll(".legend")
                 .data(datasets)
-                .enter().append('g')
-                .attr('class', 'legend')
-                .attr('transform', (d, i) => `translate(0,${i * 20})`);
+                .enter().append("g")
+                    .attr("class", "legend")
+                    .attr("transform", (d, i) => `translate(${width + 10},${i * 20})`);
 
-            legend.append('rect')
-                .attr('x', width + 5)
-                .attr('width', 18)
-                .attr('height', 18)
-                .style('fill', d => color(d.name));
+            legend.append("rect")
+                .attr("x", 0)
+                .attr("width", 10)
+                .attr("height", 10)
+                .style("fill", d => colorMap.get(d.name));
 
-            legend.append('text')
-                .attr('x', width + 25)
-                .attr('y', 9)
-                .attr('dy', '.35em')
-                .style('text-anchor', 'start')
-                .text(d => d.name);
+            legend.append("text")
+                .attr("x", 20)
+                .attr("y", 9)
+                .text(d => d.name)
+                .style("text-anchor", "start");
         }
 
-        // File input event listener
+        // Render chart
+        renderMultiLineChart(data);
+        // File input handler
         document.getElementById('fileInput').addEventListener('change', function(e) {
             const file = e.target.files[0];
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = function(e) {
-                    const contents = e.target.result;
-                    try {
-                        const data = JSON.parse(contents);
-                        createChart(data);
-                    } catch (error) {
-                        console.error("Error parsing JSON:", error);
-                        alert("Error parsing JSON file. Please make sure it's a valid JSON.");
-                    }
-                };
-                reader.readAsText(file);
-            }
+            const reader = new FileReader();
+
+            reader.onload = function(event) {
+                try {
+                    const jsonData = JSON.parse(event.target.result);
+                    renderMultiLineChart(jsonData);
+                } catch (error) {
+                    alert('Error parsing JSON file: ' + error);
+                }
+            };
+
+            reader.readAsText(file);
         });
     </script>
 </body>
diff --git a/test/d3.html b/test/d3.html
deleted file mode 100644
index a6ed6c5..0000000
--- a/test/d3.html
+++ /dev/null
@@ -1,188 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>D3.js Multiple Line Chart</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
-    <style>
-        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
-        .line { fill: none; stroke-width: 2px; }
-        .axis { font-size: 12px; }
-        .legend { font-size: 12px; }
-    </style>
-</head>
-<body>
-    <input type="file" id="fileInput" accept=".json" />
-    <div id="chart"></div>
-
-    <script>
-        // Sample multiple dataset
-        const data = [
-            {
-                name: 'Temperature',
-                color: 'steelblue',
-                values: [
-                    {date: '2023-01-01', value: 32},
-                    {date: '2023-02-01', value: 35},
-                    {date: '2023-03-01', value: 40},
-                    {date: '2023-04-01', value: 45},
-                    {date: '2023-05-01', value: 50}
-                ]
-            },
-            {
-                name: 'Rainfall',
-                color: 'green',
-                values: [
-                    {date: '2023-01-01', value: 10},
-                    {date: '2023-02-01', value: 15},
-                    {date: '2023-03-01', value: 20},
-                    {date: '2023-04-01', value: 25},
-                    {date: '2023-05-01', value: 30}
-                ]
-            }
-        ];
-
-        // Render multiple line chart
-        function renderMultiLineChart(datasets) {
-            // Clear previous chart
-            d3.select("#chart").html("");
-
-            // Chart dimensions
-            const margin = {top: 50, right: 100, bottom: 50, left: 50};
-            const width = 700 - margin.left - margin.right;
-            const height = 400 - margin.top - margin.bottom;
-
-            // Tooltip
-            const tooltip = d3.select("body")
-                .append("div")
-                .attr("class", "tooltip")
-                .style("opacity", 0);
-
-            // Create SVG
-            const svg = d3.select("#chart")
-                .append("svg")
-                    .attr("width", width + margin.left + margin.right)
-                    .attr("height", height + margin.top + margin.bottom)
-                .append("g")
-                    .attr("transform", `translate(${margin.left},${margin.top})`);
-
-            // Parse dates
-            const parseTime = d3.timeParse("%Y-%m-%d");
-            const formatTime = d3.timeFormat("%Y-%m-%d");
-            datasets.forEach(series => {
-                series.values.forEach(d => {
-                    d.date = parseTime(d.date);
-                });
-            });
-
-            // Combine all values for scale
-            const allValues = datasets.flatMap(series => series.values.map(d => d.value));
-
-            // Scales
-            const x = d3.scaleTime()
-                .domain(d3.extent(datasets[0].values, d => d.date))
-                .range([0, width]);
-
-            const y = d3.scaleLinear()
-                .domain([
-                    d3.min(allValues) * 0.9, 
-                    d3.max(allValues) * 1.1
-                ])
-                .range([height, 0]);
-
-            // Line generator
-            const line = d3.line()
-                .x(d => x(d.date))
-                .y(d => y(d.value));
-
-            // X-axis
-            svg.append("g")
-                .attr("class", "axis")
-                .attr("transform", `translate(0,${height})`)
-                .call(d3.axisBottom(x));
-
-            // Y-axis
-            svg.append("g")
-                .attr("class", "axis")
-                .call(d3.axisLeft(y));
-
-            // Lines and data points for each dataset
-            datasets.forEach(series => {
-                // Line
-                svg.append("path")
-                    .datum(series.values)
-                    .attr("class", "line")
-                    .attr("fill", "none")
-                    .attr("stroke", series.color)
-                    .attr("stroke-width", 2)
-                    .attr("d", line);
-
-                // Data points
-                svg.selectAll(`.dot-${series.name}`)
-                    .data(series.values)
-                    .enter().append("circle")
-                        .attr("class", `dot dot-${series.name}`)
-                        .attr("cx", d => x(d.date))
-                        .attr("cy", d => y(d.value))
-                        .attr("r", 5)
-                        .attr("fill", series.color)
-                        .on("mouseover", (event, d) => {
-                            tooltip.transition()
-                                .duration(200)
-                                .style("opacity", .9);
-                            tooltip.html(`
-                                <strong>${series.name}</strong><br>
-                                Date: ${formatTime(d.date)}<br>
-                                Value: ${d.value}
-                            `)
-                            .style("left", (event.pageX + 10) + "px")
-                            .style("top", (event.pageY - 28) + "px");
-                        })
-                        .on("mouseout", () => {
-                            tooltip.transition()
-                                .duration(500)
-                                .style("opacity", 0);
-                        });
-            });
-
-            // Legend
-            const legend = svg.selectAll(".legend")
-                .data(datasets)
-                .enter().append("g")
-                    .attr("class", "legend")
-                    .attr("transform", (d, i) => `translate(${width + 10},${i * 20})`);
-
-            legend.append("rect")
-                .attr("x", 0)
-                .attr("width", 10)
-                .attr("height", 10)
-                .style("fill", d => d.color);
-
-            legend.append("text")
-                .attr("x", 20)
-                .attr("y", 9)
-                .text(d => d.name)
-                .style("text-anchor", "start");
-        }
-
-        // Render chart
-        renderMultiLineChart(data);
-        // File input handler
-        document.getElementById('fileInput').addEventListener('change', function(e) {
-            const file = e.target.files[0];
-            const reader = new FileReader();
-
-            reader.onload = function(event) {
-                try {
-                    const jsonData = JSON.parse(event.target.result);
-                    renderMultiLineChart(jsonData);
-                } catch (error) {
-                    alert('Error parsing JSON file: ' + error);
-                }
-            };
-
-            reader.readAsText(file);
-        });
-    </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/test/datasets.json b/test/datasets.json
deleted file mode 100644
index 1d8929b..0000000
--- a/test/datasets.json
+++ /dev/null
@@ -1,35 +0,0 @@
-[
-    {
-        "name": "Temperature",
-		"color": "steelblue",
-        "values": [
-            {"date": "2023-01-01", "value": 32},
-            {"date": "2023-02-01", "value": 35},
-            {"date": "2023-03-01", "value": 40},
-            {"date": "2023-04-01", "value": 45},
-            {"date": "2023-05-01", "value": 50}
-        ]
-    },
-    {
-        "name": "Temperature2",
-		"color": "red",
-        "values": [
-            {"date": "2023-01-01", "value": 35},
-            {"date": "2023-02-01", "value": 40},
-            {"date": "2023-03-01", "value": 45},
-            {"date": "2023-04-01", "value": 50},
-            {"date": "2023-05-01", "value": 32}
-        ]
-    },
-    {
-        "name": "Temperature3",
-		"color": "green",
-        "values": [
-            {"date": "2023-01-01", "value": 40},
-            {"date": "2023-02-01", "value": 45},
-            {"date": "2023-03-01", "value": 50},
-            {"date": "2023-04-01", "value": 32},
-            {"date": "2023-05-01", "value": 35}
-        ]
-    }
-]
\ No newline at end of file
