diff --git a/web/app.html b/web/app.html
index d3f8618..fb3537d 100644
--- a/web/app.html
+++ b/web/app.html
@@ -8,23 +8,21 @@
 <div id="graphs"></div>
 
 <script>
-// set the dimensions and margins of the graph
+// set the 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;
+        left: 30
+    };
+// get window size
+const width = window.innerWidth - margin.right - margin.left -10;
+// set fixed graph height
+const height = 400;
 
-// 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})`);
+// 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 {
@@ -46,12 +44,14 @@ d3.csv('http://127.0.0.1/output.csv', d => {
         .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 = {};
@@ -91,21 +91,23 @@ d3.csv('http://127.0.0.1/output.csv', d => {
             .attr("class", "myCircle")
             .attr("cx", d => x(d.date))
             .attr("cy", d => y(d.value))
-            .attr("r", 8)
+            .attr("r", 5)
             .attr("stroke", "#69b3a2")
             .attr("stroke-width", 3)
             .attr("fill", "white");
 
         // interaction
         // Create a tooltip for each graph
-        const Tooltip = d3.select("body").append("div")
+        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("padding", "5px")
+            .style("position", "absolute");
 
         // Interaction functions for each graph
         const mouseover = function(event, d) {
@@ -113,10 +115,11 @@ d3.csv('http://127.0.0.1/output.csv', d => {
         };
 
         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}px`);
+                .style("left", (event.pageX + 10) + "px")
+                .style("top", (event.pageY + 10) + "px")
         };
 
         const mouseleave = function(event, d) {
@@ -138,122 +141,6 @@ d3.csv('http://127.0.0.1/output.csv', d => {
             .on("mouseover", mouseover)
             .on("mousemove", mousemove)
             .on("mouseleave", mouseleave);
-
-
-
-    //     // zoom
-    //     // Add a clipPath for each graph
-    //     var clip = svg.append("defs").append("svg:clipPath")
-    //         .attr("id", "clip-" + key)
-    //         .append("svg:rect")
-    //         .attr("width", width)
-    //         .attr("height", height)
-    //         .attr("x", 0)
-    //         .attr("y", 0);
-    //
-    //     // Create zoom behavior for each graph
-    //     var zoom = d3.zoom()
-    //         .scaleExtent([1, Infinity])
-    //         .translateExtent([
-    //             [0, 0],
-    //             [width, height]
-    //         ])
-    //         .extent([
-    //             [0, 0],
-    //             [width, height]
-    //         ])
-    //         .on("zoom", updateChart);
-    //
-    //     // Add the line variable: where both the line and the brush take place
-    //     var line = svg.append('g')
-    //         .attr("clip-path", "url(#clip-" + key + ")")
-    //         .call(zoom);
-    //
-    //     // Create a brush for each graph
-    //     var brush = d3.brushX()
-    //         .extent([
-    //             [0, 0],
-    //             [width, height]
-    //         ])
-    //         .on("end", updateChart);
-    //
-    //     // Add the line
-    //     line.append("path")
-    //         .datum(dataSubset)
-    //         .attr("class", "line") // I add the class line to be able to modify this line later on.
-    //         .attr("fill", "none")
-    //         .attr("stroke", "steelblue")
-    //         .attr("stroke-width", 1.5)
-    //         .attr("d", d3.line()
-    //             .x(function(d) {
-    //                 return x(d.date)
-    //             })
-    //             .y(function(d) {
-    //                 return y(d.value)
-    //             })
-    //         );
-    //
-    //     // Add the brushing
-    //     line.append("g")
-    //         .attr("class", "brush")
-    //         .call(brush);
-    //
-    //     // A function that set idleTimeOut to null
-    //     let idleTimeout
-    //
-    //     function idled() {
-    //         idleTimeout = null;
-    //     }
-    //
-    //     // A function that update the chart for given boundaries
-    //     function updateChart(event, d) {
-    //         // What are the selected boundaries?
-    //         var extent = event.selection
-    //
-    //         // If no selection, back to initial coordinate. Otherwise, update X axis domain
-    //         if (!extent) {
-    //             x.domain([4, 8]);
-    //         } else {
-    //             x.domain([x.invert(extent[0]), x.invert(extent[1])]);
-    //             line.select(".brush").call(brush.move, null); // This removes the grey brush area as soon as the selection has been done
-    //         }
-    //
-    //         // Update axis and line position
-    //         dict_xAxis[dataSubset].transition().duration(1000).call(d3.axisBottom(x));
-    //         line
-    //             .select('.line')
-    //             .transition()
-    //             .duration(1000)
-    //             .attr("d", d3.line()
-    //                 .x(function(d) {
-    //                     return x(d.date)
-    //                 })
-    //                 .y(function(d) {
-    //                     return y(d.value)
-    //                 })
-    //             );
-    //     }
-    //
-    //     // If user double click, reinitialize the chart
-    //     svg.on("dblclick", function() {
-    //         x.domain(d3.extent(data, function(d) {
-    //             return d.date;
-    //         }))
-    //         dict_xAxis[dataSubset].transition().call(d3.axisBottom(x));
-    //         line
-    //             .select('.line')
-    //             .transition()
-    //             .attr("d", d3.line()
-    //                 .x(function(d) {
-    //                     return x(d.date)
-    //                 })
-    //                 .y(function(d) {
-    //                     return y(d.value)
-    //                 })
-    //             );
-    //     });
-    //
-    //
     });
 
 })