viewof legend = {

const fontSize = 12;

const legendHeight = 100

const legendWidth = 200

const legendMargin = 10

var data = [

[

//E1

{ axis: "Valence", value: 76.35, type: "E1" },

{ axis: "Arousal", value: 79.83, type: "E1" },

{ axis: "Pleasure", value: 64.00, type: "E1" },

{ axis: "Familiarity", value: 21.15, type: "E1" }

],

[

//E4

{ axis: "Valence", value: 69.52, type: "E4" },

{ axis: "Arousal", value: 66.68, type: "E4" },

{ axis: "Pleasure", value: 62.57, type: "E4" },

{ axis: "Familiarity", value: 17.98, type: "E4" }

]

];

const colors = data.map(d => d.type) // you need to define the filter category which is by song, so in your data you need to have a song column do you can filter by that define it here

.filter((value, index, self) => self.indexOf(value) === index)

// Track which cuts are selected in the legend.

// This is a map from cut to a boolean for

// whether or not it the cut is selected.

// To start, all cuts are selected.

const selected = new Map(colors.map(d => [d, true]));

// function to toggle the legend

const toggleLegend = function(e, d) {

const isSelected = selected.get(d) // get value for if the square is in the selected or not

const square = d3.select(this) // variable for what was selected

square.attr('fill', d => isSelected ? 'white' : colorScaleFull(d)) // change the appearance of the square

selected.set(d, !isSelected) // change the selected for the dataset

svg.property('value', selected).dispatch('input');

}

const svg = d3.create('svg')

.attr('width', legendWidth)

.attr('height', legendHeight)

const legendY = d3.scaleBand()

.domain(colors)

.range([0, legendHeight])

.padding(0.2)

svg

.append('g')

.selectAll('legend_text')

.data(colors)

.join("text")

.attr('x', (1.5 * legendMargin) + legendY.bandwidth())

.attr('y', d => legendY(d) + legendMargin)

.text(d => d)

.attr('font-size', fontSize)

.attr('font-family', 'sans-serif')

.attr('dominant-baseline', 'middle')

.style('cursor', 'hand')

svg

.append('g')

.selectAll('rect')

.data(colors)

.join("rect")

.attr("x", d => legendMargin)

.attr("y", d => legendY(d))

.attr("width", legendY.bandwidth())

.attr("height", legendY.bandwidth())

.attr("fill", d => colorScaleFull(d)) //d.colorid // you need to define a color scale that will map to color category

.attr('stroke', d => colorScaleFull(d)) ///same here

.attr('stroke-width', 2)

.on('click', toggleLegend)

svg.property('value', selected).dispatch('input');

return svg.node();

//////////////////////// Set-Up //////////////////////////////

//////////////////////////////////////////////////////////////

var margin = { top: 100, right: 100, bottom: 100, left: 100 },

width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,

height = Math.min(

width,

window.innerHeight - margin.top - margin.bottom - 20

);

//////////////////////////////////////////////////////////////

////////////////////////// Data //////////////////////////////

//////////////////////////////////////////////////////////////

var data = [

[

//E1

{ axis: "Valence", value: 76.35, type: "E1" },

{ axis: "Arousal", value: 79.83, type: "E1" },

{ axis: "Pleasure", value: 64.00, type: "E1" },

{ axis: "Familiarity", value: 21.15, type: "E1" }

],

[

//E4

{ axis: "Valence", value: 69.52, type: "E4" },

{ axis: "Arousal", value: 66.68, type: "E4" },

{ axis: "Pleasure", value: 62.57, type: "E4" },

{ axis: "Familiarity", value: 17.98, type: "E4" }

],

[

//E2

{ axis: "Valence", value: 76.02 },

{ axis: "Arousal", value: 60.27 },

{ axis: "Pleasure", value: 61.42 },

{ axis: "Familiarity", value: 13.35 }

],

[

//E3

{ axis: "Valence", value: 67.40 },

{ axis: "Arousal", value: 52.05 },

{ axis: "Pleasure", value: 57.97 },

{ axis: "Familiarity", value: 18.62 }

],

[

//E7

{ axis: "Valence", value: -41.05 },

{ axis: "Arousal", value: -46.97 },

{ axis: "Pleasure", value: -6.13 },

{ axis: "Familiarity", value: -23.83 }

],

[

//E14

{ axis: "Valence", value: -36.20 },

{ axis: "Arousal", value: -38.32 },

{ axis: "Pleasure", value: -12.57 },

{ axis: "Familiarity", value: -39.02 }

],

[

//E5

{ axis: "Valence", value: -32.08 },

{ axis: "Arousal", value: -40.05 },

{ axis: "Pleasure", value: 25.00 },

{ axis: "Familiarity", value: 0.63 }

],

[

//E6

{ axis: "Valence", value: -24.02 },

{ axis: "Arousal", value: -28.17 },

{ axis: "Pleasure", value: 45.10 },

{ axis: "Familiarity", value: 7.42 }

],

[

//E8

{ axis: "Valence", value: -24.78 },

{ axis: "Arousal", value: -27.43 },

{ axis: "Pleasure", value: 37.25 },

{ axis: "Familiarity", value: 1.30 }

],

[

//E9

{ axis: "Valence", value: 57.93 },

{ axis: "Arousal", value: 74.00 },

{ axis: "Pleasure", value: 39.53 },

{ axis: "Familiarity", value: 2.75 }

],

[

//E10

{ axis: "Valence", value: 53.43 },

{ axis: "Arousal", value: 41.17 },

{ axis: "Pleasure", value: 31.57 },

{ axis: "Familiarity", value: -10.00 }

],

[

//E11

{ axis: "Valence", value: 59.83 },

{ axis: "Arousal", value: 61.45 },

{ axis: "Pleasure", value: 44.68 },

{ axis: "Familiarity", value: -6.23 }

],

[

//E12

{ axis: "Valence", value: 45.37 },

{ axis: "Arousal", value: 53.73 },

{ axis: "Pleasure", value: 14.57 },

{ axis: "Familiarity", value: -20.77 }

],

[

//E13

{ axis: "Valence", value: -46.87 },

{ axis: "Arousal", value: -1.07 },

{ axis: "Pleasure", value: -33.58 },

{ axis: "Familiarity", value: -51.20 }

],

[

//E15

{ axis: "Valence", value: -6.78 },

{ axis: "Arousal", value: -27.77 },

{ axis: "Pleasure", value: -5.75 },

{ axis: "Familiarity", value: -49.72 }

],

[

//E16

{ axis: "Valence", value: -8.72 },

{ axis: "Arousal", value: -40.95 },

{ axis: "Pleasure", value: 30.13 },

{ axis: "Familiarity", value: -30.38 }

]

];

//////////////////////////////////////////////////////////////

//////////////////// Draw the Chart //////////////////////////

//////////////////////////////////////////////////////////////

var color = d3.scaleOrdinal().range(["#EDC951", "#CC333F", "#00A0B0", "#00FF00", "#8F00FF", "#FFA500", "#808080", "#964B00", "#C8A2C8", "#FA8072", "#87CEEB", "#FFD700", "#CD7F32", "#FFE5B4", "#800000", "#00FFFF"]); //yellow, red, blue-green, green, violet, orange, grey, brown, lilac, salmon, sky blue, gold, bronze, peach, maroon, aqua

var radarChartOptions = {

w: width,

h: height,

margin: margin,

maxValue: 0.5,

levels: 5,

roundStrokes: true,

color: color

};

//Call function to draw the Radar chart

return RadarChart(data, radarChartOptions);

}

.domain(data.map(d => d.type)

.filter((value, index, self) => self.indexOf(value) === index))