localize charts into ukrainian

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

@@ -6,7 +6,18 @@ import '../App.css';
 import data from './data/AreaChart-2.csv';
 import img10 from '../components/data/Mini-VLAT/AreaChart.png'
 
+const ukLocale = {
+    "dateTime": "%A, %e %B %Y р. %X",
+    "date": "%d.%m.%Y",
+    "time": "%H:%M:%S",
+    "periods": ["AM", "PM"],
+    "days": ["неділя", "понеділок", "вівторок", "середа", "четвер", "п'ятниця", "субота"],
+    "shortDays": ["нд", "пн", "вт", "ср", "чт", "пт", "сб"],
+    "months": ["січень", "лютий", "березень", "квітень", "травень", "червень", "липень", "серпень", "вересень", "жовтень", "листопад", "грудень"],
+    "shortMonths": ["січ", "лют", "бер", "кві", "тра", "чер", "лип", "сер", "вер", "жов", "лис", "гру"]
+};
 
+const formatUk = d3.timeFormatLocale(ukLocale).format("%b %Y");
 
 class AreaChartMini extends Component {
 
@@ -43,7 +54,7 @@ class AreaChartMini extends Component {
                 .attr("width", width + margin.left + margin.right)
                 .attr("height", height + margin.top + margin.bottom)
                 .append("g")
-            svg.append("text").attr("class", 'bubbleTitle').text("Average Coffee Bean Price from 2013 to 2014").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height)
+            svg.append("text").attr("class", 'bubbleTitle').text("Середня ціна кавових бобів з 2013 по 2014").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * margin.top).style('font-size', 0.04 * height)
 
             var image = svg.append('image').attr('width', 1.2 * width).attr('x', 0).attr('y', margin.top * height / width).attr('xlink:href', img10).attr('height', 1.1 * height)
 
@@ -73,7 +84,7 @@ class AreaChartMini extends Component {
             svg.append("g")
                 .attr("class", "x-axis")
                 .attr("transform", `translate(0, ${height})`)
-                .call(d3.axisBottom(xScale))
+                .call(d3.axisBottom(xScale).tickFormat(formatUk))
 
             var yScale = d3.scaleLinear()
                 .domain([0.5, 0.9])
@@ -120,7 +131,7 @@ class AreaChartMini extends Component {
                 .attr("x", 0 - (height / 1.9))
                 .attr("dy", "1em")
                 .style("text-anchor", "middle")
-                .text("Coffee Price ($/lb)")
+                .text("Ціна ($/фунт)")
                 .style("font-weight", "bold")
 
             function make_x_gridlines() {
@@ -153,7 +164,7 @@ class AreaChartMini extends Component {
                 .attr("class", "title")
                 .attr("x", width / 3)
                 .attr("y", -length / margin.top)    // +20 to adjust position (lower)
-                .text("Robusta Coffee Price")
+                .text("Ціна кави Робуста")
                 .attr("fill", "black")
                 .style("font-weight", "bold")
 

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

@@ -131,14 +131,14 @@ class BarChartMini extends Component {
                     .attr("x", 0 - (height / 1.9))
                     .attr("dy", "1em")
                     .style("text-anchor", "middle")
-                    .text("Internet Speed (Mbps)")
+                    .text("Швидкість інтернету (Mbps)")
                     .style("font-weight", "bold")
 
                 svg
                     .append("text")
                     .attr("x", width / 4)
                     .attr("y", -3 * length / margin.top)    // +20 to adjust position (lower)
-                    .text("Global Internet Speed (Mbps)")
+                    .text("Швидкість інтернету у світі (Mbps)")
                     .attr("class", "title")
                     .attr("fill", "black")
                     .style("font-weight", "bold")

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

@@ -191,7 +191,7 @@ class BubbleChartMini extends Component {
                         }
                     })
                     .style("font-weight", "bold")
-                    .text("Ridership")
+                    .text("Пасажиропотік")
 
                 svg.append("text")
                     .attr("class", "legend-title")
@@ -212,7 +212,7 @@ class BubbleChartMini extends Component {
                         }
                     })
                     .style("font-weight", "bold")
-                    .text("(bn per year)")
+                    .text("(млрд/рік)")
 
                 svg
                     .selectAll("legend")
@@ -339,7 +339,7 @@ class BubbleChartMini extends Component {
                     .attr("x", 0 - (height / 1.9))
                     .attr("dy", "1em")
                     .style("text-anchor", "middle")
-                    .text("Total System Length (Km)")
+                    .text("Загальна протяжність системи (км)")
                     .style("font-weight", "bold")
 
                 svg.append("text")
@@ -354,14 +354,14 @@ class BubbleChartMini extends Component {
                     })
                     .style("text-anchor", "middle")
                     .style("font-weight", "bold")
-                    .text("Number of Stations")
+                    .text("Кількість станцій")
 
                 svg
                     .append("text")
                     .attr("class", "title")
                     .attr("x", width / 3)
                     .attr("y", -length / margin.top)    // +20 to adjust position (lower)
-                    .text("Metro Systems of the World")
+                    .text("Системи метро у світі")
                     .attr("fill", "black")
                     .style("font-weight", "bold")
             })

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

@@ -46,173 +46,10 @@ class ChoroplethMini extends Component {
             .attr("height", height + margin.top + margin.bottom)
             .append("g")
 
-        svg.append("text").attr("class", 'bubbleTitle').text("Unemployment Rates for States in 2020").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 0.9 * margin.top).style('font-size', 0.04 * height)
+        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)
 
-        // else {
-        //     const margin = { top: length / 7, right: length / 7, bottom: length / 7, left: length / 7 },
-        //         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")
-        //         .attr("transform", `translate(${margin.left},${margin.top})`);
-
-        //     // svg.append("text").attr("class", 'bubbleTitle').text("Unemployment Rates for States in 2015").style("font-weight", 'bolder').attr('x', 1.2 * margin.top).attr('y', 1.2 * 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)
-
-        //     var projection = d3.geoAlbersUsa()
-        //         .translate([width / 2, height / 2])
-        //         .scale(Math.min(e.clientHeight, e.clientWidth));
-
-        //     var path = d3.geoPath()
-        //         .projection(projection)
-
-        //     var lowColor = '#f7fbff'
-        //     var highColor = '#084594'
-
-        //     d3.csv(data).then(function (data) {
-        //         var names = {};
-        //         data.forEach(function (d) {
-        //             d.state = d.state;
-        //             d.value = parseFloat(d.value);
-        //             names[d.id] = d.code;
-        //         })
-        //         var dataArr = [];
-        //         for (var d = 0; d < data.length; d++) {
-        //             dataArr.push(parseFloat(data[d].value))
-        //         }
-        //         var minVal = d3.min(dataArr);
-        //         var maxVal = d3.max(dataArr);
-        //         var ramp = d3.scaleLinear().domain([minVal, maxVal]).range([lowColor, highColor])
-
-        //         for (var i = 0; i < data.length; i++) {
-        //             var dataState = data[i].state;
-        //             var dataVal = data[i].value;
-        //             var usa = topojson.feature(data_usa, data_usa.objects.states).features;
-        //             for (var j = 0; j < usa.length; j++) {
-        //                 var jsonState = usa[j].properties.name;
-        //                 if (dataState == jsonState) {
-        //                     usa[j].properties.value = dataVal;
-        //                     break;
-        //                 }
-        //             }
-        //         }
-        //         // Render the U.S. by using the path generator
-        //         svg.selectAll("path")
-        //             .data(usa)
-        //             .enter().append("path")
-        //             .attr("d", path)
-        //             .style("stroke", "#ffff")
-        //             .style("stroke-width", "1")
-        //             .style("fill", function (d) {
-        //                 return ramp(d.properties.value)
-        //             });
-
-        //         svg.selectAll("text").data(usa).enter().append("text")
-        //             .text(function (d) {
-        //                 return names[d.id];
-        //             })
-        //             .attr("x", function (d) {
-        //                 return path.centroid(d)[0];
-        //             })
-        //             .attr("y", function (d) {
-        //                 return path.centroid(d)[1];
-        //             })
-        //             .attr("class", "state-abbr")
-        //             .attr("text-anchor", "middle")
-        //             .attr("fill", "black")
-        //             .style("font-weight", "bold")
-
-        //         //var w = e.clientWidth/4, h = e.clientHeight/6;
-        //         //d3.select("body").select("svg").remove();
-        //         //d3.selectAll("svg").select(".legend").remove();
-
-        //         var legend = svg.append("defs")
-        //             .append("svg:linearGradient")
-        //             .attr("id", "gradient")
-        //             .attr("x1", "0%")
-        //             .attr("y1", "100%")
-        //             .attr("x2", "100%")
-        //             .attr("y2", "100%")
-        //             .attr("spreadMethod", "pad");
-
-        //         legend.append("stop")
-        //             .attr("offset", "0%")
-        //             .attr("stop-color", highColor)
-        //             .attr("stop-opacity", 1);
-
-        //         legend.append("stop")
-        //             .attr("offset", "100%")
-        //             .attr("stop-color", lowColor)
-        //             .attr("stop-opacity", 1);
-
-        //         if (width < 350) {
-        //             svg.append("rect")
-        //                 .attr("width", length / 4)
-        //                 .attr("height", length / 5.5 - margin.top)
-        //                 .style("fill", "url(#gradient)")
-        //                 .attr("transform", "translate(0," + (length / 5.4 - margin.left / 0.8) + ")");
-
-        //             svg.append("text").attr("x", 0).attr("y", length / 8.5 - 0.4 * margin.top).text("12%").style("font-weight", "bold").attr("class", "legend-value")
-        //             svg.append("text").attr("x", length / 20).attr("y", length / 8.5 - 0.4 * margin.top).text("10%").style("font-weight", "bold").attr("class", "legend-value")
-        //             svg.append("text").attr("x", length / 10).attr("y", length / 8.5 - 0.4 * margin.top).text("8%").style("font-weight", "bold").attr("class", "legend-value")
-        //             svg.append("text").attr("x", length / 7).attr("y", length / 8.5 - 0.4 * margin.top).text("6%").style("font-weight", "bold").attr("class", "legend-value")
-        //             svg.append("text").attr("x", length / 5).attr("y", length / 8.5 - 0.4 * margin.top).text("4%").style("font-weight", "bold").attr("class", "legend-value")
-        //         }
-        //         else {
-        //             svg.append("rect")
-        //                 .attr("width", length / 4)
-        //                 .attr("height", length / 5.5 - margin.top)
-        //                 .style("fill", "url(#gradient)")
-        //                 .attr("transform", "translate(0," + (length / 5.4 - margin.left / 1) + ")");
-
-        //             svg.append("text").attr("x", 0).attr("y", length / 6.5 - 0.4 * margin.top).text("12%").style("font-weight", "bold").attr("class", "legend-value")
-        //             svg.append("text").attr("x", length / 20).attr("y", length / 6.5 - 0.4 * margin.top).text("10%").style("font-weight", "bold").attr("class", "legend-value")
-        //             svg.append("text").attr("x", length / 10).attr("y", length / 6.5 - 0.4 * margin.top).text("8%").style("font-weight", "bold").attr("class", "legend-value")
-        //             svg.append("text").attr("x", length / 7).attr("y", length / 6.5 - 0.4 * margin.top).text("6%").style("font-weight", "bold").attr("class", "legend-value")
-        //             svg.append("text").attr("x", length / 5).attr("y", length / 6.5 - 0.4 * margin.top).text("4%").style("font-weight", "bold").attr("class", "legend-value")
-        //         }
-
-
-
-
-
-        //         /*
-        //         var y = d3.scaleLinear()
-        //             .range([length/4 - length/3.3, length/4.4 - length/(margin.left/4.0)])
-        //             //.domain([maxVal, minVal]);
-        //         //ar formatPercent = d3.format("%");
-        //         var yAxis = d3.axisBottom(y).tickValues(["12%", "11%", "10%", "9%"]);
-        //         svg.append("g")
-        //             //.attr("class", "axis")
-        //             .attr("transform", "translate(" + (length/5.45-margin.left/1.1) + "," + margin.right/0.75 + ")")
-        //             .call(yAxis)
-        //             .style("font-weight", "bold")
-        //             .style("font-size", 1.3*(length/margin.top)); */
-
-        //         svg
-        //             .append("text")
-        //             .attr("x", width / 5.5)
-        //             .attr("y", -length / margin.top)    // +20 to adjust position (lower)
-        //             .text("Unemployment Rate for States in 2020 ")
-        //             .attr("class", "title")
-        //             .attr("fill", "black")
-        //             .style("font-weight", "bold")
-
-        //     });
-
-        // }
-
-
     }
 
 

ReactTool/frontend/src/components/data/AreaChart-2.csv

@@ -1,25 +1,25 @@
 date,value
-Jan-2018,88.65
+Січ-2018,88.65
-Feb-2018,89.24
+Лют-2018,89.24
-Mar-2018,88.18
+Бер-2018,88.18
-Apr-2018,88.31
+Кві-2018,88.31
-May-2018,88.74
+Тра-2018,88.74
-Jun-2018,86.07
+Чер-2018,86.07
-Jul-2018,84.42
+Лип-2018,84.42
-Aug-2018,80.74
+Сер-2018,80.74
-Sep-2018,76.70
+Вер-2018,76.70
-Oct-2018,85.32
+Жов-2018,85.32
-Nov-2018,83.52
+Лис-2018,83.52
-Dec-2018,77.57
+Гру-2018,77.57
-Jan-2019,78.24
+Січ-2019,78.24
-Feb-2019,78.65
+Лют-2019,78.65
-Mar-2019,76.96
+Бер-2019,76.96
-Apr-2019,73.28
+Кві-2019,73.28
-May-2019,71.12
+Тра-2019,71.12
-Jun-2019,74.02
+Чер-2019,74.02
-Jul-2019,73.93
+Лип-2019,73.93
-Aug-2019,70.78
+Сер-2019,70.78
-Sep-2019,70.64
+Вер-2019,70.64
-Oct-2019,68.63
+Жов-2019,68.63
-Nov-2019,73.28
+Лис-2019,73.28
-Dec-2019,73.22
+Гру-2019,73.22

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

@@ -1,15 +1,15 @@
 Country,Speed
-Australia,79.24
+Австралія,79.24
-China,78.61
+Китай,78.61
-Hong Kong,43.88
+Гонконг,43.88
-India,13.45
+Індія,13.45
-Indonesia,16.16
+Індонезія,16.16
-Japan,40.51
+Японія,40.51
-Malaysia,23.74
+Малайзія,23.74
-New Zealand,92.05
+Нова Зеландія,92.05
-Singapore,68.32
+Сінгапур,68.32
-South Korea,98.93
+Південна Корея,98.93
-Sri Lanka,12.60
+Шрі-Ланка,12.60
-Taiwan,51.67
+Тайвань,51.67
-Thailand,31.38
+Тайланд,31.38
-Vietnam,35.33
+Вʼєтнам,35.33

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

@@ -1,12 +1,12 @@
 City,Length,NumberofStations,Ridership
-Delhi,230,348.12,1.7
+Делі,230,348.12,1.7
-Guangzhow,247,531.1,2.4
+Гуанчжоу,247,531.1,2.4
-Tokyo,249,316.3,3.6
+Токіо,249,316.3,3.6
-Mexico City,163,200.9,0.93
+Мехіко,163,200.9,0.93
-Moscow,198,412.1,1.6
+Москва,198,412.1,1.6
-London,317,439.2,0.335
+Лондон,317,439.2,0.335
-Seoul,436,547.9,2.7
+Сеул,436,547.9,2.7
-Paris,304,219.9,2.3
+Париж,304,219.9,2.3
-Beijing,342,727,0.75
+Пекін,342,727,0.75
-Shanghai,369,743,2.8
+Шанхай,369,743,2.8
-N.Y.C.,458,443.7,0.67
+Нью-Йорк.,458,443.7,0.67

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

@@ -1,13 +1,13 @@
 Month,Price
-Jan-2020,57.52
+Січ-2020,57.52
-Feb-2020,50.54
+Лют-2020,50.54
-Mar-2020,29.21
+Бер-2020,29.21
-Apr-2020,16.55
+Кві-2020,16.55
-May-2020,28.56
+Тра-2020,28.56
-Jun-2020,38.31
+Чер-2020,38.31
-Jul-2020,40.71
+Лип-2020,40.71
-Aug-2020,42.34
+Сер-2020,42.34
-Sep-2020,39.63
+Вер-2020,39.63
-Oct-2020,39.4
+Жов-2020,39.4
-Nov-2020,40.94
+Лис-2020,40.94
-Dec-2020,47.02
+Гру-2020,47.02

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

@@ -4,4 +4,4 @@ Xiaomi,16
 Apple,15
 Oppo,10
 Vivo,10
-Others,24
+Інші,24

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

@@ -1,11 +1,11 @@
 City,Sandwich,Water,Peanut,Soda,Vodka
-Helsinki,38.2,6.4,12.1,6.4,5.5
+Хельсінкі,38.2,6.4,12.1,6.4,5.5
-Oslo,29.4,7.4,15.8,7.1,5.1
+Осло,29.4,7.4,15.8,7.1,5.1
-Seoul,27.4,7.4,6.1,7.9,9.9
+Сеул,27.4,7.4,6.1,7.9,9.9
-Zurich,31.3,5.9,10.8,5.6,4.3
+Цюріх,31.3,5.9,10.8,5.6,4.3
-Stockholm,28.4,4.1,11.3,4.9,5
+Стокгольм,28.4,4.1,11.3,4.9,5
-Paris,23.6,6.8,12.6,6.8,7.0
+Париж,23.6,6.8,12.6,6.8,7.0
-N.Y.C.,24.2,3.9,16.8,3.9,7.1
+Нью-Йорк.,24.2,3.9,16.8,3.9,7.1
-Singapore,19.4,5.2,14.8,6.6,6.2
+Сінгапур,19.4,5.2,14.8,6.6,6.2
-Toronto,20.8,5.4,18.2,3.4,8.0
+Торонто,20.8,5.4,18.2,3.4,8.0
-Copenhagen,24.3,2.8,10.8,5.0,3.7
+Копенгаген,24.3,2.8,10.8,5.0,3.7

ReactTool/frontend/src/components/data/Treemap.json

@@ -1,7 +1,7 @@
 {
   "children": [
     {
-      "name": "Search/Portal",
+      "name": "Пошук/Портал",
       "children": [
         {
           "name": "Google",
@@ -31,7 +31,7 @@
       "colname": "level2"
     },
     {
-      "name": "Social Network",
+      "name": "Соцмережа",
       "children": [
         {
           "name": "Facebook",
@@ -61,7 +61,7 @@
       "colname": "level2"
     },
     {
-      "name": "Software",
+      "name": "Програмне забезпечення",
       "children": [
         {
           "name": "Mozilla",
@@ -97,7 +97,7 @@
       "colname": "level2"
     },
     {
-      "name": "Retail",
+      "name": "Онлайн-магазини",
       "children": [
         {
           "name": "eBay",
@@ -133,7 +133,7 @@
       "colname": "level2"
     },
     {
-      "name": "Computer",
+      "name": "Копмʼютери",
       "children": [
         {
           "name": "Apple",

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

@@ -146,7 +146,7 @@ class HistogramMini extends Component {
                     .attr("x", - (height / 1.9))
                     .attr("dy", "1em")
                     .style("text-anchor", "middle")
-                    .text("Number of Customers")
+                    .text("Кількість користувачів")
                     .style("font-weight", "bold")
 
                 svg.append("text")
@@ -164,14 +164,14 @@ class HistogramMini extends Component {
                     })
                     .style("text-anchor", "middle")
                     .style("font-weight", "bold")
-                    .text("Distance (in Km)")
+                    .text("Відстань (км)")
 
                 svg
                     .append("text")
                     .attr("class", "title")
                     .attr("x", width / 3)
                     .attr("y", -length / margin.top)    // +20 to adjust position (lower)
-                    .text("Trip Distance and Customers")
+                    .text("Відстань та користувачі")
                     .attr("fill", "black")
                     .style("font-weight", "bold")
             })

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

@@ -5,6 +5,18 @@ import { Container, Col, Row, Navbar, Button, ButtonGroup, ToggleButton, Form, I
 import '../App.css';
 import img12 from '../components/data/Mini-VLAT/LineChart.png';
 
+const ukLocale = {
+    "dateTime": "%A, %e %B %Y р. %X",
+    "date": "%d.%m.%Y",
+    "time": "%H:%M:%S",
+    "periods": ["AM", "PM"],
+    "days": ["неділя", "понеділок", "вівторок", "середа", "четвер", "п'ятниця", "субота"],
+    "shortDays": ["нд", "пн", "вт", "ср", "чт", "пт", "сб"],
+    "months": ["січень", "лютий", "березень", "квітень", "травень", "червень", "липень", "серпень", "вересень", "жовтень", "листопад", "грудень"],
+    "shortMonths": ["січ", "лют", "бер", "кві", "тра", "чер", "лип", "сер", "вер", "жов", "лис", "гру"]
+};
+
+const formatUk = d3.timeFormatLocale(ukLocale).format("%B");
 
 class LineChartMini extends Component {
 
@@ -72,7 +84,7 @@ class LineChartMini extends Component {
             svg.append("g")
                 //.attr("class", "axis")
                 .attr("transform", `translate(0, ${height})`)
-                .call(d3.axisBottom(xScale).tickFormat(d3.timeFormat("%B")))
+                .call(d3.axisBottom(xScale).tickFormat(formatUk))
                 /*
                 .style("font-size", function() {
                     if (length < 700){
@@ -206,7 +218,7 @@ class LineChartMini extends Component {
                 .attr("x", 0 - (height / 1.9))
                 .attr("dy", "1em")
                 .style("text-anchor", "middle")
-                .text("Oil Price ($)")
+                .text("Ціна на нафту ($)")
                 .style("font-weight", "bold")
 
             svg
@@ -214,7 +226,7 @@ class LineChartMini extends Component {
                 .attr("class", "title")
                 .attr("x", width / 2.5)
                 .attr("y", -length / margin.top)    // +20 to adjust position (lower)
-                .text("Oil Prices in 2020")
+                .text("Ціни на нафту в 2020")
                 .attr("fill", "black")
                 .style("font-weight", "bold")
 
@@ -233,7 +245,7 @@ class LineChartMini extends Component {
                 })
                 .style("text-anchor", "middle")
                 .style("font-weight", "bold")
-                .text("Month")
+                .text("Місяць")
 
 
         }

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

@@ -60,7 +60,7 @@ class PieChartMini extends Component {
                 .append("g")
                 .attr("transform", `translate(${width / 2}, ${height / 2})`);
 
-            var data = { Samsung: 17.6, Xiaomi: 15.5, Apple: 15.0, Oppo: 10.2, Vivo: 9.8, Others: 31.9 }
+            var data = { Samsung: 17.6, Xiaomi: 15.5, Apple: 15.0, Oppo: 10.2, Vivo: 9.8, Інші: 31.9 }
 
             const color = d3.scaleOrdinal()
                 .range(['#0868ac', '#f03b20', '#feb24c', '#78c679', '#ffffb2', '#756bb1'])
@@ -119,7 +119,7 @@ class PieChartMini extends Component {
                 .attr("class", "title")
                 .attr("x", -width / 5.5)
                 .attr("y", -width / 3)    // +20 to adjust position (lower)
-                .text("Global Smartphone Market Share in 2021")
+                .text("Світовий ринок смартфонів в 2021")
                 .attr("fill", "black")
                 .style("font-weight", "bold")
 

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

@@ -135,7 +135,7 @@ class ScatterPlotMini extends Component {
                     .attr("x", 0 - (height / 1.9))
                     .attr("dy", "1em")
                     .style("text-anchor", "middle")
-                    .text("Weight (kg)")
+                    .text("Маса (кг)")
                     .style("font-weight", "bold")
 
                 svg
@@ -143,7 +143,7 @@ class ScatterPlotMini extends Component {
                     .attr("class", "title")
                     .attr("x", width / 4)
                     .attr("y", -length / margin.top)    // +20 to adjust position (lower)
-                    .text("Weight and Height of 85 Individuals")
+                    .text("Маса та висота 85 осіб")
                     .attr("fill", "black")
                     .style("font-weight", "bold")
 
@@ -159,7 +159,7 @@ class ScatterPlotMini extends Component {
                     })
                     .style("text-anchor", "middle")
                     .style("font-weight", "bold")
-                    .text("Height (cm)")
+                    .text("Висота (см)")
 
 
             })

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

@@ -152,7 +152,7 @@ class StackedBarChartMini extends Component {
                     .attr("x", 0 - (height / 1.9))
                     .attr("dy", "1em")
                     .style("text-anchor", "middle")
-                    .text("Olympic Medals (%)")
+                    .text("Олімпійські Медалі (%)")
                     .style("font-weight", "bold")
 
                 svg.append("text")
@@ -167,7 +167,7 @@ class StackedBarChartMini extends Component {
                     })
                     .style("text-anchor", "middle")
                     .style("font-weight", "bold")
-                    .text("Countries")
+                    .text("Країни")
 
                 //var legend = svg.append('g').attr('class', 'legend').attr('transform', 'translate(' + (margin.left/2) + ',0)');
 
@@ -274,7 +274,7 @@ class StackedBarChartMini extends Component {
                     .attr("fill", "#feb24c")
 
                 svg.append("text")
-                    .text("Bronze")
+                    .text("Бронза")
                     .attr("x", function () {
                         if (width < 500 && width > 400) {
                             return width + (5.5 * width / margin.left)
@@ -300,7 +300,7 @@ class StackedBarChartMini extends Component {
                     .attr("class", "legend-value")
 
                 svg.append("text")
-                    .text("Silver")
+                    .text("Срібло")
                     .attr("x", function () {
                         if (width < 500 && width > 400) {
                             return width + (5.5 * width / margin.left)
@@ -326,7 +326,7 @@ class StackedBarChartMini extends Component {
                     .attr("class", "legend-value")
 
                 svg.append("text")
-                    .text("Gold")
+                    .text("Золото")
                     .attr("x", function () {
                         if (width < 500 && width > 400) {
                             return width + (5.5 * width / margin.left)
@@ -363,7 +363,7 @@ class StackedBarChartMini extends Component {
                         }
                     })
                     .attr("y", -length / margin.top)    // +20 to adjust position (lower)
-                    .text("Tokyo 2020 Olympics Performance Summary")
+                    .text("Підсумок Олімпіади 2020 в Токіо")
                     .attr("fill", "black")
                     .style("font-weight", "bold")
 

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

@@ -123,7 +123,7 @@ class StackedAreaPlotMini extends Component {
                     .attr("x", 0 - (height / 1.9))
                     .attr("dy", "1em")
                     .style("text-anchor", "middle")
-                    .text("Number of Girls")
+                    .text("Кількість дівчат")
                     .style("font-weight", "bold")
                     .style('font-size', function () {
                         if (width < 500) {
@@ -143,7 +143,7 @@ class StackedAreaPlotMini extends Component {
                     })
                     .style("text-anchor", "middle")
                     .style("font-weight", "bold")
-                    .text("Year")
+                    .text("Рік")
 
                 const areaChart = svg.append('g')
                     .attr("clip-path", "url(#clip)")
@@ -276,7 +276,7 @@ class StackedAreaPlotMini extends Component {
                     .attr("fill", "#3182bd")
 
                 svg.append("text")
-                    .text("Olivia")
+                    .text("Олівія")
                     .attr("x", function () {
                         if (width < 500 && width > 400) {
                             return width + (2 * width / margin.left) + length / 25;
@@ -296,7 +296,7 @@ class StackedAreaPlotMini extends Component {
                     .attr("class", "legend-value")
 
                 svg.append("text")
-                    .text("Isla")
+                    .text("Айле")
                     .attr("x", function () {
                         if (width < 500 && width > 400) {
                             return width + (2 * width / margin.left) + length / 25;
@@ -317,7 +317,7 @@ class StackedAreaPlotMini extends Component {
                     .attr("class", "legend-value")
 
                 svg.append("text")
-                    .text("Amelia")
+                    .text("Амелія")
                     .attr("x", function () {
                         if (width < 500 && width > 400) {
                             return width + (2 * width / margin.left) + length / 25;
@@ -349,7 +349,7 @@ class StackedAreaPlotMini extends Component {
                         }
                     })
                     .attr("y", -length / margin.top)    // +20 to adjust position (lower)
-                    .text("Popular Girls' names in the UK")
+                    .text("Популярні жіночі імена в Великій Британії")
                     .attr("fill", "black")
                     .style("font-weight", "bold")
             })

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

@@ -172,7 +172,7 @@ class StackedBarChart2Mini extends Component {
                     .attr("x", - (height / 1.9))
                     .attr("dy", "1em")
                     .style("text-anchor", "middle")
-                    .text("Cost ($)")
+                    .text("Ціна ($)")
                     .style("font-weight", "bold")
 
                 svg.append("text")
@@ -187,7 +187,7 @@ class StackedBarChart2Mini extends Component {
                     })
                     .style("text-anchor", "middle")
                     .style("font-weight", "bold")
-                    .text("Cities")
+                    .text("Міста")
 
                 var dataNormalized = []
                 data.forEach(function (d) {
@@ -339,7 +339,7 @@ class StackedBarChart2Mini extends Component {
                     .attr("fill", "#7fc97f")
 
                 svg.append("text")
-                    .text("Vodka")
+                    .text("Горілка")
                     .attr("x", function () {
                         if (width < 500 && width > 400) {
                             return width + (5 * width / margin.left)
@@ -365,7 +365,7 @@ class StackedBarChart2Mini extends Component {
                     .attr("class", "legend-value")
 
                 svg.append("text")
-                    .text("Soda")
+                    .text("Содова")
                     .attr("x", function () {
                         if (width < 500 && width > 400) {
                             return width + (5 * width / margin.left)
@@ -391,7 +391,7 @@ class StackedBarChart2Mini extends Component {
                     .attr("class", "legend-value")
 
                 svg.append("text")
-                    .text("Peanut")
+                    .text("Арахіс")
                     .attr("x", function () {
                         if (width < 500 && width > 400) {
                             return width + (5 * width / margin.left)
@@ -417,7 +417,7 @@ class StackedBarChart2Mini extends Component {
                     .attr("class", "legend-value")
 
                 svg.append("text")
-                    .text("Water")
+                    .text("Вода")
                     .attr("x", function () {
                         if (width < 500 && width > 400) {
                             return width + (5 * width / margin.left)
@@ -443,7 +443,7 @@ class StackedBarChart2Mini extends Component {
                     .attr("class", "legend-value")
 
                 svg.append("text")
-                    .text("Sandwich")
+                    .text("Сендвіч")
                     .attr("x", function () {
                         if (width < 500 && width > 400) {
                             return width + (5 * width / margin.left)
@@ -473,7 +473,7 @@ class StackedBarChart2Mini extends Component {
                     .attr("class", "title")
                     .attr("x", width / 3)
                     .attr("y", -length / margin.top)    // +20 to adjust position (lower)
-                    .text("Room Service Prices")
+                    .text("Вартість обслуговування номера")
                     .attr("fill", "black")
                     .style("font-weight", "bold")
             })

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

@@ -200,7 +200,7 @@ class TreeMapMini extends Component {
                 .attr("class", "title")
                 .attr("x", width / margin.left)
                 .attr("y", -length / margin.top)    // +20 to adjust position (lower)
-                .text("The Number of Unique Visitors for Websites")
+                .text("Кількість унікальних відвідувачів вебсайтів")
                 .attr("fill", "black")
                 .style("font-weight", "bold")
 

ReactTool/frontend/src/pages/visualization_quiz.js

@@ -78,7 +78,7 @@ let minivis = [
         'vis': ScatterPlotMini, 
         'type': 'Точкова діаграма (Scatterplot)', 
         'question': 'Існує негативна лінійна залежність між ростом і вагою 85 чоловіків.', 
-        'options': ['True', 'False', "Пропустити"], 
+        'options': ['Вірно', 'Невірно', "Пропустити"], 
         'correct_answer': 1, 
         'cimage': img1 
     },