131 lines
4.5 KiB
JavaScript
131 lines
4.5 KiB
JavaScript
import React, { Component } from 'react';
|
|
import * as d3 from 'd3';
|
|
import { 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) {
|
|
if (!data) return;
|
|
|
|
// set the dimensions and margins of the graph
|
|
var margin = { top: 10, right: 30, bottom: 40, 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 + ")");
|
|
|
|
// Add X axis
|
|
var x = d3.scaleLinear()
|
|
.domain([0, 50])
|
|
.range([0, width]);
|
|
svg.append("g")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.call(d3.axisBottom(x));
|
|
|
|
// Add Y axis
|
|
var y = d3.scaleLinear()
|
|
.domain([0, 1.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 || d.calculatedRatio); })
|
|
.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 data the ratio of results are shown corresponding to ages</div>}
|
|
</div>
|
|
<div id="resultratio-diagram" style={{ margin: '1em' }}>
|
|
</div>
|
|
</div>
|
|
</div >
|
|
)
|
|
};
|
|
}
|
|
export default ScatterPlot; |