done untill histogram

labs/lab3/CSS/style.css

@@ -9,4 +9,11 @@ svg path, line {
     fill: none;
     stroke: #333333;
     width: 1px;
+}
+
+#errorDisplay{
+    color:red;
+    background-color: black;
+    font-weight: bolder;
+    width: min-content;
 }

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 =[];
+    let arrGraph = [];
-    for(let entry of groupObj) {
+    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();
+}

labs/lab3/index.html

@@ -12,6 +12,23 @@
 <body>   
   <h3>Список самых высоких зданий</h3>
   <svg></svg>
+  <p>Значение по оси OX</p>
+  
+  <input type="radio" value="0" name="OX" checked> <span>Год</span>
+  <br>
+  <input type="radio" value="1" name="OX"> <span>Страна</span>
+
+  
+  <p>Значение по оси OY</p>
+  <p id="errorDisplay" hidden>Выберете хотя бы одно</p>
+  
+  <input type="checkbox" value="0" name="OY" checked> <span>Min</span>
+  <br>
+  <input type="checkbox" value="1" name="OY"> <span>Max</span>
+  
+  <button id="drawButton">Рисовать</button>
+  
+  <br>
   <button id="tableVisibilityButton">Скрыть Таблицу</button>
   <table id="build"> 
   </table>