2024-01-13 23:13:11 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
|
|
|
|
<!-- Load d3.js -->
|
|
|
|
|
<script src="https://d3js.org/d3.v6.js"></script>
|
|
|
|
|
|
2024-01-14 01:01:42 +01:00
|
|
|
<!-- Create a div where the graphs will take place -->
|
|
|
|
|
<div id="graphs"></div>
|
2024-01-13 23:13:11 +01:00
|
|
|
|
|
|
|
|
<script>
|
2024-01-14 15:25:04 +01:00
|
|
|
// set the margins of the graph
|
2024-01-14 01:01:42 +01:00
|
|
|
const margin = {
|
|
|
|
|
top: 10,
|
|
|
|
|
right: 30,
|
|
|
|
|
bottom: 30,
|
2024-01-14 15:25:04 +01:00
|
|
|
left: 30
|
|
|
|
|
};
|
|
|
|
|
// get window size
|
|
|
|
|
const width = window.innerWidth - margin.right - margin.left -10;
|
|
|
|
|
// set fixed graph height
|
|
|
|
|
const height = 400;
|
2024-01-13 23:13:11 +01:00
|
|
|
|
2024-01-14 15:25:04 +01:00
|
|
|
// reload page when window is resized
|
|
|
|
|
// (resizes every elements)
|
|
|
|
|
window.onresize = function(){ location.reload(); }
|
2024-01-13 23:13:11 +01:00
|
|
|
|
|
|
|
|
d3.csv('http://127.0.0.1/output.csv', d => {
|
|
|
|
|
return {
|
|
|
|
|
date: new Date(d.h_timestamp.replace(' ', 'T')).getTime(),
|
2024-01-14 01:01:42 +01:00
|
|
|
value: parseFloat(d.price.replace('$', '')),
|
|
|
|
|
skuid: d.skuid
|
2024-01-13 23:13:11 +01:00
|
|
|
}
|
|
|
|
|
}).then(function(data) {
|
|
|
|
|
|
|
|
|
|
const x = d3.scaleTime()
|
2024-01-14 01:01:42 +01:00
|
|
|
.domain(d3.extent(data, d => d.date))
|
|
|
|
|
.range([0, width]);
|
|
|
|
|
|
|
|
|
|
// Group the data by (itemid, skuid)
|
|
|
|
|
const nestedData = d3.group(data, d => d.skuid);
|
|
|
|
|
// Create a div for each graph
|
|
|
|
|
const graphDivs = d3.select("#graphs")
|
|
|
|
|
.selectAll(".graph-container")
|
|
|
|
|
.data(nestedData.keys())
|
|
|
|
|
.enter().append("div")
|
|
|
|
|
.attr("class", "graph-container");
|
2024-01-14 15:25:04 +01:00
|
|
|
// console.log(graphDivs);
|
2024-01-14 01:01:42 +01:00
|
|
|
|
|
|
|
|
// Append SVG elements to each div
|
|
|
|
|
const svgs = graphDivs.append("svg")
|
|
|
|
|
.attr("width", width + margin.left + margin.right)
|
|
|
|
|
.attr("height", height + margin.top + margin.bottom)
|
|
|
|
|
.append("g")
|
2024-01-14 15:25:04 +01:00
|
|
|
.attr('viewBox', `0 0 ${width} ${height}`)
|
2024-01-14 01:01:42 +01:00
|
|
|
.attr("transform", `translate(${margin.left},${margin.top})`);
|
|
|
|
|
|
|
|
|
|
var dict_xAxis = {};
|
|
|
|
|
// Plot each curve
|
|
|
|
|
svgs.each(function(key) {
|
|
|
|
|
const dataSubset = nestedData.get(key);
|
|
|
|
|
|
|
|
|
|
const y = d3.scaleLinear()
|
|
|
|
|
.domain([d3.min(dataSubset, d => d.value) - 1, d3.max(dataSubset, d => d.value) + 1])
|
|
|
|
|
.range([height, 0]);
|
|
|
|
|
|
|
|
|
|
const svg = d3.select(this);
|
|
|
|
|
|
|
|
|
|
dict_xAxis[dataSubset] = svg.append("g")
|
|
|
|
|
.attr("transform", `translate(0, ${height})`)
|
|
|
|
|
.call(d3.axisBottom(x));
|
|
|
|
|
|
|
|
|
|
svg.append("g")
|
|
|
|
|
.call(d3.axisLeft(y));
|
|
|
|
|
|
|
|
|
|
svg.append("path")
|
|
|
|
|
.datum(dataSubset)
|
|
|
|
|
.attr("fill", "none")
|
|
|
|
|
.attr("stroke", "black")
|
|
|
|
|
.attr("stroke-width", 1.5)
|
|
|
|
|
.attr("d", d3.line()
|
|
|
|
|
.x(d => x(d.date))
|
|
|
|
|
.y(d => y(d.value))
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// Add the points
|
|
|
|
|
svg
|
|
|
|
|
.append("g")
|
|
|
|
|
.selectAll("dot")
|
|
|
|
|
.data(dataSubset)
|
|
|
|
|
.join("circle")
|
|
|
|
|
.attr("class", "myCircle")
|
|
|
|
|
.attr("cx", d => x(d.date))
|
|
|
|
|
.attr("cy", d => y(d.value))
|
2024-01-14 15:25:04 +01:00
|
|
|
.attr("r", 5)
|
2024-01-14 01:01:42 +01:00
|
|
|
.attr("stroke", "#69b3a2")
|
|
|
|
|
.attr("stroke-width", 3)
|
|
|
|
|
.attr("fill", "white");
|
|
|
|
|
|
|
|
|
|
// interaction
|
|
|
|
|
// Create a tooltip for each graph
|
2024-01-14 15:25:04 +01:00
|
|
|
console.log(d3.select(this.parentNode.parentNode));
|
|
|
|
|
const Tooltip = d3.select(this.parentNode.parentNode).append("div")
|
2024-01-14 01:01:42 +01:00
|
|
|
.style("opacity", 0)
|
|
|
|
|
.attr("class", "tooltip")
|
|
|
|
|
.style("background-color", "white")
|
|
|
|
|
.style("border", "solid")
|
|
|
|
|
.style("border-width", "2px")
|
|
|
|
|
.style("border-radius", "5px")
|
2024-01-14 15:25:04 +01:00
|
|
|
.style("padding", "5px")
|
|
|
|
|
.style("position", "absolute");
|
2024-01-14 01:01:42 +01:00
|
|
|
|
|
|
|
|
// Interaction functions for each graph
|
|
|
|
|
const mouseover = function(event, d) {
|
|
|
|
|
Tooltip.style("opacity", 1);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const mousemove = function(event, d) {
|
2024-01-14 15:25:04 +01:00
|
|
|
console.log(event.pageX + 10);
|
2024-01-14 01:01:42 +01:00
|
|
|
Tooltip
|
|
|
|
|
.html("Exact value: " + d.value)
|
2024-01-14 15:25:04 +01:00
|
|
|
.style("left", (event.pageX + 10) + "px")
|
|
|
|
|
.style("top", (event.pageY + 10) + "px")
|
2024-01-14 01:01:42 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const mouseleave = function(event, d) {
|
|
|
|
|
Tooltip.style("opacity", 0);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Add interaction to the points for each graph
|
|
|
|
|
svg.append("g")
|
|
|
|
|
.selectAll("dot")
|
|
|
|
|
.data(dataSubset)
|
|
|
|
|
.join("circle")
|
|
|
|
|
.attr("class", "myCircle")
|
|
|
|
|
.attr("cx", d => x(d.date))
|
|
|
|
|
.attr("cy", d => y(d.value))
|
|
|
|
|
.attr("r", 8)
|
|
|
|
|
.attr("stroke", "#69b3a2")
|
|
|
|
|
.attr("stroke-width", 3)
|
|
|
|
|
.attr("fill", "white")
|
|
|
|
|
.on("mouseover", mouseover)
|
|
|
|
|
.on("mousemove", mousemove)
|
|
|
|
|
.on("mouseleave", mouseleave);
|
|
|
|
|
});
|
|
|
|
|
|
2024-01-13 23:13:11 +01:00
|
|
|
})
|
|
|
|
|
</script>
|
