sam.hadow/aliexpress-price-tracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

clipPath

Browse Source
This commit is contained in:
Sam Hadow 2024-01-23 21:50:30 +01:00
parent 6e458bf6a7
commit ab145e8602
1 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/app.js
View File

@ -1,9 +1,9 @@
// set the margins of the graph
const margin = {
top: 10,
right: 60,
right: 30,
bottom: 30,
left: 30
left: window.innerWidth*0.1
};
// get window size
const width = window.innerWidth - margin.right - margin.left -10;
@ -23,9 +23,10 @@ d3.csv('http://127.0.0.1/output.csv', d => {
}
}).then(function(data) {
// Date domain (width)
const x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([0, width]);
.range([3, width-3]);
// Group the data by (itemid, skuid)
const nestedData = d3.group(data, d => d.skuid);
@ -51,7 +52,7 @@ d3.csv('http://127.0.0.1/output.csv', d => {
svgs.each(function(key) {
const dataSubset = nestedData.get(key);
// Date domain (width)
// Price domain (height)
const y = d3.scaleLinear()
.domain([d3.min(dataSubset, d => d.value) - 1, d3.max(dataSubset, d => d.value) + 1])
.range([height, 0]);
@ -67,11 +68,29 @@ d3.csv('http://127.0.0.1/output.csv', d => {
svg.append("g")
.call(d3.axisLeft(y));
// clipPath, area drawn
const clip_line = svg.append("defs").append("svg:clipPath")
.attr("id", "clip_line")
.append("svg:rect")
.attr("width", width )
.attr("height", height )
.attr("x", 0)
.attr("y", 0);
const clip_dot = svg.append("defs").append("svg:clipPath")
.attr("id", "clip_dot")
.append("svg:rect")
.attr("width", width+10 )
.attr("height", height+10 )
.attr("x", -5)
.attr("y", -5);
// lines between dots
// plotted before dots to stay below them
svg.append("path")
.datum(dataSubset)
.attr("id", "line_path")
.attr("clip-path", "url(#clip_line)") // bind to clipPath
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1.5)
@ -80,16 +99,6 @@ d3.csv('http://127.0.0.1/output.csv', d => {
.y(d => y(d.value))
);
// ZOOM
// clipPath, area drawn
const clip = svg.append("defs").append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("width", width )
.attr("height", height )
.attr("x", 0)
.attr("y", 0);
// brushing
const brush = d3.brushX()
.extent( [ [0,0], [width,height] ] ) // select whole graph
@ -169,7 +178,6 @@ d3.csv('http://127.0.0.1/output.csv', d => {
// Interaction functions
const mouseover = function(event, d) {
// var formatted_date = `${d.date.getDate()}-${d.date.getMonth()}-${d.date.getFullYear()}`;
var formatted_date = d.date.toISOString().split('T')[0]
Tooltip
.style("opacity", 1)
@ -196,6 +204,7 @@ d3.csv('http://127.0.0.1/output.csv', d => {
.data(dataSubset)
.enter()
.append("circle")
.attr("clip-path", "url(#clip_dot)") // bind to clipPath
.attr("cx", d => x(d.date))
.attr("cy", d => y(d.value))
.attr("r", 5)