improve graph style and add some intro

src/app/app.component.html

@@ -1,8 +1,10 @@
 <main>
-  <h1 class="pl-2">SDM - DIH integration bridge</h1>
+  <h1 class="pl-2">SDM &ndash; DIH integration bridge</h1>
   <div class="pl-2">
     <h3>About</h3>
-    <p>...</p>
+    <p>This page provides some showcase ideas about visualization of SDM model outputs in various points in time. 
+      SDM is a System Dynamics Model developed as a part of the Polirural project. <a href="hub.polirural.eu">DIH</a> is a Digital Innovation Hub developed as another part of the Polirural project.
+      Regional attractiveness is one of the tools present in the DIH.</p>
   </div>
   <div class="graph-row">
     <year-graph></year-graph>

src/app/graphs/year-graph/year-graph.component.ts

@@ -37,19 +37,20 @@ export class YearGraphComponent {
     const regionData = this.sdmDihService.sdmData[this.selectedYear].find(
       (row) => row['MODEL'] === region
     );
-    const width = 200;
-    const height = 200;
-    //select("#year-graph-place").select("svg")?.remove();
+    const width = 100 / this.regions.length;
+    const height = 100 / this.regions.length;
     // append the svg object to the div called 'year-graph-place'
     const svg = select('#year-graph-place')
       .append('svg')
-      .attr('width', width)
-      .attr('height', height)
+      .attr('width', `${width}%`)
+      .attr('height', `${height}%`)
+      .append('svg')
+      .attr('x', '50%')
+      .attr('y', '50%')
+      .attr('overflow', 'visible')
       .append('g')
-      .data([regionData])
-      .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
-    //const yearData = this.sdmDihService.aggregatedData[this.selectedYear];
-    //const color = `rgba(100, 200, 100, ${yearData[0]['Natural_Capital']})`;
+      .data([regionData]);
+    //.attr('transform', 'translate(' + width / 2 + '% ,' + height / 2 + '% )');
     svg
       .append('circle')
       .attr('cx', 0)
@@ -62,10 +63,11 @@ export class YearGraphComponent {
       });
     svg
       .append('text')
-      .attr('x', 50)
-      .attr('y', 50)
+      .attr('x', 0)
+      .attr('y', -60)
       .attr('dy', '.35em')
-      .text((d) => d['MODEL']);
+      .text((d) => d['MODEL'])
+      .style('text-anchor', 'middle');
   }
 
   redrawGraphs() {

src/styles.scss

@@ -75,7 +75,7 @@ main {
 h1 {
   color: #ff3e00;
   text-transform: uppercase;
-  font-size: 4em;
+  font-size: 3em;
   font-weight: 100;
 }