add result ratio plot

- add title and info tooltip in location card
2023-08-01 09:59:08 +05:30
parent 4396bd2d72
commit 3ab6510bfd
6 changed files with 247 additions and 25 deletions
--- a/src/components/ScatterPlot.js
+++ b/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;