lab done

labs/lab3/CSS/style.css

@@ -11,7 +11,7 @@ svg path, line {
     width: 1px;
 }
 
-#errorDisplay{
+.error{
     color:red;
     background-color: black;
     font-weight: bolder;

labs/lab3/JavaScript/chart.js

@@ -20,7 +20,9 @@ function drawGraph(data, keyX, drawMin, drawMax, graphtype) {
 
     // создаем массив для построения графика
     let arrGraph = createArrGraph(data, keyX);
-
+    if(keyX=="Год"){
+        arrGraph = d3.sort(arrGraph, (x,y)=>Number(x["labelX"])-Number(y["labelX"]));
+    }
     const svg = d3.select("svg")
     svg.selectAll('*').remove();
 
@@ -36,12 +38,17 @@ function drawGraph(data, keyX, drawMin, drawMax, graphtype) {
     const [scX, scY] = createAxis(svg, arrGraph, attr_area);
 
     // рисуем график
-    if (drawMin) {
-        createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0)
-    }
 
-    if (drawMax) {
+    const scaleYDomain = d3.extent(arrGraph.map(d => d.values[1]));
-        createChart(svg, arrGraph, scX, scY, attr_area, "red", 1)
+    if (drawMin && drawMax){
+        createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0,graphtype,0,scaleYDomain)
+        createChart(svg, arrGraph, scX, scY, attr_area, "red", 1,graphtype,0,scaleYDomain)
+    }
+    else if (drawMin) {
+        createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0,graphtype,1,scaleYDomain)
+    }
+    else if (drawMax) {
+        createChart(svg, arrGraph, scX, scY, attr_area, "red", 1,graphtype,1,scaleYDomain)
     }
 }
 
@@ -82,7 +89,22 @@ function createAxis(svg, data, attr_area) {
     return [scaleX, scaleY]
 }
 
-function createChart(svg, data, scaleX, scaleY, attr_area, color, valueIdx) {
+function createChart(svg, data, scaleX, scaleY, attr_area, color, valueIdx,isHistogram,horisontalScale,scaleYDomain) {
+    if (isHistogram){
+    svg.selectAll(".dot")
+        .data(data)
+        .enter()
+        .append("rect")
+        .attr("x", d => scaleX(d.labelX)+valueIdx*6)
+        .attr("y",  d => scaleY(d.values[valueIdx]))
+        .attr("width",6*(horisontalScale+1))
+        .attr("height",d => scaleY(scaleYDomain[0]*0.85)-scaleY(d.values[valueIdx]))
+        .attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
+        .style("fill", color)
+
+
+    }
+    else{
     const r = 4;
 
     svg.selectAll(".dot")
@@ -90,8 +112,9 @@ function createChart(svg, data, scaleX, scaleY, attr_area, color, valueIdx) {
         .enter()
         .append("circle")
         .attr("r", r)
-        .attr("cx", d => scaleX(d.labelX) + scaleX.bandwidth() / 2)
+        .attr("cx", d => scaleX(d.labelX) + scaleX.bandwidth() / 2+valueIdx*4)
         .attr("cy", d => scaleY(d.values[valueIdx]))
         .attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
         .style("fill", color)
-}
+}
+}

labs/lab3/JavaScript/main.js

@@ -16,15 +16,18 @@ document.addEventListener("DOMContentLoaded", function () {
         clearGraph();
         updateGraph();
     });
+    document.querySelectorAll("[name=\"OY\"]").forEach((x) => { 
+        x.addEventListener("click", () => { d3.select("#drawButton").attr("class",  getOY().length == 0 ? "error" : ""); }) 
+    })
 
 });
 
 
 function updateGraph() {
-    const keyX = ["Год","Страна"][getOX()];
+    const keyX = ["Год", "Страна"][getOX()];
     const yAxis = getOY();
-    errorDisplay.hidden = yAxis.length!=0
+    d3.select("#drawButton").attr("class", yAxis.length == 0 ? "error" : "");
-    drawGraph(buildings,keyX, yAxis.includes(0),yAxis.includes(1));
+    drawGraph(buildings, keyX, yAxis.includes(0), yAxis.includes(1), getGraphType());
 
 }
 
@@ -38,6 +41,10 @@ function getOY() {
         (x) => Number(x.value));
 }
 
-function clearGraph(){
+function clearGraph() {
     d3.select("svg").selectAll('*').remove();
+}
+
+function getGraphType() {
+    return Number(graphType.value);
 }

labs/lab3/index.html

@@ -26,6 +26,11 @@
   <br>
   <input type="checkbox" value="1" name="OY"> <span>Max</span>
   
+  <br>
+  <select id="graphType">
+    <option value="0" selected>Точечная</option>
+    <option value="1">Гистограма</option>
+  </select>
   <button id="drawButton">Рисовать</button>
   
   <br>