add result ratio plot

- add title and info tooltip in location card

src/components/Locations.css

@@ -11,4 +11,45 @@
     border-color: rgb(219, 219, 219);
     border-radius: 6px;
     border-width: max(1px, 0.0625rem);
-}
+}
+
+.locations-graph-card {
+    width: 40vw;
+    height: 45vh;
+    background-color: white;
+    margin: 10px;
+    border-style: solid;
+    border-color: rgb(219, 219, 219);
+    border-radius: 6px;
+    border-width: max(1px, 0.0625rem);
+ }
+ 
+ .locations-card-title {
+    text-align: center;
+    font-weight: 600;
+    padding-top: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+ }
+
+ .locations-info-icon {
+    padding: 0px 0px 0px 10px;
+    /* margin-top: 5px; */
+ }
+ 
+ .locations-info-card {
+    position: absolute;
+    visibility: visible;
+    background-color: rgb(236, 247, 253);
+    height: 7vh;
+    width: 10vw;
+    border-style: solid;
+    border-color: rgb(219, 219, 219);
+    border-radius: 6px;
+    border-width: max(1px, 0.0625rem);
+    margin-left: 26vw;
+    font-size: x-small;
+    font-weight: 400;
+    padding: 0.5em;
+ }

src/components/Locations.js

@@ -1,12 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { FaInfoCircle } from "react-icons/fa";
 
 import WorldMap from './WorldMap';
 import './Locations.css';
 
 function Locations({ show }) {
+    const [showCardInfo, setShowCardInfo] = useState(false);
 
     return (
         <div className='locations-card'>
+            <div className='locations-card-title'>Locations<span className='locations-info-icon' onClick={() => { setShowCardInfo(!showCardInfo) }}><FaInfoCircle /></span>
+                {showCardInfo && <div className='locations-info-card'>Test colcations</div>}
+            </div>
             <WorldMap show={show} />
         </div>
     );

src/components/ScatterPlot.css

@@ -0,0 +1,57 @@
+.line {
+    fill: none;
+    stroke: #009EDC;
+    stroke-width: 1px;
+ }
+ 
+ .resultratio-graph-card {
+    width: 40vw;
+    height: 45vh;
+    background-color: white;
+    margin: 10px;
+    border-style: solid;
+    border-color: rgb(219, 219, 219);
+    border-radius: 6px;
+    border-width: max(1px, 0.0625rem);
+ }
+ 
+ .resultratio-card-title {
+    text-align: center;
+    font-weight: 600;
+    padding-top: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+ }
+ 
+ .title {
+    fill: teal;
+    font-weight: bold;
+ }
+ 
+ #resultratio-diagram {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+ }
+ 
+ .resultratio-info-icon {
+    padding: 0px 0px 0px 10px;
+    /* margin-top: 5px; */
+ }
+ 
+ .resultratio-info-card {
+    position: absolute;
+    visibility: visible;
+    background-color: rgb(236, 247, 253);
+    height: 7vh;
+    width: 10vw;
+    border-style: solid;
+    border-color: rgb(219, 219, 219);
+    border-radius: 6px;
+    border-width: max(1px, 0.0625rem);
+    margin-left: 31vw;
+    font-size: x-small;
+    font-weight: 400;
+    padding: 0.5em;
+ }

src/components/ScatterPlot.js

@@ -0,0 +1,138 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3';
+import { sgg } from 'ml-savitzky-golay-generalized';
+import axios from 'axios';
+import moment from 'moment';
+import { FaBeer, FaInfoCircle } from "react-icons/fa";
+
+import './ScatterPlot.css';
+import constants from '../configs/constants';
+
+class ScatterPlot extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            data: this.props.data,
+            show: this.props.show,
+            showCardInfo: false
+        };
+    }
+    componentDidMount() {
+        this.drawChart(this.state.data);
+    }
+
+    drawChart(data) {
+        console.log(data);
+
+        if (!data) return;
+
+        // set the dimensions and margins of the graph
+        var margin = { top: 10, right: 30, bottom: 30, left: 60 },
+            width = 460 - margin.left - margin.right,
+            height = 250 - margin.top - margin.bottom;
+
+        // append the svg object to the body of the page
+        var svg = d3.select("#resultratio-diagram")
+            .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 + ")");
+
+        //Read the data
+
+        // Add X axis
+        var x = d3.scaleLinear()
+            .domain([0, 100])
+            .range([0, width]);
+        svg.append("g")
+            .attr("transform", "translate(0," + height + ")")
+            .call(d3.axisBottom(x));
+
+        // Add Y axis
+        var y = d3.scaleLinear()
+            .domain([0, 2])
+            .range([height, 0]);
+        svg.append("g")
+            .call(d3.axisLeft(y));
+
+        // Add dots
+        svg.append('g')
+            .selectAll("dot")
+            .data(data)
+            .enter()
+            .append("circle")
+            .attr("cx", function (d, i) { return x(2023 - d.birthYear); })
+            .attr("cy", function (d) { return y(d.resultRatio); })
+            .attr("r", 1.5)
+            .style("fill", "#69b3a2")
+    }
+
+    drawChart2(data2) {
+        // set the dimensions and margins of the graph
+        var margin = { top: 10, right: 30, bottom: 30, left: 60 },
+            width = 460 - margin.left - margin.right,
+            height = 260 - margin.top - margin.bottom;
+
+        // append the svg object to the body of the page
+        var svg = d3.select("#resultratio-diagram")
+            .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 + ")");
+
+        //Read the data
+        // d3.csv("data.csv", function (data) {
+        fetch('/data.csv')
+            .then(response => response.text())
+            .then((data) => {
+                //   console.log(data);
+                // var datacsv = require("./data.csv");
+                data = d3.csvParse(data);
+                console.log(data);
+                // Add X axis
+                var x = d3.scaleLinear()
+                    .domain([0, 4000])
+                    .range([0, width]);
+                svg.append("g")
+                    .attr("transform", "translate(0," + height + ")")
+                    .call(d3.axisBottom(x));
+
+                // Add Y axis
+                var y = d3.scaleLinear()
+                    .domain([0, 500000])
+                    .range([height, 0]);
+                svg.append("g")
+                    .call(d3.axisLeft(y));
+
+                // Add dots
+                svg.append('g')
+                    .selectAll("dot")
+                    .data(data)
+                    .enter()
+                    .append("circle")
+                    .attr("cx", function (d) { return x(d.GrLivArea); })
+                    .attr("cy", function (d) { return y(d.SalePrice); })
+                    .attr("r", 1.5)
+                    .style("fill", "#69b3a2")
+            });
+    }
+
+    render() {
+        return (
+            <div>
+                <div className='resultratio-graph-card'>
+                    <div className='resultratio-card-title'>Result ratio<span className='resultratio-info-icon' onClick={() => !this.setState({ showCardInfo: !this.state.showCardInfo })}><FaInfoCircle /></span>
+                        {this.state.showCardInfo && <div className='resultratio-info-card'>Based on all tests</div>}
+                    </div>
+                    <div id="resultratio-diagram" style={{ margin: '1em' }}>
+                    </div>
+                </div>
+            </div >
+        )
+    };
+}
+export default ScatterPlot;

src/components/TestAnalytics.js

@@ -9,26 +9,7 @@ import './TestAnalytics.css';
 import TestAnalyticsGraph from './TestAnalyticsGraph';
 import TestAnalyticsPie from './TestAnalyticsPie';
 import Locations from './Locations';
-
-const styles = {
-    menuList: (base) => ({
-        ...base,
-
-        "::-webkit-scrollbar": {
-            width: "4px",
-            height: "0px",
-        },
-        "::-webkit-scrollbar-track": {
-            background: "#f1f1f1"
-        },
-        "::-webkit-scrollbar-thumb": {
-            background: "#888"
-        },
-        "::-webkit-scrollbar-thumb:hover": {
-            background: "#555"
-        }
-    })
-};
+import ScatterPlot from './ScatterPlot';
 
 const TestAnalytics = () => {
     const [device, setDevice] = useState("Select a device");
@@ -116,8 +97,8 @@ const TestAnalytics = () => {
                 {dailyResults && <TestAnalyticsGraph data={dailyResults} />}
             </div>
             <div className='container'>
-                <Locations />
-                <Locations />
+                {allTests && <ScatterPlot data={allTests} />}
+                {allTests && <Locations />}
             </div>
 
         </div>

src/components/WorldMap.js

@@ -33,7 +33,7 @@ const cities = [
   // { name: "Tianjin",        coordinates: [117.3616,39.3434],  population: 10920000 },
   // { name: "Paris",          coordinates: [2.3522,48.8566],    population: 10858000 },
   // { name: "Lima",           coordinates: [-77.0428,-12.0464], population: 10750000 },
-  { name: "Nagpur",           coordinates: [79.088860, 21.146633], population: 14667000 },
+  { name: "Nagpur",           coordinates: [79.088860, 21.146633], population: 24667000 },
 ]
 
 const projection = geoEqualEarth()