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) {
-        super(props);
-    }
+  componentDidMount() {
+    d3.csv(data).then(csvData => {
+      this.setState({ data: csvData });
+      this.drawChart(csvData);
+    });
+  }
 
-    componentDidMount() {
-        console.log(String(data_ua))
-        this.drawChart()
-    }
-    divResize(e) {
-        console.log('div was resized', e)
-    }
+  drawChart(csvData) {
+    const width = 800;
+    const height = 600;
 
-    componentDidUpdate() {
-        this.drawChart()
-    }
+    const svg = d3
+      .select("#graph_box")
+      .append("svg")
+      .attr("width", width)
+      .attr("height", height);
 
-    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 colorScale = d3.scaleSequential(d3.interpolateBlues)
+      .domain([
+        d3.min(csvData, d => +d.value),
+        d3.max(csvData, d => +d.value),
+      ]);
 
-        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;
+    const projection = d3.geoMercator()
+      .center([31, 49])
+      .scale(3000)
+      .translate([width / 2, height / 2]);
 
-        // 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")
+    const path = d3.geoPath().projection(projection);
 
-        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 (
-            <div id={'graph_box'}>
-            </div>
-        );
-    }
+    const legend = svg
+      .append("g")
+      .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
-Nebraska,4.2,NE,31
-South Dakota,4.6,SD,46
-Utah,4.7,UT,49
-North Dakota,5.1,ND,38
-Iowa,5.3,IA,19
-Idaho,5.4,ID,16
-Maine,5.4,ME,23
-Vermont,5.6,VT,50
-Wyoming,5.8,WY,56
-Alabama,5.9,AL,01
-Kansas,5.9,KS,20
-Montana,5.9,MT,30
-Arkansas,6.1,AR,05
-Missouri,6.1,MO,29
-Oklahoma,6.1,OK,40
-Minnesota,6.2,MN,27
-South Carolina,6.2,SC,45
-Virginia,6.2,VA,51
-Wisconsin,6.3,WI,55
-Georgia,6.5,GA,13
-Kentucky,6.6,KY,21
-New Hampshire,6.7,NH,33
-Maryland,6.8,MD,24
-Indiana,7.1,IN,18
-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
+region,value
+Донецька,4100.3
+Дніпропетровська,3142.0
+Харківська,2633.8
+Львівська,2497.8
+Одеська,2368.1
+Луганська,2121.3
+Київська,1788.5
+Запорізька,1666.5
+Вінницька,1529.1
+Полтавська,1371.5
+Івано-Франківська,1361.1
+Закарпатська,1250.1
+Хмельницька,1243.8
+Житомирська,1195.5
+Черкаська,1178.3
+Рівненська,1148.5
+Миколаївська,1108.4
+Сумська,1053.5
+Тернопільська,1030.6
+Волинська,1027.4
+Херсонська,1016.7
+Чернігівська,976.7
+Кіровоградська,920.1
+Чернівецька,896.6