oleh/Mini-VLAT-ua
1
0
Fork 0
mirror of https://github.com/olehomelchenko/Mini-VLAT-ua.git synced 2025-12-21 21:22:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

localize charts into ukrainian

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-09 18:10:25 +02:00
parent d0afcee738
commit ec4151992f
20 changed files with 146 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
ReactTool/frontend/src/components/choropleth-mini.js
View File

@@ -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")
// });
// }
}