229 lines
8.5 KiB
HTML
229 lines
8.5 KiB
HTML
<!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> |