117 lines
3.3 KiB
HTML
117 lines
3.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
|
||
|
|
<!-- Load d3.js -->
|
||
|
|
<script src="https://d3js.org/d3.v6.js"></script>
|
||
|
|
|
||
|
|
<!-- Create a div where the graph will take place -->
|
||
|
|
<div id="my_dataviz"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
// set the dimensions and margins of the graph
|
||
|
|
const margin = {top: 10, right: 30, bottom: 30, left: 60},
|
||
|
|
width = 1600 - margin.left - margin.right,
|
||
|
|
height = 400 - margin.top - margin.bottom;
|
||
|
|
|
||
|
|
// append the svg object to the body of the page
|
||
|
|
const svg = d3.select("#my_dataviz")
|
||
|
|
.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})`);
|
||
|
|
|
||
|
|
d3.csv('http://127.0.0.1/output.csv', d => {
|
||
|
|
console.log(d.h_timestamp);
|
||
|
|
console.log(d3.timeParse("%Y-%m-%d %H:%M:%S.%L")(d.h_timestamp));
|
||
|
|
//2024-01-13 21:51:45.581863
|
||
|
|
return {
|
||
|
|
date: new Date(d.h_timestamp.replace(' ', 'T')).getTime(),
|
||
|
|
value: parseFloat(d.price.replace('$', ''))
|
||
|
|
}
|
||
|
|
}).then(function(data) {
|
||
|
|
console.log(data);
|
||
|
|
|
||
|
|
// Add X axis --> it is a date format
|
||
|
|
const x = d3.scaleTime()
|
||
|
|
.domain(d3.extent(data, d => d.date))
|
||
|
|
.range([ 0, width ]);
|
||
|
|
svg.append("g")
|
||
|
|
.attr("transform", `translate(0, ${height})`)
|
||
|
|
.call(d3.axisBottom(x));
|
||
|
|
|
||
|
|
// Add Y axis
|
||
|
|
// Get the extent of the data values
|
||
|
|
const valueExtent = d3.extent(data, d => d.value);
|
||
|
|
|
||
|
|
// Extend the domain by 5 units on each side
|
||
|
|
const extendedDomain = [valueExtent[0] - 5, valueExtent[1] + 5];
|
||
|
|
|
||
|
|
// Create the y-scale with the extended domain
|
||
|
|
const y = d3.scaleLinear()
|
||
|
|
.domain(extendedDomain)
|
||
|
|
.range([height, 0]);
|
||
|
|
svg.append("g")
|
||
|
|
.call(d3.axisLeft(y));
|
||
|
|
|
||
|
|
// Add the line
|
||
|
|
svg.append("path")
|
||
|
|
.datum(data)
|
||
|
|
.attr("fill", "none")
|
||
|
|
.attr("stroke", "black")
|
||
|
|
.attr("stroke-width", 1.5)
|
||
|
|
.attr("d", d3.line()
|
||
|
|
.curve(d3.curveBasis) // Just add that to have a curve instead of segments
|
||
|
|
.x(d => x(d.date))
|
||
|
|
.y(d => y(d.value))
|
||
|
|
)
|
||
|
|
|
||
|
|
// create a tooltip
|
||
|
|
const Tooltip = d3.select("#my_dataviz")
|
||
|
|
.append("div")
|
||
|
|
.style("opacity", 0)
|
||
|
|
.attr("class", "tooltip")
|
||
|
|
.style("background-color", "white")
|
||
|
|
.style("border", "solid")
|
||
|
|
.style("border-width", "2px")
|
||
|
|
.style("border-radius", "5px")
|
||
|
|
.style("padding", "5px")
|
||
|
|
|
||
|
|
// Three function that change the tooltip when user hover / move / leave a cell
|
||
|
|
const mouseover = function(event,d) {
|
||
|
|
Tooltip
|
||
|
|
.style("opacity", 1)
|
||
|
|
}
|
||
|
|
const mousemove = function(event,d) {
|
||
|
|
Tooltip
|
||
|
|
.html("Exact value: " + d.value)
|
||
|
|
.style("left", `${event.layerX+10}px`)
|
||
|
|
.style("top", `${event.layerY}px`)
|
||
|
|
}
|
||
|
|
const mouseleave = function(event,d) {
|
||
|
|
Tooltip
|
||
|
|
.style("opacity", 0)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Add the points
|
||
|
|
svg
|
||
|
|
.append("g")
|
||
|
|
.selectAll("dot")
|
||
|
|
.data(data)
|
||
|
|
.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)
|
||
|
|
})
|
||
|
|
</script>
|