259 lines
7.8 KiB
HTML
259 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Line Charts with D3.js</title>
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
<style>
|
|
.line {
|
|
fill: none;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.dot {
|
|
fill: red;
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
text-align: center;
|
|
width: auto;
|
|
padding: 5px;
|
|
font: 12px sans-serif;
|
|
background: lightsteelblue;
|
|
border: 0px;
|
|
border-radius: 8px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.line-lux {
|
|
stroke: steelblue;
|
|
}
|
|
|
|
.dot-lux {
|
|
fill: steelblue;
|
|
}
|
|
|
|
.line-lux_fast {
|
|
stroke: orange;
|
|
}
|
|
|
|
.dot-lux_fast {
|
|
fill: orange;
|
|
}
|
|
|
|
.line-lux_slow {
|
|
stroke: green;
|
|
}
|
|
|
|
.dot-lux_slow {
|
|
fill: green;
|
|
}
|
|
|
|
.line-diff {
|
|
stroke: purple;
|
|
}
|
|
|
|
.dot-diff {
|
|
fill: purple;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Line Charts with D3.js</h1>
|
|
<input type="file" id="fileInput">
|
|
<div id="chart"></div>
|
|
<div id="chart2"></div>
|
|
|
|
<script>
|
|
document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
|
|
|
|
function handleFileSelect(event) {
|
|
const file = event.target.files[0];
|
|
if (!file) {
|
|
return;
|
|
}
|
|
const reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
const contents = e.target.result;
|
|
const data = JSON.parse(contents);
|
|
drawChart(data);
|
|
drawChart2(data);
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
|
|
function drawChart(data) {
|
|
const margin = { top: 20, right: 30, bottom: 30, left: 40 },
|
|
width = 800 - margin.left - margin.right,
|
|
height = 400 - margin.top - margin.bottom;
|
|
|
|
d3.select("#chart").html(""); // Clear previous chart if any
|
|
|
|
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})`);
|
|
|
|
const x = d3.scaleLinear()
|
|
.domain(d3.extent(data, d => d.timestamp))
|
|
.range([0, width]);
|
|
|
|
const y = d3.scaleLinear()
|
|
.domain([0, d3.max(data, d => Math.max(d.lux, d.lux_fast, d.lux_slow))])
|
|
.nice()
|
|
.range([height, 0]);
|
|
|
|
const lineLux = d3.line()
|
|
.x(d => x(d.timestamp))
|
|
.y(d => y(d.lux));
|
|
|
|
const lineLuxFast = d3.line()
|
|
.x(d => x(d.timestamp))
|
|
.y(d => y(d.lux_fast));
|
|
|
|
const lineLuxSlow = d3.line()
|
|
.x(d => x(d.timestamp))
|
|
.y(d => y(d.lux_slow));
|
|
|
|
svg.append("g")
|
|
.attr("transform", `translate(0,${height})`)
|
|
.call(d3.axisBottom(x));
|
|
|
|
svg.append("g")
|
|
.call(d3.axisLeft(y));
|
|
|
|
svg.append("path")
|
|
.datum(data)
|
|
.attr("class", "line line-lux")
|
|
.attr("d", lineLux);
|
|
|
|
svg.append("path")
|
|
.datum(data)
|
|
.attr("class", "line line-lux_fast")
|
|
.attr("d", lineLuxFast);
|
|
|
|
svg.append("path")
|
|
.datum(data)
|
|
.attr("class", "line line-lux_slow")
|
|
.attr("d", lineLuxSlow);
|
|
|
|
// Add dots for lux
|
|
svg.selectAll(".dot-lux")
|
|
.data(data)
|
|
.enter().append("circle")
|
|
.attr("class", "dot dot-lux")
|
|
.attr("cx", d => x(d.timestamp))
|
|
.attr("cy", d => y(d.lux))
|
|
.attr("r", 3)
|
|
.on("mouseover", function (event, d) {
|
|
const tooltip = d3.select("body").append("div").attr("class", "tooltip");
|
|
tooltip.html(`timestamp: ${d.timestamp}<br>lux: ${d.lux}`)
|
|
.style("left", (event.pageX + 5) + "px")
|
|
.style("top", (event.pageY - 28) + "px");
|
|
})
|
|
.on("mouseout", function () {
|
|
d3.select(".tooltip").remove();
|
|
});
|
|
|
|
// Add dots for lux_fast
|
|
svg.selectAll(".dot-lux_fast")
|
|
.data(data)
|
|
.enter().append("circle")
|
|
.attr("class", "dot dot-lux_fast")
|
|
.attr("cx", d => x(d.timestamp))
|
|
.attr("cy", d => y(d.lux_fast))
|
|
.attr("r", 3)
|
|
.on("mouseover", function (event, d) {
|
|
const tooltip = d3.select("body").append("div").attr("class", "tooltip");
|
|
tooltip.html(`timestamp: ${d.timestamp}<br>lux_fast: ${d.lux_fast}`)
|
|
.style("left", (event.pageX + 5) + "px")
|
|
.style("top", (event.pageY - 28) + "px");
|
|
})
|
|
.on("mouseout", function () {
|
|
d3.select(".tooltip").remove();
|
|
});
|
|
|
|
// Add dots for lux_slow
|
|
svg.selectAll(".dot-lux_slow")
|
|
.data(data)
|
|
.enter().append("circle")
|
|
.attr("class", "dot dot-lux_slow")
|
|
.attr("cx", d => x(d.timestamp))
|
|
.attr("cy", d => y(d.lux_slow))
|
|
.attr("r", 3)
|
|
.on("mouseover", function (event, d) {
|
|
const tooltip = d3.select("body").append("div").attr("class", "tooltip");
|
|
tooltip.html(`timestamp: ${d.timestamp}<br>lux_slow: ${d.lux_slow}`)
|
|
.style("left", (event.pageX + 5) + "px")
|
|
.style("top", (event.pageY - 28) + "px");
|
|
})
|
|
.on("mouseout", function () {
|
|
d3.select(".tooltip").remove();
|
|
});
|
|
}
|
|
|
|
function drawChart2(data) {
|
|
const margin = { top: 20, right: 30, bottom: 30, left: 40 },
|
|
width = 800 - margin.left - margin.right,
|
|
height = 400 - margin.top - margin.bottom;
|
|
|
|
d3.select("#chart2").html(""); // Clear previous chart if any
|
|
|
|
const svg = d3.select("#chart2").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})`);
|
|
|
|
const x = d3.scaleLinear()
|
|
.domain(d3.extent(data, d => d.timestamp))
|
|
.range([0, width]);
|
|
|
|
const y = d3.scaleLinear()
|
|
.domain([d3.min(data, d => d.lux - d.lux_slow), d3.max(data, d => d.lux - d.lux_slow)])
|
|
.nice()
|
|
.range([height, 0]);
|
|
|
|
const lineDiff = d3.line()
|
|
.x(d => x(d.timestamp))
|
|
.y(d => y(d.lux - d.lux_slow));
|
|
|
|
svg.append("g")
|
|
.attr("transform", `translate(0,${height})`)
|
|
.call(d3.axisBottom(x));
|
|
|
|
svg.append("g")
|
|
.call(d3.axisLeft(y));
|
|
|
|
svg.append("path")
|
|
.datum(data)
|
|
.attr("class", "line line-diff")
|
|
.attr("d", lineDiff);
|
|
|
|
// Add dots for lux - lux_slow
|
|
svg.selectAll(".dot-diff")
|
|
.data(data)
|
|
.enter().append("circle")
|
|
.attr("class", "dot dot-diff")
|
|
.attr("cx", d => x(d.timestamp))
|
|
.attr("cy", d => y(d.lux - d.lux_slow))
|
|
.attr("r", 3)
|
|
.on("mouseover", function (event, d) {
|
|
const tooltip = d3.select("body").append("div").attr("class", "tooltip");
|
|
tooltip.html(`timestamp: ${d.timestamp}<br>lux - lux_slow: ${d.lux - d.lux_slow}`)
|
|
.style("left", (event.pageX + 5) + "px")
|
|
.style("top", (event.pageY - 28) + "px");
|
|
})
|
|
.on("mouseout", function () {
|
|
d3.select(".tooltip").remove();
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |