mirror of
https://github.com/olehomelchenko/Mini-VLAT-ua.git
synced 2025-12-21 21:22:22 +00:00
65 lines
2.1 KiB
JavaScript
65 lines
2.1 KiB
JavaScript
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_ua from './data/UKR.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_ua))
|
||
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("Рівень безробіття в штатах США у 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)
|
||
|
||
}
|
||
|
||
|
||
render() {
|
||
|
||
return (
|
||
<div id={'graph_box'}>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default ChoroplethMini; |