zoom brush

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>