done untill histogram

labs/lab3/JavaScript/chart.js

@@ -2,16 +2,96 @@
 //   data - исходный массив (например, buildings)
 //   key - поле, по которому осуществляется группировка
 
-function createArrGraph(data, key) {  
-  
+function createArrGraph(data, key) {
+
     const groupObj = d3.group(data, d => d[key]);
 
-    let arrGraph =[];
-    for(let entry of groupObj) {
+    let arrGraph = [];
+    for (let entry of groupObj) {
         const minMax = d3.extent(entry[1].map(d => d['Высота']));
-        arrGraph.push({labelX : entry[0], values : minMax});
-     }
+        arrGraph.push({ labelX: entry[0], values: minMax });
+    }
 
-     return arrGraph;
+    return arrGraph;
 }
 
+function drawGraph(data, keyX, drawMin, drawMax, graphtype) {
+    // значения по оси ОХ    
+
+    // создаем массив для построения графика
+    let arrGraph = createArrGraph(data, keyX);
+
+    const svg = d3.select("svg")
+    svg.selectAll('*').remove();
+
+    // создаем словарь с атрибутами области вывода графика
+    const attr_area = {
+        width: parseFloat(svg.style('width')),
+        height: parseFloat(svg.style('height')),
+        marginX: 50,
+        marginY: 50
+    }
+
+    // создаем шкалы преобразования и выводим оси
+    const [scX, scY] = createAxis(svg, arrGraph, attr_area);
+
+    // рисуем график
+    if (drawMin) {
+        createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0)
+    }
+
+    if (drawMax) {
+        createChart(svg, arrGraph, scX, scY, attr_area, "red", 1)
+    }
+}
+
+function createAxis(svg, data, attr_area) {
+    // находим интервал значений, которые нужно отложить по оси OY 
+    // максимальное и минимальное значение и максимальных высот по каждой стране
+    const [min, max] = d3.extent(data.map(d => d.values[1]));
+
+    // функция интерполяции значений на оси
+    // по оси ОХ текстовые значения
+    const scaleX = d3.scaleBand()
+        .domain(data.map(d => d.labelX))
+        .range([0, attr_area.width - 2 * attr_area.marginX]);
+
+    const scaleY = d3.scaleLinear()
+        .domain([min * 0.85, max * 1.1])
+        .range([attr_area.height - 2 * attr_area.marginY, 0]);
+
+    // создание осей
+    const axisX = d3.axisBottom(scaleX); // горизонтальная 
+    const axisY = d3.axisLeft(scaleY); // вертикальная
+
+    // отрисовка осей в SVG-элементе
+    svg.append("g")
+        .attr("transform", `translate(${attr_area.marginX}, 
+                                      ${attr_area.height - attr_area.marginY})`)
+        .call(axisX)
+        .selectAll("text") // подписи на оси - наклонные
+        .style("text-anchor", "end")
+        .attr("dx", "-.8em")
+        .attr("dy", ".15em")
+        .attr("transform", d => "rotate(-45)");
+
+    svg.append("g")
+        .attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
+        .call(axisY);
+
+    return [scaleX, scaleY]
+}
+
+function createChart(svg, data, scaleX, scaleY, attr_area, color, valueIdx) {
+    const r = 4;
+
+    svg.selectAll(".dot")
+        .data(data)
+        .enter()
+        .append("circle")
+        .attr("r", r)
+        .attr("cx", d => scaleX(d.labelX) + scaleX.bandwidth() / 2)
+        .attr("cy", d => scaleY(d.values[valueIdx]))
+        .attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
+        .style("fill", color)
+}

labs/lab3/JavaScript/main.js

@@ -11,5 +11,33 @@ document.addEventListener("DOMContentLoaded", function () {
         }
         tableIsDisplayed = !tableIsDisplayed;
     })
+    updateGraph();
+    drawButton.addEventListener("click", () => {
+        clearGraph();
+        updateGraph();
+    });
 
-})
+});
+
+
+function updateGraph() {
+    const keyX = ["Год","Страна"][getOX()];
+    const yAxis = getOY();
+    errorDisplay.hidden = yAxis.length!=0
+    drawGraph(buildings,keyX, yAxis.includes(0),yAxis.includes(1));
+
+}
+
+
+function getOX() {
+    return Number(document.querySelector("input[name=\"OX\"]:checked").value);
+}
+
+function getOY() {
+    return d3.map(document.querySelectorAll("input[name=\"OY\"]:checked"),
+        (x) => Number(x.value));
+}
+
+function clearGraph(){
+    d3.select("svg").selectAll('*').remove();
+}