moonjuice/light_sensor_capture
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

show multiple datasets

Browse Source
This commit is contained in:
moonjuice
2024-12-06 15:30:07 +08:00
parent 857e1262ea
commit 156c71c2ff
3 changed files with 129 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
test/Sensor_datas/visualization.html
View File

@@ -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,67 +93,94 @@
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")
// 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;
// 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})`);
// 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;
// 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("class", `dot dot-${series.name}`)
.attr("cx", d => x(d.timestamp))
.attr("cy", d => y(d.lux))
.style("fill", color(dataset.name))
.attr("r", 5)
.attr("fill", colorMap.get(series.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}`)
tooltip.html(`${series.name}<br/>timestamp: ${d.timestamp}<br/>lux: ${d.lux}`)
.style("left", (event.pageX + 5) + "px")
.style("top", (event.pageY - 28) + "px");
})
@@ -185,44 +191,43 @@
});
});
// 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;
reader.onload = function(event) {
try {
const data = JSON.parse(contents);
createChart(data);
const jsonData = JSON.parse(event.target.result);
renderMultiLineChart(jsonData);
} catch (error) {
console.error("Error parsing JSON:", error);
alert("Error parsing JSON file. Please make sure it's a valid JSON.");
alert('Error parsing JSON file: ' + error);
}
};
reader.readAsText(file);
}
});
</script>
</body>

188
test/d3.html
View File

@@ -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>

35
test/datasets.json
View File

@@ -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}
]
}
]