diff --git a/web/app.html b/web/app.html
index fb3537d..4afb6c5 100644
--- a/web/app.html
+++ b/web/app.html
@@ -7,141 +7,4 @@
-
+
diff --git a/web/app.js b/web/app.js
new file mode 100644
index 0000000..0035912
--- /dev/null
+++ b/web/app.js
@@ -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);
+ });
+
+})