in the cfg object there is a variable maxValue that has the value 0

let maxValue = Math.max(cfg.maxValue, d3.max(data, (i) => {}

A variable maxValue will be made, and the value will be decided by the function. Math.max() is used to get the highest value and returns this. it looks what the value is of cfg.maxValue and this is 0 so it has to calculate what the highest value is for this they use the d3.max method.

return d3.max(i.map((o) => {
	return o.value;
}));

In this part of the code the max value of the data will be calculated and put into new array by .map() this value will get returned back to the function and Math.max() will look what value is the highest of the two values. But this will be the o.value, because the standard value of maxValue is 0 so everything that is higher will get picked before the standard value will. Unless there is no value at all but then there is no visualization as well.

The biggest value in the data is: 0.4842694561989119

So the biggest circle of the radarChart will start at 48% +/-

Looks into the first record of the data to find all the Axis and then returns them in the variable allAxis that can be re-used in other parts of the code. the .map() makes a new array with all the axis in it.

let allAxis = (data[0].map( (i) => {
	return i.axis;
}))

Props

> total: Looks how many Axis there are in the data and puts it back into `total`

> radius: Calculates the radius of the outermost circle of the visualization

> Format: gives the percentage format.

> angleSlice: Calculates the width in radians of each "slice"

It selects all the circles (.levels) these are not existing yet. the data is getting a range and always starts at 1 and goes to 6 At the end it reverses the range. then the .enter() function will run and after that it will append all the circles. it will go through all .levels one by one.

axisGrid.selectAll('.levels')
	.data(d3.range(1, (cfg.levels + 1)).reverse())
	.enter()
	.append('circle')

Every time a level will be made it gets different attributes added to it.

• Every circle gets the class gridCircle added to it
• The size of the rings, depends on the value of the current level per loop (this runs from 6 to 1, so the circles gets smaller every time)
• Every circle gets filled with a color
• Every circle gets a stroke with a color
• Every circle gets a opacity that is declared in the props of cfg
• Every circle gets a divined filter added to get the glow.

.attr('class', 'gridCircle')
.attr('r', (d) => {
	return radius / cfg.levels * d;
})
.style('fill', '#DFE4F5')
.style('stroke', '#4A4B4E')
.style('fill-opacity', cfg.opacityCircles)
.style('filter', 'url(#glow)');

This part of the code will be repeated till all the .levels are done so it will create 6 circles at the end and all of them have a different radius.

In this piece of code will happen the exact same as it did above. It selects all the .axisLabel (They are not yet divined) Then it looks how many circles are created and appends text to these circles. it also reverses it because it needs to be the same as how the circles are created.

axisGrid.selectAll('.axisLabel')
	.data(d3.range(1, (cfg.levels + 1)).reverse())
	.enter()
	.append('text')

• Every text element gets the class axisLabel added to it
• Every text element gets the x attribute with the value of 4
• Every text element gets the y attribute this value depends on the radius that have been declared in the top code. example: (-1 [-1, -2, -3, -4] * 260 / 4) = -65) So the list will be: -65, -130, -195, -260
• Every text element gets a dy attribute this is the place the text will be on the y-as.
• Every text element gets a font-size of 10px
• Every text element gets filled with a color
• Every text element gets the calculated value that will be calculated like this: (maxValue * d / cfg.levels)

( 0.48 * 1 / 4 = 0.12, 0.48 * 2 / 4 = 0.24, 0.48 * 3 / 4 = 0.36, 0.48 * 4 / 4 = 0.48)

This will be turned into % because we have given the format in the props.

.attr('class', 'axisLabel')
.attr('x', 4)
.attr('y', (d) => {
	return -d * radius / cfg.levels;
})
.attr('dy', '1.2em')
.style('font-size', '10px')
.attr('fill', '#A7AAB2')
.text((d) => {
	return Format(maxValue * d / cfg.levels);
});

.data(allAxis) selects all the axis that are given data that is delivered to d3.

.enter() gets all the 19 data array items en loops through them

.append('g') It appends a g element to every item that is in the array.

.attr('class', 'axis'); It gives every g element a axis class.

.attr('x1', 0) The first coordinate will be calculated (left horizontal)

.attr('y1', 0) the second coordinate will be calculated (left vertical)

.attr('x2', (d, i) => {} the third coordinate will be calculated

.attr('y2', (d, i) => {} the fourth coordinate will be calculated

These 4 coordinates will make a square together. now you can draw a line between x1 & y1 and x2 & y2 this is the way all the lines will get drawn in the HTML.

.attr('class', 'line') Every line get a class line

.style('stroke', '#B0B4C1') Every line will be colored.

.style('stroke-width', '1px'); Every line will be 1px.

.attr('class', 'legend') Every text element gets the class legend

.style('font-size', '11px') Every text element has a font-size of 11px

.attr('text-anchor', 'middle') Every text element will be aligned in the middle

.attr('x', (d, i) => {} x attribute, this determines how much space the labels are removed from the center point on the x-axis (horizontal offset)

.attr('y', (d, i) => {} y attribute, this determines how much space the labels are removed from the center point on the y-axis (vertical offset)

.text((d) => {} This gives the values to the labels (So all the main categories)

.data(data) binding the data.

.enter().append('g') loops over all the data-points and append a group to it.

.attr('class', 'radarWrapper'); gives every g element a class radarWrapper

.append('path') This is adding a path in the HTML

.attr('class', 'radarArea') Adds a class radarArea to every blobWrapper

.attr('d', (d, i) => {} Will give all the SVG coordinates so that the blob background can be created.

.style('fill', (d, i) => {} Gives every blob an unique color out of d3.scale.category10() in the props. This is a ColorScheme, there is also a possibility to create ur own when you give through the options as a parameter.

blobWrapper
	.append('path')
	.attr('class', 'radarArea')
	.attr('d', (d, i) => {
		return radarLine(d);
	})
	.style('fill', (d, i) => {
		return cfg.color(i);
	})
	.style('fill-opacity', cfg.opacityArea)

This eventListener is added to the mouse interaction. It will highlight the blob when you hover over it with the mouse. This wil happen in a transition(animation) that will change the opacity of the blob. this activity will happen when you do mouseover, mouseout

.on('mouseover', function (d, i) {
//Dim all blobs
d3.selectAll(".radarArea")
	.transition().duration(200)
	.style("fill-opacity", 0.5);
//Bring back the hovered over blobx
d3.select(this)
	.transition().duration(200)
	.style("fill-opacity", 0.8);
})
.on('mouseout', function () {
	//Bring back all blobs
	d3.selectAll(".radarArea")
		.transition().duration(200)
		.style("fill-opacity", cfg.opacityArea);
});

.attr('class', 'radarStroke') Adds a class radarStroke to every path element

.attr('d', (d, i) => {}adds a data attribute to the path elements this calls the value radarLine()

.style('stroke-width', cfg.strokeWidth + 'px') Adds how many pixels the lines are of the blob

.style('stroke', (d, i) => {} makes the stroke the same color as the inside of the blob.

.style('fill', 'none') Ensures that the outlines of the blobs have no fill

.style('filter', 'url(#glow)'); Gives all the outlines a glow filter.