zoom brush
This commit is contained in:
parent
b9e7b5a81b
commit
5425f24698
139
web/app.html
139
web/app.html
@ -7,141 +7,4 @@
|
||||
<!-- Create a div where the graphs will take place -->
|
||||
<div id="graphs"></div>
|
||||
|
||||
<script>
|
||||
// set the margins of the graph
|
||||
const margin = {
|
||||
top: 10,
|
||||
right: 30,
|
||||
bottom: 30,
|
||||
left: 30
|
||||
};
|
||||
// get window size
|
||||
const width = window.innerWidth - margin.right - margin.left -10;
|
||||
// set fixed graph height
|
||||
const height = 400;
|
||||
|
||||
// reload page when window is resized
|
||||
// (resizes every elements)
|
||||
window.onresize = function(){ location.reload(); }
|
||||
|
||||
d3.csv('http://127.0.0.1/output.csv', d => {
|
||||
return {
|
||||
date: new Date(d.h_timestamp.replace(' ', 'T')).getTime(),
|
||||
value: parseFloat(d.price.replace('$', '')),
|
||||
skuid: d.skuid
|
||||
}
|
||||
}).then(function(data) {
|
||||
|
||||
const x = d3.scaleTime()
|
||||
.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");
|
||||
// console.log(graphDivs);
|
||||
|
||||
// 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")
|
||||
.attr('viewBox', `0 0 ${width} ${height}`)
|
||||
.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))
|
||||
.attr("r", 5)
|
||||
.attr("stroke", "#69b3a2")
|
||||
.attr("stroke-width", 3)
|
||||
.attr("fill", "white");
|
||||
|
||||
// interaction
|
||||
// Create a tooltip for each graph
|
||||
console.log(d3.select(this.parentNode.parentNode));
|
||||
const Tooltip = d3.select(this.parentNode.parentNode).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")
|
||||
.style("position", "absolute");
|
||||
|
||||
// Interaction functions for each graph
|
||||
const mouseover = function(event, d) {
|
||||
Tooltip.style("opacity", 1);
|
||||
};
|
||||
|
||||
const mousemove = function(event, d) {
|
||||
console.log(event.pageX + 10);
|
||||
Tooltip
|
||||
.html("Exact value: " + d.value)
|
||||
.style("left", (event.pageX + 10) + "px")
|
||||
.style("top", (event.pageY + 10) + "px")
|
||||
};
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
<script src="http://127.0.0.1/app.js"></script>
|
||||
|
||||
208
web/app.js
Normal file
208
web/app.js
Normal file
@ -0,0 +1,208 @@
|
||||
// set the margins of the graph
|
||||
const margin = {
|
||||
top: 10,
|
||||
right: 30,
|
||||
bottom: 30,
|
||||
left: 30
|
||||
};
|
||||
// get window size
|
||||
const width = window.innerWidth - margin.right - margin.left -10;
|
||||
// set fixed graph height
|
||||
const height = 400;
|
||||
|
||||
// reload page when window is resized
|
||||
// (resizes every elements)
|
||||
window.onresize = function(){ location.reload(); }
|
||||
|
||||
d3.csv('http://127.0.0.1/output.csv', d => {
|
||||
return {
|
||||
date: new Date(d.h_timestamp.replace(' ', 'T')).getTime(),
|
||||
value: parseFloat(d.price.replace('$', '')),
|
||||
skuid: d.skuid,
|
||||
currency: d.currency
|
||||
}
|
||||
}).then(function(data) {
|
||||
|
||||
const x = d3.scaleTime()
|
||||
.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");
|
||||
|
||||
// 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")
|
||||
.attr('viewBox', `0 0 ${width} ${height}`)
|
||||
.attr("transform", `translate(${margin.left},${margin.top})`);
|
||||
|
||||
var dict_xAxis = {};
|
||||
var dict_scatter = {};
|
||||
|
||||
// plot for each graph
|
||||
svgs.each(function(key) {
|
||||
const dataSubset = nestedData.get(key);
|
||||
|
||||
// Date domain (width)
|
||||
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);
|
||||
|
||||
// height axis
|
||||
dict_xAxis[key] = svg.append("g")
|
||||
.attr("transform", `translate(0, ${height})`)
|
||||
.call(d3.axisBottom(x));
|
||||
|
||||
// width axis
|
||||
svg.append("g")
|
||||
.call(d3.axisLeft(y));
|
||||
|
||||
// lines between dots
|
||||
// plotted before dots to stay below them
|
||||
svg.append("path")
|
||||
.datum(dataSubset)
|
||||
.attr("id", "line_path")
|
||||
.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))
|
||||
);
|
||||
|
||||
// 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
|
||||
.on("end", updateChart) // update graph on brush release
|
||||
|
||||
// Create the line variable: where both the line and the brush take place
|
||||
const line = svg.append('g')
|
||||
.attr("clip-path", "url(#clip)")
|
||||
|
||||
// Add the brushing
|
||||
line.append("g")
|
||||
.attr("class", "brush")
|
||||
.call(brush);
|
||||
|
||||
let idleTimeout
|
||||
function idled() { idleTimeout = null; }
|
||||
|
||||
// update graph on zoom brush release
|
||||
function updateChart(event,d) {
|
||||
extent = event.selection
|
||||
if(!extent){
|
||||
if (!idleTimeout) return idleTimeout = setTimeout(idled, 350);
|
||||
}else{
|
||||
x.domain([ x.invert(extent[0]), x.invert(extent[1]) ]) // new domain is brushing area
|
||||
line.select(".brush").call(brush.move, null) // remove brushing area
|
||||
}
|
||||
// Update axis
|
||||
dict_xAxis[key].transition().duration(1000).call(d3.axisBottom(x))
|
||||
// Update lines
|
||||
svg.selectAll("#line_path")
|
||||
.transition()
|
||||
.duration(1000)
|
||||
.attr("d", d3.line()
|
||||
.x(d => x(d.date))
|
||||
.y(d => y(d.value))
|
||||
);
|
||||
// Update dots
|
||||
svg.selectAll("circle")
|
||||
.data(dataSubset)
|
||||
.transition()
|
||||
.duration(1000)
|
||||
.attr("cx", d => x(d.date))
|
||||
}
|
||||
|
||||
// reset zoom on double click
|
||||
svg.on("dblclick",function(){
|
||||
x.domain(d3.extent(data, function(d) { return d.date; }))
|
||||
// Axis
|
||||
dict_xAxis[key].transition().call(d3.axisBottom(x))
|
||||
// Lines
|
||||
svg.selectAll("#line_path")
|
||||
.transition()
|
||||
.duration(1000)
|
||||
.attr("d", d3.line()
|
||||
.x(d => x(d.date))
|
||||
.y(d => y(d.value))
|
||||
);
|
||||
// Dots
|
||||
svg.selectAll("circle")
|
||||
.data(dataSubset)
|
||||
.transition()
|
||||
.duration(1000)
|
||||
.attr("cx", d => x(d.date))
|
||||
});
|
||||
|
||||
// TOOLTIP
|
||||
// tooltip: box with node value
|
||||
const Tooltip = d3.select(this.parentNode.parentNode).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")
|
||||
.style("position", "absolute");
|
||||
|
||||
// Interaction functions
|
||||
const mouseover = function(event, d) {
|
||||
Tooltip
|
||||
.style("opacity", 1)
|
||||
.html(d.value + " " + d.currency)
|
||||
.style("left", (event.pageX + 10) + "px")
|
||||
.style("top", (event.pageY + 10) + "px");
|
||||
};
|
||||
|
||||
const mousemove = function(event) {
|
||||
Tooltip
|
||||
.style("left", (event.pageX + 10) + "px")
|
||||
.style("top", (event.pageY + 10) + "px");
|
||||
};
|
||||
|
||||
const mouseleave = function() {
|
||||
Tooltip.style("opacity", 0)
|
||||
.style("left", 0 + "px")
|
||||
.style("top", 0 + "px"); // send tooltip outside of brushing area
|
||||
};
|
||||
|
||||
// points plot
|
||||
dict_scatter[key] = svg.append("g")
|
||||
.selectAll("circle")
|
||||
.data(dataSubset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", d => x(d.date))
|
||||
.attr("cy", d => y(d.value))
|
||||
.attr("r", 5)
|
||||
.attr("stroke", "#69b3a2")
|
||||
.attr("stroke-width", 3)
|
||||
.attr("fill", "white")
|
||||
.on("mouseover", mouseover)
|
||||
.on("mousemove", mousemove)
|
||||
.on("mouseleave", mouseleave);
|
||||
});
|
||||
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user