Add chropleth vis, but can't test it

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

@@ -1,65 +1,122 @@
 import React, { Component } from 'react';
-import * as d3 from 'd3'
+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_ukr 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);
+    this.state = {
+      data: [],
+    };
+  }
 
-    constructor(props) {
+  componentDidMount() {
-        super(props);
+    d3.csv(data).then(csvData => {
-    }
+      this.setState({ data: csvData });
+      this.drawChart(csvData);
+    });
+  }
 
-    componentDidMount() {
+  drawChart(csvData) {
-        console.log(String(data_ua))
+    const width = 800;
-        this.drawChart()
+    const height = 600;
-    }
-    divResize(e) {
-        console.log('div was resized', e)
-    }
 
-    componentDidUpdate() {
+    const svg = d3
-        this.drawChart()
+      .select("#graph_box")
-    }
+      .append("svg")
+      .attr("width", width)
+      .attr("height", height);
 
-    drawChart() {
+    const colorScale = d3.scaleSequential(d3.interpolateBlues)
-        //https://www.statista.com/statistics/223675/state-unemployment-rate-in-the-us/
+      .domain([
-        //https://bl.ocks.org/wboykinm/dbbe50d1023f90d4e241712395c27fb3
+        d3.min(csvData, d => +d.value),
-        var e = document.getElementById("graph_box");
+        d3.max(csvData, d => +d.value),
-        const length = Math.min(e.clientHeight, e.clientWidth)
+      ]);
 
-        const margin = { top: length / 5, right: length / 5, bottom: length / 5, left: length / 5 },
+    const projection = d3.geoMercator()
-            width = length - margin.left - margin.right,
+      .center([31, 49])
-            height = length - margin.top - margin.bottom;
+      .scale(3000)
+      .translate([width / 2, height / 2]);
 
-        // append the svg object to the body of the page
+    const path = d3.geoPath().projection(projection);
-        //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)
+    const dataMap = csvData.reduce((acc, row) => {
+      acc[row.region] = +row.value;
+      return acc;
+    }, {});
 
-        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)
+    const regions = topojson.feature(data_ukr, data_ukr.objects.UKR_adm1).features;
 
-    }
+    regions.forEach(region => {
+      const regionName = region.properties.NAME_1;
+      region.properties.value = dataMap[regionName] || 0;
+    });
 
+    svg
+      .selectAll("path")
+      .data(regions)
+      .enter()
+      .append("path")
+      .attr("d", path)
+      .attr("fill", d => colorScale(d.properties.value))
+      .attr("stroke", "#fff")
+      .attr("stroke-width", 0.5)
+      .append("title") 
+      .text(d => `${d.properties.NAME_1}: ${d.properties.value}`);
 
-    render() {
+    const legendWidth = 300;
+    const legendHeight = 20;
 
-        return (
+    const legend = svg
-            <div id={'graph_box'}>
+      .append("g")
-            </div>
+      .attr("transform", `translate(${width - legendWidth - 20}, ${height - 50})`);
-        );
+
-    }
+    const gradient = svg
+      .append("defs")
+      .append("linearGradient")
+      .attr("id", "legend-gradient")
+      .attr("x1", "0%")
+      .attr("x2", "100%")
+      .attr("y1", "0%")
+      .attr("y2", "0%");
+
+    gradient
+      .append("stop")
+      .attr("offset", "0%")
+      .attr("stop-color", d3.interpolateBlues(0));
+
+    gradient
+      .append("stop")
+      .attr("offset", "100%")
+      .attr("stop-color", d3.interpolateBlues(1));
+
+    legend
+      .append("rect")
+      .attr("width", legendWidth)
+      .attr("height", legendHeight)
+      .style("fill", "url(#legend-gradient)");
+
+    const legendScale = d3.scaleLinear()
+      .domain([
+        d3.min(csvData, d => +d.value),
+        d3.max(csvData, d => +d.value),
+      ])
+      .range([0, legendWidth]);
+
+    const legendAxis = d3.axisBottom(legendScale).ticks(5);
+
+    legend
+      .append("g")
+      .attr("transform", `translate(0, ${legendHeight})`)
+      .call(legendAxis);
+  }
+
+  render() {
+    return <div id="graph_box"></div>;
+  }
 }
 
-export default ChoroplethMini;
+export default ChoroplethMini;

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

@@ -1,52 +1,25 @@
-state,value,code,id
+region,value
-Nebraska,4.2,NE,31
+Донецька,4100.3
-South Dakota,4.6,SD,46
+Дніпропетровська,3142.0
-Utah,4.7,UT,49
+Харківська,2633.8
-North Dakota,5.1,ND,38
+Львівська,2497.8
-Iowa,5.3,IA,19
+Одеська,2368.1
-Idaho,5.4,ID,16
+Луганська,2121.3
-Maine,5.4,ME,23
+Київська,1788.5
-Vermont,5.6,VT,50
+Запорізька,1666.5
-Wyoming,5.8,WY,56
+Вінницька,1529.1
-Alabama,5.9,AL,01
+Полтавська,1371.5
-Kansas,5.9,KS,20
+Івано-Франківська,1361.1
-Montana,5.9,MT,30
+Закарпатська,1250.1
-Arkansas,6.1,AR,05
+Хмельницька,1243.8
-Missouri,6.1,MO,29
+Житомирська,1195.5
-Oklahoma,6.1,OK,40
+Черкаська,1178.3
-Minnesota,6.2,MN,27
+Рівненська,1148.5
-South Carolina,6.2,SC,45
+Миколаївська,1108.4
-Virginia,6.2,VA,51
+Сумська,1053.5
-Wisconsin,6.3,WI,55
+Тернопільська,1030.6
-Georgia,6.5,GA,13
+Волинська,1027.4
-Kentucky,6.6,KY,21
+Херсонська,1016.7
-New Hampshire,6.7,NH,33
+Чернігівська,976.7
-Maryland,6.8,MD,24
+Кіровоградська,920.1
-Indiana,7.1,IN,18
+Чернівецька,896.6
-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