feat: add data points to radar chart

src/charts/radarChart.ts

@@ -76,43 +76,53 @@ export default class RadarChart extends Chart {
                 label: attribute.label,
                 key: attribute.key,
             })
-            console.log(vis.axes)
         }
     }
 
     updateVis(selectedData: any[]): void {
         const vis = this;
-        const data = vis.chart.select('.dataWrapper')
+        const dataWrapper = vis.chart.select('.dataWrapper')
         this.config.selectedData = selectedData;
 
         const preparedData = vis.getPreparedData()
-
-        data.selectAll('.data')
+        const data = dataWrapper.selectAll('.data')
             .data(preparedData)
             .join(
-                enter => enter.append("path"),
+                enter => enter.append("g"),
                 update => update,
                 exit => exit.remove()
             )
             .attr("class", "data")
+
+        data.append("path")
             .attr("d", (d: any) => {
                 const data = d.map((d: any) => d.value)
                 return d3.lineRadial()
                     .angle((_, index) => Math.PI * 2 / vis.axes.length * index)
-                    .radius((data) => data)
+                    .radius((value) => value || 0)
                     .curve(d3.curveCardinalClosed.tension(0.6))
                     ([...data, data[0]])
             })
             .attr('fill', '#69b3a211')
             .attr('stroke', 'black')
+
+        data.selectAll('.dataPoint')
+            .data((d: any) => d)
+            .join(
+                enter => enter.append("circle"),
+                update => update,
+                exit => exit.remove()
+            )
+            .attr("class", "dataPoint")
+            .attr("r", 3)
+            .attr("cx", (data: {label: string, value: number}, index: number) => Math.sin(2 * Math.PI * (index/vis.axes.length)) * data.value)
+            .attr("cy", (data: {label: string, value: number}, index: number) => -Math.cos(2 * Math.PI * (index/vis.axes.length)) * data.value)
+            .attr('fill', 'black')
     }
 
     private getPreparedData() {
         return this.config.selectedData.map(
             (d: any) => this.axes.map(axis => {
-                console.log(axis.label)
-                console.log(d[axis.key])
-                console.log(axis.scale(d[axis.key]))
                 return {
                     label: axis.label,
                     value: axis.scale(d[axis.key])
@@ -158,30 +168,44 @@ export default class RadarChart extends Chart {
             .attr('fill', 'black')
             .text((d: any) => d.label)
 
-        const data = vis.chart.append("g")
+        const dataWrapper = vis.chart.append("g")
             .attr("class", "dataWrapper")
             .attr('transform', `translate(${vis.chartCenter},${vis.chartCenter})`)
 
         const preparedData = vis.getPreparedData()
 
-        data.selectAll('.data')
+        const data = dataWrapper.selectAll('.data')
             .data(preparedData)
             .join(
-                enter => enter.append("path"),
+                enter => enter.append("g"),
                 update => update,
                 exit => exit.remove()
             )
             .attr("class", "data")
+
+        data.append("path")
             .attr("d", (d: any) => {
                 const data = d.map((d: any) => d.value)
                 return d3.lineRadial()
                     .angle((_, index) => Math.PI * 2 / vis.axes.length * index)
-                    .radius((value) => value)
+                    .radius((value) => value || 0)
                     .curve(d3.curveCardinalClosed.tension(0.6))
                     ([...data, data[0]])
             })
             .attr('fill', '#69b3a211')
             .attr('stroke', 'black')
 
+        data.selectAll('.dataPoint')
+            .data((d: any) => d)
+            .join(
+                enter => enter.append("circle"),
+                update => update,
+                exit => exit.remove()
+            )
+            .attr("class", "dataPoint")
+            .attr("r", 3)
+            .attr("cx", (data: {label: string, value: number}, index: number) => Math.sin(2 * Math.PI * (index/vis.axes.length)) * data.value)
+            .attr("cy", (data: {label: string, value: number}, index: number) => -Math.cos(2 * Math.PI * (index/vis.axes.length)) * data.value)
+            .attr('fill', 'black')
     }
 }
\ No newline at end of file

src/styles/index.scss

@@ -79,8 +79,10 @@ h1 {
 
     #bubble-chart-wrapper {
       position: relative;
-      margin: 0 auto;
+      margin: 1rem auto;
       width: fit-content;
+      box-shadow: 0 0 20px rgba(51, 51, 51, 0.5);
+      padding: 1rem;
     }
 
     .bubble-chart-settings {
@@ -113,7 +115,7 @@ h1 {
 
     #radar-chart-wrapper {
       position: relative;
-      margin: 0 auto 4rem;
+      margin: 0 4rem 4rem;
     }
   }
 }