add sensor datas
This commit is contained in:
YueLiang Chen(陳岳良)
1
test/Sensor_datas/2024-12-04_12-24-08.txt
Normal file
1
test/Sensor_datas/2024-12-04_12-24-08.txt
Normal file
File diff suppressed because one or more lines are too long
1
test/Sensor_datas/2024-12-04_12-25-40.txt
Normal file
1
test/Sensor_datas/2024-12-04_12-25-40.txt
Normal file
File diff suppressed because one or more lines are too long
BIN
test/Sensor_datas/P_20241204_202152.jpg
Normal file
BIN
test/Sensor_datas/P_20241204_202152.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
test/Sensor_datas/P_20241204_202412.jpg
Normal file
BIN
test/Sensor_datas/P_20241204_202412.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
229
test/Sensor_datas/visualization.html
Normal file
229
test/Sensor_datas/visualization.html
Normal file
@@ -0,0 +1,229 @@
|
||||
<!DOCTYPE html>
|
||||
<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>
|
||||
<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;
|
||||
}
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
padding: 2px;
|
||||
font: 12px sans-serif;
|
||||
background: lightsteelblue;
|
||||
border: 0px;
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>D3.js Line Chart from Local JSON File with Point Details</h1>
|
||||
<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));
|
||||
|
||||
function weightIntegral(x) {
|
||||
return x * (x * 0.5 + 4000000000);
|
||||
}
|
||||
|
||||
function calculateLux(datas, now) {
|
||||
var sum = 0, totalWeight = 0, endDelta = 100000000;
|
||||
for (var i = datas.length - 1; i >= 0; i--) {
|
||||
var eventTime = datas[i].timestamp;
|
||||
var startDelta = eventTime - now;
|
||||
var weight = weightIntegral(endDelta) - weightIntegral(startDelta);
|
||||
var lux = datas[i].lux;
|
||||
totalWeight += weight;
|
||||
sum += lux * weight;
|
||||
endDelta = startDelta;
|
||||
}
|
||||
return sum / totalWeight;
|
||||
}
|
||||
|
||||
// Function to create the chart
|
||||
function createChart(data) {
|
||||
var timestampNow;
|
||||
var fastLuxData = [];
|
||||
var slowLuxData = [];
|
||||
var datasets = [];
|
||||
for (timestampNow=data[0].timestamp; timestampNow<=data[data.length-1].timestamp; timestampNow+=200000000) {
|
||||
var fastRingBuffer = data.filter((value) => value.timestamp >= timestampNow-2000000000 && value.timestamp <= timestampNow);
|
||||
var slowRingBuffer = data.filter((value) => value.timestamp >= timestampNow-4000000000 && value.timestamp <= timestampNow);
|
||||
if (fastRingBuffer.length <= 1) {
|
||||
fastLuxData.push(data[0]);
|
||||
} else {
|
||||
fastLuxData.push({timestamp:timestampNow, lux:calculateLux(fastRingBuffer, timestampNow)});
|
||||
}
|
||||
if (slowRingBuffer.length <= 1) {
|
||||
slowLuxData.push(data[0]);
|
||||
} else {
|
||||
slowLuxData.push({timestamp:timestampNow, lux:calculateLux(slowRingBuffer, timestampNow)});
|
||||
}
|
||||
}
|
||||
var dataObj = new Object();
|
||||
dataObj.name = "original";
|
||||
dataObj.values = data;
|
||||
datasets.push(dataObj);
|
||||
var fastLuxDataObj = new Object();
|
||||
fastLuxDataObj.name = "fastLuxData";
|
||||
fastLuxDataObj.values = fastLuxData;
|
||||
datasets.push(fastLuxDataObj);
|
||||
var slowLuxDataObj = new Object();
|
||||
slowLuxDataObj.name = "slowLuxData";
|
||||
slowLuxDataObj.values = slowLuxData;
|
||||
datasets.push(slowLuxDataObj);
|
||||
console.log(datasets.length);
|
||||
console.log(datasets[0]);
|
||||
datasets = JSON.parse(JSON.stringify(datasets));
|
||||
// Clear previous chart if any
|
||||
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})`);
|
||||
|
||||
// Create 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;
|
||||
});*/
|
||||
|
||||
// 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)]);
|
||||
|
||||
// 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));
|
||||
|
||||
// Add the X Axis
|
||||
svg.append("g")
|
||||
.attr("transform", `translate(0,${height})`)
|
||||
.call(d3.axisBottom(x));
|
||||
|
||||
// Add the Y Axis
|
||||
svg.append("g")
|
||||
.call(d3.axisLeft(y));
|
||||
|
||||
// Add the dots
|
||||
dataset.each(function(dataset) {
|
||||
d3.select(this).selectAll(".dot")
|
||||
.data(dataset.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);
|
||||
});
|
||||
});
|
||||
|
||||
// Add a legend
|
||||
const legend = svg.selectAll('.legend')
|
||||
.data(datasets)
|
||||
.enter().append('g')
|
||||
.attr('class', 'legend')
|
||||
.attr('transform', (d, i) => `translate(0,${i * 20})`);
|
||||
|
||||
legend.append('rect')
|
||||
.attr('x', width + 5)
|
||||
.attr('width', 18)
|
||||
.attr('height', 18)
|
||||
.style('fill', d => color(d.name));
|
||||
|
||||
legend.append('text')
|
||||
.attr('x', width + 25)
|
||||
.attr('y', 9)
|
||||
.attr('dy', '.35em')
|
||||
.style('text-anchor', 'start')
|
||||
.text(d => d.name);
|
||||
}
|
||||
|
||||
// File input event listener
|
||||
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);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user