adding necessary files

ReactTool/frontend/src/components/areaChart-mini.js

@@ -0,0 +1,174 @@
+//Using monthly coffee price dataset 
+import React, { Component } from 'react';
+import * as d3 from 'd3'
+import { Container, Col, Row, Navbar, Button, ButtonGroup, ToggleButton, Form, InputGroup } from 'react-bootstrap';
+import '../App.css';
+import data from './data/AreaChart-2.csv';
+import img10 from '../components/data/Mini-VLAT/AreaChart.png'
+
+
+
+class AreaChartMini extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        this.drawAreaChart()
+    }
+    divResize(e) {
+        console.log('div was resized', e)
+    }
+
+    componentDidUpdate() {
+        this.drawAreaChart()
+    }
+
+
+    drawAreaChart() {
+        //https://www.ico.org/new_historical.asp
+        //https://bl.ocks.org/interwebjill/8122dd08da9facf8c6ef6676be7da03f
+
+        var e = document.getElementById("graph_box");
+        const length = Math.min(e.clientHeight, e.clientWidth)
+        if (length < 570) {
+            const margin = { top: length / 7, right: length / 9, bottom: length / 7, left: length / 9 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .append("svg")
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+            svg.append("text").attr("class", 'bubbleTitle').text("Average Coffee Bean Price from 2013 to 2014").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height)
+
+            var image = svg.append('image').attr('width', 1.2 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img10).attr('height', 1.1 * height)
+
+        }
+        else {
+            // var e = document.getElementById("graph_box");
+            // const length = Math.min(e.clientHeight, e.clientWidth)
+            const margin = { top: length / 7, right: length / 7, bottom: length / 7, left: length / 7 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+
+            // append the svg object to the body of the page
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .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})`)
+
+            var data = [0.8865, 0.8924, 0.8818, 0.8831, 0.8874, 0.8607, 0.8442, 0.8074, 0.7670, 0.8532, 0.8352, 0.7757, 0.7824, 0.7865, 0.7696, 0.7328, 0.7112, 0.7402, 0.7393, 0.7078, 0.7064, 0.6863, 0.7328, 0.7322]
+
+            var xScale = d3.scaleTime()
+                .domain([new Date(2018, 0, 1), new Date(2020, 0, 1)])
+                .range([0, width]);
+
+            svg.append("g")
+                .attr("class", "x-axis")
+                .attr("transform", `translate(0, ${height})`)
+                .call(d3.axisBottom(xScale))
+
+            var yScale = d3.scaleLinear()
+                .domain([0.5, 0.9])
+                .range([height, 0]);
+
+            svg.append("g")
+                .attr("class", "y-axis")
+                .call(d3.axisLeft(yScale))
+
+
+            var x = d3.scaleTime().domain([0, data.length - 1]).range([0, width]);
+            var y = d3.scaleLinear().domain([0.5, 0.9]).range([height, 0]);
+
+            var area = d3.area()
+                .x(function (d, i) {
+                    return x(i);
+                })
+                .y0(height)
+                .y1(function (d) {
+                    return y(d);
+                })
+
+            svg.append("path")
+                .datum(data)
+                .attr("fill", "#3182bd")
+                .attr("stroke-width", 1.5)
+                .attr("opacity", 0.6)
+                .attr("d", area)
+
+            svg.append("text")
+                .attr("class", "y-label")
+                .attr("transform", "rotate(-90)")
+                .attr("y", function () {
+                    if (width < 500 && width > 400) {
+                        return 0 - margin.left + 0.1 * (margin.top / 2.5) * e.clientWidth / e.clientHeight
+                    }
+                    else if (width < 400) {
+                        return 0 - margin.left + 0.005 * (margin.top / 2.5) * e.clientWidth / e.clientHeight
+                    }
+                    else {
+                        return 0 - margin.left + (margin.top / 2.5) * e.clientWidth / e.clientHeight
+                    }
+                })
+                .attr("x", 0 - (height / 1.9))
+                .attr("dy", "1em")
+                .style("text-anchor", "middle")
+                .text("Coffee Price ($/lb)")
+                .style("font-weight", "bold")
+
+            function make_x_gridlines() {
+                return d3.axisBottom(xScale).ticks(8);
+            }
+
+            // gridlines in y axis function
+            function make_y_gridlines() {
+                return d3.axisLeft(yScale)
+                    .ticks(11)
+            }
+            svg.append("g")
+                .attr("class", "grid")
+                .attr("transform", "translate(0," + height + ")")
+                .call(make_x_gridlines()
+                    .tickSize(-height)
+                    .tickFormat("").ticks(8)
+                )
+
+            // add the Y gridlines
+            svg.append("g")
+                .attr("class", "grid")
+                .call(make_y_gridlines()
+                    .tickSize(-width)
+                    .tickFormat("")
+                )
+
+            svg
+                .append("text")
+                .attr("class", "title")
+                .attr("x", width / 3)
+                .attr("y", -length / margin.top)    // +20 to adjust position (lower)
+                .text("Robusta Coffee Price")
+                .attr("fill", "black")
+                .style("font-weight", "bold")
+
+        }
+
+    }
+
+
+    render() {
+
+        return (
+            <div id={'graph_box'}>
+            </div>
+        );
+    }
+}
+
+export default AreaChartMini;

ReactTool/frontend/src/components/barChart-mini.js

@@ -0,0 +1,162 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3'
+import { Container, Col, Row, Navbar, Button, ButtonGroup, ToggleButton, Form, InputGroup } from 'react-bootstrap';
+import '../App.css';
+import data from './data/BarGraph.csv';
+import img9 from '../components/data/Mini-VLAT/BarChart.png'
+
+
+
+class BarChartMini extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        //var e = document.getElementById("graph_box");
+        //e.addEventListener('resize', this.divResize.bind(this))
+        this.drawChart()
+    }
+
+    divResize(e) {
+        console.log('div was resized', e)
+    }
+
+    componentDidUpdate() {
+        this.drawChart()
+    }
+
+    drawChart() {
+        //https://www.speedtest.net/global-index (for October 21)
+        //https://www.d3-graph-gallery.com/graph/barplot_ordered.html
+        var e = document.getElementById("graph_box");
+        const length = Math.min(e.clientHeight, e.clientWidth)
+        if (length < 570) {
+            const margin = { top: length / 7, right: length / 9, bottom: length / 7, left: length / 9 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .append("svg")
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+            //svg.append("text").attr("class", 'bubbleTitle').text("Average Internet Speeds in Asia").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height)
+
+            var image = svg.append('image').attr('width', 1.2 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img9).attr('height', 1.1 * height)
+
+        }
+
+        else {
+            const margin = { top: length / 7, right: length / 7, bottom: length / 7, left: length / 7 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .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})`)
+
+            d3.csv(data).then(function (data) {
+                data.forEach(function (d) {
+                    d.Speed = parseFloat(d.Speed);
+                    d.Country = d.Country;
+                })
+                const x = d3.scaleBand()
+                    .range([0, width])
+                    .domain(data.map(d => d.Country))
+                    .padding(0.3);
+
+                svg.append("g")
+                    .attr("transform", `translate(0, ${height})`)
+                    .call(d3.axisBottom(x))
+                    .selectAll("text")
+                    .attr("y", 10)
+                    .attr("x", 9)
+                    .attr("class", "x-axis")
+                    .attr("dy", ".35em")
+                    .attr("transform", "rotate(40)")
+                    .style("text-anchor", "start")
+                // .attr("transform", "translate(10,-10)rotate(-180)")
+                //.style("text-anchor", "end");
+
+                // Add Y axis
+                const y = d3.scaleLinear()
+                    .domain([5, 100])
+                    .range([height, 0]);
+
+                svg.append("g")
+                    .call(d3.axisLeft(y).tickSizeOuter(0))
+                    .selectAll("text")
+                    .attr("class", "y-axis");
+
+                function make_y_axis() {
+                    return d3.axisLeft(y).ticks(11).tickSizeInner(-width + margin.left + margin.right);
+                }
+
+
+                svg.append("g")
+                    .attr("class", "grid")
+                    .call(make_y_axis()
+                        .tickSize(-width, 0, 0)
+                        .tickFormat("")
+                        .tickSizeOuter(0)
+                    )
+
+                // Bars
+                svg.selectAll("mybar")
+                    .data(data)
+                    .enter()
+                    .append("rect")
+                    .attr("x", d => x(d.Country))
+                    .attr("y", d => y(d.Speed))
+                    .attr("width", x.bandwidth())
+                    .attr("height", d => height - y(d.Speed))
+                    .attr("fill", "#3182bd")
+
+                svg.append("text")
+                    .attr("class", "y-label")
+                    .attr("transform", "rotate(-90)")
+                    .attr("y", function () {
+                        if (Math.min(length, height) < 500) {
+                            return 0.1 * margin.left + (- 3 * margin.top / 2.5) * e.clientWidth / e.clientHeight
+                        }
+                        else {
+                            return 0 - margin.left + (margin.top / 2.5) * e.clientWidth / e.clientHeight
+                        }
+                    })
+                    .attr("x", 0 - (height / 1.9))
+                    .attr("dy", "1em")
+                    .style("text-anchor", "middle")
+                    .text("Internet Speed (Mbps)")
+                    .style("font-weight", "bold")
+
+                svg
+                    .append("text")
+                    .attr("x", width / 4)
+                    .attr("y", -3 * length / margin.top)    // +20 to adjust position (lower)
+                    .text("Global Internet Speed (Mbps)")
+                    .attr("class", "title")
+                    .attr("fill", "black")
+                    .style("font-weight", "bold")
+
+            })
+        }
+
+
+    }
+
+
+    render() {
+
+        return (
+            <div id={'graph_box'}>
+            </div>
+        );
+    }
+}
+
+export default BarChartMini;

ReactTool/frontend/src/components/bubbleChart-mini.js

@@ -0,0 +1,381 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3'
+import { Container, Col, Row, Navbar, Button, ButtonGroup, ToggleButton, Form, InputGroup } from 'react-bootstrap';
+import '../App.css';
+import data from './data/BubbleChart.csv';
+import img3 from '../components/data/Mini-VLAT/BubbleChart.png'
+
+
+
+class BubbleChartMini extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        this.drawChart()
+    }
+    divResize(e) {
+        console.log('div was resized', e)
+    }
+
+    componentDidUpdate() {
+        this.drawChart()
+    }
+
+    drawChart() {
+        //https://en.wikipedia.org/wiki/List_of_metro_systems
+        //https://www.d3-graph-gallery.com/bubble
+        var e = document.getElementById("graph_box");
+        let length = Math.min(e.clientWidth, e.clientHeight);
+
+        if (length < 570) {
+            const margin = { top: length / 7, right: length / 9, bottom: length / 7, left: length / 9 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .append("svg")
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+
+            //svg.append("text").attr("class", 'bubbleTitle').text("Metro System of the World").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height)
+
+            var image = svg.append('image').attr('width', 1.2 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img3).attr('height', 1.1 * height)
+        }
+        else {
+            const margin = { top: length / 7, right: length / 7, bottom: length / 7, left: length / 7 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+
+
+            // append the svg object to the body of the page
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .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})`)
+
+
+            d3.csv(data).then(function (data) {
+                data.forEach(function (d) {
+                    d.City = d.City;
+                    d.Length = parseInt(d.Length);
+                    d.NumberofStations = parseInt(d.NumberofStations);
+                    d.Ridership = parseFloat(d.Ridership);
+                })
+                // Add X axis
+                var x = d3.scaleLinear()
+                    .domain([150, 800])
+                    .range([0, width]);
+                svg.append("g")
+                    .attr("class", "x-axis")
+                    .attr("transform", "translate(0," + height + ")")
+                    .call(d3.axisBottom(x))
+
+                // Add Y axis
+                var y = d3.scaleLinear()
+                    .domain([150, 500])
+                    .range([height, 0]);
+                svg.append("g")
+                    .attr("class", "y-axis")
+                    .call(d3.axisLeft(y))
+
+                // Add a scale for bubble size
+                var z = d3.scaleLinear()
+                    .domain([0, 5])
+                    .range([0, length / 20]);
+
+                // Add dots
+                var dots = svg.append('g')
+                    .selectAll("dot")
+                    .data(data)
+                    .enter()
+                    .append("circle")
+                    .attr("cx", function (d) {
+                        return x(d.NumberofStations);
+                    })
+                    .attr("cy", function (d) {
+                        return y(d.Length);
+                    })
+                    .attr("r", function (d) {
+                        return z(d.Ridership);
+                    })
+                    .style("fill", "#3182bd")
+                    .style("opacity", "0.7")
+                    .attr("stroke", "black")
+
+                svg.selectAll("g")
+                    .selectAll("text")
+                    .data(data)
+                    .enter()
+                    .append("text")
+                    .attr("class", "x-label")
+                    .attr("x", function (d) {
+                        if (d.City === "Tokyo") {
+                            return x(d.NumberofStations) + z(d.Ridership) + z(d.Ridership) / 4;
+                        }
+                        else {
+                            return x(d.NumberofStations) + z(d.Ridership) + z(d.Ridership) / 2;
+                        }
+                    })
+                    .attr("y", function (d) {
+                        if (d.City === "Tokyo") {
+                            return y(d.Length) + z(d.Ridership) - z(d.Ridership) / 2 - z(d.Ridership) / 2;
+                        }
+                        else {
+                            return y(d.Length) + z(d.Ridership) - z(d.Ridership) / 2;
+                        }
+                    })
+                    .attr("font-family", "sans-serif")
+                    .text(function (d) {
+                        return d.City;
+                    });
+
+
+                function make_x_gridlines() {
+                    return d3.axisBottom(x).ticks(8);
+                }
+
+                // gridlines in y axis function
+                function make_y_gridlines() {
+                    return d3.axisLeft(y)
+                        .ticks(11)
+                }
+                svg.append("g")
+                    .attr("class", "grid")
+                    .attr("transform", "translate(0," + height + ")")
+                    .call(make_x_gridlines()
+                        .tickSize(-height)
+                        .tickFormat("").ticks(11)
+                    )
+
+                // add the Y gridlines
+                svg.append("g")
+                    .attr("class", "grid")
+                    .call(make_y_gridlines()
+                        .tickSize(-width)
+                        .tickFormat("")
+                    )
+
+                var size = d3.scaleSqrt()
+                    .domain([0, 5])  // What's in the data, let's say it is percentage
+                    .range([0, 40])  // Size in pixel
+
+                // Add legend: circles
+                var valuesToShow = [3.5, 2.5, 1.5]
+                var xCircle = width / 6
+                var xLabel = height / 2
+
+                svg.append("text")
+                    .attr("class", "legend-title")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return width + (0.1 * width / margin.left)
+                        }
+                        else {
+                            return width + (2 * width / margin.left)
+                        }
+                    })
+                    .attr("y", function () {
+                        if (width < 400) {
+                            return 0.5 * height / margin.bottom
+                        }
+                        else {
+                            return height / margin.bottom
+                        }
+                    })
+                    .style("font-weight", "bold")
+                    .text("Ridership")
+
+                svg.append("text")
+                    .attr("class", "legend-title")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return 0.94 * width + width / height
+                        }
+                        else {
+                            return width + width / height
+                        }
+                    })
+                    .attr("y", function () {
+                        if (width < 400) {
+                            return height / (0.8 * margin.bottom)
+                        }
+                        else {
+                            return height / (0.3 * margin.bottom)
+                        }
+                    })
+                    .style("font-weight", "bold")
+                    .text("(bn per year)")
+
+                svg
+                    .selectAll("legend")
+                    .data(valuesToShow)
+                    .enter()
+                    .append("circle")
+                    .attr("cx", xCircle * 6 + margin.left / 3.5)
+                    .attr("cy", function () {
+                        if (width < 500) {
+                            return xLabel / 4.0;
+                        }
+                        else {
+                            return xLabel / 5.5;
+                        }
+                    })
+                    .attr("r", z(3.5))
+                    .style("fill", "none")
+                    .attr("stroke", "black")
+
+                svg
+                    .selectAll("legend")
+                    .data(valuesToShow)
+                    .enter()
+                    .append("circle")
+                    .attr("cx", xCircle * 6 + margin.left / 3.5)
+                    .attr("cy", function () {
+                        if (width < 500) {
+                            return xLabel / 4.0 + 2.8 * z(2.5)
+                        }
+                        else {
+                            return xLabel / 5.5 + 2.8 * z(2.5)
+                        }
+                    })
+                    .attr("r", z(2.5))
+                    .style("fill", "none")
+                    .attr("stroke", "black")
+
+                svg
+                    .selectAll("legend")
+                    .data(valuesToShow)
+                    .enter()
+                    .append("circle")
+                    .attr("cx", xCircle * 6 + margin.left / 3.5)
+                    .attr("cy", function () {
+                        if (width < 500) {
+                            return xLabel / 1.6 - (0.3) * z(2.5)
+                        }
+                        else {
+                            return xLabel / 1.9 - (0.3) * z(2.5);
+                        }
+                    })
+                    .attr("r", z(1.5))
+                    .style("fill", "none")
+                    .attr("stroke", "black")
+                // Add legend: labels
+                svg
+                    .selectAll("legend")
+                    .data(valuesToShow)
+                    .enter()
+                    .append("text")
+                    .attr("class", "legend-value")
+                    .attr('x', xCircle * 6 + margin.left / 1.7)
+                    .attr('y', function () {
+                        if (width < 500) {
+                            return xLabel / 4.0
+                        }
+                        else {
+                            return xLabel / 5.5
+                        }
+                    })
+                    .text(3.5)
+                    .attr('alignment-baseline', 'middle')
+
+                svg
+                    .selectAll("legend")
+                    .data(valuesToShow)
+                    .enter()
+                    .append("text")
+                    .attr("class", "legend-value")
+                    .attr('x', xCircle * 6 + margin.left / 1.7)
+                    .attr('y', function () {
+                        if (width < 500) {
+                            return xLabel / 4.0 + 2.8 * z(2.5);
+                        }
+                        else {
+                            return xLabel / 5.5 + 2.8 * z(2.5);
+                        }
+                    })
+                    .text(2.5)
+                    .attr('alignment-baseline', 'middle')
+
+                svg
+                    .selectAll("legend")
+                    .data(valuesToShow)
+                    .enter()
+                    .append("text")
+                    .attr("class", "legend-value")
+                    .attr('x', xCircle * 6 + margin.left / 1.7)
+                    .attr('y', function () {
+                        if (width < 500) {
+                            return xLabel / 1.6 - (0.3) * z(2.5);
+                        }
+                        else {
+                            return xLabel / 1.9 - (0.3) * z(2.5);
+                        }
+                    })
+                    .text(1.5)
+                    .attr('alignment-baseline', 'middle')
+
+                svg.append("text")
+                    .attr("class", "y-label")
+                    .attr("transform", "rotate(-90)")
+                    .attr("y", function () {
+                        if (width > 400 && width < 500) {
+                            return 0 - margin.left + (margin.top / 6.5) * e.clientWidth / e.clientHeight
+                        }
+                        else if (width < 400) {
+                            return 0 - margin.left + 0.05 * (margin.top / 9.5) * e.clientWidth / e.clientHeight
+                        }
+                        else {
+                            return 0 - margin.left + (margin.top / 2.5) * e.clientWidth / e.clientHeight
+                        }
+                    })
+                    .attr("x", 0 - (height / 1.9))
+                    .attr("dy", "1em")
+                    .style("text-anchor", "middle")
+                    .text("Total System Length (Km)")
+                    .style("font-weight", "bold")
+
+                svg.append("text")
+                    .attr("class", "x-label")
+                    .attr("transform", function () {
+                        if (width < 500) {
+                            return "translate(" + (width / 1.9) + " ," + (height + 1.4 * margin.top - (margin.top / 1.5)) + ")"
+                        }
+                        else {
+                            return "translate(" + (width / 1.9) + " ," + (height + 1.1 * margin.top - (margin.top / 1.5)) + ")"
+                        }
+                    })
+                    .style("text-anchor", "middle")
+                    .style("font-weight", "bold")
+                    .text("Number of Stations")
+
+                svg
+                    .append("text")
+                    .attr("class", "title")
+                    .attr("x", width / 3)
+                    .attr("y", -length / margin.top)    // +20 to adjust position (lower)
+                    .text("Metro Systems of the World")
+                    .attr("fill", "black")
+                    .style("font-weight", "bold")
+            })
+        }
+    }
+
+
+    render() {
+
+        return (
+            <div id={'graph_box'}>
+            </div>
+        );
+    }
+}
+
+export default BubbleChartMini;

ReactTool/frontend/src/components/choropleth-mini.js

@@ -0,0 +1,228 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3'
+import * as topojson from 'topojson';
+import { Container, Col, Row, Navbar, Button, ButtonGroup, ToggleButton, Form, InputGroup } from 'react-bootstrap';
+import '../App.css';
+import data_usa from './data/USA.json';
+import data from './data/Choropleth.csv';
+import img8 from '../components/data/Mini-VLAT/Choropleth_New.png'
+
+
+
+class ChoroplethMini extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        console.log(String(data_usa))
+        this.drawChart()
+    }
+    divResize(e) {
+        console.log('div was resized', e)
+    }
+
+    componentDidUpdate() {
+        this.drawChart()
+    }
+
+    drawChart() {
+        //https://www.statista.com/statistics/223675/state-unemployment-rate-in-the-us/
+        //https://bl.ocks.org/wboykinm/dbbe50d1023f90d4e241712395c27fb3
+        var e = document.getElementById("graph_box");
+        const length = Math.min(e.clientHeight, e.clientWidth)
+
+        const margin = { top: length / 5, right: length / 5, bottom: length / 5, left: length / 5 },
+            width = length - margin.left - margin.right,
+            height = length - margin.top - margin.bottom;
+
+        // append the svg object to the body of the page
+        //d3.select("#graph_box").selectAll("svg").remove();
+        d3.select("#graph_box").select("svg").remove();
+        const svg = d3.select("#graph_box")
+            .append("svg")
+            .attr("width", width + margin.left + margin.right)
+            .attr("height", height + margin.top + margin.bottom)
+            .append("g")
+
+        svg.append("text").attr("class", 'bubbleTitle').text("Unemployment Rates for States in 2020").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 0.9 * margin.top).style('font-size', 0.04 * height)
+
+        var image = svg.append('image').attr('width', 1.4 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img8).attr('height', 1.1 * height)
+
+        // else {
+        //     const margin = { top: length / 7, right: length / 7, bottom: length / 7, left: length / 7 },
+        //         width = length - margin.left - margin.right,
+        //         height = length - margin.top - margin.bottom;
+
+        //     // append the svg object to the body of the page
+        //     //d3.select("#graph_box").selectAll("svg").remove();
+        //     d3.select("#graph_box").select("svg").remove();
+        //     const svg = d3.select("#graph_box")
+        //         .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})`);
+
+        //     // svg.append("text").attr("class", 'bubbleTitle').text("Unemployment Rates for States in 2015").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height)
+
+        //     // var image = svg.append('image').attr('width', 1.4 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img8).attr('height', 1.1 * height)
+
+        //     var projection = d3.geoAlbersUsa()
+        //         .translate([width / 2, height / 2])
+        //         .scale(Math.min(e.clientHeight, e.clientWidth));
+
+        //     var path = d3.geoPath()
+        //         .projection(projection)
+
+        //     var lowColor = '#f7fbff'
+        //     var highColor = '#084594'
+
+        //     d3.csv(data).then(function (data) {
+        //         var names = {};
+        //         data.forEach(function (d) {
+        //             d.state = d.state;
+        //             d.value = parseFloat(d.value);
+        //             names[d.id] = d.code;
+        //         })
+        //         var dataArr = [];
+        //         for (var d = 0; d < data.length; d++) {
+        //             dataArr.push(parseFloat(data[d].value))
+        //         }
+        //         var minVal = d3.min(dataArr);
+        //         var maxVal = d3.max(dataArr);
+        //         var ramp = d3.scaleLinear().domain([minVal, maxVal]).range([lowColor, highColor])
+
+        //         for (var i = 0; i < data.length; i++) {
+        //             var dataState = data[i].state;
+        //             var dataVal = data[i].value;
+        //             var usa = topojson.feature(data_usa, data_usa.objects.states).features;
+        //             for (var j = 0; j < usa.length; j++) {
+        //                 var jsonState = usa[j].properties.name;
+        //                 if (dataState == jsonState) {
+        //                     usa[j].properties.value = dataVal;
+        //                     break;
+        //                 }
+        //             }
+        //         }
+        //         // Render the U.S. by using the path generator
+        //         svg.selectAll("path")
+        //             .data(usa)
+        //             .enter().append("path")
+        //             .attr("d", path)
+        //             .style("stroke", "#ffff")
+        //             .style("stroke-width", "1")
+        //             .style("fill", function (d) {
+        //                 return ramp(d.properties.value)
+        //             });
+
+        //         svg.selectAll("text").data(usa).enter().append("text")
+        //             .text(function (d) {
+        //                 return names[d.id];
+        //             })
+        //             .attr("x", function (d) {
+        //                 return path.centroid(d)[0];
+        //             })
+        //             .attr("y", function (d) {
+        //                 return path.centroid(d)[1];
+        //             })
+        //             .attr("class", "state-abbr")
+        //             .attr("text-anchor", "middle")
+        //             .attr("fill", "black")
+        //             .style("font-weight", "bold")
+
+        //         //var w = e.clientWidth/4, h = e.clientHeight/6;
+        //         //d3.select("body").select("svg").remove();
+        //         //d3.selectAll("svg").select(".legend").remove();
+
+        //         var legend = svg.append("defs")
+        //             .append("svg:linearGradient")
+        //             .attr("id", "gradient")
+        //             .attr("x1", "0%")
+        //             .attr("y1", "100%")
+        //             .attr("x2", "100%")
+        //             .attr("y2", "100%")
+        //             .attr("spreadMethod", "pad");
+
+        //         legend.append("stop")
+        //             .attr("offset", "0%")
+        //             .attr("stop-color", highColor)
+        //             .attr("stop-opacity", 1);
+
+        //         legend.append("stop")
+        //             .attr("offset", "100%")
+        //             .attr("stop-color", lowColor)
+        //             .attr("stop-opacity", 1);
+
+        //         if (width < 350) {
+        //             svg.append("rect")
+        //                 .attr("width", length / 4)
+        //                 .attr("height", length / 5.5 - margin.top)
+        //                 .style("fill", "url(#gradient)")
+        //                 .attr("transform", "translate(0," + (length / 5.4 - margin.left / 0.8) + ")");
+
+        //             svg.append("text").attr("x", 0).attr("y", length / 8.5 - 0.4 * margin.top).text("12%").style("font-weight", "bold").attr("class", "legend-value")
+        //             svg.append("text").attr("x", length / 20).attr("y", length / 8.5 - 0.4 * margin.top).text("10%").style("font-weight", "bold").attr("class", "legend-value")
+        //             svg.append("text").attr("x", length / 10).attr("y", length / 8.5 - 0.4 * margin.top).text("8%").style("font-weight", "bold").attr("class", "legend-value")
+        //             svg.append("text").attr("x", length / 7).attr("y", length / 8.5 - 0.4 * margin.top).text("6%").style("font-weight", "bold").attr("class", "legend-value")
+        //             svg.append("text").attr("x", length / 5).attr("y", length / 8.5 - 0.4 * margin.top).text("4%").style("font-weight", "bold").attr("class", "legend-value")
+        //         }
+        //         else {
+        //             svg.append("rect")
+        //                 .attr("width", length / 4)
+        //                 .attr("height", length / 5.5 - margin.top)
+        //                 .style("fill", "url(#gradient)")
+        //                 .attr("transform", "translate(0," + (length / 5.4 - margin.left / 1) + ")");
+
+        //             svg.append("text").attr("x", 0).attr("y", length / 6.5 - 0.4 * margin.top).text("12%").style("font-weight", "bold").attr("class", "legend-value")
+        //             svg.append("text").attr("x", length / 20).attr("y", length / 6.5 - 0.4 * margin.top).text("10%").style("font-weight", "bold").attr("class", "legend-value")
+        //             svg.append("text").attr("x", length / 10).attr("y", length / 6.5 - 0.4 * margin.top).text("8%").style("font-weight", "bold").attr("class", "legend-value")
+        //             svg.append("text").attr("x", length / 7).attr("y", length / 6.5 - 0.4 * margin.top).text("6%").style("font-weight", "bold").attr("class", "legend-value")
+        //             svg.append("text").attr("x", length / 5).attr("y", length / 6.5 - 0.4 * margin.top).text("4%").style("font-weight", "bold").attr("class", "legend-value")
+        //         }
+
+
+
+
+
+        //         /*
+        //         var y = d3.scaleLinear()
+        //             .range([length/4 - length/3.3, length/4.4 - length/(margin.left/4.0)])
+        //             //.domain([maxVal, minVal]);
+        //         //ar formatPercent = d3.format("%");
+        //         var yAxis = d3.axisBottom(y).tickValues(["12%", "11%", "10%", "9%"]);
+        //         svg.append("g")
+        //             //.attr("class", "axis")
+        //             .attr("transform", "translate(" + (length/5.45-margin.left/1.1) + "," + margin.right/0.75 + ")")
+        //             .call(yAxis)
+        //             .style("font-weight", "bold")
+        //             .style("font-size", 1.3*(length/margin.top)); */
+
+        //         svg
+        //             .append("text")
+        //             .attr("x", width / 5.5)
+        //             .attr("y", -length / margin.top)    // +20 to adjust position (lower)
+        //             .text("Unemployment Rate for States in 2020 ")
+        //             .attr("class", "title")
+        //             .attr("fill", "black")
+        //             .style("font-weight", "bold")
+
+        //     });
+
+        // }
+
+
+    }
+
+
+    render() {
+
+        return (
+            <div id={'graph_box'}>
+            </div>
+        );
+    }
+}
+
+export default ChoroplethMini;

ReactTool/frontend/src/components/data/100StackedBarGraph.csv

@@ -0,0 +1,5 @@
+Countries,Gold,Silver,Bronze
+U.S.A.,34.5,36.3,29.2
+Great Britain,33.8,32.3,33.9
+Japan,46.6,24.1,29.3
+Australia,37,15.2,47.8

ReactTool/frontend/src/components/data/AreaChart-2.csv

@@ -0,0 +1,25 @@
+date,value
+Jan-2018,88.65
+Feb-2018,89.24
+Mar-2018,88.18
+Apr-2018,88.31
+May-2018,88.74
+Jun-2018,86.07
+Jul-2018,84.42
+Aug-2018,80.74
+Sep-2018,76.70
+Oct-2018,85.32
+Nov-2018,83.52
+Dec-2018,77.57
+Jan-2019,78.24
+Feb-2019,78.65
+Mar-2019,76.96
+Apr-2019,73.28
+May-2019,71.12
+Jun-2019,74.02
+Jul-2019,73.93
+Aug-2019,70.78
+Sep-2019,70.64
+Oct-2019,68.63
+Nov-2019,73.28
+Dec-2019,73.22

ReactTool/frontend/src/components/data/AreaChart.csv

@@ -0,0 +1,979 @@
+date,value
+2013-04-28,135.98
+2013-04-29,147.49
+2013-04-30,146.93
+2013-05-01,139.89
+2013-05-02,125.6
+2013-05-03,108.13
+2013-05-04,115
+2013-05-05,118.8
+2013-05-06,124.66
+2013-05-07,113.44
+2013-05-08,115.78
+2013-05-09,113.46
+2013-05-10,122
+2013-05-11,118.68
+2013-05-12,117.45
+2013-05-13,118.7
+2013-05-14,119.8
+2013-05-15,115.81
+2013-05-16,118.76
+2013-05-17,125.3
+2013-05-18,125.25
+2013-05-19,124.5
+2013-05-20,123.62
+2013-05-21,123
+2013-05-22,124
+2013-05-23,126.93
+2013-05-24,133.85
+2013-05-25,133.22
+2013-05-26,136
+2013-05-27,135.47
+2013-05-28,130.58
+2013-05-29,132.59
+2013-05-30,132.25
+2013-05-31,129.9
+2013-06-01,129.78
+2013-06-02,129.4
+2013-06-03,122.5
+2013-06-04,123.84
+2013-06-05,123.47
+2013-06-06,123.1
+2013-06-07,119
+2013-06-08,111.42
+2013-06-09,108.99
+2013-06-10,110.1
+2013-06-11,109.6
+2013-06-12,111.79
+2013-06-13,110.3
+2013-06-14,104.7
+2013-06-15,103.7
+2013-06-16,101.6
+2013-06-17,102.21
+2013-06-18,111.11
+2013-06-19,110.22
+2013-06-20,114.3
+2013-06-21,114.99
+2013-06-22,109.96
+2013-06-23,108.8
+2013-06-24,108.33
+2013-06-25,106.47
+2013-06-26,105.49
+2013-06-27,104
+2013-06-28,101.74
+2013-06-29,99.99
+2013-06-30,98.12
+2013-07-01,97.66
+2013-07-02,92.3
+2013-07-03,90.98
+2013-07-04,83.11
+2013-07-05,80
+2013-07-06,75
+2013-07-07,74.56
+2013-07-08,80
+2013-07-09,78.3
+2013-07-10,87
+2013-07-11,90.28
+2013-07-12,104
+2013-07-13,98.25
+2013-07-14,98.7
+2013-07-15,101.9
+2013-07-16,99.86
+2013-07-17,99.97
+2013-07-18,98.8
+2013-07-19,95.2
+2013-07-20,93.1
+2013-07-21,91.95
+2013-07-22,92
+2013-07-23,96.82
+2013-07-24,95.99
+2013-07-25,97.33
+2013-07-26,97.47
+2013-07-27,97
+2013-07-28,100.58
+2013-07-29,102.5
+2013-07-30,107.99
+2013-07-31,111.34
+2013-08-01,108
+2013-08-02,108
+2013-08-03,105.78
+2013-08-04,105.95
+2013-08-05,107.77
+2013-08-06,107.38
+2013-08-07,106.75
+2013-08-08,106.75
+2013-08-09,105.75
+2013-08-10,103.9
+2013-08-11,105.19
+2013-08-12,108
+2013-08-13,109.35
+2013-08-14,115
+2013-08-15,113.25
+2013-08-16,112.3
+2013-08-17,113.75
+2013-08-18,114.69
+2013-08-19,123.06
+2013-08-20,123.01
+2013-08-21,124.91
+2013-08-22,123.5
+2013-08-23,122
+2013-08-24,121.39
+2013-08-25,122.99
+2013-08-26,122.75
+2013-08-27,127.24
+2013-08-28,127.32
+2013-08-29,123.7
+2013-08-30,135.75
+2013-08-31,140.89
+2013-09-01,145.81
+2013-09-02,146.5
+2013-09-03,138.34
+2013-09-04,144.5
+2013-09-05,131.44
+2013-09-06,127.34
+2013-09-07,125.94
+2013-09-08,124.72
+2013-09-09,129.06
+2013-09-10,129.74
+2013-09-11,137.83
+2013-09-12,136.08
+2013-09-13,137.58
+2013-09-14,135.85
+2013-09-15,131.44
+2013-09-16,132.72
+2013-09-17,132.76
+2013-09-18,133.2
+2013-09-19,131.77
+2013-09-20,135.62
+2013-09-21,128.61
+2013-09-22,133.94
+2013-09-23,132.72
+2013-09-24,127.46
+2013-09-25,129.69
+2013-09-26,134.93
+2013-09-27,134.74
+2013-09-28,135.63
+2013-09-29,140.61
+2013-09-30,138.35
+2013-10-01,134.63
+2013-10-02,133.59
+2013-10-03,123.63
+2013-10-04,130.09
+2013-10-05,130.44
+2013-10-06,129.66
+2013-10-07,130.27
+2013-10-08,127.47
+2013-10-09,131.75
+2013-10-10,131.5
+2013-10-11,131.81
+2013-10-12,135.66
+2013-10-13,138.66
+2013-10-14,144.12
+2013-10-15,145.39
+2013-10-16,152.23
+2013-10-17,147.42
+2013-10-18,155.96
+2013-10-19,177.48
+2013-10-20,174.91
+2013-10-21,184.82
+2013-10-22,196.27
+2013-10-23,213.62
+2013-10-24,217.42
+2013-10-25,198.87
+2013-10-26,188.41
+2013-10-27,196.44
+2013-10-28,198.62
+2013-10-29,204.79
+2013-10-30,209.16
+2013-10-31,205.18
+2013-11-01,206.65
+2013-11-02,207.76
+2013-11-03,215.05
+2013-11-04,231.01
+2013-11-05,250.66
+2013-11-06,263
+2013-11-07,304.17
+2013-11-08,338.66
+2013-11-09,370.82
+2013-11-10,350.7
+2013-11-11,351.27
+2013-11-12,362.81
+2013-11-13,414.05
+2013-11-14,425.9
+2013-11-15,437.89
+2013-11-16,450.26
+2013-11-17,500.58
+2013-11-18,703.78
+2013-11-19,806.11
+2013-11-20,599.65
+2013-11-21,733.4
+2013-11-22,780.85
+2013-11-23,844.97
+2013-11-24,807.36
+2013-11-25,810.68
+2013-11-26,928.54
+2013-11-27,1001.96
+2013-11-28,1077.56
+2013-11-29,1146.97
+2013-11-30,1156.14
+2013-12-01,1133.08
+2013-12-02,1055.42
+2013-12-03,1096
+2013-12-04,1156.12
+2013-12-05,1154.36
+2013-12-06,1042.38
+2013-12-07,854.64
+2013-12-08,802.51
+2013-12-09,921.93
+2013-12-10,997.23
+2013-12-11,1001.58
+2013-12-12,901.94
+2013-12-13,941.79
+2013-12-14,904.65
+2013-12-15,886.16
+2013-12-16,882.25
+2013-12-17,754.83
+2013-12-18,679.32
+2013-12-19,707.23
+2013-12-20,729.16
+2013-12-21,654.27
+2013-12-22,666.74
+2013-12-23,680.91
+2013-12-24,684.39
+2013-12-25,682.7
+2013-12-26,777.75
+2013-12-27,777.51
+2013-12-28,747.06
+2013-12-29,748.61
+2013-12-30,766.6
+2013-12-31,760.58
+2014-01-01,775.35
+2014-01-02,820.31
+2014-01-03,834.15
+2014-01-04,859.51
+2014-01-05,952.4
+2014-01-06,1017.12
+2014-01-07,965.74
+2014-01-08,870.68
+2014-01-09,864.36
+2014-01-10,871.19
+2014-01-11,921.48
+2014-01-12,928.52
+2014-01-13,861.29
+2014-01-14,855.69
+2014-01-15,872.81
+2014-01-16,866.16
+2014-01-17,842.91
+2014-01-18,841.49
+2014-01-19,870.96
+2014-01-20,886.39
+2014-01-21,881.2
+2014-01-22,870.15
+2014-01-23,851.57
+2014-01-24,822.43
+2014-01-25,861.45
+2014-01-26,897.02
+2014-01-27,893
+2014-01-28,832.5
+2014-01-29,836.87
+2014-01-30,830.5
+2014-01-31,831.87
+2014-02-01,853.52
+2014-02-02,844.72
+2014-02-03,826.48
+2014-02-04,840.17
+2014-02-05,837.32
+2014-02-06,819.81
+2014-02-07,783.2
+2014-02-08,721.82
+2014-02-09,712.27
+2014-02-10,703.71
+2014-02-11,712.46
+2014-02-12,672.9
+2014-02-13,657.99
+2014-02-14,691.72
+2014-02-15,661.84
+2014-02-16,665.1
+2014-02-17,656.95
+2014-02-18,645.76
+2014-02-19,631.77
+2014-02-20,627.73
+2014-02-21,582.96
+2014-02-22,614.48
+2014-02-23,639.91
+2014-02-24,607.61
+2014-02-25,541.38
+2014-02-26,603.8
+2014-02-27,594.05
+2014-02-28,584.14
+2014-03-01,573.38
+2014-03-02,570.48
+2014-03-03,702.91
+2014-03-04,696.22
+2014-03-05,674.28
+2014-03-06,669.77
+2014-03-07,665.34
+2014-03-08,635.14
+2014-03-09,643.95
+2014-03-10,644.76
+2014-03-11,638.42
+2014-03-12,648.03
+2014-03-13,644.2
+2014-03-14,639.53
+2014-03-15,639.14
+2014-03-16,637.52
+2014-03-17,632.68
+2014-03-18,622.39
+2014-03-19,622
+2014-03-20,609.75
+2014-03-21,604.59
+2014-03-22,572.55
+2014-03-23,570.24
+2014-03-24,586.56
+2014-03-25,585.44
+2014-03-26,590.03
+2014-03-27,580.56
+2014-03-28,526.02
+2014-03-29,504.86
+2014-03-30,492.37
+2014-03-31,483.02
+2014-04-01,495.34
+2014-04-02,495.05
+2014-04-03,449.56
+2014-04-04,454.65
+2014-04-05,463.57
+2014-04-06,466.32
+2014-04-07,462.56
+2014-04-08,457.42
+2014-04-09,455.73
+2014-04-10,443.37
+2014-04-11,429.77
+2014-04-12,439.61
+2014-04-13,427.4
+2014-04-14,469.75
+2014-04-15,519
+2014-04-16,542.38
+2014-04-17,533.52
+2014-04-18,498.6
+2014-04-19,503.56
+2014-04-20,510.87
+2014-04-21,510.57
+2014-04-22,503.22
+2014-04-23,493.25
+2014-04-24,500.46
+2014-04-25,500.3
+2014-04-26,464.54
+2014-04-27,459.33
+2014-04-28,447.53
+2014-04-29,451.64
+2014-04-30,451.1
+2014-05-01,460.61
+2014-05-02,457.93
+2014-05-03,449.4
+2014-05-04,439.77
+2014-05-05,440.97
+2014-05-06,448.04
+2014-05-07,446.13
+2014-05-08,448.4
+2014-05-09,452.69
+2014-05-10,455.77
+2014-05-11,455.34
+2014-05-12,442.26
+2014-05-13,441.98
+2014-05-14,446.66
+2014-05-15,449.8
+2014-05-16,450.66
+2014-05-17,451.98
+2014-05-18,449.77
+2014-05-19,447.56
+2014-05-20,491.44
+2014-05-21,494.37
+2014-05-22,525.36
+2014-05-23,541.96
+2014-05-24,525.17
+2014-05-25,576.48
+2014-05-26,588.39
+2014-05-27,589.52
+2014-05-28,578.62
+2014-05-29,577.1
+2014-05-30,618.46
+2014-05-31,624.72
+2014-06-01,671.51
+2014-06-02,665.5
+2014-06-03,674.11
+2014-06-04,668.56
+2014-06-05,663.53
+2014-06-06,661.37
+2014-06-07,656.94
+2014-06-08,658.88
+2014-06-09,657.7
+2014-06-10,659.62
+2014-06-11,657.04
+2014-06-12,638.11
+2014-06-13,615.14
+2014-06-14,601.27
+2014-06-15,592.94
+2014-06-16,608.72
+2014-06-17,610.89
+2014-06-18,615.88
+2014-06-19,612.24
+2014-06-20,599.75
+2014-06-21,599.46
+2014-06-22,606
+2014-06-23,603.21
+2014-06-24,596.97
+2014-06-25,583.6
+2014-06-26,581.63
+2014-06-27,600.12
+2014-06-28,604.47
+2014-06-29,604.08
+2014-06-30,645.15
+2014-07-01,657.86
+2014-07-02,656.68
+2014-07-03,650.77
+2014-07-04,648.43
+2014-07-05,633.22
+2014-07-06,638.65
+2014-07-07,637.16
+2014-07-08,626.7
+2014-07-09,627
+2014-07-10,626.12
+2014-07-11,632.09
+2014-07-12,636.66
+2014-07-13,634.73
+2014-07-14,627.34
+2014-07-15,625.14
+2014-07-16,623.09
+2014-07-17,626.29
+2014-07-18,629.21
+2014-07-19,629.17
+2014-07-20,628.56
+2014-07-21,624.09
+2014-07-22,624.3
+2014-07-23,624.43
+2014-07-24,620.43
+2014-07-25,607.07
+2014-07-26,602.09
+2014-07-27,598.94
+2014-07-28,594.57
+2014-07-29,588.38
+2014-07-30,585.12
+2014-07-31,586.24
+2014-08-01,597.92
+2014-08-02,594.91
+2014-08-03,589.15
+2014-08-04,591.95
+2014-08-05,589.87
+2014-08-06,587.49
+2014-08-07,591.1
+2014-08-08,598.12
+2014-08-09,592.47
+2014-08-10,594.46
+2014-08-11,591.51
+2014-08-12,576.95
+2014-08-13,573.03
+2014-08-14,546.24
+2014-08-15,518.18
+2014-08-16,521.48
+2014-08-17,520.19
+2014-08-18,499.37
+2014-08-19,485.71
+2014-08-20,518.28
+2014-08-21,531.9
+2014-08-22,521.48
+2014-08-23,514.3
+2014-08-24,512.89
+2014-08-25,508.22
+2014-08-26,512.69
+2014-08-27,520.71
+2014-08-28,516.16
+2014-08-29,511.69
+2014-08-30,509.31
+2014-08-31,504.88
+2014-09-01,485.31
+2014-09-02,482.99
+2014-09-03,481.71
+2014-09-04,493.93
+2014-09-05,490.64
+2014-09-06,488.6
+2014-09-07,488.07
+2014-09-08,489.83
+2014-09-09,477.38
+2014-09-10,487.47
+2014-09-11,482.35
+2014-09-12,479.63
+2014-09-13,482.12
+2014-09-14,479.85
+2014-09-15,478.62
+2014-09-16,475.64
+2014-09-17,468.17
+2014-09-18,456.86
+2014-09-19,427.83
+2014-09-20,423.3
+2014-09-21,412.43
+2014-09-22,406.92
+2014-09-23,441.56
+2014-09-24,436.11
+2014-09-25,423.52
+2014-09-26,414.94
+2014-09-27,406.62
+2014-09-28,401.02
+2014-09-29,385.21
+2014-09-30,390.98
+2014-10-01,391.38
+2014-10-02,385.5
+2014-10-03,377.69
+2014-10-04,364.49
+2014-10-05,341.8
+2014-10-06,345.13
+2014-10-07,339.25
+2014-10-08,354.36
+2014-10-09,382.73
+2014-10-10,375.07
+2014-10-11,367.19
+2014-10-12,379.43
+2014-10-13,397.23
+2014-10-14,411.7
+2014-10-15,402.23
+2014-10-16,398.81
+2014-10-17,385.48
+2014-10-18,395.16
+2014-10-19,393.94
+2014-10-20,390.08
+2014-10-21,392.65
+2014-10-22,388.58
+2014-10-23,385.05
+2014-10-24,364.35
+2014-10-25,359.86
+2014-10-26,359.22
+2014-10-27,358.63
+2014-10-28,359.98
+2014-10-29,357.83
+2014-10-30,350.91
+2014-10-31,348.05
+2014-11-01,340.53
+2014-11-02,329.05
+2014-11-03,334
+2014-11-04,331.77
+2014-11-05,343.37
+2014-11-06,352.97
+2014-11-07,352.73
+2014-11-08,347.03
+2014-11-09,363.63
+2014-11-10,374.82
+2014-11-11,371.31
+2014-11-12,429.72
+2014-11-13,457.09
+2014-11-14,419.25
+2014-11-15,405.53
+2014-11-16,390.8
+2014-11-17,410.2
+2014-11-18,392.4
+2014-11-19,386.48
+2014-11-20,382.02
+2014-11-21,357.88
+2014-11-22,364.84
+2014-11-23,370.85
+2014-11-24,387.21
+2014-11-25,394.7
+2014-11-26,377.7
+2014-11-27,373.99
+2014-11-28,382.84
+2014-11-29,387.6
+2014-11-30,382.53
+2014-12-01,383.66
+2014-12-02,384.04
+2014-12-03,383.03
+2014-12-04,378.65
+2014-12-05,379.19
+2014-12-06,378.45
+2014-12-07,376.29
+2014-12-08,376.03
+2014-12-09,363.07
+2014-12-10,352.38
+2014-12-11,361.36
+2014-12-12,352.98
+2014-12-13,352.38
+2014-12-14,353.32
+2014-12-15,351.81
+2014-12-16,345.86
+2014-12-17,333.95
+2014-12-18,323.71
+2014-12-19,318.53
+2014-12-20,330.32
+2014-12-21,329.63
+2014-12-22,334.12
+2014-12-23,336.29
+2014-12-24,334.74
+2014-12-25,322.67
+2014-12-26,331.42
+2014-12-27,328.91
+2014-12-28,320.03
+2014-12-29,320.27
+2014-12-30,314.81
+2014-12-31,320.19
+2015-01-01,320.44
+2015-01-02,315.84
+2015-01-03,315.15
+2015-01-04,287.23
+2015-01-05,278.34
+2015-01-06,287.55
+2015-01-07,298.75
+2015-01-08,294.13
+2015-01-09,291.11
+2015-01-10,288.13
+2015-01-11,279.64
+2015-01-12,272.2
+2015-01-13,268.28
+2015-01-14,223.89
+2015-01-15,229.07
+2015-01-16,221.59
+2015-01-17,211.73
+2015-01-18,218.69
+2015-01-19,216.73
+2015-01-20,215.24
+2015-01-21,227.79
+2015-01-22,237.02
+2015-01-23,234.84
+2015-01-24,248.21
+2015-01-25,255.07
+2015-01-26,309.38
+2015-01-27,275.48
+2015-01-28,266.54
+2015-01-29,238.71
+2015-01-30,242.85
+2015-01-31,233.5
+2015-02-01,231.57
+2015-02-02,242.18
+2015-02-03,245.96
+2015-02-04,230.06
+2015-02-05,239.41
+2015-02-06,230.51
+2015-02-07,230.3
+2015-02-08,229.44
+2015-02-09,223.98
+2015-02-10,221.81
+2015-02-11,223.41
+2015-02-12,222.2
+2015-02-13,240.26
+2015-02-14,259.81
+2015-02-15,265.61
+2015-02-16,239.52
+2015-02-17,245.78
+2015-02-18,244.25
+2015-02-19,242.67
+2015-02-20,247.1
+2015-02-21,255.32
+2015-02-22,246.39
+2015-02-23,240.11
+2015-02-24,239.9
+2015-02-25,239.34
+2015-02-26,237.71
+2015-02-27,256.65
+2015-02-28,254.69
+2015-03-01,261.66
+2015-03-02,276.3
+2015-03-03,285.8
+2015-03-04,284.23
+2015-03-05,281.67
+2015-03-06,277.61
+2015-03-07,277.85
+2015-03-08,277.86
+2015-03-09,292.7
+2015-03-10,300.04
+2015-03-11,297.39
+2015-03-12,297.09
+2015-03-13,294.5
+2015-03-14,286.34
+2015-03-15,286.53
+2015-03-16,294.11
+2015-03-17,292.37
+2015-03-18,285.34
+2015-03-19,264.24
+2015-03-20,264.85
+2015-03-21,262.2
+2015-03-22,269.75
+2015-03-23,277.3
+2015-03-24,267
+2015-03-25,249.19
+2015-03-26,254.35
+2015-03-27,256.81
+2015-03-28,254.21
+2015-03-29,253.14
+2015-03-30,249.24
+2015-03-31,248.73
+2015-04-01,247.54
+2015-04-02,254.46
+2015-04-03,256.04
+2015-04-04,255.26
+2015-04-05,260.68
+2015-04-06,261.8
+2015-04-07,255.81
+2015-04-08,253.85
+2015-04-09,246.12
+2015-04-10,243.69
+2015-04-11,239.54
+2015-04-12,237.73
+2015-04-13,236.94
+2015-04-14,224.98
+2015-04-15,223.83
+2015-04-16,229.67
+2015-04-17,228.91
+2015-04-18,224.32
+2015-04-19,226.35
+2015-04-20,226.35
+2015-04-21,235.27
+2015-04-22,237.91
+2015-04-23,236.47
+2015-04-24,236.31
+2015-04-25,232.56
+2015-04-26,226.94
+2015-04-27,233.31
+2015-04-28,229.5
+2015-04-29,227.04
+2015-04-30,239.56
+2015-05-01,238.97
+2015-05-02,235.73
+2015-05-03,243.24
+2015-05-04,242.64
+2015-05-05,239.2
+2015-05-06,236.45
+2015-05-07,239.1
+2015-05-08,246.28
+2015-05-09,247.8
+2015-05-10,244.07
+2015-05-11,244.27
+2015-05-12,242.88
+2015-05-13,243.7
+2015-05-14,237.8
+2015-05-15,238.75
+2015-05-16,237.7
+2015-05-17,238.03
+2015-05-18,237.21
+2015-05-19,234.15
+2015-05-20,234.68
+2015-05-21,236.24
+2015-05-22,240.97
+2015-05-23,241.03
+2015-05-24,241.98
+2015-05-25,241.02
+2015-05-26,238.24
+2015-05-27,238.64
+2015-05-28,237.82
+2015-05-29,237.52
+2015-05-30,237.09
+2015-05-31,233.25
+2015-06-01,231.71
+2015-06-02,226.42
+2015-06-03,227.4
+2015-06-04,226.58
+2015-06-05,225.97
+2015-06-06,225.72
+2015-06-07,226.19
+2015-06-08,229.46
+2015-06-09,230.95
+2015-06-10,229.78
+2015-06-11,230.29
+2015-06-12,231.06
+2015-06-13,232.65
+2015-06-14,234.86
+2015-06-15,237.84
+2015-06-16,251.74
+2015-06-17,256.85
+2015-06-18,252.11
+2015-06-19,250.98
+2015-06-20,245.83
+2015-06-21,245.22
+2015-06-22,247.92
+2015-06-23,247.3
+2015-06-24,244.34
+2015-06-25,243.33
+2015-06-26,243.75
+2015-06-27,251.34
+2015-06-28,251.17
+2015-06-29,257.17
+2015-06-30,267.87
+2015-07-01,265.17
+2015-07-02,261.63
+2015-07-03,257.08
+2015-07-04,261.46
+2015-07-05,274.51
+2015-07-06,277.42
+2015-07-07,271.34
+2015-07-08,272.97
+2015-07-09,272.33
+2015-07-10,294.59
+2015-07-11,298.51
+2015-07-12,314.39
+2015-07-13,310.95
+2015-07-14,296.15
+2015-07-15,293.25
+2015-07-16,291.18
+2015-07-17,280.28
+2015-07-18,282.53
+2015-07-19,275.67
+2015-07-20,278.98
+2015-07-21,280.55
+2015-07-22,277.67
+2015-07-23,278.11
+2015-07-24,289.25
+2015-07-25,290.73
+2015-07-26,293.05
+2015-07-27,297.77
+2015-07-28,296.65
+2015-07-29,294.54
+2015-07-30,290.13
+2015-07-31,288.96
+2015-08-01,284.93
+2015-08-02,283.03
+2015-08-03,285.47
+2015-08-04,285.71
+2015-08-05,285.5
+2015-08-06,281.91
+2015-08-07,280.39
+2015-08-08,279.93
+2015-08-09,267
+2015-08-10,267.03
+2015-08-11,270.39
+2015-08-12,270.67
+2015-08-13,266.23
+2015-08-14,267.47
+2015-08-15,266.67
+2015-08-16,262.44
+2015-08-17,260.5
+2015-08-18,257.99
+2015-08-19,237.41
+2015-08-20,237.37
+2015-08-21,236.43
+2015-08-22,234.96
+2015-08-23,232.71
+2015-08-24,228.14
+2015-08-25,226.32
+2015-08-26,231.18
+2015-08-27,228.64
+2015-08-28,235.22
+2015-08-29,233.22
+2015-08-30,232.07
+2015-08-31,231.96
+2015-09-01,231.22
+2015-09-02,230.58
+2015-09-03,229.6
+2015-09-04,230.9
+2015-09-05,236.14
+2015-09-06,242.91
+2015-09-07,242.11
+2015-09-08,245.78
+2015-09-09,244.42
+2015-09-10,241.29
+2015-09-11,241.17
+2015-09-12,240.12
+2015-09-13,235.94
+2015-09-14,232.44
+2015-09-15,259.18
+2015-09-16,231.22
+2015-09-17,230.28
+2015-09-18,234.35
+2015-09-19,233.21
+2015-09-20,232.37
+2015-09-21,231.22
+2015-09-22,232.39
+2015-09-23,231.84
+2015-09-24,235.65
+2015-09-25,237.43
+2015-09-26,235.4
+2015-09-27,234.53
+2015-09-28,239.34
+2015-09-29,239.8
+2015-09-30,237.73
+2015-10-01,238.44
+2015-10-02,238.54
+2015-10-03,239.31
+2015-10-04,238.97
+2015-10-05,240.38
+2015-10-06,246.94
+2015-10-07,246.68
+2015-10-08,244.25
+2015-10-09,244.23
+2015-10-10,245.32
+2015-10-11,247.24
+2015-10-12,247.45
+2015-10-13,250.24
+2015-10-14,254.28
+2015-10-15,255.96
+2015-10-16,266.13
+2015-10-17,273.58
+2015-10-18,271.67
+2015-10-19,264.82
+2015-10-20,270.83
+2015-10-21,270.77
+2015-10-22,276.51
+2015-10-23,278.68
+2015-10-24,281.71
+2015-10-25,294.06
+2015-10-26,285.3
+2015-10-27,296.21
+2015-10-28,306.33
+2015-10-29,318.17
+2015-10-30,334.17
+2015-10-31,332.78
+2015-11-01,327.47
+2015-11-02,365.36
+2015-11-03,417.9
+2015-11-04,495.56
+2015-11-05,447.56
+2015-11-06,395.84
+2015-11-07,390.59
+2015-11-08,389.89
+2015-11-09,385.28
+2015-11-10,381.39
+2015-11-11,340.58
+2015-11-12,345.08
+2015-11-13,340.91
+2015-11-14,338.18
+2015-11-15,334.66
+2015-11-16,331.63
+2015-11-17,338.35
+2015-11-18,336.53
+2015-11-19,335.33
+2015-11-20,326.47
+2015-11-21,328.16
+2015-11-22,327.01
+2015-11-23,325.12
+2015-11-24,323.06
+2015-11-25,329.13
+2015-11-26,366.76
+2015-11-27,363.59
+2015-11-28,359.54
+2015-11-29,371.94
+2015-11-30,382.36
+2015-12-01,378.93
+2015-12-02,362.23
+2015-12-03,370.27
+2015-12-04,363.52
+2015-12-05,389.79
+2015-12-06,402.81
+2015-12-07,399.97
+2015-12-08,415.56
+2015-12-09,423.12
+2015-12-10,419.51
+2015-12-11,451.94
+2015-12-12,469.1
+2015-12-13,441.68
+2015-12-14,447.14
+2015-12-15,465.32
+2015-12-16,465.21
+2015-12-17,457.86
+2015-12-18,465.18
+2015-12-19,465.58
+2015-12-20,462.64
+2015-12-21,444.73
+2015-12-22,443.69
+2015-12-23,444.53
+2015-12-24,458.46
+2015-12-25,458.31
+2015-12-26,457.49
+2015-12-27,424.01
+2015-12-28,429.77
+2015-12-29,432.98
+2015-12-30,434.39
+2015-12-31,432.92

ReactTool/frontend/src/components/data/BarGraph.csv

@@ -0,0 +1,15 @@
+Country,Speed
+Australia,79.24
+China,78.61
+Hong Kong,43.88
+India,13.45
+Indonesia,16.16
+Japan,40.51
+Malaysia,23.74
+New Zealand,92.05
+Singapore,68.32
+South Korea,98.93
+Sri Lanka,12.60
+Taiwan,51.67
+Thailand,31.38
+Vietnam,35.33

ReactTool/frontend/src/components/data/BubbleChart.csv

@@ -0,0 +1,12 @@
+City,Length,NumberofStations,Ridership
+Delhi,230,348.12,1.7
+Guangzhow,247,531.1,2.4
+Tokyo,249,316.3,3.6
+Mexico City,163,200.9,0.93
+Moscow,198,412.1,1.6
+London,317,439.2,0.335
+Seoul,436,547.9,2.7
+Paris,304,219.9,2.3
+Beijing,342,727,0.75
+Shanghai,369,743,2.8
+N.Y.C.,458,443.7,0.67

ReactTool/frontend/src/components/data/Choropleth.csv

@@ -0,0 +1,52 @@
+state,value,code,id
+Nebraska,4.2,NE,31
+South Dakota,4.6,SD,46
+Utah,4.7,UT,49
+North Dakota,5.1,ND,38
+Iowa,5.3,IA,19
+Idaho,5.4,ID,16
+Maine,5.4,ME,23
+Vermont,5.6,VT,50
+Wyoming,5.8,WY,56
+Alabama,5.9,AL,01
+Kansas,5.9,KS,20
+Montana,5.9,MT,30
+Arkansas,6.1,AR,05
+Missouri,6.1,MO,29
+Oklahoma,6.1,OK,40
+Minnesota,6.2,MN,27
+South Carolina,6.2,SC,45
+Virginia,6.2,VA,51
+Wisconsin,6.3,WI,55
+Georgia,6.5,GA,13
+Kentucky,6.6,KY,21
+New Hampshire,6.7,NH,33
+Maryland,6.8,MD,24
+Indiana,7.1,IN,18
+Colorado,7.3,CO,08
+North Carolina,7.3,NC,37
+Tennessee,7.5,TN,47
+Oregon,7.6,OR,41
+Texas,7.6,TX,48
+Florida,7.7,FL,12
+Alaska,7.8,AK,02
+Delaware,7.8,DE,10
+Arizona,7.9,AZ,04
+Connecticut,7.9,CT,09
+District of Columbia,8,DC,11
+Mississippi,8.1,MS,28
+Ohio,8.1,OH,39
+Louisiana,8.3,LA,22
+West Virginia,8.3,WV,54
+New Mexico,8.4,NM,35
+Washington,8.4,WA,53
+Massachusetts,8.9,MA,25
+Pennsylvania,9.1,PN,42
+Rhode Island,9.4,RI,44
+Illinois,9.5,IL,17
+New Jersey,9.8,NJ,34
+Michigan,9.9,MI,26
+New York,10,NY,36
+California,10.1,CA,06
+Hawaii,11.6,HI,15
+Nevada,12.8,NV,32

ReactTool/frontend/src/components/data/LineChart.csv

@@ -0,0 +1,13 @@
+Month,Price
+Jan-2020,57.52
+Feb-2020,50.54
+Mar-2020,29.21
+Apr-2020,16.55
+May-2020,28.56
+Jun-2020,38.31
+Jul-2020,40.71
+Aug-2020,42.34
+Sep-2020,39.63
+Oct-2020,39.4
+Nov-2020,40.94
+Dec-2020,47.02

ReactTool/frontend/src/components/data/PieChart.csv

@@ -0,0 +1,7 @@
+Brand,Share
+Samsung,25
+Xiaomi,16
+Apple,15
+Oppo,10
+Vivo,10
+Others,24

ReactTool/frontend/src/components/data/Scatterplot.csv

@@ -0,0 +1,86 @@
+Height,Weight
+65.78331,112.9925
+71.51521,136.4873
+69.39874,153.0269
+68.2166,142.3354
+67.78781,144.2971
+68.69784,123.3024
+69.80204,141.4947
+70.01472,136.4623
+67.90265,112.3723
+66.78236,120.6672
+66.48769,127.4516
+67.62333,114.143
+68.30248,125.6107
+67.11656,122.4618
+68.27967,116.0866
+71.0916,139.9975
+66.461,129.5023
+68.64927,142.9733
+71.23033,137.9025
+67.13118,124.0449
+67.83379,141.2807
+68.87881,143.5392
+63.48115,97.90191
+68.42187,129.5027
+67.62804,141.8501
+67.20864,129.7244
+70.84235,142.4235
+67.49434,131.5502
+66.53401,108.3324
+65.44098,113.8922
+69.5233,103.3016
+65.8132,120.7536
+67.8163,125.7886
+70.59505,136.2225
+71.80484,140.1015
+69.20613,128.7487
+66.80368,141.7994
+67.65893,121.2319
+67.80701,131.3478
+64.04535,106.7115
+68.57463,124.3598
+65.18357,124.8591
+69.65814,139.6711
+67.96731,137.3696
+65.98088,106.4499
+68.67249,128.7639
+66.88088,145.6837
+67.69868,116.819
+69.82117,143.6215
+69.08817,134.9325
+69.91479,147.0219
+67.33182,126.3285
+70.26939,125.4839
+69.10344,115.7084
+65.38356,123.4892
+70.18447,147.8926
+70.40617,155.8987
+66.54376,128.0742
+66.36418,119.3701
+67.537,133.8148
+66.50418,128.7325
+68.99958,137.5453
+68.30355,129.7604
+67.01255,128.824
+70.80592,135.3165
+68.21951,109.6113
+69.05914,142.4684
+67.73103,132.749
+67.21568,103.5275
+67.36763,124.7299
+65.27033,129.3137
+70.84278,134.0175
+69.92442,140.3969
+64.28508,102.8351
+68.2452,128.5214
+66.35708,120.2991
+68.36275,138.6036
+65.4769,132.9574
+69.71947,115.6233
+67.72554,122.524
+68.63941,134.6254
+66.78405,121.8986
+70.05147,155.3767
+66.27848,128.9418
+69.20198,129.1013

ReactTool/frontend/src/components/data/StackedArea.csv

@@ -0,0 +1,7 @@
+Year,Amelia,Isla,Olivia
+2009,3625,1908,5201
+2010,4227,2384,5279
+2011,5054,2849,4938
+2012,7061,3501,4585
+2013,5570,3526,4598
+2014,5327,4012,4724

ReactTool/frontend/src/components/data/StackedBarGraph.csv

@@ -0,0 +1,11 @@
+City,Sandwich,Water,Peanut,Soda,Vodka
+Helsinki,38.2,6.4,12.1,6.4,5.5
+Oslo,29.4,7.4,15.8,7.1,5.1
+Seoul,27.4,7.4,6.1,7.9,9.9
+Zurich,31.3,5.9,10.8,5.6,4.3
+Stockholm,28.4,4.1,11.3,4.9,5
+Paris,23.6,6.8,12.6,6.8,7.0
+N.Y.C.,24.2,3.9,16.8,3.9,7.1
+Singapore,19.4,5.2,14.8,6.6,6.2
+Toronto,20.8,5.4,18.2,3.4,8.0
+Copenhagen,24.3,2.8,10.8,5.0,3.7

ReactTool/frontend/src/components/data/Treemap.json

@@ -0,0 +1,161 @@
+{
+  "children": [
+    {
+      "name": "Search/Portal",
+      "children": [
+        {
+          "name": "Google",
+          "group": "A",
+          "value": 349758716,
+          "colname": "level3"
+        },
+        {
+          "name": "MSN/WindowsLive/Bing",
+          "group": "A",
+          "value": 271929865,
+          "colname": "level3"
+        },
+        {
+          "name": "Yahoo!",
+          "group": "C",
+          "value": 233479611,
+          "colname": "level3"
+        },
+        {
+          "name": "Ask",
+          "group": "C",
+          "value": 220410208,
+          "colname": "level3"
+        }
+      ],
+      "colname": "level2"
+    },
+    {
+      "name": "Social Network",
+      "children": [
+        {
+          "name": "Facebook",
+          "group": "C",
+          "value": 218860914,
+          "colname": "level3"
+        },
+        {
+          "name": "Twitter",
+          "group": "A",
+          "value": 42138681,
+          "colname": "level3"
+        },
+        {
+          "name": "Orkut",
+          "group": "B",
+          "value": 28419073,
+          "colname": "level3"
+        },
+        {
+          "name": "LinkedIn",
+          "group": "B",
+          "value": 24389451,
+          "colname": "level3"
+        }
+      ],
+      "colname": "level2"
+    },
+    {
+      "name": "Software",
+      "children": [
+        {
+          "name": "Mozilla",
+          "group": "B",
+          "value": 67949332,
+          "colname": "level3"
+        },
+        {
+          "name": "Real Network",
+          "group": "A",
+          "value": 61513698,
+          "colname": "level3"
+        },
+        {
+          "name": "Adobe",
+          "group": "A",
+          "value": 53002496,
+          "colname": "level3"
+        },
+        {
+          "name": "Videolan",
+          "group": "D",
+          "value": 24850138,
+          "colname": "level3"
+        },
+        {
+          "name": "Conduit",
+          "group": "D",
+          "value": 20610183,
+          "colname": "level3"
+        }
+      ],
+      "colname": "level2"
+    },
+    {
+      "name": "Retail",
+      "children": [
+        {
+          "name": "eBay",
+          "group": "B",
+          "value": 121740943,
+          "colname": "level3"
+        },
+        {
+          "name": "Amazon",
+          "group": "A",
+          "value": 111945278,
+          "colname": "level3"
+        },
+        {
+          "name": "Wal-Mart",
+          "group": "A",
+          "value": 35538645,
+          "colname": "level3"
+        },
+        {
+          "name": "Craigslist",
+          "group": "D",
+          "value": 35537183,
+          "colname": "level3"
+        },
+        {
+          "name": "Target",
+          "group": "D",
+          "value": 23366341,
+          "colname": "level3"
+        }
+      ],
+      "colname": "level2"
+    },
+    {
+      "name": "Computer",
+      "children": [
+        {
+          "name": "Apple",
+          "group": "B",
+          "value": 119232527,
+          "colname": "level3"
+        },
+        {
+          "name": "Dell",
+          "group": "A",
+          "value": 23324607,
+          "colname": "level3"
+        },
+        {
+          "name": "HP",
+          "group": "A",
+          "value": 20721035,
+          "colname": "level3"
+        }
+      ],
+      "colname": "level2"
+    }
+  ],
+  "name": "CEO"
+}

ReactTool/frontend/src/components/data/scatter-2.csv

@@ -0,0 +1,86 @@
+Height,Weight
+167.0812,51.25136008
+181.6608,61.91077208
+176.276,69.41318376
+173.2788,64.56428528
+172.1866,65.4533256
+174.498,55.9278936
+177.292,64.17873208
+177.8254,61.89716432
+172.466,50.97013304
+169.6212,54.73494664
+168.8846,57.8103004
+171.7548,51.77299088
+173.482,56.97569112
+170.4848,55.54687632
+173.4312,52.65749528
+180.5686,63.50288
+168.8084,58.740164
+174.371,64.85004824
+180.9242,62.5503368
+170.5102,56.26355168
+172.2882,64.08347776
+174.9552,65.10859568
+161.2392,44.4066568
+173.7868,58.740164
+171.7802,64.3420252
+170.7134,58.83995424
+179.9336,64.60057264
+171.4246,59.6700276
+168.9862,49.13762136
+166.2176,51.65959288
+176.5808,46.8560536
+167.1574,54.771234
+172.2628,57.05733768
+179.324,61.78830224
+182.372,63.5482392
+175.7934,58.39997
+169.672,64.3193456
+171.8564,54.98895816
+172.2374,59.5793092
+162.687,48.40280232
+174.1678,56.40870112
+165.5572,56.63549712
+176.9364,63.35319464
+172.6438,62.30993304
+167.5892,48.2848684
+174.4218,58.40450592
+169.8752,66.07928256
+171.958,52.98861744
+177.3428,65.14488304
+175.4886,61.20316856
+177.5714,66.68709584
+171.0182,57.30227736
+178.4858,56.91672416
+175.514,52.48513032
+166.0652,56.01407608
+178.2572,67.08172088
+178.8414,70.7149928
+169.0116,58.09152744
+168.5544,54.14527704
+171.5516,60.69514552
+168.91,58.39089816
+175.26,62.3915796
+173.482,58.85809792
+170.2054,58.43172144
+179.8574,61.38006944
+173.2788,49.71821912
+175.4124,64.62325224
+172.0342,60.214338
+170.7388,73.96037976
+171.1198,56.57653016
+165.7858,58.65398152
+179.9336,60.79039984
+177.5968,63.6843168
+163.2966,46.64740128
+173.355,58.29564384
+168.5544,54.5671176
+173.6344,62.8678512
+166.3192,60.30959232
+177.0888,52.44430704
+172.0342,55.57409184
+174.3456,61.06709096
+169.6212,55.2928648
+177.927,70.47912496
+168.3512,58.48615248
+175.768,58.5587272

ReactTool/frontend/src/components/data/scatter.csv

@@ -0,0 +1,86 @@
+height,weight,height(cm),weight(kg)
+65.78,112.99,167.0812,51.25136008
+71.52,136.49,181.6608,61.91077208
+69.4,153.03,176.276,69.41318376
+68.22,142.34,173.2788,64.56428528
+67.79,144.3,172.1866,65.4533256
+68.7,123.3,174.498,55.9278936
+69.8,141.49,177.292,64.17873208
+70.01,136.46,177.8254,61.89716432
+67.9,112.37,172.466,50.97013304
+66.78,120.67,169.6212,54.73494664
+66.49,127.45,168.8846,57.8103004
+67.62,114.14,171.7548,51.77299088
+68.3,125.61,173.482,56.97569112
+67.12,122.46,170.4848,55.54687632
+68.28,116.09,173.4312,52.65749528
+71.09,140,180.5686,63.50288
+66.46,129.5,168.8084,58.740164
+68.65,142.97,174.371,64.85004824
+71.23,137.9,180.9242,62.5503368
+67.13,124.04,170.5102,56.26355168
+67.83,141.28,172.2882,64.08347776
+68.88,143.54,174.9552,65.10859568
+63.48,97.9,161.2392,44.4066568
+68.42,129.5,173.7868,58.740164
+67.63,141.85,171.7802,64.3420252
+67.21,129.72,170.7134,58.83995424
+70.84,142.42,179.9336,64.60057264
+67.49,131.55,171.4246,59.6700276
+66.53,108.33,168.9862,49.13762136
+65.44,113.89,166.2176,51.65959288
+69.52,103.3,176.5808,46.8560536
+65.81,120.75,167.1574,54.771234
+67.82,125.79,172.2628,57.05733768
+70.6,136.22,179.324,61.78830224
+71.8,140.1,182.372,63.5482392
+69.21,128.75,175.7934,58.39997
+66.8,141.8,169.672,64.3193456
+67.66,121.23,171.8564,54.98895816
+67.81,131.35,172.2374,59.5793092
+64.05,106.71,162.687,48.40280232
+68.57,124.36,174.1678,56.40870112
+65.18,124.86,165.5572,56.63549712
+69.66,139.67,176.9364,63.35319464
+67.97,137.37,172.6438,62.30993304
+65.98,106.45,167.5892,48.2848684
+68.67,128.76,174.4218,58.40450592
+66.88,145.68,169.8752,66.07928256
+67.7,116.82,171.958,52.98861744
+69.82,143.62,177.3428,65.14488304
+69.09,134.93,175.4886,61.20316856
+69.91,147.02,177.5714,66.68709584
+67.33,126.33,171.0182,57.30227736
+70.27,125.48,178.4858,56.91672416
+69.1,115.71,175.514,52.48513032
+65.38,123.49,166.0652,56.01407608
+70.18,147.89,178.2572,67.08172088
+70.41,155.9,178.8414,70.7149928
+66.54,128.07,169.0116,58.09152744
+66.36,119.37,168.5544,54.14527704
+67.54,133.81,171.5516,60.69514552
+66.5,128.73,168.91,58.39089816
+69,137.55,175.26,62.3915796
+68.3,129.76,173.482,58.85809792
+67.01,128.82,170.2054,58.43172144
+70.81,135.32,179.8574,61.38006944
+68.22,109.61,173.2788,49.71821912
+69.06,142.47,175.4124,64.62325224
+67.73,132.75,172.0342,60.214338
+67.22,103.53,170.7388,46.96037976
+67.37,124.73,171.1198,56.57653016
+65.27,129.31,165.7858,58.65398152
+70.84,134.02,179.9336,60.79039984
+69.92,140.4,177.5968,63.6843168
+64.29,102.84,163.2966,46.64740128
+68.25,128.52,173.355,58.29564384
+66.36,120.3,168.5544,54.5671176
+68.36,138.6,173.6344,62.8678512
+65.48,132.96,166.3192,60.30959232
+69.72,115.62,177.0888,52.44430704
+67.73,122.52,172.0342,55.57409184
+68.64,134.63,174.3456,61.06709096
+66.78,121.9,169.6212,55.2928648
+70.05,155.38,177.927,70.47912496
+66.28,128.94,168.3512,58.48615248
+69.2,129.1,175.768,58.5587272

ReactTool/frontend/src/components/histogram-mini.js

@@ -0,0 +1,192 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3'
+import * as topojson from 'topojson';
+import { Container, Col, Row, Navbar, Button, ButtonGroup, ToggleButton, Form, InputGroup } from 'react-bootstrap';
+import '../App.css';
+import data from './data/Histogram-3-2.csv';
+import img6 from '../components/data/Mini-VLAT/Histogram.png'
+
+
+
+class HistogramMini extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        this.drawChart()
+    }
+    divResize(e) {
+        console.log('div was resized', e)
+    }
+
+    componentDidUpdate() {
+        this.drawChart()
+    }
+
+    drawChart() {
+        //https://www.kaggle.com/arashnic/taxi-pricing-with-mobility-analytics
+        //https://www.d3-graph-gallery.com/graph/histogram_basic.html
+        var e = document.getElementById("graph_box");
+        const length = Math.min(e.clientHeight, e.clientWidth)
+        if (length < 570) {
+            const margin = { top: length / 7, right: length / 9, bottom: length / 7, left: length / 9 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+
+            // append the svg object to the body of the page
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .append("svg")
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+
+            //svg.append("text").attr("class", 'bubbleTitle').text("Taxi Passenger Ratings").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.0 * margin.top).style('font-size', 0.04 * height)
+
+            var image = svg.append('image').attr('width', 1.4 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img6).attr('height', 1.1 * height)
+
+        }
+
+        else {
+            const margin = { top: length / 7, right: length / 7, bottom: length / 7, left: length / 7 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+
+            // append the svg object to the body of the page
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .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})`);
+
+            // svg.append("text").attr("class", 'bubbleTitle').text("Taxi Passenger Ratings").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.0 * margin.top).style('font-size', 0.04 * height)
+
+            // var image = svg.append('image').attr('width', 1.4 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img6).attr('height', 1.1 * height)
+
+            d3.csv(data).then(function (data) {
+                data.forEach(function (d) {
+                    d.Trip_Distance = parseFloat(d.Trip_Distance);
+                })
+                var x = d3.scaleLinear()
+                    .domain([d3.min(data, function (d) { return d.Trip_Distance }), 110])     // can use this instead of 1000 to have the max of data: d3.max(data, function(d) { return +d.price })
+                    .range([0, width]);
+
+                svg.append("g")
+                    .attr("class", "x-axis")
+                    .attr("transform", "translate(0," + height + ")")
+                    .call(d3.axisBottom(x))
+                //.style("font-size", 1.3*(length/margin.top));
+
+                var histogram = d3.histogram()
+                    .value(function (d) {
+                        return d.Trip_Distance;
+                    })   // I need to give the vector of value
+                    .domain(x.domain())  // then the domain of the graphic
+                    .thresholds(x.ticks(10)); // then the numbers of bins
+
+                var bins = histogram(data);
+
+                var y = d3.scaleLinear()
+                    .range([height, 0]);
+                y.domain([0, 260]);   // d3.hist has to be called before the Y axis obviously
+
+                svg.append("g")
+                    .attr("class", "y-axis")
+                    .call(d3.axisLeft(y))
+                //.style("font-size", 1.3*(length/margin.top));
+
+                function make_y_axis() {
+                    return d3.axisLeft(y).ticks(11).tickSizeInner(-width + margin.left + margin.right);
+                }
+
+
+                svg.append("g")
+                    .attr("class", "grid")
+                    .call(make_y_axis()
+                        .tickSize(-width, 0, 0)
+                        .tickFormat("")
+                        .tickSizeOuter(0)
+                    )
+
+                // append the bar rectangles to the svg element
+                svg.selectAll("rect")
+                    .data(bins)
+                    .enter()
+                    .append("rect")
+                    .attr("x", 1)
+                    .attr("transform", function (d) {
+                        return "translate(" + x(d.x0) + "," + y(d.length) + ")";
+                    })
+                    .attr("width", function (d) {
+                        return x(d.x1) - x(d.x0);
+                    })
+                    .attr("height", function (d) {
+                        return height - y(d.length);
+                    })
+                    .style("fill", "#3182bd")
+
+                svg.append("text")
+                    .attr("class", "y-label")
+                    .attr("transform", "rotate(-90)")
+                    .attr("y", function () {
+                        if (width < 500 && width > 400) {
+                            return -1.4 * margin.left + (margin.top / 2.5) * e.clientWidth / e.clientHeight
+                        }
+                        else if (width < 400) {
+                            return -1.7 * margin.left + (margin.top / 2.5) * e.clientWidth / e.clientHeight
+                        }
+                        else {
+                            return - margin.left + (margin.top / 2.5) * e.clientWidth / e.clientHeight
+                        }
+                    })
+                    .attr("x", - (height / 1.9))
+                    .attr("dy", "1em")
+                    .style("text-anchor", "middle")
+                    .text("Number of Customers")
+                    .style("font-weight", "bold")
+
+                svg.append("text")
+                    .attr("class", "x-label")
+                    .attr("transform", function () {
+                        if (width < 500 && width > 400) {
+                            return "translate(" + (width / 1.9) + " ," + (height + 1.3 * margin.top - (margin.top / 1.5)) + ")"
+                        }
+                        else if (width < 400) {
+                            return "translate(" + (width / 1.9) + " ," + (height + 1.5 * margin.top - (margin.top / 1.5)) + ")"
+                        }
+                        else {
+                            return "translate(" + (width / 1.9) + " ," + (height + 1.1 * margin.top - (margin.top / 1.5)) + ")"
+                        }
+                    })
+                    .style("text-anchor", "middle")
+                    .style("font-weight", "bold")
+                    .text("Distance (in Km)")
+
+                svg
+                    .append("text")
+                    .attr("class", "title")
+                    .attr("x", width / 3)
+                    .attr("y", -length / margin.top)    // +20 to adjust position (lower)
+                    .text("Trip Distance and Customers")
+                    .attr("fill", "black")
+                    .style("font-weight", "bold")
+            })
+        }
+
+    }
+
+
+    render() {
+
+        return (
+            <div id={'graph_box'}>
+            </div>
+        );
+    }
+}
+
+export default HistogramMini;

ReactTool/frontend/src/components/linechart-mini.js

@@ -0,0 +1,254 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3'
+import * as topojson from 'topojson';
+import { Container, Col, Row, Navbar, Button, ButtonGroup, ToggleButton, Form, InputGroup } from 'react-bootstrap';
+import '../App.css';
+import img12 from '../components/data/Mini-VLAT/LineChart.png';
+
+
+class LineChartMini extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        this.drawChart()
+    }
+    divResize(e) {
+        console.log('div was resized', e)
+    }
+
+    componentDidUpdate() {
+        this.drawChart()
+    }
+
+    drawChart() {
+        //https://www.eia.gov/dnav/pet/hist/LeafHandler.ashx?n=PET&s=RWTC&f=M
+        //https://www.d3-graph-gallery.com/line
+
+        var e = document.getElementById("graph_box");
+        const length = Math.min(e.clientHeight, e.clientWidth)
+
+        if (length < 570) {
+            const margin = { top: length / 7, right: length / 9, bottom: length / 7, left: length / 9 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .append("svg")
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+
+            //svg.append("text").attr("class", 'bubbleTitle').text("Monthly Oil Price History in 2015").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height)
+
+            var image = svg.append('image').attr('width', 1.2 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img12).attr('height', 1.1 * height)
+
+        }
+        else {
+            const margin = { top: length / 7, right: length / 7, bottom: length / 7, left: length / 7 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .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})`);
+            // svg.append("text").attr("class", 'bubbleTitle').text("Monthly Oil Price History in 2015").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height)
+
+            // var image = svg.append('image').attr('width', 1.2 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img12).attr('height', 1.1 * height)
+
+            var data = [57.52, 50.54, 29.21, 16.55, 28.56, 38.31, 40.71, 42.34, 39.63, 39.4, 40.94, 47.02]
+
+
+            var xScale = d3.scaleTime()
+                .domain([new Date(2020, 0, 1), new Date(2020, 11, 31)]).range([0, width])
+
+            svg.append("g")
+                //.attr("class", "axis")
+                .attr("transform", `translate(0, ${height})`)
+                .call(d3.axisBottom(xScale).tickFormat(d3.timeFormat("%B")))
+                /*
+                .style("font-size", function() {
+                    if (length < 700){
+                        return (length/margin.top)
+                    }
+                    else {
+                        return 1.3*(length/margin.top)
+                    }
+                }) */
+                .selectAll("text")
+                .attr("class", "x-axis")
+                .attr("transform", function () {
+                    if (width < 500) {
+                        return "rotate(25)"
+                    }
+                    else {
+                        return "rotate(15)"
+                    }
+                })
+                .attr("x", function () {
+                    if (length < 900) {
+                        return 2 * length / margin.right
+                    }
+                })
+                .attr("y", function () {
+                    if (width < 950 && width > 400) {
+                        return (2.5) * length / margin.right
+                    }
+                    else if (width < 400) {
+                        return (1.5) * length / margin.right
+                    }
+                })
+                .attr("dy", function () {
+                    return "0.3em"
+                })
+
+
+            // Add Y axis
+            var yScale = d3.scaleLinear()
+                .domain([0, 60])
+                .range([height, 0]);
+
+            svg.append("g")
+                //.attr("class", "axis")
+                .call(d3.axisLeft(yScale))
+                .selectAll("text")
+                .attr("class", "y-axis");
+
+            var x = d3.scaleLinear().domain([0, data.length]).range([0, width]);
+            var y = d3.scaleLinear().domain([0, 60]).range([height, 0]);
+            var line = d3.line()
+                .x(function (d, i) {
+                    return x(i);
+                })
+                .y(function (d) {
+                    return y(d);
+                })
+
+            // Add the line
+            svg.append("path")
+                .datum(data)
+                .attr("fill", "none")
+                .attr("stroke", "#3182bd")
+                .attr("stroke-width", function () {
+                    if (length < 700) {
+                        return 1.5
+                    }
+                    else {
+                        return 2.5
+                    }
+                })
+                .attr("d", line(data));
+
+            function make_x_gridlines() {
+                return d3.axisBottom(xScale)
+                    .ticks(11)
+            }
+
+            // gridlines in y axis function
+            function make_y_gridlines() {
+                return d3.axisLeft(yScale)
+                    .ticks(11)
+            }
+            svg.append("g")
+                .attr("class", "grid")
+                .attr("transform", "translate(0," + height + ")")
+                .call(make_x_gridlines()
+                    .tickSize(-height)
+                    .tickFormat("")
+                )
+
+            // add the Y gridlines
+            svg.append("g")
+                .attr("class", "grid")
+                .call(make_y_gridlines()
+                    .tickSize(-width)
+                    .tickFormat("")
+                )
+
+            svg.selectAll("myCircles")
+                .data(data)
+                .enter()
+                .append("circle")
+                .attr("fill", "#3182bd")
+                .attr("stroke", "none")
+                .attr("cx", function (d, i) { return x(i) })
+                .attr("cy", function (d) { return y(d) })
+                .attr("r", function () {
+                    if (length < 700) {
+                        return "2";
+                    }
+                    else {
+                        return "4"
+                    }
+                })
+
+            svg.append("text")
+                .attr("class", "y-label")
+                .attr("transform", "rotate(-90)")
+                .attr("y", function () {
+                    if (width < 500 && width > 400) {
+                        return 0 - margin.left + (margin.top / 5.5) * e.clientWidth / e.clientHeight
+                    }
+                    else if (width < 400) {
+                        return 0 - margin.left + (margin.top / 8.5) * e.clientWidth / e.clientHeight
+                    }
+                    else {
+                        return 0 - margin.left + (margin.top / 2.5) * e.clientWidth / e.clientHeight
+                    }
+                })
+                .attr("x", 0 - (height / 1.9))
+                .attr("dy", "1em")
+                .style("text-anchor", "middle")
+                .text("Oil Price ($)")
+                .style("font-weight", "bold")
+
+            svg
+                .append("text")
+                .attr("class", "title")
+                .attr("x", width / 2.5)
+                .attr("y", -length / margin.top)    // +20 to adjust position (lower)
+                .text("Oil Prices in 2020")
+                .attr("fill", "black")
+                .style("font-weight", "bold")
+
+            svg.append("text")
+                .attr("class", "x-label")
+                .attr("transform", function () {
+                    if (width < 500 && width > 400) {
+                        return "translate(" + (width / 1.9) + " ," + (height + 1.6 * margin.top - (margin.top / 1.5)) + ")"
+                    }
+                    else if (width < 400) {
+                        return "translate(" + (width / 1.9) + " ," + (height + 1.6 * margin.top - (margin.top / 1.5)) + ")"
+                    }
+                    else {
+                        return "translate(" + (width / 1.9) + " ," + (height + 1.1 * margin.top - (margin.top / 1.5)) + ")"
+                    }
+                })
+                .style("text-anchor", "middle")
+                .style("font-weight", "bold")
+                .text("Month")
+
+
+        }
+
+
+    }
+
+
+    render() {
+
+        return (
+            <div id={'graph_box'}>
+            </div>
+        );
+    }
+}
+
+export default LineChartMini;

ReactTool/frontend/src/components/pieChart-mini.js

@@ -0,0 +1,147 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3'
+import * as topojson from 'topojson';
+import { Container, Col, Row, Navbar, Button, ButtonGroup, ToggleButton, Form, InputGroup } from 'react-bootstrap';
+import '../App.css';
+import data from './data/Histogram.csv';
+import img11 from '../components/data/Mini-VLAT/PieChart.png'
+
+
+
+class PieChartMini extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        this.drawChart()
+    }
+    divResize(e) {
+        console.log('div was resized', e)
+    }
+
+    componentDidUpdate() {
+        this.drawChart()
+    }
+
+    drawChart() {
+        //https://www.gartner.com/en/newsroom/press-releases/2021-09-01-2q21-smartphone-market-share
+        //https://www.d3-graph-gallery.com/pie
+        var e = document.getElementById("graph_box");
+        const length = Math.min(e.clientHeight, e.clientWidth)
+        if (length < 570) {
+            const margin = { top: length / 7, right: length / 9, bottom: length / 7, left: length / 9 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .append("svg")
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+            //svg.append("text").attr("class", 'bubbleTitle').text("Global Smartphone Market Share (%)").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height)
+
+            var image = svg.append('image').attr('width', 1.2 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img11).attr('height', 1.1 * height)
+        }
+
+        else {
+            //var e = document.getElementById("graph_box");
+            var width = e.clientWidth, height = e.clientHeight, margin = width / 5;
+
+            var radius = Math.min(width, height) / 2 - margin;
+
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .append("svg")
+                .attr("width", width)
+                .attr("height", height)
+                .append("g")
+                .attr("transform", `translate(${width / 2}, ${height / 2})`);
+
+            var data = { Samsung: 17.6, Xiaomi: 15.5, Apple: 15.0, Oppo: 10.2, Vivo: 9.8, Others: 31.9 }
+
+            const color = d3.scaleOrdinal()
+                .range(['#0868ac', '#f03b20', '#feb24c', '#78c679', '#ffffb2', '#756bb1'])
+
+            const pie = d3.pie()
+                .value(function (d) {
+                    return d[1]
+                })
+
+            const data_ready = pie(Object.entries(data))
+
+            const arcGenerator = d3.arc()
+                .innerRadius(0)
+                .outerRadius(function () {
+                    if (width < 500 && width > 400) {
+                        return 1.2 * radius;
+                    }
+                    else if (width < 400) {
+                        return 3.5 * radius
+                    }
+                    else {
+                        return radius;
+                    }
+                })
+
+            svg
+                .selectAll('mySlices')
+                .data(data_ready)
+                .join('path')
+                .attr('d', arcGenerator)
+                .attr('fill', function (d) {
+                    return (color(d.data[0]))
+                })
+                .attr("stroke", "black")
+                .style("stroke-width", "0px")
+                .style("opacity", 0.7)
+
+            // Now add the annotation. Use the centroid method to get the best coordinates
+            svg
+                .selectAll('mySlices')
+                .data(data_ready)
+                .join('text')
+                .text(function (d) {
+                    return d.data[0]
+                })
+                .attr("transform", function (d) {
+                    return `translate(${arcGenerator.centroid(d)})`
+                })
+                .style("fill", "#252525")
+                .style("text-anchor", "middle")
+                .style('font-weight', "bold")
+                .attr("class", "x-label")
+
+            svg
+                .append("text")
+                .attr("class", "title")
+                .attr("x", -width / 5.5)
+                .attr("y", -width / 3)    // +20 to adjust position (lower)
+                .text("Global Smartphone Market Share in 2021")
+                .attr("fill", "black")
+                .style("font-weight", "bold")
+
+        }
+
+
+    }
+
+
+    render() {
+
+        return (
+            <div id={'graph_box'}>
+            </div>
+        );
+    }
+}
+
+export default PieChartMini;
+
+
+function pieChart() {
+
+
+}

ReactTool/frontend/src/components/quiz.js

@@ -0,0 +1,233 @@
+const questions = [
+    {
+        question: "What was the price range of a barrel of oil in 2020?",
+        optionA: "$16.55 - $57.52",
+        optionB: "$19.52 - $59.00",
+        optionC: "$23.43 - $60.72",
+        optionD: "$21.82 - $87.52",
+        correctOption: "optionA",
+    },
+
+    {
+        question: "What is the range of the average internet speed in Asia?",
+        optionA: "5.50Mbps - 30.60Mbps",
+        optionB: "7.00Mbps - 29.40Mbps",
+        optionC: "6.40Mbps - 27.38Mbps",
+        optionD: "5.50Mbps - 28.60Mbps",
+        correctOption: "optionD",
+    },
+    {
+        question: "What is the cost of peanuts in Las Vegas?",
+        optionA: "$9.0",
+        optionB: "$6.1",
+        optionC: "$10.3",
+        optionD: "$4.3",
+        correctOption: "optionB",
+    },
+
+    {
+        question: "What is the approval rating of Republicans among the people who have the education level of Postgraduate Study?",
+        optionA: "35%",
+        optionB: "27%",
+        optionC: "23%",
+        optionD: "20%",
+        correctOption: "optionB",
+    },
+
+    {
+        question: "About what is the global smartphone market share of Samsung?",
+        optionA: "20%",
+        optionB: "25%",
+        optionC: "30%",
+        optionD: "15%",
+        correctOption: "optionB",
+    },
+
+    {
+        question: "How many people have rated the taxi between 4.2 and 4.4?",
+        optionA: "270",
+        optionB: "190",
+        optionC: "300",
+        optionD: "290",
+        correctOption: "optionB",
+    },
+
+    {
+        question: "There is a negative linear relationship between the height and the weight of the 85 males.",
+        optionA: "True",
+        optionB: "False",
+        optionC: "",
+        optionD: "",
+        correctOption: "optionB",
+    },
+
+    {
+        question: "What was the average price of a pound of coffee beans in September 2013?",
+        optionA: "$5.15",
+        optionB: "$6.2",
+        optionC: "$4.8",
+        optionD: "$4.3",
+        correctOption: "optionA",
+    },
+
+    {
+        question: "What was the number of girls named 'Olivia' in 2010 in the UK?",
+        optionA: "2000",
+        optionB: "2500",
+        optionC: "1700",
+        optionD: "2400",
+        correctOption: "optionC",
+    },
+
+    {
+        question: "What is the total length of the metro system in Beijing?",
+        optionA: "525 km",
+        optionB: "495 km",
+        optionC: "305 km",
+        optionD: "475 km",
+        correctOption: "optionA",
+    },
+
+    {
+        question: "In 2015, the unemployment rate for Washington (WA) was higher than that of Wisconsin (WI)",
+        optionA: "True",
+        optionB: "False",
+        optionC: "",
+        optionD: "",
+        correctOption: "optionA",
+    },
+
+    {
+        question: "For which website was the number of unique visitors the largest in 2010?",
+        optionA: "Amazon",
+        optionB: "Chase",
+        optionC: "PayPal",
+        optionD: "Citibank",
+        correctOption: "optionD",
+    }
+
+]
+var graph_box = document.getElementById('graph_box');
+var question = document.getElementById("question");
+var option1 = document.querySelector("#option1");
+var option2 = document.querySelector("#option2");
+var option3 = document.querySelector("#option3");
+var option4 = document.querySelector("#option4");
+var next = document.querySelector("#sub-button");
+var answers = document.querySelectorAll('.answer');
+var showScore = document.querySelector('#showScore');
+var cont = document.querySelector(".continue");
+var timeCount = document.querySelector(".timer");
+
+var questionCount = 0;
+var score = 0;
+var counter;
+var loadQuestion = () => {
+    var questionList = questions[questionCount];
+    question.innerText = questionList.question;
+    option1.innerText = questionList.optionA;
+    option2.innerText = questionList.optionB;
+    option3.innerText = questionList.optionC;
+    option4.innerText = questionList.optionD;
+}
+loadQuestion();
+
+
+var checkAnswer = () => {
+    var answer;
+    answers.forEach((curAnsElem) => {
+        if (curAnsElem.checked) {
+            answer = curAnsElem.id;
+        }
+    })
+    return answer;
+}
+
+next.addEventListener('click', () => {
+    var checkedAnswer = checkAnswer();
+    console.log(checkedAnswer);
+
+    if (checkedAnswer === questions[questionCount].correctOption) {
+        score++;
+        console.log("Score:" + score);
+        sessionStorage.setItem("scores", score)
+    };
+
+    questionCount++;
+    deSelectAll();
+
+    if (questionCount < questions.length) {
+
+        if (questionCount === 1) {
+            BarChart();
+            loadQuestion();
+        }
+        else if (questionCount === 2) {
+            StackedBar();
+            loadQuestion();
+        }
+        else if (questionCount === 3) {
+            stacked100();
+            loadQuestion();
+
+        }
+        else if (questionCount === 4) {
+            pieChart();
+            loadQuestion();
+        }
+        else if (questionCount === 5) {
+            histogram();
+            loadQuestion();
+        }
+        else if (questionCount === 6) {
+            scatterplot();
+            loadQuestion();
+            document.getElementById("optionC").disabled = true;
+            document.getElementById("optionD").disabled = true;
+        }
+        else if (questionCount === 7) {
+            areaChart();
+            loadQuestion();
+            document.getElementById("optionC").disabled = false;
+            document.getElementById("optionD").disabled = false;
+        }
+        else if (questionCount === 8) {
+            stackedArea();
+            loadQuestion();
+            document.getElementById("optionC").disabled = false;
+            document.getElementById("optionD").disabled = false;
+        }
+        else if (questionCount === 9) {
+            bubbleChart();
+            loadQuestion();
+            document.getElementById("optionC").disabled = false;
+            document.getElementById("optionD").disabled = false;
+        }
+        else if (questionCount === 10) {
+            choropleth();
+            loadQuestion();
+            document.getElementById("optionC").disabled = true;
+            document.getElementById("optionD").disabled = true;
+        }
+        else if (questionCount === 11) {
+            treemap();
+            loadQuestion();
+            document.getElementById("optionC").disabled = false;
+            document.getElementById("optionD").disabled = false;
+        }
+        else {
+            loadQuestion();
+        }
+        console.log(questionCount);
+    }
+    else {
+        location.href = "score.html"
+    }
+})
+
+var deSelectAll = () => {
+    answers.forEach((curAnsElem) => curAnsElem.checked = false);
+}
+if (questionCount === 0) {
+    linechart();
+}

ReactTool/frontend/src/components/scatterplot-mini.js

@@ -0,0 +1,181 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3'
+import * as topojson from 'topojson';
+import { Container, Col, Row, Navbar, Button, ButtonGroup, ToggleButton, Form, InputGroup } from 'react-bootstrap';
+import '../App.css';
+import data from './data/scatter-2.csv';
+import img1 from '../components/data/Mini-VLAT/Scatterplot.png'
+
+
+
+class ScatterPlotMini extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        this.drawChart()
+    }
+    divResize(e) {
+        console.log('div was resized', e)
+    }
+
+    componentDidUpdate() {
+        this.drawChart()
+    }
+
+    drawChart() {
+        //http://wiki.stat.ucla.edu/socr/index.php/SOCR_Data_Dinov_020108_HeightsWeights
+        //https://www.d3-graph-gallery.com/graph/scatter_basic.html
+        var e = document.getElementById("graph_box");
+        const length = Math.min(e.clientHeight, e.clientWidth)
+
+        if (length < 570) {
+
+            const margin = { top: length / 7, right: length / 9, bottom: length / 7, left: length / 9 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+            // append the svg object to the body of the page
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .append("svg")
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+            //svg.append("text").attr("class", 'bubbleTitle').text("Height and Weight of 85 Males").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height)
+
+            var image = svg.append('image').attr('width', 1.2 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img1).attr('height', 1.1 * height)
+        }
+        else {
+            const margin = { top: length / 7, right: length / 7, bottom: length / 7, left: length / 7 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+            // append the svg object to the body of the page
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .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})`);
+
+
+            d3.csv(data).then(function (data) {
+                data.forEach(function (d) {
+                    d.Height = parseFloat(d.Height);
+                    d.Weight = parseFloat(d.Weight);
+                })
+                const x = d3.scaleLinear()
+                    .domain([155, 190])
+                    .range([0, width]);
+
+                svg.append("g")
+                    .attr("class", "x-axis")
+                    .attr("transform", `translate(0, ${height})`)
+                    .call(d3.axisBottom(x))
+
+                // Add Y axis
+                const y = d3.scaleLinear()
+                    .domain([40, 75])
+                    .range([height, 0]);
+
+                svg.append("g")
+                    .attr("class", "y-axis")
+                    .call(d3.axisLeft(y))
+
+
+                function make_x_gridlines() {
+                    return d3.axisBottom(x)
+                        .ticks(5)
+                }
+
+                // gridlines in y axis function
+                function make_y_gridlines() {
+                    return d3.axisLeft(y)
+                        .ticks(8)
+                }
+
+                svg.append("g")
+                    .attr("class", "grid")
+                    .attr("transform", "translate(0," + height + ")")
+                    .call(make_x_gridlines()
+                        .tickSize(-height)
+                        .tickFormat("")
+                    )
+
+                // add the Y gridlines
+                svg.append("g")
+                    .attr("class", "grid")
+                    .call(make_y_gridlines()
+                        .tickSize(-width)
+                        .tickFormat("")
+                    )
+                // Add dots
+                svg.append('g')
+                    .selectAll("dot")
+                    .data(data)
+                    .join("circle")
+                    .attr("cx", function (d) { return x(d.Height); })
+                    .attr("cy", function (d) { return y(d.Weight); })
+                    .attr("r", 3.0)
+                    .style("fill", "#3182bd")
+
+                svg.append("text")
+                    .attr("class", "y-label")
+                    .attr("transform", "rotate(-90)")
+                    .attr("y", function () {
+                        if (width < 400) {
+                            return 0 - margin.left + (margin.top / 8.5) * e.clientWidth / e.clientHeight
+                        }
+                        else {
+                            return 0 - margin.left + (margin.top / 2.5) * e.clientWidth / e.clientHeight
+                        }
+                    })
+                    .attr("x", 0 - (height / 1.9))
+                    .attr("dy", "1em")
+                    .style("text-anchor", "middle")
+                    .text("Weight (kg)")
+                    .style("font-weight", "bold")
+
+                svg
+                    .append("text")
+                    .attr("class", "title")
+                    .attr("x", width / 4)
+                    .attr("y", -length / margin.top)    // +20 to adjust position (lower)
+                    .text("Weight and Height of 85 Individuals")
+                    .attr("fill", "black")
+                    .style("font-weight", "bold")
+
+                svg.append("text")
+                    .attr("class", "x-label")
+                    .attr("transform", function () {
+                        if (width < 500) {
+                            return "translate(" + (width / 1.9) + " ," + (height + 1.4 * margin.top - (margin.top / 1.5)) + ")"
+                        }
+                        else {
+                            return "translate(" + (width / 1.9) + " ," + (height + 1.1 * margin.top - (margin.top / 1.5)) + ")"
+                        }
+                    })
+                    .style("text-anchor", "middle")
+                    .style("font-weight", "bold")
+                    .text("Height (cm)")
+
+
+            })
+        }
+
+
+    }
+
+
+    render() {
+
+        return (
+            <div id={'graph_box'}>
+            </div>
+        );
+    }
+}
+
+export default ScatterPlotMini;

ReactTool/frontend/src/components/stacked100bar-mini.js

@@ -0,0 +1,386 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3'
+import * as topojson from 'topojson';
+import { Container, Col, Row, Navbar, Button, ButtonGroup, ToggleButton, Form, InputGroup } from 'react-bootstrap';
+import '../App.css';
+import data from './data/100StackedBarGraph.csv';
+import img5 from '../components/data/Mini-VLAT/Stacked100.png'
+
+
+
+class StackedBarChartMini extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        this.drawChart()
+    }
+    divResize(e) {
+        console.log('div was resized', e)
+    }
+
+    componentDidUpdate() {
+        this.drawChart()
+    }
+
+    drawChart() {
+        //https://olympics.com/en/olympic-games/tokyo-2020/medals
+        //https://www.d3-graph-gallery.com/graph/barplot_stacked_percent.html
+        var e = document.getElementById("graph_box");
+        const length = Math.min(e.clientHeight, e.clientWidth)
+        if (length < 570) {
+            const margin = { top: length / 7, right: length / 9, bottom: length / 7, left: length / 9 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .append("svg")
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+            //svg.append("text").attr("class", 'bubbleTitle').text("Election Exit Poll of California State by Education Level").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height)
+
+            var image = svg.append('image').attr('width', 1.2 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img5).attr('height', 1.1 * height)
+        }
+
+        else {
+            //var e = document.getElementById("graph_box");
+            //const length = Math.min(e.clientHeight, e.clientWidth)
+            const margin = { top: length / 7, right: length / 7, bottom: length / 7, left: length / 7 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+            // append the svg object to the body of the page
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .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})`);
+
+            d3.csv(data).then(function (data) {
+                data.forEach(function (d) {
+                    d.Gold = parseFloat(d.Gold);
+                    d.Silver = parseFloat(d.Silver);
+                    d.Bronze = parseFloat(d.Bronze);
+                    d.Countries = d.Countries;
+                })
+
+                var subgroups = data.columns.slice(1);
+
+                var groups = data.map(d => (d.Countries));
+
+
+                var xScale = d3.scaleBand().domain(groups).range([0, width]).padding([0.2])
+
+                svg.append("g")
+                    .attr("class", "x-axis")
+                    .attr("transform", `translate(0, ${height})`)
+                    .call(d3.axisBottom(xScale).tickSizeOuter(0));
+
+                var yScale = d3.scaleLinear().domain([0, 100]).range([height, 0]);
+
+                svg.append("g").attr("class", "y-axis").call(d3.axisLeft(yScale));
+
+                const color = d3.scaleOrdinal()
+                    .domain(subgroups)
+                    .range(['#feb24c', '#bdbdbd', '#cd7f32'])
+
+                //stack the data? --> stack per subgroup
+                const stackedData = d3.stack()
+                    .keys(subgroups)
+                    (data)
+
+                data.forEach(function (d) {
+                    // Compute the total
+                    var tot = 0
+                    for (var i in subgroups) {
+                        const n = subgroups[i];
+                        tot += +d[n]
+                    }
+                    // Now normalize
+                    for (i in subgroups) {
+                        const n = subgroups[i];
+                        d[n] = d[n] / tot * 100
+                    }
+                })
+
+                function make_y_axis() {
+                    return d3.axisLeft(yScale).ticks(11).tickSizeInner(-width + margin.left + margin.right);
+                }
+
+
+                svg.append("g")
+                    .attr("class", "grid")
+                    .call(make_y_axis()
+                        .tickSize(-width, 0, 0)
+                        .tickFormat("")
+                        .tickSizeOuter(0)
+                    )
+                svg.append("g")
+                    .selectAll("g")
+                    // Enter in the stack data = loop key per key = group per group
+                    .data(stackedData)
+                    .join("g")
+                    .attr("fill", d => color(d.key))
+                    .selectAll("rect")
+                    // enter a second time = loop subgroup per subgroup to add all rectangles
+                    .data(d => d)
+                    .join("rect")
+                    .attr("x", d => xScale(d.data.Countries) + length / 50)
+                    .attr("y", d => yScale(d[1]))
+                    .attr("height", d => yScale(d[0]) - yScale(d[1]))
+                    .attr("width", xScale.bandwidth() - length / 60)
+
+                svg.append("text")
+                    .attr("class", "y-label")
+                    .attr("transform", "rotate(-90)")
+                    .attr("y", function () {
+                        if (width < 500 && width > 400) {
+                            return 0 - margin.left + (margin.top / 7.5) * e.clientWidth / e.clientHeight
+                        }
+                        else if (width < 400) {
+                            return 0 - margin.left + (margin.top / 9.5) * e.clientWidth / e.clientHeight
+                        }
+                        else {
+                            return 0 - margin.left + (margin.top / 2.5) * e.clientWidth / e.clientHeight
+                        }
+                    })
+                    .attr("x", 0 - (height / 1.9))
+                    .attr("dy", "1em")
+                    .style("text-anchor", "middle")
+                    .text("Olympic Medals (%)")
+                    .style("font-weight", "bold")
+
+                svg.append("text")
+                    .attr("class", "x-label")
+                    .attr("transform", function () {
+                        if (width < 500) {
+                            return "translate(" + (width / 1.9) + " ," + (height + 1.5 * margin.top - (margin.top / 1.5)) + ")"
+                        }
+                        else {
+                            return "translate(" + (width / 1.9) + " ," + (height + 1.1 * margin.top - (margin.top / 1.5)) + ")"
+                        }
+                    })
+                    .style("text-anchor", "middle")
+                    .style("font-weight", "bold")
+                    .text("Countries")
+
+                //var legend = svg.append('g').attr('class', 'legend').attr('transform', 'translate(' + (margin.left/2) + ',0)');
+
+                svg.append("rect")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return width + (width / margin.left)
+                        }
+                        else {
+                            return width + (2 * width / margin.left)
+                        }
+                    })
+                    .attr("y", height / margin.bottom)
+                    .attr("width", function () {
+                        if (window.innerWidth < 450 && window.innerWidth > 400) {
+                            return 2.0 * length / margin.bottom;
+                        }
+                        else if (window.innerWidth < 400) {
+                            return 1.0 * length / margin.bottom;
+                        }
+                        else {
+                            return 2.5 * length / margin.bottom
+                        }
+                    })
+                    .attr("height", function () {
+                        if (window.innerWidth < 450 && window.innerWidth > 400) {
+                            return 2.0 * length / margin.bottom;
+                        }
+                        else if (window.innerWidth < 400) {
+                            return 1.0 * length / margin.bottom;
+                        }
+                        else {
+                            return 2.5 * length / margin.bottom
+                        }
+                    })
+                    .attr("fill", "#cd7f32")
+
+                svg.append("rect")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return width + (width / margin.left)
+                        }
+                        else {
+                            return width + (2 * width / margin.left)
+                        }
+                    })
+                    .attr("y", (5.4) * height / margin.bottom)
+                    .attr("width", function () {
+                        if (window.innerWidth < 450 && window.innerWidth > 400) {
+                            return 2.0 * length / margin.bottom;
+                        }
+                        else if (window.innerWidth < 400) {
+                            return 1.0 * length / margin.bottom;
+                        }
+                        else {
+                            return 2.5 * length / margin.bottom
+                        }
+                    })
+                    .attr("height", function () {
+                        if (window.innerWidth < 450 && window.innerWidth > 400) {
+                            return 2.0 * length / margin.bottom;
+                        }
+                        else if (window.innerWidth < 400) {
+                            return 1.0 * length / margin.bottom;
+                        }
+                        else {
+                            return 2.5 * length / margin.bottom
+                        }
+                    })
+                    .attr("fill", "#bdbdbd")
+
+                svg.append("rect")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return width + (width / margin.left)
+                        }
+                        else {
+                            return width + (2 * width / margin.left)
+                        }
+                    })
+                    .attr("y", (10.0) * height / margin.bottom)
+                    .attr("width", function () {
+                        if (window.innerWidth < 450 && window.innerWidth > 400) {
+                            return 2.0 * length / margin.bottom;
+                        }
+                        else if (window.innerWidth < 400) {
+                            return 1.0 * length / margin.bottom;
+                        }
+                        else {
+                            return 2.5 * length / margin.bottom
+                        }
+                    })
+                    .attr("height", function () {
+                        if (window.innerWidth < 450 && window.innerWidth > 400) {
+                            return 2.0 * length / margin.bottom;
+                        }
+                        else if (window.innerWidth < 400) {
+                            return 1.0 * length / margin.bottom;
+                        }
+                        else {
+                            return 2.5 * length / margin.bottom
+                        }
+                    })
+                    .attr("fill", "#feb24c")
+
+                svg.append("text")
+                    .text("Bronze")
+                    .attr("x", function () {
+                        if (width < 500 && width > 400) {
+                            return width + (5.5 * width / margin.left)
+                        }
+                        else if (width < 400) {
+                            return width + (2.5 * width / margin.left)
+                        }
+                        else {
+                            return width + (6 * width / margin.left)
+                        }
+                    })
+                    .attr("y", function () {
+                        if (width < 500 && width > 400) {
+                            return height / margin.bottom + 1.5 * length / margin.bottom
+                        }
+                        else if (width < 400) {
+                            return height / margin.bottom + 0.8 * length / margin.bottom
+                        }
+                        else {
+                            return height / margin.bottom + 2.0 * length / margin.bottom
+                        }
+                    })
+                    .attr("class", "legend-value")
+
+                svg.append("text")
+                    .text("Silver")
+                    .attr("x", function () {
+                        if (width < 500 && width > 400) {
+                            return width + (5.5 * width / margin.left)
+                        }
+                        else if (width < 400) {
+                            return width + (2.5 * width / margin.left)
+                        }
+                        else {
+                            return width + (6 * width / margin.left)
+                        }
+                    })
+                    .attr("y", function () {
+                        if (width < 500 && width > 400) {
+                            return (5.4) * height / margin.bottom + 1.5 * length / margin.bottom
+                        }
+                        else if (width < 400) {
+                            return (5.4) * height / margin.bottom + 0.8 * length / margin.bottom
+                        }
+                        else {
+                            return (5.4) * height / margin.bottom + 2.0 * length / margin.bottom
+                        }
+                    })
+                    .attr("class", "legend-value")
+
+                svg.append("text")
+                    .text("Gold")
+                    .attr("x", function () {
+                        if (width < 500 && width > 400) {
+                            return width + (5.5 * width / margin.left)
+                        }
+                        else if (width < 400) {
+                            return width + (2.5 * width / margin.left)
+                        }
+                        else {
+                            return width + (6 * width / margin.left)
+                        }
+                    })
+                    .attr("y", function () {
+                        if (width < 500 && width > 400) {
+                            return (10.0) * height / margin.bottom + 1.5 * length / margin.bottom;
+                        }
+                        else if (width < 400) {
+                            return (10.0) * height / margin.bottom + 0.8 * length / margin.bottom;
+                        }
+                        else {
+                            return (10.0) * height / margin.bottom + 2.0 * length / margin.bottom
+                        }
+                    })
+                    .attr("class", "legend-value")
+
+                svg
+                    .append("text")
+                    .attr("class", "title")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return width / 19
+                        }
+                        else {
+                            return width / 6
+                        }
+                    })
+                    .attr("y", -length / margin.top)    // +20 to adjust position (lower)
+                    .text("Tokyo 2020 Olympics Performance Summary")
+                    .attr("fill", "black")
+                    .style("font-weight", "bold")
+
+            })
+        }
+
+
+    }
+
+
+    render() {
+
+        return (
+            <div id={'graph_box'}>
+            </div>
+        );
+    }
+}
+
+export default StackedBarChartMini;

ReactTool/frontend/src/components/stackedArea-mini.js

@@ -0,0 +1,372 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3'
+import * as topojson from 'topojson';
+import { Container, Col, Row, Navbar, Button, ButtonGroup, ToggleButton, Form, InputGroup } from 'react-bootstrap';
+import '../App.css';
+import data from './data/StackedArea.csv';
+import img7 from '../components/data/Mini-VLAT/StackedArea.png'
+
+
+
+class StackedAreaPlotMini extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        this.drawChart()
+    }
+    divResize(e) {
+        console.log('div was resized', e)
+    }
+
+    componentDidUpdate() {
+        this.drawChart()
+    }
+
+    drawChart() {
+        //https://www.theguardian.com/news/datablog/2011/jul/28/top-100-baby-names-oliver-olivia
+        //https://www.theguardian.com/news/datablog/2010/oct/27/baby-names-children-oliver-olivia
+        //https://www.theguardian.com/news/datablog/2012/aug/14/baby-names-2011-harry-amelia-data
+        //https://www.theguardian.com/news/datablog/2013/aug/12/top-100-baby-names-2012-girls-boys-list
+        //https://www.theguardian.com/news/datablog/2014/aug/15/the-top-100-baby-names-in-england-and-wales-2013
+        //https://www.theguardian.com/news/datablog/ng-interactive/2015/aug/17/100-most-popular-baby-names-england-wales-full-list
+        //https://www.d3-graph-gallery.com/stackedarea
+        var e = document.getElementById("graph_box");
+        const length = Math.min(e.clientHeight, e.clientWidth)
+
+        if (length < 570) {
+            const margin = { top: length / 7, right: length / 9, bottom: length / 7, left: length / 9 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+            // append the svg object to the body of the page
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .append("svg")
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+            //svg.append("text").attr("class", 'bubbleTitle').text("Popular Girls' Names in UK").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height)
+            var image = svg.append('image').attr('width', 1.4 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img7).attr('height', 1.1 * height)
+        }
+        else {
+            const margin = { top: length / 7, right: length / 7, bottom: length / 7, left: length / 7 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+            // append the svg object to the body of the page
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .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})`);
+
+            const format = d3.timeFormat("%Y");
+
+            d3.csv(data).then(function (data) {
+                data.forEach(function (d) {
+                    d.Isla = parseInt(d.Isla);
+                    d.Amelia = parseInt(d.Amelia);
+                    d.Olivia = parseInt(d.Olivia);
+                    //d.Year = format(d.Year);
+                })
+                const keys = data.columns.slice(1)
+                const stackedData = d3.stack()
+                    .keys(keys)
+                    (data)
+
+                const color = d3.scaleOrdinal()
+                    .range(['#3182bd', '#9ecae1', '#deebf7'])
+
+                const x = d3.scaleLinear()
+                    .domain(d3.extent(data, function (d) {
+                        return d.Year;
+                    }))
+                    .range([0, width]);
+
+                const y = d3.scaleLinear()
+                    .domain([0, 19000])
+                    .range([height, 0]);
+
+                function make_x_gridlines() {
+                    return d3.axisBottom(x)
+                        .ticks(5)
+                }
+
+                svg.append("g")
+                    .attr("class", "y-axis")
+                    .call(d3.axisLeft(y))
+
+
+                svg.append("g")
+                    .attr("class", "x-axis")
+                    .attr("transform", `translate(0, ${height})`)
+                    .call(d3.axisBottom(x).ticks(5).tickFormat(d3.format("d")))
+
+
+                svg.append("text")
+                    .attr("class", "y-label")
+                    .attr("transform", "rotate(-90)")
+                    .attr("y", function () {
+                        if (width < 500 && width > 400) {
+                            return -1.4 * margin.left + (margin.top / 1.5) * e.clientWidth / e.clientHeight;
+                        }
+                        else if (width < 400) {
+                            return -1.9 * margin.left + (margin.top / 1.5) * e.clientWidth / e.clientHeight;
+                        }
+                        else {
+                            return - 1.3 * margin.left + (margin.top / 1.5) * e.clientWidth / e.clientHeight;
+                        }
+                    })
+                    .attr("x", 0 - (height / 1.9))
+                    .attr("dy", "1em")
+                    .style("text-anchor", "middle")
+                    .text("Number of Girls")
+                    .style("font-weight", "bold")
+                    .style('font-size', function () {
+                        if (width < 500) {
+                            return "1.2vh"
+                        }
+                    })
+
+                svg.append("text")
+                    .attr("class", "x-label")
+                    .attr("transform", function () {
+                        if (width < 500) {
+                            return "translate(" + (width / 1.9) + " ," + (height + 1.5 * margin.top - (margin.top / 1.5)) + ")"
+                        }
+                        else {
+                            return "translate(" + (width / 1.9) + " ," + (height + 1.1 * margin.top - (margin.top / 1.5)) + ")"
+                        }
+                    })
+                    .style("text-anchor", "middle")
+                    .style("font-weight", "bold")
+                    .text("Year")
+
+                const areaChart = svg.append('g')
+                    .attr("clip-path", "url(#clip)")
+
+                const area = d3.area()
+                    .x(function (d) {
+                        return x(d.data.Year);
+                    })
+                    .y0(function (d) {
+                        return y(d[0]);
+                    })
+                    .y1(function (d) {
+                        return y(d[1]);
+                    })
+
+                areaChart
+                    .selectAll("mylayers")
+                    .data(stackedData)
+                    .join("path")
+                    .attr("class", function (d) {
+                        return "myArea " + d.key
+                    })
+                    .style("fill", function (d) {
+                        return color(d.key);
+                    })
+                    .attr("d", area)
+
+                svg.append("g")
+                    .attr("class", "grid")
+                    .attr("transform", "translate(0," + height + ")")
+                    .call(make_x_gridlines()
+                        .tickSize(-height)
+                        .tickFormat("")
+                    )
+                function make_y_gridlines() {
+                    return d3.axisLeft(y)
+                        .ticks(8)
+                }
+
+                // add the Y gridlines
+                svg.append("g")
+                    .attr("class", "grid")
+                    .call(make_y_gridlines()
+                        .tickSize(-width)
+                        .tickFormat("")
+                    )
+
+                svg.append("rect")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return width + (width / margin.left)
+                        }
+                        else {
+                            return width + (2 * width / margin.left)
+                        }
+                    })
+                    .attr("y", height / margin.bottom)
+                    .attr("width", function () {
+                        if (width < 500) {
+                            return length / 30;
+                        }
+                        else {
+                            return length / 50;
+                        }
+                    })
+                    .attr("height", function () {
+                        if (width < 500) {
+                            return length / 30;
+                        }
+                        else {
+                            return length / 50;
+                        }
+                    })
+                    .attr("fill", "#deebf7")
+
+                svg.append("rect")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return width + (width / margin.left)
+                        }
+                        else {
+                            return width + (2 * width / margin.left)
+                        }
+                    })
+                    .attr("y", (height / margin.bottom) * height / margin.bottom)
+                    .attr("width", function () {
+                        if (width < 500) {
+                            return length / 30;
+                        }
+                        else {
+                            return length / 50;
+                        }
+                    })
+                    .attr("height", function () {
+                        if (width < 500) {
+                            return length / 30;
+                        }
+                        else {
+                            return length / 50;
+                        }
+                    })
+                    .attr("fill", "#9ecae1")
+
+                svg.append("rect")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return width + (width / margin.left)
+                        }
+                        else {
+                            return width + (2 * width / margin.left)
+                        }
+                    })
+                    .attr("y", ((height / margin.bottom) / 2.8) * (height / margin.bottom) * height / margin.bottom)
+                    .attr("width", function () {
+                        if (width < 500) {
+                            return length / 30;
+                        }
+                        else {
+                            return length / 50;
+                        }
+                    })
+                    .attr("height", function () {
+                        if (width < 500) {
+                            return length / 30;
+                        }
+                        else {
+                            return length / 50;
+                        }
+                    })
+                    .attr("fill", "#3182bd")
+
+                svg.append("text")
+                    .text("Olivia")
+                    .attr("x", function () {
+                        if (width < 500 && width > 400) {
+                            return width + (2 * width / margin.left) + length / 25;
+                        }
+                        else {
+                            return ((width + (2 * width / margin.left)) + length / 40);
+                        }
+                    })
+                    .attr("y", function () {
+                        if (width < 500) {
+                            return height / margin.bottom + length / 45
+                        }
+                        else {
+                            return (0.7 * (height / margin.bottom)) * height / margin.bottom
+                        }
+                    })
+                    .attr("class", "legend-value")
+
+                svg.append("text")
+                    .text("Isla")
+                    .attr("x", function () {
+                        if (width < 500 && width > 400) {
+                            return width + (2 * width / margin.left) + length / 25;
+                        }
+                        else {
+                            return ((width + (2 * width / margin.left)) + length / 40);
+                        }
+                    })
+                    .attr("y", function () {
+                        if (width < 500) {
+                            return (height / margin.bottom) * height / margin.bottom + length / 45;
+                        }
+                        else {
+                            return (1.5) * (height / margin.bottom) * height / margin.bottom
+                        }
+
+                    })
+                    .attr("class", "legend-value")
+
+                svg.append("text")
+                    .text("Amelia")
+                    .attr("x", function () {
+                        if (width < 500 && width > 400) {
+                            return width + (2 * width / margin.left) + length / 25;
+                        }
+                        else {
+                            return ((width + (2 * width / margin.left)) + length / 40);
+                        }
+                    })
+                    .attr("y", function () {
+                        if (width < 500) {
+                            return ((height / margin.bottom) / 2.8) * (height / margin.bottom) * height / margin.bottom + length / 35
+                        }
+                        else {
+                            return (1.25) * ((height / margin.bottom) / 2.7) * (height / margin.bottom) * height / margin.bottom
+                        }
+
+                    })
+                    .attr("class", "legend-value")
+
+                svg
+                    .append("text")
+                    .attr("class", "title")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return width / 6
+                        }
+                        else {
+                            return width / 3
+                        }
+                    })
+                    .attr("y", -length / margin.top)    // +20 to adjust position (lower)
+                    .text("Popular Girls' names in the UK")
+                    .attr("fill", "black")
+                    .style("font-weight", "bold")
+            })
+
+        }
+
+
+    }
+
+
+    render() {
+
+        return (
+            <div id={'graph_box'}>
+            </div>
+        );
+    }
+}
+
+export default StackedAreaPlotMini;

ReactTool/frontend/src/components/stackedbar-mini.js

@@ -0,0 +1,494 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3'
+import * as topojson from 'topojson';
+import { Container, Col, Row, Navbar, Button, ButtonGroup, ToggleButton, Form, InputGroup } from 'react-bootstrap';
+import '../App.css';
+import data from './data/StackedBarGraph.csv';
+import img2 from '../components/data/Mini-VLAT/StackedBar.png'
+
+
+
+class StackedBarChart2Mini extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        this.drawChart()
+    }
+    divResize(e) {
+        console.log('div was resized', e)
+    }
+
+    componentDidUpdate() {
+        this.drawChart()
+    }
+
+    drawChart() {
+        //https://www.statista.com/chart/3358/room-service-prices/
+        //https://www.d3-graph-gallery.com/graph/barplot_stacked_basicWide.html
+        var e = document.getElementById("graph_box");
+        const length = Math.min(e.clientHeight, e.clientWidth)
+
+        if (length < 570) {
+            const margin = { top: length / 7, right: length / 9, bottom: length / 7, left: length / 9 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+
+
+            // append the svg object to the body of the page
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .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})`);
+
+            //svg.append("text").attr("class", 'bubbleTitle').text("Hotel Costs of Room Service").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height)
+
+            var image = svg.append('image').attr('width', 1.2 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img2).attr('height', 1.1 * height)
+
+        }
+        else {
+            const margin = { top: length / 7, right: length / 7, bottom: length / 7, left: length / 7 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+
+
+            // append the svg object to the body of the page
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .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})`);
+
+
+
+            d3.csv(data).then(function (data) {
+                data.forEach(function (d) {
+                    d.Sandwich = parseFloat(d.Sandwich);
+                    d.Water = parseFloat(d.Water);
+                    d.Peanut = parseFloat(d.Peanut);
+                    d.CanOfSoda = parseFloat(d.CanOfSoda);
+                    d.Vodka = parseFloat(d.Vodka);
+                    d.City = d.City;
+                })
+                console.log(data)
+
+                var subgroups = data.columns.slice(1);
+
+                var groups = data.map(d => (d.City));
+
+                console.log(subgroups)
+
+                var xScale = d3.scaleBand().domain(groups).range([0, width]).padding([0.2])
+
+                if (width < 500) {
+                    svg.append("g")
+                        .attr("class", "x-axis")
+                        .attr("transform", `translate(0, ${height})`)
+                        .call(d3.axisBottom(xScale).tickSizeOuter(0))
+                        .selectAll("text")
+                        .attr("dy", ".35em")
+                        .attr("transform", "rotate(40)")
+                        .style("text-anchor", "start")
+                }
+                else {
+                    svg.append("g")
+                        .attr("class", "x-axis")
+                        .attr("transform", `translate(0, ${height})`)
+                        .call(d3.axisBottom(xScale).tickSizeOuter(0))
+                        .selectAll("text")
+                }
+
+
+
+
+                var yScale = d3.scaleLinear().domain([0, 70]).range([height, 0]);
+                svg.append("g").attr("class", "y-axis").call(d3.axisLeft(yScale)).selectAll("text")
+                    .style("font-size", function () {
+                        if (length < 700) {
+                            return 1.4 * (length / margin.top)
+                        }
+                    })
+
+                const color = d3.scaleOrdinal()
+                    .domain(subgroups)
+                    .range(['#7fc97f', '#beaed4', '#fdc086', '#fb9a99', '#386cb0'])
+
+                //stack the data? --> stack per subgroup
+                const stackedData = d3.stack()
+                    .keys(subgroups)
+                    (data)
+
+                // gridlines in y axis function
+                function make_y_gridlines() {
+                    return d3.axisLeft(yScale)
+                        .ticks(11)
+                }
+
+                // add the Y gridlines
+                svg.append("g")
+                    .attr("class", "grid")
+                    .call(make_y_gridlines()
+                        .tickSize(-width)
+                        .tickFormat("")
+                    )
+                //This is for Stacked Bar Graph
+                // Show the bars
+                svg.append("g")
+                    .selectAll("g")
+                    // Enter in the stack data = loop key per key = group per group
+                    .data(stackedData)
+                    .enter().append("g")
+                    .attr("fill", function (d) { return color(d.key); })
+                    .selectAll("rect")
+                    // enter a second time = loop subgroup per subgroup to add all rectangles
+                    .data(function (d) { return d; })
+                    .enter().append("rect")
+                    .attr("x", function (d) { return xScale(d.data.City); })
+                    .attr("y", function (d) { return yScale(d[1]); })
+                    .attr("height", function (d) { return yScale(d[0]) - yScale(d[1]); })
+                    .attr("width", xScale.bandwidth())
+
+                svg.append("text")
+                    .attr("class", "y-label")
+                    .attr("transform", "rotate(-90)")
+                    .attr("y", function () {
+                        if (width < 500 && width > 400) {
+                            return - margin.left + (margin.top / 5) * e.clientWidth / e.clientHeight
+                        }
+                        else if (width < 400) {
+                            return - margin.left + (margin.top / 19.5) * e.clientWidth / e.clientHeight
+                        }
+                        else {
+                            return - margin.left + (margin.top / 2.5) * e.clientWidth / e.clientHeight
+                        }
+                    })
+                    .attr("x", - (height / 1.9))
+                    .attr("dy", "1em")
+                    .style("text-anchor", "middle")
+                    .text("Cost ($)")
+                    .style("font-weight", "bold")
+
+                svg.append("text")
+                    .attr("class", "x-label")
+                    .attr("transform", function () {
+                        if (window.innerWidth < 500) {
+                            return "translate(" + (width / 1.9) + " ," + (height + 1.6 * margin.top - (margin.top / 1.5)) + ")"
+                        }
+                        else {
+                            return "translate(" + (width / 1.9) + " ," + (height + 1.1 * margin.top - (margin.top / 1.5)) + ")"
+                        }
+                    })
+                    .style("text-anchor", "middle")
+                    .style("font-weight", "bold")
+                    .text("Cities")
+
+                var dataNormalized = []
+                data.forEach(function (d) {
+                    // Compute the total
+                    var tot = 0
+                    for (var i in subgroups) { const name = subgroups[i]; tot += +d[name] }
+                    // Now normalize
+                    for (var i in subgroups) { const name = subgroups[i]; d[name] = d[name] / tot * 100 }
+                })
+
+                svg.append("rect")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return width + (0.6 * width / margin.left)
+                        }
+                        else {
+                            return width + (2 * width / margin.left)
+                        }
+                    })
+                    .attr("y", height / margin.bottom)
+                    .attr("width", function () {
+                        if (width < 400) {
+                            return 0.9 * length / margin.left
+                        }
+                        else {
+                            return 1.7 * length / margin.left
+                        }
+                    })
+                    .attr("height", function () {
+                        if (width < 400) {
+                            return 0.9 * length / margin.left
+                        }
+                        else {
+                            return 1.7 * length / margin.left
+                        }
+                    })
+                    .attr("fill", "#386cb0")
+
+                svg.append("rect")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return width + (0.6 * width / margin.left)
+                        }
+                        else {
+                            return width + (2 * width / margin.left)
+                        }
+                    })
+                    .attr("y", (height / margin.bottom) * height / margin.bottom)
+                    .attr("width", function () {
+                        if (width < 400) {
+                            return 0.9 * length / margin.left
+                        }
+                        else {
+                            return 1.7 * length / margin.left
+                        }
+                    })
+                    .attr("height", function () {
+                        if (width < 400) {
+                            return 0.9 * length / margin.left
+                        }
+                        else {
+                            return 1.7 * length / margin.left
+                        }
+                    })
+                    .attr("fill", "#fb9a99")
+
+                svg.append("rect")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return width + (0.6 * width / margin.left)
+                        }
+                        else {
+                            return width + (2 * width / margin.left)
+                        }
+                    })
+                    .attr("y", ((height / margin.bottom) / 2.7) * (height / margin.bottom) * height / margin.bottom)
+                    .attr("width", function () {
+                        if (width < 400) {
+                            return 0.9 * length / margin.left
+                        }
+                        else {
+                            return 1.7 * length / margin.left
+                        }
+                    })
+                    .attr("height", function () {
+                        if (width < 400) {
+                            return 0.9 * length / margin.left
+                        }
+                        else {
+                            return 1.7 * length / margin.left
+                        }
+                    })
+                    .attr("fill", "#fdc086")
+
+                svg.append("rect")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return width + (0.6 * width / margin.left)
+                        }
+                        else {
+                            return width + (2 * width / margin.left)
+                        }
+                    })
+                    .attr("y", ((height / margin.bottom) / 1.85) * (height / margin.bottom) * height / margin.bottom)
+                    .attr("width", function () {
+                        if (width < 400) {
+                            return 0.9 * length / margin.left
+                        }
+                        else {
+                            return 1.7 * length / margin.left
+                        }
+                    })
+                    .attr("height", function () {
+                        if (width < 400) {
+                            return 0.9 * length / margin.left
+                        }
+                        else {
+                            return 1.7 * length / margin.left
+                        }
+                    })
+                    .attr("fill", "#beaed4")
+
+                svg.append("rect")
+                    .attr("x", function () {
+                        if (width < 400) {
+                            return width + (0.6 * width / margin.left)
+                        }
+                        else {
+                            return width + (2 * width / margin.left)
+                        }
+                    })
+                    .attr("y", ((height / margin.bottom) / 1.4) * (height / margin.bottom) * height / margin.bottom)
+                    .attr("width", function () {
+                        if (width < 400) {
+                            return 0.9 * length / margin.left
+                        }
+                        else {
+                            return 1.7 * length / margin.left
+                        }
+                    })
+                    .attr("height", function () {
+                        if (width < 400) {
+                            return 0.9 * length / margin.left
+                        }
+                        else {
+                            return 1.7 * length / margin.left
+                        }
+                    })
+                    .attr("fill", "#7fc97f")
+
+                svg.append("text")
+                    .text("Vodka")
+                    .attr("x", function () {
+                        if (width < 500 && width > 400) {
+                            return width + (5 * width / margin.left)
+                        }
+                        else if (width < 400) {
+                            return width + (2 * width / margin.left)
+                        }
+                        else {
+                            return width + (6 * width / margin.left)
+                        }
+                    })
+                    .attr("y", function () {
+                        if (width < 500 && width > 400) {
+                            return height / margin.bottom + (1.3 * length / margin.left)
+                        }
+                        else if (width < 400) {
+                            return height / margin.bottom + (0.7 * length / margin.left)
+                        }
+                        else {
+                            return height / margin.bottom + (1.7 * length / margin.left)
+                        }
+                    })
+                    .attr("class", "legend-value")
+
+                svg.append("text")
+                    .text("Soda")
+                    .attr("x", function () {
+                        if (width < 500 && width > 400) {
+                            return width + (5 * width / margin.left)
+                        }
+                        else if (width < 400) {
+                            return width + (2 * width / margin.left)
+                        }
+                        else {
+                            return width + (6 * width / margin.left)
+                        }
+                    })
+                    .attr("y", function () {
+                        if (width < 500 && width > 400) {
+                            return ((height / margin.bottom) * height / margin.bottom + (1.3 * length / margin.left));
+                        }
+                        else if (width < 400) {
+                            return ((height / margin.bottom) * height / margin.bottom + (0.7 * length / margin.left));
+                        }
+                        else {
+                            return ((height / margin.bottom) * height / margin.bottom + (1.7 * length / margin.left));
+                        }
+                    })
+                    .attr("class", "legend-value")
+
+                svg.append("text")
+                    .text("Peanut")
+                    .attr("x", function () {
+                        if (width < 500 && width > 400) {
+                            return width + (5 * width / margin.left)
+                        }
+                        else if (width < 400) {
+                            return width + (2 * width / margin.left)
+                        }
+                        else {
+                            return width + (6 * width / margin.left)
+                        }
+                    })
+                    .attr("y", function () {
+                        if (width < 500 && width > 400) {
+                            return ((height / margin.bottom) / 2.7) * (height / margin.bottom) * height / margin.bottom + (1.3 * length / margin.left);
+                        }
+                        else if (width < 400) {
+                            return ((height / margin.bottom) / 2.7) * (height / margin.bottom) * height / margin.bottom + (0.7 * length / margin.left);
+                        }
+                        else {
+                            return ((height / margin.bottom) / 2.7) * (height / margin.bottom) * height / margin.bottom + (1.7 * length / margin.left);
+                        }
+                    })
+                    .attr("class", "legend-value")
+
+                svg.append("text")
+                    .text("Water")
+                    .attr("x", function () {
+                        if (width < 500 && width > 400) {
+                            return width + (5 * width / margin.left)
+                        }
+                        else if (width < 400) {
+                            return width + (2 * width / margin.left)
+                        }
+                        else {
+                            return width + (6 * width / margin.left)
+                        }
+                    })
+                    .attr("y", function () {
+                        if (width < 500 && width > 400) {
+                            return ((height / margin.bottom) / 1.85) * (height / margin.bottom) * height / margin.bottom + (1.3 * length / margin.left)
+                        }
+                        else if (width < 400) {
+                            return ((height / margin.bottom) / 1.85) * (height / margin.bottom) * height / margin.bottom + (0.7 * length / margin.left)
+                        }
+                        else {
+                            return ((height / margin.bottom) / 1.85) * (height / margin.bottom) * height / margin.bottom + (1.7 * length / margin.left)
+                        }
+                    })
+                    .attr("class", "legend-value")
+
+                svg.append("text")
+                    .text("Sandwich")
+                    .attr("x", function () {
+                        if (width < 500 && width > 400) {
+                            return width + (5 * width / margin.left)
+                        }
+                        else if (width < 400) {
+                            return width + (2 * width / margin.left)
+                        }
+                        else {
+                            return width + (6 * width / margin.left)
+                        }
+                    })
+                    .attr("y", function () {
+                        if (width < 500 && width > 400) {
+                            return ((height / margin.bottom) / 1.4) * (height / margin.bottom) * height / margin.bottom + (1.3 * length / margin.left)
+                        }
+                        else if (width < 400) {
+                            return ((height / margin.bottom) / 1.4) * (height / margin.bottom) * height / margin.bottom + (0.7 * length / margin.left)
+                        }
+                        else {
+                            return ((height / margin.bottom) / 1.4) * (height / margin.bottom) * height / margin.bottom + (1.7 * length / margin.left)
+                        }
+                    })
+                    .attr("class", "legend-value")
+
+                svg
+                    .append("text")
+                    .attr("class", "title")
+                    .attr("x", width / 3)
+                    .attr("y", -length / margin.top)    // +20 to adjust position (lower)
+                    .text("Room Service Prices")
+                    .attr("fill", "black")
+                    .style("font-weight", "bold")
+            })
+
+        }
+    }
+
+
+    render() {
+
+        return (
+            <div id={'graph_box'}>
+            </div>
+        );
+    }
+}
+
+export default StackedBarChart2Mini;

ReactTool/frontend/src/components/treeMap-mini.js

@@ -0,0 +1,222 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3'
+import * as topojson from 'topojson';
+import { Container, Col, Row, Navbar, Button, ButtonGroup, ToggleButton, Form, InputGroup } from 'react-bootstrap';
+import '../App.css';
+import data from './data/Treemap.json';
+import img4 from '../components/data/Mini-VLAT/TreeMap.png'
+
+
+
+class TreeMapMini extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        this.drawChart()
+    }
+    divResize(e) {
+        console.log('div was resized', e)
+    }
+
+    componentDidUpdate() {
+        this.drawChart()
+    }
+
+    drawChart() {
+        //Data Source: Nielsen Top 100 January 2010 Unique Visitors
+        //https://www.d3-graph-gallery.com/treemap.html
+        var e = document.getElementById("graph_box");
+        const length = Math.min(e.clientHeight, e.clientWidth)
+
+        if (length < 570) {
+            const margin = { top: length / 7, right: length / 9, bottom: length / 7, left: length / 9 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+
+
+            // append the svg object to the body of the page
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .append("svg")
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+            //svg.append("text").attr("class", 'bubbleTitle').text("The Number of Unique Visitors for Websites in 2010").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height)
+
+            var image = svg.append('image').attr('width', 1.2 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img4).attr('height', 1.1 * height)
+        }
+        else {
+            const margin = { top: length / 7, right: length / 7, bottom: length / 7, left: length / 7 },
+                width = length - margin.left - margin.right,
+                height = length - margin.top - margin.bottom;
+
+
+            // append the svg object to the body of the page
+            d3.select("#graph_box").select("svg").remove();
+            const svg = d3.select("#graph_box")
+                .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})`);
+
+            svg.append("rect").attr("width", "100%").attr("height", "100%").attr("fill", "black")
+
+
+            // Give the data to this cluster layout:
+            const root = d3.hierarchy(data).sum(function (d) {
+                return d.value
+            }) // Here the size of each leave is given in the 'value' field in input data
+
+
+            // Then d3.treemap computes the position of each element of the hierarchy
+            d3.treemap()
+                .size([width, height])
+                .paddingTop(25)
+                .paddingRight(7)
+                .paddingInner(3)      // Padding between each rectangle
+                //.paddingOuter(1)
+                //.padding(20)
+                (root)
+
+            // prepare a color scale
+            const color = d3.scaleOrdinal()
+                .domain(["boss1", "boss2", "boss3", "boss4", "boss5"])
+                .range(['#7fc97f', '#beaed4', '#fdc086', '#fb9a99', '#386cb0'])
+
+            // And a opacity scale
+            const opacity = d3.scaleLinear()
+                .domain([10, 30])
+                .range([.5, 1])
+
+            // use this information to add rectangles:
+
+
+            svg
+                .selectAll("rect")
+                .data(root.leaves())
+                .join("rect")
+                .attr("class", "tree-rect")
+                .attr('x', function (d) {
+                    return d.x0;
+                })
+                .attr('y', function (d) {
+                    return d.y0;
+                })
+                .attr('width', function (d) {
+                    return d.x1 - d.x0;
+                })
+                .attr('height', function (d) {
+                    return d.y1 - d.y0;
+                })
+                .style("stroke", "black")
+                .style("fill", function (d) {
+                    return color(d.parent.data.name)
+                })
+                .style("opacity", function (d) {
+                    return 0.7
+                })
+
+            // and to add the text labels
+            svg
+                .selectAll("text")
+                .data(root.leaves())
+                .enter()
+                .append("text")
+                //.attr("class", "tree-text")
+                .attr("transform", function (d) {
+                    if (d.data.name === "LinkedIn" || d.data.name === "MSN/WindowsLive/Bing") {
+                        return "translate(" + (d.x0 + 5) + "," + (d.y0 + 20) + ")" + " " + "rotate(90)";
+                    }
+                    else if (d.data.name === "Wal-Mart" || d.data.name === "Craigslist" || d.data.name === 'Target') {
+                        return "translate(" + (d.x0 + 4) + "," + (d.y0 + 15) + ")" + " " + "rotate(45)";
+                    }
+                    else {
+                        return "translate(" + (d.x0 + 5) + "," + (d.y0 + 20) + ")" + " " + "rotate(0)";
+                    }
+
+                })     // +20 to adjust position (lower)
+                .text(function (d) {
+                    return d.data.name.replace('mister_', '')
+                })
+                .attr("class", "treemap-label")
+                .attr("x", function (d) {
+                    if (length < 600) {
+                        if (d.data.name == "LinkedIn" || d.data.name == 'MSN/WindowsLive/Bing') {
+                            return -16 * length / length
+                        }
+                        else {
+                            return -3 * length / length
+                        }
+                    }
+                })
+                .attr("y", function (d) {
+                    if (length < 650) {
+                        if (d.data.name == "LinkedIn") {
+                            return "0"
+                        }
+                        else if (d.data.name == "Conduit") {
+                            return -0.5 * (d.y1 - d.y0);
+                        }
+                        else {
+                            return -length / margin.top
+                        }
+                    }
+                })
+                .style('font-size', function (d) {
+                    if (width < 500) {
+                        return 1.1 * (length / margin.top)
+                    }
+
+                })
+
+            // Add title for the 3 groups
+            svg
+                .selectAll("titles")
+                .data(root.descendants().filter(function (d) {
+                    return d.depth == 1
+                }))
+                .enter()
+                .append("text")
+                .attr("x", function (d) {
+                    return d.x0
+                })
+                .attr("y", function (d) {
+                    return d.y0 + 21
+                })
+                .text(function (d) {
+                    return d.data.name
+                })
+                //.attr("class", "tree-labels")
+                .style("font-weight", "bold")
+                .attr("class", "x-label")
+
+            // Add title for the 3 groups
+            svg
+                .append("text")
+                .attr("class", "title")
+                .attr("x", width / margin.left)
+                .attr("y", -length / margin.top)    // +20 to adjust position (lower)
+                .text("The Number of Unique Visitors for Websites")
+                .attr("fill", "black")
+                .style("font-weight", "bold")
+
+        }
+
+
+    }
+
+
+    render() {
+
+        return (
+            <div id={'graph_box'}>
+            </div>
+        );
+    }
+}
+
+export default TreeMapMini;